/* Azul Studio, v2 on Clément's model: a sky photo with Azul Studio behind the head, glass chips and an ask bar,
   then a white page with a moving photo strip, questions and a sober footer. Manrope everywhere,
   Darumadrop only for the AZUL logo in the header and footer. */
@font-face{font-family:"Manrope";src:url("fonts/manrope.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Darumadrop One";src:url("fonts/darumadrop.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#1E1F22;--gray:#75767C;--soft:#F5F5F6;--card:#F7F7F8;--blue:#2F55F0;--cobalt:#1733D6;
  --font:"Manrope",system-ui,-apple-system,sans-serif;--brand:"Darumadrop One",var(--font);
  --g:max(44px,env(safe-area-inset-left),env(safe-area-inset-right));--mid:57.4%;--ease:cubic-bezier(.22,1,.36,1);
  /* The scale (DESIGN.md, Typography and Buttons): every text size and every button height of the site comes from here */
  --fs-caption:13px;                    /* captions, small print, tags on photos */
  --fs-small:15px;                      /* notes, hints, dates, labels, kickers, chips, contents */
  --fs-body:17px;                       /* text, the header, links and buttons, the footer links, questions and answers, bubbles, fields */
  --fs-lead:clamp(17px,1.35vw,20px);    /* the paragraph under a headline */
  --fs-title:20px;                      /* list titles, prose subheads, an article's summary, the phone menu */
  --fs-subhead:clamp(24px,2.2vw,30px);  /* prose sections, journal titles, steps, sheet and dialog titles */
  --fs-headline:clamp(30px,3.4vw,50px); /* section headlines and the last call of a page */
  --fs-display:clamp(44px,5.3vw,84px);  /* the title on the sky */
  --btn-lg:56px;                        /* the main button */
  --btn-md:48px;                        /* "Ask it", the round close, the journal's arrow */
  --btn-sm:40px;                        /* the header button, the chat's controls */
  --tap:44px;                           /* the smallest touch target: text links and text buttons */
  /* The color at the very top of the page: Safari on iPhone paints the strip behind the time and the battery with the page's
     background (html), so it matches the sky every page opens on, and on the home page the top of its photo */
  --haut:#2F69C2
}
:root:has(.hero){--haut:#3A6AA3}
:root:has(.ch-hero){--haut:#3F72B6}
@media (max-width:1000px){:root{--mid:50%}}
@media (max-width:760px){:root{--g:max(18px,env(safe-area-inset-left),env(safe-area-inset-right));--fs-display:clamp(34px,9.6vw,44px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--haut)}
/* the browser paints the page's background under the clock and under its bottom bar: the sky's color at the top,
   the footer's once the footer is on screen (app.js) */
html.at-foot{background:#FAFAFB}
/* Safari on an iPhone colors the band under its bottom bar like a fixed element touching the bottom edge: once the
   footer is on screen, this thin strip (added by app.js) gives that band the footer's color */
.chin{display:none;position:fixed;left:0;right:0;bottom:0;z-index:1;height:2px;background:#FAFAFB;pointer-events:none}
.at-foot .chin{display:block}
/* the page itself is white: main carries it (and holds its children's margins), so the sky color above shows only behind the time and the battery */
main{display:flow-root;background:#fff}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,picture{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
.rv-w{white-space:nowrap}
.rv-c{display:inline-block;will-change:transform,opacity}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.product :focus-visible,.faq :focus-visible,.ftr :focus-visible{outline-color:var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:#000;color:#fff;border-radius:8px}
.skip:focus{top:12px}

/* Header: wordmark and links on the left, white button on the right */
.hdr{position:fixed;inset:0 0 auto;z-index:20;height:76px;display:flex;align-items:center;gap:40px;padding:0 var(--g);color:#fff;
  transition:background-color .25s,color .25s,box-shadow .25s}
/* the header stays at the top of the screen, as on Fanvue or WhatsApp (Clément, 15/10): see-through over the photo or
   the sky while the page is at its top, white with dark words as soon as it scrolls (app.js) */
.hdr.is-solid{background:#fff;color:var(--ink);box-shadow:0 1px 0 #ECECEE}
.hdr.is-solid .get{background:var(--ink);color:#fff}
.hdr.is-solid .orb{color:var(--cobalt)}
html{scroll-padding-top:76px}
.brand{display:flex;align-items:center;gap:8px;min-height:var(--tap)}
.orb{width:22px;height:22px}
.wm{font-family:var(--brand);font-size:24px;line-height:1;letter-spacing:.06em;padding-top:2px}
.nav{display:flex;gap:36px;font-size:var(--fs-body);font-weight:500}
.nav a{min-height:var(--tap);display:inline-flex;align-items:center;opacity:.96}
/* the page you are on, and only it, is underlined */
.nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
@media (hover:hover){.nav a:hover{opacity:.75}}
/* the header button: as small as the links beside it, its touch area kept at 44px */
.get{position:relative;margin-left:auto;display:inline-flex;align-items:center;height:var(--btn-sm);padding:0 16px;border-radius:12px;background:#fff;color:var(--ink);font-weight:600;font-size:var(--fs-body);white-space:nowrap;transition:transform .2s var(--ease)}
.get::before{content:"";position:absolute;inset:calc((var(--btn-sm) - var(--tap)) / 2) 0}
.get:active{transform:scale(.97)}
.hdr-in{margin-left:auto;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px;font-size:var(--fs-body);font-weight:600;white-space:nowrap}
.hdr-in+.get{margin-left:-20px}
@media (hover:hover){.hdr-in:hover{opacity:.75}}

/* Hero: the photo, then the interface on top */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;isolation:isolate;color:#fff;background:#5C8FD6}
.layer,.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.layer{z-index:0}
.layer.cut{z-index:2;pointer-events:none}
.shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,18,40,.28) 0%,rgba(8,18,40,0) 42%),linear-gradient(180deg,rgba(8,18,40,0) 62%,rgba(8,18,40,.34) 100%)}


.hero-copy{position:absolute;z-index:4;left:var(--g);top:33%;max-width:44%}
h1{font-weight:500;font-size:var(--fs-display);line-height:1.04;letter-spacing:-.035em;text-shadow:0 2px 30px rgba(8,18,40,.12)}
.lede{margin-top:clamp(18px,2.2vw,30px);max-width:31ch;font-size:var(--fs-lead);line-height:1.45;font-weight:500;opacity:.95}

.dock{position:absolute;z-index:4;left:var(--mid);bottom:clamp(24px,5.5vh,60px);bottom:clamp(24px,5.5svh,60px);transform:translateX(-50%);width:min(780px,calc(100% - 2*var(--g)));display:flex;flex-direction:column;align-items:center}
.chips{display:flex;justify-content:center;gap:12px;width:max-content;max-width:min(1000px,100vw);padding:0 var(--g)}
.chip{display:flex;align-items:center;gap:9px;height:38px;padding:0 17px;border-radius:13px;white-space:nowrap;font-size:var(--fs-small);font-weight:600;
  border:1px solid rgba(255,255,255,.2);background:rgba(28,34,38,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.chip span{font-weight:400;opacity:.78}
.chip:nth-child(2){transform:translateY(6px)}
.chip:nth-child(3){background:rgba(255,255,255,.12)}
.chip.more{font-weight:500;border:1.5px dashed rgba(255,255,255,.62);background:rgba(255,255,255,.08)}
.ask{position:relative;margin-top:22px;width:100%;height:calc(var(--btn-md) + 20px);display:flex;align-items:center;gap:10px;padding:0 10px 0 22px;border-radius:18px;
  border:1px solid rgba(255,255,255,.16);background:rgba(22,30,32,.44);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
.spark{width:22px;height:22px;flex:none;color:#fff}
.ask input{flex:1;min-width:0;height:100%;padding:0 4px;border:0;background:none;outline:none;font-size:var(--fs-body);font-weight:500;color:#fff}
.ask input::placeholder{color:rgba(255,255,255,.62)}
.typed{position:absolute;left:58px;right:200px;top:50%;transform:translateY(-50%);font-size:var(--fs-body);font-weight:500;white-space:nowrap;overflow:hidden;pointer-events:none}
.typed::after{content:"";display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:#fff;animation:caret 1s steps(1) infinite}
.ask.live .typed{display:none}
@keyframes caret{50%{opacity:0}}
.mic{flex:none;width:var(--btn-md);height:var(--btn-md);display:grid;place-items:center;border-radius:12px;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07)}
.mic svg{width:20px;height:20px}
.go{flex:none;height:var(--btn-md);display:inline-flex;align-items:center;gap:8px;padding:0 22px;border:0;border-radius:12px;background:#fff;color:var(--ink);font-size:var(--fs-body);font-weight:600;cursor:pointer;transition:transform .2s var(--ease)}
.go svg{width:19px;height:19px}
.go:active,.mic:active{transform:scale(.96)}

@media all{
  .hero-copy,.chip,.ask{opacity:0;animation:rise .9s var(--ease) forwards}
  .chip:nth-child(1){animation-delay:.25s}.chip:nth-child(2){animation-delay:.35s}.chip:nth-child(3){animation-delay:.45s}.chip:nth-child(4){animation-delay:.55s}
  .ask{animation-delay:.15s}
  .chip:nth-child(2){animation-name:rise2}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise2{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(6px)}}

/* Product: two-tone title, then the photo strip (WebGL when it can, a plain row otherwise) */
.product{padding:clamp(80px,10.5vw,150px) 0 clamp(70px,7vw,110px)}
.product-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;padding:0 var(--g)}
h2{font-weight:500;font-size:var(--fs-headline);line-height:1.18;letter-spacing:-.025em;color:var(--ink)}
h2 .mute{color:var(--gray)}
.flow-tip{flex:none;font-size:var(--fs-small);color:var(--gray);visibility:hidden}
.product.is-gl .flow-tip{visibility:visible}
.flow{position:relative;overflow:hidden;isolation:isolate;margin:clamp(28px,4vw,52px) max(12px,calc(var(--g) - 24px)) 0;height:clamp(360px,31vw,470px);border-radius:28px;background:transparent;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
/* the strip sits on a light grainy gradient in Azul blues: pale on the left, sky to azure on the right, a hint of lilac and peach */
.join-in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px;mix-blend-mode:overlay;opacity:.36}
.flow-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s var(--ease)}
.flow.is-gl .flow-gl{opacity:1}
.flow.is-gl{cursor:grab}
.flow-list{display:flex;align-items:center;gap:14px;height:100%;padding:0 clamp(18px,2.6vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 clamp(18px,2.6vw,32px);scrollbar-width:none;overscroll-behavior-x:contain}
.flow-list::-webkit-scrollbar{display:none}
.flow-list li{flex:none;display:flex;flex-direction:column;gap:10px;width:clamp(260px,26vw,380px);scroll-snap-align:start}
.flow-list img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--soft)}
.flow-list p{font-size:var(--fs-small);line-height:1.4;color:var(--gray)}
.flow-list b{display:block;color:var(--ink);font-weight:600}
/* without WebGL the row loops on its own; a touch pauses it */
.flow.is-loop .flow-list{overflow:hidden;scroll-snap-type:none;padding:0;width:max-content;animation:loop 60s linear infinite}
.flow.is-loop .flow-list li{margin-right:14px}
.flow.is-loop .flow-list{gap:0}
.flow.is-loop:active .flow-list,.flow.is-loop:hover .flow-list{animation-play-state:paused}
@keyframes loop{to{transform:translateX(-50%)}}
.flow.is-gl .flow-list{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flow-cap{position:absolute;z-index:2;left:clamp(18px,2.6vw,32px);right:clamp(18px,2.6vw,32px);bottom:clamp(18px,3vw,32px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:#fff;
  pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.flow.is-open .flow-cap{opacity:1;transform:none;transition-delay:.25s}
.flow::after{content:"";position:absolute;z-index:1;inset:30% 0 0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:linear-gradient(180deg,rgba(10,14,24,0),rgba(10,14,24,.35) 45%,rgba(10,14,24,.72))}
.flow.is-open::after{opacity:1;transition-delay:.2s}
.flow-cap b{font-size:var(--fs-subhead);font-weight:600;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.flow-cap span{font-size:var(--fs-lead);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.flow-cap em{margin-left:auto;padding:7px 12px;border-radius:999px;font-style:normal;font-size:var(--fs-caption);font-weight:500;color:var(--ink);background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (max-width:760px){
  .flow{border-radius:24px}
  .flow-list li{width:62vw}
  .flow-cap{flex-direction:column;align-items:flex-start}
  .flow-cap em{margin:8px 0 0}
}

/* Asking: the beach photo, the question on the left, and the real Azul chat on the right (same
   bubbles, header, composer and wobbling orb as the twin page on twin.azul-studio.com) */
.asking{padding:0 var(--g) clamp(56px,6vw,96px)}
.asking-in{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:clamp(48px,7vw,110px) clamp(20px,6vw,110px);background:#6E6A6C}
.asking-in::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(24,18,14,.5) 0%,rgba(24,18,14,.15) 60%,rgba(24,18,14,0) 100%)}
.asking-bg,.asking-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.asking-bg{z-index:-2}
.asking-bg img{object-position:60% 50%}
.asking-bg img[src$="ask-somo.webp"]{object-position:50% 100%}
.asking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,6vw,96px);align-items:center;max-width:1180px;margin:0 auto}
.pane-copy{color:#fff}
.pane-copy h2{color:#fff;font-size:var(--fs-headline);line-height:1.05;letter-spacing:-.035em}
.pane-copy>p{margin-top:20px;max-width:34ch;font-size:var(--fs-lead);line-height:1.5;opacity:.94}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.topics li{padding:10px 16px;border-radius:999px;font-size:var(--fs-small);font-weight:600;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topics .add{background:#fff;color:var(--cobalt);border-color:#fff}

.chat{--bleu:#1733D6;--encre:#15161C;--doux:#5A5D6E;--trait:#E1E6FA;margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:30px;
  background:#F4F6FE linear-gradient(170deg,#F3F6FF 0%,#FAF8FF 50%,#FFF5F9 100%);color:var(--encre);
  font:400 var(--fs-body)/1.5 -apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  box-shadow:0 40px 80px -30px rgba(20,14,10,.55),0 0 0 1px rgba(255,255,255,.5)}
/* the home chat: phone width on a computer, and its message bar leads to sign in */
@media (min-width:1001px){.asking .chat{justify-self:end;width:min(350px,100%)}}
.asking .chat-write{color:inherit;cursor:text;transition:border-color .2s,box-shadow .2s}
@media (hover:hover){.asking .chat-write:hover{border-color:#C9D2F6;box-shadow:0 4px 14px -6px rgba(23,51,214,.25)}}
.chat-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--trait);background:rgba(246,247,255,.86)}
.chat-top b{flex:1;font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.chat-round{width:var(--btn-sm);height:var(--btn-sm);flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--trait)}
.chat-pic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:#A9B0C4;color:#fff;font-size:var(--fs-body);font-weight:500}
.chat-pic img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(21,22,28,.10)}
.chat-fil{display:flex;flex-direction:column;gap:6px;padding:18px 16px 10px}
.bulle{margin:0;padding:11px 16px;border-radius:22px;max-width:84%;font-size:var(--fs-body);line-height:1.45;text-wrap:pretty}
.bulle.lui{align-self:flex-start;background:#fff;color:var(--encre);border-bottom-left-radius:6px;box-shadow:0 1px 2px rgba(21,22,28,.06)}
.bulle.fan{align-self:flex-end;background:var(--bleu);color:#fff;border-bottom-right-radius:6px}
.bulle.fan+.bulle.lui,.bulle.lui+.bulle.fan{margin-top:12px}
/* a photo the twin shares in the chat: blurred until tapped */
.bulle.chat-photo{width:min(200px,62%);max-width:none;padding:4px}
.chat-secret{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:18px;border-bottom-left-radius:4px;overflow:hidden;isolation:isolate;cursor:pointer;
  background:#3A3550;color:#fff;font-weight:600;font-size:var(--fs-small);line-height:1.2;-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease)}
.chat-secret:active{transform:scale(.97)}
.chat-secret img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(20px) saturate(1.2);transform:scale(1.15);transition:filter .8s var(--ease),transform 1.1s var(--ease)}
.chat-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(21,22,28,.18);text-shadow:0 1px 8px rgba(0,0,0,.2);transition:opacity .4s var(--ease)}
.chat-veil svg{width:26px;height:26px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.18))}
.chat.play .chat-secret:not(.is-open) .chat-veil svg{animation:gelee 2.6s cubic-bezier(.44,0,.56,1) 2.5s infinite}
.chat-secret.is-open{cursor:default}
.chat-secret.is-open img{filter:none;transform:none}
.chat-secret.is-open .chat-veil{opacity:0}
.chat-secret:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.attente{display:flex;align-items:center;gap:10px;margin:8px 0 0;padding:4px 2px;font-size:var(--fs-small);color:var(--doux)}
.attente .orbe{color:var(--bleu);overflow:visible;animation:gelee 1.6s cubic-bezier(.44,0,.56,1) infinite}
@keyframes gelee{0%,100%{transform:scale(1,1) rotate(0deg)}25%{transform:scale(1.14,.86) rotate(30deg)}50%{transform:scale(.9,1.1) rotate(60deg)}75%{transform:scale(1.06,.94) rotate(80deg)}}
.chat-write{display:flex;align-items:center;gap:8px;margin:6px 14px 14px;padding:5px 5px 5px 4px;border-radius:28px;background:#fff;border:1px solid var(--trait);box-shadow:0 4px 12px -6px rgba(21,22,28,.10)}
.chat-cam{width:var(--btn-sm);height:var(--btn-sm);flex:none;display:grid;place-items:center;color:var(--doux)}
.chat-ph{flex:1;color:#6B6F80}
.chat-send{width:var(--btn-sm);height:var(--btn-sm);flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bleu);color:#fff}
.chat figcaption{padding:0 16px 14px;font-size:var(--fs-caption);text-align:center;color:var(--doux)}
/* the messages arrive one by one when the chat comes into view */
.chat.wait .bulle,.chat.wait .attente{opacity:0;transform:translateY(6px)}
.chat.play .bulle,.chat.play .attente{animation:arrive .35s cubic-bezier(.44,0,.56,1) both}
.chat.play .attente{animation:arrive .35s cubic-bezier(.44,0,.56,1) both}
.chat.play .attente .orbe{animation:gelee 1.6s cubic-bezier(.44,0,.56,1) infinite}
@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* FAQ: not on the page itself. The FAQ link in the footer opens it as a panel over the page:
   a sheet from the right on a computer, from the bottom on a phone. */
.faq:not([open]){display:none}
.faq{position:fixed;inset:0 0 0 auto;margin:0;width:min(560px,100vw);max-width:100vw;height:100%;max-height:100%;padding:0;border:0;
  background:#fff;color:var(--ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:-30px 0 80px -30px rgba(10,14,24,.35)}
.faq::backdrop{background:rgba(10,14,24,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.faq[open]{animation:sheet-in .45s var(--ease)}
@keyframes sheet-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes sheet-up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.faq-head{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:32px 32px 20px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.faq-head h2{font-size:var(--fs-subhead)}
.faq-close{flex:none;width:var(--btn-md);height:var(--btn-md);display:grid;place-items:center;border:0;border-radius:50%;background:var(--soft);color:var(--ink);cursor:pointer}
@media (hover:hover){.faq-close:hover{background:#EBEBED}}
.qa{margin:0 32px 40px;border-top:1px solid #ECECEE}
.qa details{border-bottom:1px solid #ECECEE}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:16px 0;font-size:var(--fs-body);font-weight:600;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--gray);border-bottom:2px solid var(--gray);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:translateY(3px) rotate(225deg)}
.qa p{max-width:58ch;padding:0 0 22px;font-size:var(--fs-body);line-height:1.55;color:#55565B}
.qa p a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
html.faq-open{overflow:hidden}

/* Footer: sober, every legal page in one place */
.ftr{--gray:#696A70;padding:56px var(--g) max(28px,env(safe-area-inset-bottom));border-top:1px solid #ECECEE;color:var(--ink);background:#FAFAFB}
.ftr .orb{color:var(--cobalt)}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px 32px}
.ftr-id p{margin-top:14px;max-width:26ch;font-size:var(--fs-small);color:var(--gray)}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start}
.ftr-col p{margin-bottom:6px;font-size:var(--fs-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.ftr-col a{min-height:40px;display:inline-flex;align-items:center;font-size:var(--fs-body);overflow-wrap:anywhere}
@media (hover:hover){.ftr-col a:hover{color:var(--cobalt)}}
.ftr-small{margin-top:44px;padding-top:20px;border-top:1px solid #ECECEE;font-size:var(--fs-caption);color:var(--gray);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ftr-inc{display:inline-flex;align-items:center;gap:12px}
.ftr-inc a{display:block;border-radius:6px}
.ftr-inc img{display:block;width:64px;height:64px;border-radius:6px}
.ftr-small a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:1000px){.ftr-top{grid-template-columns:1fr 1fr}.ftr-id{grid-column:1/-1}}
@media (max-width:760px){.ftr-top>.ftr-col:last-child{grid-column:1/-1}}

/* Tablet and narrow windows: the ask bar centred, chips that scroll, the chat under the question */
@media (max-width:1000px){
  .chips{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;max-width:100vw;padding:6px var(--g) 8px;margin:0 calc(var(--g)*-1)}
  .chips::-webkit-scrollbar{display:none}
  .product-top{flex-direction:column;align-items:flex-start}
  .asking-grid{grid-template-columns:1fr;gap:36px}
  .chat{width:100%;max-width:460px;justify-self:center}
}
/* a tablet held upright: the upright photo, the words at the top and AZUL behind the head, as on a phone */
@media (min-width:761px) and (max-aspect-ratio:4/5){
  .hero{max-height:none}
  .hero-copy{top:112px;right:var(--g);max-width:none}
  .lede{max-width:38ch}
}

/* Phone: copy at the top, the ask bar at the bottom */
@media (max-width:760px){
  .hdr{height:64px;gap:12px}
  .brand{flex:none}
  .ftr-col a{min-height:var(--tap)}
  .qa p a{display:inline-block;padding:10px 0;margin:-10px 0}
  .faq{inset:auto 0 0 0;width:100%;height:auto;max-height:88vh;max-height:88dvh;border-radius:24px 24px 0 0;box-shadow:0 -20px 60px -20px rgba(10,14,24,.35);padding-bottom:env(safe-area-inset-bottom)}
  .faq[open]{animation-name:sheet-up}
  .faq-head{padding:22px var(--g) 14px}
  .qa{margin:0 var(--g) 28px}
  .hero{height:100vh;height:100svh;min-height:640px;max-height:none}
  .shade{background:linear-gradient(180deg,rgba(8,18,40,.22) 0%,rgba(8,18,40,0) 30%,rgba(8,18,40,0) 58%,rgba(8,18,40,.5) 100%)}
  /* the photo fills the whole screen, down under the browser's bottom bar (Clément, 15/10). Safari on an iPhone gives a
     height (100lvh) that stops above its floating bottom bar: the photo runs 120px lower (--below), behind the bar, and
     the ask bar stays 14px over the bottom of the screen the browser gives (100svh). Under the clock, Safari paints the
     page's background, set to the color of the top of the photo (--haut), and a short fade of that same color melts
     the edge between them */
  :root:has(.hero){--below:120px}
  .hero{height:calc(100vh + var(--below));height:calc(100lvh + var(--below));min-height:560px}
  .hero::before{content:"";position:absolute;inset:0 0 auto;z-index:3;height:40px;pointer-events:none;background:linear-gradient(180deg,var(--haut),rgba(58,106,163,0))}
  .dock{bottom:calc(var(--below,0px) + 14px);bottom:calc(var(--below,0px) + 100lvh - 100svh + 14px)}
  /* the ask bar holds still at the bottom of the screen while the photo goes up, then leaves with it, 20px above its
     bottom edge (Clément, 15/10): the page's scroll slides it down by as much as the page moves, for its first
     --below minus 6px. Not a sticky bar: Safari on an iPhone would take it for a bottom menu and paint a band of flat
     color under its address bar */
  .dock{left:var(--g);right:var(--g);width:auto;transform:none}
  @supports (animation-timeline:scroll()){
    .dock{animation:dock-stick linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--below,0px) - 6px)}
  }
  /* the title and its line sit halfway between the logo and the top of the head, which is at 45% of the photo's
     height on a phone, whatever the screen (Clément, 15/10) */
  .hero-copy{top:64px;bottom:55%;left:var(--g);right:var(--g);max-width:none;display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
  /* on a phone the home title and its line a step larger than other titles (Clément, 15/10) */
  .hero-copy h1{font-size:clamp(38px,10.6vw,48px)}
  .lede{font-size:var(--fs-body);max-width:32ch;margin-top:14px}
  .dock{width:calc(100% - 2*var(--g))}
  .chips{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;max-width:100vw;padding:6px var(--g) 8px;margin:0 calc(var(--g)*-1)}
  .chips::-webkit-scrollbar{display:none}
  .chip{height:36px;padding:0 14px}
  .chip:nth-child(2){transform:none}
  .chip:nth-child(2){animation-name:rise}
  .ask{margin-top:12px;height:calc(var(--btn-md) + 12px);padding:0 6px 0 16px;border-radius:16px}
  .typed{left:46px;right:118px}
  .mic{display:none}
  .go{padding:0 16px}
  /* on a phone the photo takes the whole width, the question sits on it, the chat below */
  .asking{padding:0}
  .asking-in{padding:44px var(--g) 28px;border-radius:0}
  .asking-in::before{background:linear-gradient(180deg,rgba(24,18,14,.6) 0%,rgba(24,18,14,.35) 45%,rgba(24,18,14,.2) 100%)}
  .asking-bg img{object-position:62% 50%}
  .asking-grid{grid-template-columns:1fr;gap:28px}
  .pane-copy>p{margin-top:14px}
  .topics{margin-top:18px}
  .topics li{padding:9px 14px}
  .chat{border-radius:26px}
  .flow{height:min(300px,66vw)}
  .ftr{padding-top:44px}
}
/* a short phone screen (small iPhone with the browser bars showing): everything fits above the fold */
@media (max-width:760px) and (max-height:640px){
  .hero{min-height:0}
  h1,.hero-copy h1{font-size:var(--fs-headline)}
  .hero-copy{top:60px}
  .lede{margin-top:8px;max-width:none}
}
/* a phone held sideways: the title, AZUL behind the head and the ask bar, nothing else */
@media (orientation:landscape) and (max-height:500px){
  :root:has(.hero){--below:0px}
  .hero{min-height:0;height:100vh;height:100svh}
  .hdr{height:60px}
  .hero-copy{top:64px;bottom:auto;display:block;max-width:40%}
  h1{font-size:var(--fs-headline)}
  .lede,.chips{display:none}
  .dock{bottom:12px}
  .ask{margin-top:0;height:calc(var(--btn-md) + 8px);padding-right:4px}
}



/* Creators page: Lina's story, a magazine spread on the white page. Lina on her terrace with two
   stickers from the real Azul chat (her own chat with Azul, then a fan's chat with her twin, where the
   photo stays blurred until tapped), the headline and two short lines. */
.creators{--cr-line:#E6E7EB;--cr-soft:#56575D;--cr-err:#B4233A;--cr-chat:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --cr-orb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='56 30 290 294'%3E%3Cpath d='M326 180L332 188L337 197L341 207L343 217L343 226L342 236L338 245L334 253L327 261L319 267L310 271L301 275L291 276L280 277L270 277L261 276L252 274L243 272L236 271L230 272L225 278L220 285L214 292L207 298L200 305L192 310L183 315L174 318L164 320L154 320L145 319L136 316L128 311L121 305L115 297L110 289L107 279L105 270L104 260L104 250L105 240L107 231L108 223L110 216L108 210L102 205L96 200L89 194L82 187L75 180L70 172L65 163L62 154L60 144L60 134L61 125L64 116L69 108L75 101L83 95L91 90L101 87L110 85L120 84L130 84L140 85L149 86L157 88L164 89L170 87L175 81L180 74L186 66L192 59L200 52L208 45L218 40L228 36L238 34L248 33L258 34L267 38L276 43L283 49L289 58L294 67L297 77L298 88L299 98L298 109L297 119L295 128L293 136L291 144L293 150L299 155L305 160L312 166L319 172L326 180Z'/%3E%3C/svg%3E");
  padding:clamp(64px,7vw,104px) var(--g) clamp(88px,9vw,136px);overflow-x:clip}
.creators :focus-visible{outline-color:var(--blue)}
.creators:focus{outline:none}
.creators ::selection{background:rgba(23,51,214,.16);color:var(--ink)}

/* the spread: Lina on the left, the headline and two short lines centred beside her */
.cr-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"scene ." "scene head" "scene copy" "scene .";
  column-gap:clamp(56px,7.5vw,120px);max-width:1352px;margin:0 auto}
.cr-h{grid-area:head;font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;padding-top:4px}
.cr-scene{grid-area:scene;position:relative;margin:0;min-width:0}
.cr-stage{position:relative}
.cr-frame{overflow:hidden;border-radius:28px;aspect-ratio:4/5;background:#BFD3E6}
.cr-photo{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.cr-scene figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;max-width:min(31ch,52%);margin-top:14px;font-size:var(--fs-caption);line-height:1.45;color:var(--gray)}
.cr-replay{display:inline-flex;align-items:center;min-height:var(--tap);padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--cobalt);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:rgba(23,51,214,.3);text-underline-offset:4px;visibility:hidden;opacity:0;transition:opacity .4s var(--ease),text-decoration-color .2s}
.cr-replay.is-on{visibility:visible;opacity:1}
@media (hover:hover){.cr-replay:hover{text-decoration-color:var(--cobalt)}}
.cr-copy{grid-area:copy;padding-top:28px}
/* the story in two screens, left to right: Lina sends a photo to Azul, her twin shows it to a follower */
.cr-duo{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;gap:12px}
.cr-duo .cr-stick{position:static;width:auto;transform:none;align-items:stretch}
.cr-duo .cr-tag{align-self:flex-start}
.cr-phone{display:flex;flex-direction:column;min-height:400px;padding:12px;border-radius:26px;background:linear-gradient(170deg,#F3F6FF 0%,#FAF8FF 55%,#FFF5F9 100%);box-shadow:0 30px 60px -36px rgba(10,20,60,.45),0 0 0 1px rgba(21,22,28,.05)}
.cr-phone-top{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:2px 4px 10px;border-bottom:1px solid #E1E6FA;font-size:var(--fs-small)}
.cr-phone-top b{font-weight:600}
.cr-phone-top svg{width:18px;height:18px;color:#1733D6}
.cr-phone-top img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.cr-duo .cr-b{box-shadow:0 1px 2px rgba(21,22,28,.06)}
.cr-duo .cr-thumb{width:52%}
.cr-duo .cr-card{width:100%}
.cr-duo .cr-secret{width:56%}
.cr-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#1733D6;color:#fff;box-shadow:0 12px 24px -12px rgba(23,51,214,.6)}
.cr-arrow svg{width:18px;height:18px}
.cr-js .cr-arrow{opacity:0;transform:scale(.6)}
.cr-js.is-in .cr-arrow{opacity:1;transform:none;transition:opacity .4s var(--ease) 2s,transform .5s var(--ease) 2s}
.cr-after{display:flex;justify-content:center;min-height:var(--tap);margin-top:10px}
@media (max-width:760px){
  .cr-duo{grid-template-columns:minmax(0,1fr);gap:10px}
  .cr-arrow{justify-self:center;transform:rotate(90deg)}
  .cr-js.is-in .cr-arrow{transform:rotate(90deg)}
  .cr-phone{min-height:0}
  .cr-duo .cr-thumb{width:34%}
  .cr-duo .cr-secret{width:40%}
}
.cr-lead{text-wrap:pretty;max-width:22.5em;font-size:var(--fs-lead);line-height:1.45;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cr-body{text-wrap:pretty;margin-top:14px;max-width:42ch;font-size:var(--fs-body);line-height:1.55;color:var(--cr-soft)}
.cr-to{display:inline-flex;align-items:center;gap:10px;height:var(--btn-lg);margin-top:22px;padding:0 22px 0 24px;border-radius:16px;background:var(--cobalt);color:#fff;font-size:var(--fs-body);font-weight:600;letter-spacing:-.005em;
  box-shadow:0 14px 28px -16px rgba(23,51,214,.65),inset 0 1px 0 rgba(255,255,255,.14);transition:background-color .2s,transform .2s var(--ease)}
.cr-to svg{flex:none;width:19px;height:19px;transition:transform .25s var(--ease)}
@media (hover:hover){.cr-to:hover{background:#0E22A3}.cr-to:hover svg{transform:translateX(3px)}}
.cr-to:active{transform:scale(.97)}

/* the stickers: real Azul bubbles on the photo */
.cr-stick{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;font:400 var(--fs-small)/1.4 var(--cr-chat);color:#15161C}
.cr-mine{top:5%;left:-14px;width:min(258px,46%);transform:rotate(-2deg)}
.cr-theirs{right:max(-9%,-52px);bottom:-24%;width:min(236px,46%);transform:rotate(1.5deg)}
/* a narrower computer: the photo shrinks faster than the sticker, so the sticker hangs from 65% of
   the photo instead and stays under Lina's hand and phone (the same place as -13% at 1440) */
@media (min-width:901px) and (max-width:1439px){.cr-theirs{top:72%;bottom:auto}}
/* there the fan's photo hangs lower under the frame, so the section keeps room for it above the footer */
@media (min-width:901px) and (max-width:1199px){.creators{padding-bottom:180px}}
.cr-tag{display:inline-flex;align-items:center;height:28px;margin-bottom:8px;padding:0 12px;border-radius:999px;font:600 var(--fs-caption)/1 var(--font);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 8px 20px -10px rgba(10,24,48,.35)}
.cr-thread{display:flex;flex-direction:column;gap:6px;width:100%}
.cr-b{max-width:100%;padding:10px 15px;border-radius:22px;text-wrap:pretty;box-shadow:0 16px 32px -16px rgba(10,24,48,.5),0 2px 6px -2px rgba(10,24,48,.12)}
.cr-me{align-self:flex-end;background:#1733D6;color:#fff;border-bottom-right-radius:6px}
.cr-azul,.cr-twin{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.cr-azul{display:flex;align-items:flex-start;gap:9px}
.cr-av{flex:none;width:17px;height:17px;margin-top:2px;color:#1733D6}
.cr-thumb{width:44%;padding:4px;border-radius:20px;border-bottom-right-radius:6px}
.cr-thumb img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:16px;border-bottom-right-radius:3px}
.cr-card{align-self:flex-start;display:flex}
.cr-secret{position:relative;display:block;width:clamp(150px,14vw,196px);aspect-ratio:4/5;padding:0;border:0;border-radius:22px;border-bottom-left-radius:6px;overflow:hidden;isolation:isolate;cursor:pointer;
  background:#3A3550;color:#fff;font:600 var(--fs-small)/1.2 var(--cr-chat);-webkit-tap-highlight-color:transparent;box-shadow:0 22px 40px -18px rgba(10,24,48,.6),0 2px 6px -2px rgba(10,24,48,.15);transition:transform .25s var(--ease)}
.cr-secret:active{transform:scale(.97)}
.cr-secret-img,.cr-secret-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.cr-secret-img img{object-fit:cover;object-position:50% 40%;filter:blur(22px) saturate(1.2);transform:scale(1.15);transition:filter .8s var(--ease),transform 1.1s var(--ease)}
.cr-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:rgba(21,22,28,.18);text-shadow:0 1px 8px rgba(0,0,0,.2);transition:opacity .4s var(--ease)}
.cr-veil svg{width:28px;height:28px;overflow:visible;filter:drop-shadow(0 2px 8px rgba(0,0,0,.18))}
.cr-gone{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:18px;text-align:center;font-weight:500;font-size:var(--fs-small);line-height:1.35;color:#5A5D6E;
  background:#F4F6FE linear-gradient(170deg,#F3F6FF 0%,#FAF8FF 55%,#FFF5F9 100%);opacity:0;transition:opacity .6s var(--ease)}
.cr-gone span{text-wrap:balance}
.cr-gone::before{content:"";width:24px;height:24px;background:#C3CAE6;-webkit-mask:var(--cr-orb) center/contain no-repeat;mask:var(--cr-orb) center/contain no-repeat}
.cr-secret.is-open .cr-secret-img img{filter:blur(0) saturate(1);transform:scale(1)}
.cr-secret.is-open .cr-veil,.cr-secret.is-gone .cr-veil{opacity:0}
.cr-secret.is-gone .cr-gone{opacity:1}
.cr-secret.is-gone{cursor:default;transform:none}
/* without JavaScript a tap still shows the photo */
.cr-scene:not(.cr-js) .cr-secret:focus .cr-secret-img img{filter:blur(0) saturate(1);transform:scale(1)}
.cr-scene:not(.cr-js) .cr-secret:focus .cr-veil{opacity:0}
@media (hover:hover){.cr-secret:not(.is-open):hover .cr-veil svg{transform:scale(1.1)}}
.cr-veil svg{transition:transform .3s var(--ease)}
.cr-js.is-in .cr-secret:not(.is-open) .cr-veil svg{animation:gelee 2.6s cubic-bezier(.44,0,.56,1) 3.4s infinite}

/* the story plays once when the photo comes into view: her photo, Azul's question, her yes,
   then the photo in a fan's chat. Nothing floats: the blurred photo is a tap target. */
.cr-js .cr-tag,.cr-js .cr-b,.cr-js .cr-card{opacity:0;transform:translateY(12px) scale(.96)}
.cr-js .cr-card{visibility:hidden}
.cr-js.is-in .cr-tag,.cr-js.is-in .cr-b,.cr-js.is-in .cr-card{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .8s var(--ease),visibility 0s}
.cr-js.is-in .cr-card{visibility:visible}
.cr-js.is-in .cr-mine .cr-tag{transition-delay:.15s}
.cr-js.is-in .cr-mine .cr-b:nth-child(1){transition-delay:.35s}
.cr-js.is-in .cr-mine .cr-b:nth-child(2){transition-delay:1s}
.cr-js.is-in .cr-mine .cr-b:nth-child(3){transition-delay:1.6s}
.cr-js.is-in .cr-theirs .cr-tag{transition-delay:2.2s}
.cr-js.is-in .cr-theirs .cr-b{transition-delay:2.45s}
.cr-js.is-in .cr-theirs .cr-card{transition-delay:2.95s}

/* tablet: the spread stacks, headline, photo, words */
@media (max-width:900px){
  .cr-story{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "scene" "copy"}
  .cr-h{max-width:18ch}
  .cr-scene{margin-top:40px;width:100%;max-width:none}
  .cr-mine{left:16px;top:20px}
  .cr-theirs{right:16px;bottom:-40px}
  .cr-copy{padding-top:28px;max-width:640px}
}
/* phone: the stickers sit inside the photo */
@media (max-width:760px){
  .creators{padding:72px var(--g) 72px}
  .cr-h{padding:0}
  .cr-scene{margin-top:40px;max-width:none}
  .cr-frame{aspect-ratio:2/3;border-radius:24px}
  .cr-photo{object-position:56% 30%}
  .cr-stick{font-size:var(--fs-caption)}
  .cr-mine{top:-14px;left:10px;width:min(64%,236px);transform:rotate(-1.5deg)}
  .cr-theirs{right:auto;left:10px;bottom:-26px;width:min(62%,226px);transform:rotate(1deg)}
  .cr-b{padding:8px 12px;border-radius:19px}
  .cr-thread{gap:5px}
  .cr-me{border-bottom-right-radius:6px}
  .cr-azul,.cr-twin{border-bottom-left-radius:6px}
  .cr-b.cr-thumb{width:29%;padding:3px;border-radius:16px;border-bottom-right-radius:5px}
  .cr-thumb img{border-radius:13px;border-bottom-right-radius:3px}
  .cr-secret{width:clamp(108px,33vw,130px);border-radius:20px;border-bottom-left-radius:6px}
  .cr-veil svg{width:24px;height:24px}
  .cr-gone{padding:12px;font-size:var(--fs-caption);gap:8px}
  .cr-gone::before{width:20px;height:20px}
  .cr-av{width:15px;height:15px}
  .cr-tag{height:26px;padding:0 11px;margin-bottom:6px}
  .cr-scene figcaption{max-width:none;margin-top:38px}
  .cr-copy{padding-top:6px}
  .cr-lead{max-width:none}
  .cr-body{max-width:none}
  .cr-to{display:flex;justify-content:center;width:100%;margin-top:14px}
}
/* the narrowest phones: a taller photo so both stickers keep their air */
@media (max-width:360px){
  .cr-frame{aspect-ratio:3/5}
  .cr-mine{width:72%}
  .cr-theirs{width:70%}
}
/* Creators page (/creators): the sky of the home page with a creator at work, then Lina's story,
   who it is for, what it costs, the rules, and the way to /start. Buttons sit on the page, never in a frame. */
.ch-hero{max-height:1000px}
.ch-hero .layer img{object-position:60% 50%}
.ch-hero .hero-copy{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding-top:72px;max-width:min(46%,640px)}
.ch-k{font-size:var(--fs-small);font-weight:600;opacity:.88;margin-bottom:18px}
.ch-hero h1{text-wrap:balance}
.ch-lede{margin-top:clamp(18px,2vw,26px);max-width:36ch;font-size:var(--fs-lead);line-height:1.5;font-weight:500;opacity:.95}
.ch-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px}
.ch-go{display:inline-flex;align-items:center;gap:10px;height:var(--btn-lg);padding:0 22px 0 24px;border-radius:16px;background:var(--cobalt);color:#fff;font-size:var(--fs-body);font-weight:600;
  box-shadow:0 14px 28px -16px rgba(23,51,214,.65),inset 0 1px 0 rgba(255,255,255,.14);transition:background-color .2s,transform .2s var(--ease)}
.ch-go svg,.ch-more svg{flex:none;width:19px;height:19px;transition:transform .25s var(--ease)}
.ch-go:active{transform:scale(.97)}
.ch-more{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-size:var(--fs-body);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.5)}
@media (hover:hover){.ch-go:hover{background:#0E22A3}.ch-hero .ch-go:hover{background:#F1F4FF}.ch-go:hover svg,.ch-more:hover svg{transform:translateX(3px)}.ch-more:hover{text-decoration-color:currentColor}}
.for-creators .creators{padding-top:clamp(88px,9vw,136px)}
.ch-sec{max-width:calc(1352px + 2*var(--g));margin:0 auto;padding:clamp(72px,8vw,120px) var(--g) 0}
.ch-k2{margin-bottom:14px;font-size:var(--fs-small);font-weight:600;color:var(--cobalt)}
/* Creators page illustrations, kept sober: pictograms and a call to book.
   They play once when they come into view (creators.js adds .is-on); without script they simply show. */
/* photos, videos, words and the rules: a quiet pictogram */
.cs-pic .cs-ico{position:static;display:grid;margin-bottom:16px}
.cs-rule{position:relative;display:flex;align-items:center;min-height:88px;padding-left:58px!important}
.cs-rule .cs-ico{top:50%;margin-top:-20px}
.cs-ico{position:absolute;left:0;top:24px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#EEF2FF;color:var(--cobalt)}
.cs-ico svg{width:22px;height:22px}

/* the end: a few slots, one taken, on the grainy blue */
.cs-book .join-in{padding-top:clamp(48px,6vw,88px)}
.cs-book .join-go{margin-top:30px}
.cs-cal{margin-bottom:30px;padding:14px;border-radius:22px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 48px -30px rgba(10,20,60,.45)}
.cs-days{display:flex;justify-content:center;gap:8px}
.cs-days li{display:flex;flex-direction:column;align-items:center;width:58px;padding:8px 0;border-radius:14px;line-height:1.2}
.cs-days li:nth-child(2){background:var(--ink);color:#fff}
.cs-days small{font-size:var(--fs-caption);opacity:.7}
.cs-days b{font-size:var(--fs-title);font-weight:600}
.cs-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.cs-slots li{padding:8px 10px;border-radius:11px;border:1px solid #DCE2F2;background:#fff;font-size:var(--fs-small);font-weight:600;color:#33363F;font-variant-numeric:tabular-nums;transition:background-color .35s,color .35s,border-color .35s}
.cs-js .cs-cal[data-cs].is-on .cs-slots li.on{animation:cs-pick .4s var(--ease) 1s both}
@keyframes cs-pick{to{background:var(--cobalt);border-color:var(--cobalt);color:#fff}}
.cs-slots li.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.cs-js .cs-cal[data-cs]:not(.is-on) .cs-slots li.on{background:#fff;border-color:#DCE2F2;color:#33363F}
@media (max-width:760px){.cs-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-days li{width:52px}}

/* motion, once in view */
.ch-sec h2,.ch-end h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500;max-width:18ch}
.ch-p{margin-top:18px;max-width:46ch;font-size:var(--fs-lead);line-height:1.5;color:#45464B;text-wrap:pretty}
.ch-note{margin-top:14px;max-width:46ch;font-size:var(--fs-small);line-height:1.5;color:var(--gray)}
.ch-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ch-chips li{display:inline-flex;align-items:center;gap:9px;padding:11px 18px 11px 14px;border-radius:999px;background:var(--soft);font-size:var(--fs-small);font-weight:600}
.ch-chips img{width:18px;height:18px}
.ch-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px clamp(48px,6vw,104px)}
.ch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(40px,5vw,88px);margin-top:44px}
.ch-list li{padding:24px 0 28px;border-top:1px solid #ECECEE}
.ch-list.ch-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch-send .ch-note{margin-top:4px}
.ch-list h3{font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em}
.ch-list p{margin-top:8px;max-width:44ch;font-size:var(--fs-body);line-height:1.55;color:#55565B}
.ch-more-ink{margin-top:20px;color:var(--cobalt);text-decoration-color:rgba(23,51,214,.3)}
.ch-end{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(104px,11vw,168px) var(--g) clamp(96px,10vw,152px)}
.ch-end h2{max-width:none}
.ch-end p{margin:18px 0 32px;max-width:40ch;font-size:var(--fs-lead);line-height:1.5;color:#45464B}
.for-creators :focus-visible{outline-color:var(--blue)}
.for-creators .hdr :focus-visible,.ch-hero :focus-visible{outline-color:#fff}
@media (max-width:900px){
  .ch-two,.ch-list,.ch-list.ch-three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ch-hero{max-height:none}
  .ch-hero .layer img{object-position:58% 50%}
  .ch-hero .hero-copy{top:72px;bottom:28px;bottom:calc(28px + env(safe-area-inset-bottom));justify-content:flex-start;padding-top:0;max-width:none}
  .ch-hero .ch-acts{margin-top:auto}
  .ch-hero .shade{background:linear-gradient(180deg,rgba(8,18,40,.1) 0%,rgba(8,18,40,.06) 30%,rgba(8,18,40,0) 48%,rgba(8,18,40,0) 62%,rgba(8,18,40,.45) 100%)}
  .ch-hero .ch-lede{font-size:var(--fs-small);margin-top:12px}
  .ch-k{margin-bottom:12px}
  .ch-lede{max-width:none}
  .ch-acts{flex-direction:column;align-items:stretch;gap:6px;margin-top:26px}
  .ch-go{justify-content:center}
  .ch-more{justify-content:center}
  .ch-chips li{padding:9px 15px}
  .ch-list{margin-top:28px}
  .ch-end .ch-go{align-self:stretch;justify-content:center}
}
/* Inner pages (how it works, FAQ, consent, start, journal, legal, 404): the sky of the home page on
   top, then the white page. Buttons sit on the page, never in a frame. */
.pg-hero{position:relative;padding:clamp(136px,13vw,188px) var(--g) clamp(60px,6.5vw,96px);color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 60% at 85% 0%,rgba(255,255,255,.3),rgba(255,255,255,0) 70%),radial-gradient(50% 50% at 0% 100%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#2F69C2 0%,#4D88D6 55%,#8DB9EA 100%)}
.pg-hero-in{max-width:1352px;margin:0 auto}
.pg-hero h1{max-width:17ch;font-size:var(--fs-display)}
.pg-lede{margin-top:clamp(18px,2vw,26px);max-width:46ch;font-size:var(--fs-lead);line-height:1.5;font-weight:500;opacity:.95;text-wrap:pretty}
.pg-hero .ch-go,.ch-hero .ch-go{background:#fff;color:var(--ink);box-shadow:0 18px 36px -18px rgba(8,18,40,.5)}
@media (hover:hover){.pg-hero .ch-go:hover{background:#F1F4FF}}
.pg-hero :focus-visible{outline-color:#fff}
.pg{max-width:calc(1352px + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.pg :focus-visible{outline-color:var(--blue)}
.pg-sec{padding-top:clamp(64px,7vw,108px)}
.pg-sec>h2,.pg-h2{font-size:var(--fs-headline);line-height:1.05;letter-spacing:-.035em;font-weight:500;max-width:20ch}
.pg-sec>.ch-p{margin-top:16px}
.pg-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px clamp(48px,7vw,120px);align-items:start}
/* the followers page ends on a door to the creators page: faces kept blurred, a bio link that writes itself, on the strip's grainy blue */
.join{padding:clamp(72px,8vw,120px) max(12px,calc(var(--g) - 24px)) clamp(64px,7vw,110px)}
.join-in{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(56px,7vw,104px) var(--g);border-radius:28px;background:radial-gradient(60% 100% at 70% 70%,rgba(110,160,226,.7) 0%,rgba(110,160,226,.45) 34%,rgba(110,160,226,0) 74%),radial-gradient(40% 90% at 104% 10%,rgba(77,136,214,.65) 0%,rgba(77,136,214,0) 70%),radial-gradient(50% 85% at 34% 10%,rgba(222,210,244,.85) 0%,rgba(222,210,244,0) 72%),radial-gradient(42% 70% at 36% 108%,rgba(248,206,184,.6) 0%,rgba(248,206,184,0) 72%),linear-gradient(90deg,#F7F9FE 0%,#EDF2FC 18%,#D4E2F7 42%,#ABCCF0 70%,#8FB8EA 100%);}
.join-faces{display:flex;justify-content:center;margin-bottom:28px}
.join-faces li{width:58px;height:58px;margin-left:-14px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 12px 24px -12px rgba(10,20,60,.45);overflow:hidden;background:#fff;animation:join-float 5s ease-in-out calc(var(--i) * -.7s) infinite}
.join-faces li:first-child{margin-left:0}
.join-faces img{width:100%;height:100%;object-fit:cover}
.join-you{display:grid;place-items:center;background:var(--cobalt)!important;color:#fff;font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
@keyframes join-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.join h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.join .ch-k2{margin-bottom:12px}
.join-p{margin:18px 0 32px;max-width:40ch;font-size:var(--fs-lead);line-height:1.5;color:#33363F;text-wrap:balance}
.join-p{margin-bottom:22px}
.join-link{display:inline-flex;align-items:center;gap:0;margin-bottom:30px;padding:10px 18px 10px 14px;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:var(--fs-body);font-weight:500;color:#33363F;box-shadow:0 10px 24px -16px rgba(10,20,60,.35)}
.join-link svg{width:16px;height:16px;flex:none;margin-right:8px;color:var(--cobalt)}
.join-link b{font-weight:600;color:var(--cobalt)}
.join-link b::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--cobalt);animation:caret 1s steps(1) infinite}
.join-go{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 8px 0 26px;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--fs-body);font-weight:600;box-shadow:0 18px 36px -18px rgba(10,14,30,.55);transition:transform .2s var(--ease),background-color .2s}
.join-go i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);transition:transform .25s var(--ease)}
.join-go svg{width:18px;height:18px}
.join-go:active{transform:scale(.97)}
@media (hover:hover){.join-go:hover{background:#000}.join-go:hover i{transform:translateX(3px)}}
.join :focus-visible{outline-color:var(--cobalt)}
@media (max-width:760px){.join{padding-top:48px}.join-faces li{width:44px;height:44px;margin-left:-10px}.join-link{font-size:var(--fs-small)}}
@media (prefers-reduced-motion:reduce){.join-faces li{animation:none}}

/* How it works: a strip of five cards, each with a small scene from the product that plays when the card comes into view */
/* How it works: the 30 second film under the title, wide on a computer, upright on a phone */
.film{padding-top:clamp(48px,6vw,96px)}
.film-box{position:relative;margin:0;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#2A5FBA;box-shadow:0 40px 80px -48px rgba(8,18,40,.45)}
.film-box video{display:block;width:100%;height:100%;object-fit:cover}
.film-btn{position:absolute;right:16px;bottom:16px;width:var(--btn-sm);height:var(--btn-sm);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:transform .2s var(--ease)}
.film-btn::before{content:"";position:absolute;inset:calc((var(--btn-sm) - var(--tap)) / 2)}
.film-btn:active{transform:scale(.94)}
.film-btn svg{width:18px;height:18px}
.film-btn .film-play,.film-btn.is-paused .film-pause{display:none}
.film-btn.is-paused .film-play{display:block}
@media (max-width:760px){.film-box{aspect-ratio:9/16;max-width:420px;margin:0 auto;border-radius:24px}}
.hw2{padding-top:clamp(64px,7vw,108px)}
.hw2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hw2-track{--pad:max(var(--g),calc((100% - 1352px) / 2));position:relative;display:flex;gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px);padding:0 var(--pad) 8px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.hw2-track::-webkit-scrollbar{display:none}
.hw2-nav{display:flex;gap:8px;flex:none}
.hw2-nav button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #E3E4E8;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s,transform .2s var(--ease)}
.hw2-nav button:active{transform:scale(.94)}
.hw2-nav svg{width:18px;height:18px}
@media (hover:hover){.hw2-nav button:hover{background:var(--soft)}}
.hw2-track::after{content:"";flex:none;width:max(1px,calc(var(--pad) - clamp(16px,2vw,24px)))}
.hw2-card{flex:none;width:clamp(290px,30vw,420px);scroll-snap-align:start;text-align:center}
.hw2-card>h3{margin-top:24px;font-size:var(--fs-title);font-weight:600;letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
.hw2-card>p{margin:10px auto 0;max-width:34ch;font-size:var(--fs-small);line-height:1.55;color:#55565B;text-wrap:pretty}
.hw2-vis{margin:0;text-align:left;aspect-ratio:1/1;border-radius:28px;overflow:hidden;display:grid;place-items:center;padding:clamp(18px,2.4vw,30px)}
.hw2-in{width:100%;display:grid;place-items:center}
.v-soft{background:linear-gradient(170deg,#EEF2FF 0%,#F6F4FF 55%,#FFF4F8 100%)}
.v-sky{background:linear-gradient(180deg,#2F69C2 0%,#4D88D6 50%,#8DB9EA 100%)}
.v-cobalt{background:var(--cobalt)}
.v-rose{background:linear-gradient(170deg,#FFF1F5 0%,#F7F1FF 60%,#EEF3FF 100%)}
.v-sky2{background:radial-gradient(80% 70% at 85% 10%,rgba(255,255,255,.35),rgba(255,255,255,0) 70%),linear-gradient(180deg,#4D88D6 0%,#8DB9EA 100%)}

/* 1: the networks join into Azul */
.hw-flow{display:grid;grid-template-columns:auto minmax(36px,1fr) auto;align-items:center;width:100%}
.hw-flow ul{display:flex;flex-direction:column;gap:8px}
.hw-flow li{display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:13px;background:#fff;white-space:nowrap;font-size:var(--fs-small);font-weight:600;box-shadow:0 1px 2px rgba(21,22,28,.05)}
.hw-flow img{flex:none;width:18px;height:18px}
.hw-mid{position:relative;align-self:stretch}
.hw-lines{position:absolute;inset:19px 0;width:100%;height:calc(100% - 38px);overflow:visible;fill:none;stroke:var(--cobalt);stroke-opacity:.4;stroke-width:1.5}
.hw-lines path{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hw-hub{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--cobalt);color:#fff;box-shadow:0 12px 24px -12px rgba(23,51,214,.6)}
.hw-hub svg{width:24px;height:24px}

/* 2 to 4: a chat, as in the product */
.hw2-chat{width:100%;max-width:340px;border-radius:24px;box-shadow:0 30px 60px -30px rgba(10,20,60,.45)}
.hw2-chat .chat-top{padding:10px 14px}
.hw2-chat .chat-fil{padding:14px 12px 14px;gap:6px}
.hw2-chat .bulle{padding:9px 13px;font-size:var(--fs-small);border-radius:18px}
.hw2-chat .bulle.lui{border-bottom-left-radius:5px}
.hw2-chat .bulle.fan{border-bottom-right-radius:5px}
.hw2-orb{display:grid;place-items:center;width:30px;height:30px;color:var(--cobalt)}
.hw2-orb svg{width:24px;height:24px}
.hw2-who{display:flex;flex-direction:column;line-height:1.2}
.hw2-who small{font-size:var(--fs-caption);color:var(--doux)}
.hw2-stack{display:grid;margin-top:10px}
.hw2-stack>*{grid-area:1/1}
.hw2-typing{align-self:start;justify-self:start;display:flex;gap:4px;padding:12px 14px;border-radius:18px;border-bottom-left-radius:5px;background:#fff;opacity:0}
.hw2-typing i{width:6px;height:6px;border-radius:50%;background:#A3A8BA}
.hw-shot{width:40%;padding:3px!important;border-radius:16px!important}
.hw-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:13px;border-bottom-right-radius:3px}
.hw-yes{display:flex;gap:6px;margin-top:2px}
.hw-yes span{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--trait);font-size:var(--fs-caption);font-weight:600;color:var(--bleu)}

/* 4: the link in the bio, tapped, then the chat it opens */
.hw2-bio-wrap{display:flex;flex-direction:column;gap:12px;width:100%;max-width:330px}
.hw2-prof{padding:16px;border-radius:22px;background:#fff;box-shadow:0 24px 48px -30px rgba(10,20,60,.4)}
.hw2-prof-top{display:flex;align-items:center;gap:12px}
.hw2-prof-top img{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #D9E2FB}
.hw2-prof-top span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.hw2-prof-top b{font-size:var(--fs-small);font-weight:600}
.hw2-prof-top small{font-size:var(--fs-caption);color:#5A5D6E}
.hw2-link{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 12px;border-radius:999px;background:#EEF2FF;color:var(--cobalt);font-size:var(--fs-caption);font-weight:600}
.hw2-link svg{width:14px;height:14px;flex:none}
.hw2-ring{position:absolute;right:18%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(23,51,214,.28);opacity:0;pointer-events:none}
.hw2-mini{max-width:none;border-radius:20px}
.hw2-mini .chat-fil{padding:12px}

/* 5: the creator's space, figures, a curve and the topics followers bring up */
.hw2-dash{width:100%;max-width:330px;padding:16px;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 24px 48px -28px rgba(10,20,60,.5)}
.hw2-dash-top{display:flex;align-items:baseline;justify-content:space-between}
.hw2-dash-top b{font-size:var(--fs-small);font-weight:600}
.hw2-dash-top small,.hw2-kpis small{font-size:var(--fs-caption);color:#6B6F80}
.hw2-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.hw2-kpis div{display:flex;flex-direction:column;padding:10px 12px;border-radius:14px;background:#F3F6FF}
.hw2-kpis b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.hw2-kpis i{font-style:normal;font-size:var(--fs-caption);font-weight:600;color:#1C8C5A}
.hw2-chart{display:block;width:100%;height:64px;margin-top:12px;overflow:visible}
.hw2-area{fill:rgba(77,136,214,.16)}
.hw2-line{fill:none;stroke:var(--cobalt);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.hw2-topics{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.hw2-topics li{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:8px;font-size:var(--fs-caption);color:#3E4150}
.hw2-topics i{height:7px;border-radius:99px;background:linear-gradient(90deg,#4D88D6,#1733D6);transform-origin:left;transform:scaleX(var(--w))}

/* 6: a monthly subscription opens what the creator keeps for subscribers */
.hw2-pay{width:100%;max-width:290px;padding:12px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -30px rgba(10,20,60,.5)}
.hw2-pay-top{display:flex;align-items:center;gap:10px}
.hw2-pay-top img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.hw2-pay-top span{display:flex;flex-direction:column;line-height:1.25}
.hw2-pay-top b{font-size:var(--fs-small);font-weight:600}
.hw2-pay-top small{font-size:var(--fs-caption);color:#6B6F80}
.hw2-locked{position:relative;margin-top:12px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#C9D6EE}
.hw2-locked img{width:100%;height:100%;object-fit:cover;filter:blur(16px) saturate(1.1);transform:scale(1.12);transition:filter .9s var(--ease),transform 1.1s var(--ease)}
.hw2-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;font-size:var(--fs-caption);font-weight:600;background:rgba(21,22,28,.16);text-shadow:0 1px 8px rgba(0,0,0,.25);transition:opacity .5s var(--ease)}
.hw2-lock svg{width:22px;height:22px}
.hw2-sub{position:relative;display:grid;margin-top:10px;height:40px;border-radius:14px;background:var(--cobalt);color:#fff;font-size:var(--fs-small);font-weight:600;overflow:hidden}
.hw2-sub>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease),opacity .3s}
.hw2-sub-b{transform:translateY(100%);opacity:0}
.hw2-sub-b::before{content:"\2713\00a0"}
.hw-js .hw2-card.on .hw2-sub{animation:hw-press .35s ease-out 1.1s both}
.hw-js .hw2-card.on .hw2-sub-a{animation:hw-sub-out .45s var(--ease) 1.35s both}
.hw-js .hw2-card.on .hw2-sub-b{animation:hw-sub-in .45s var(--ease) 1.35s both}
.hw-js .hw2-card.on .hw2-locked img{animation:hw-unblur 1s var(--ease) 1.7s both}
.hw-js .hw2-card.on .hw2-lock{animation:hw-fade-out .5s var(--ease) 1.7s both}
@keyframes hw-sub-out{to{transform:translateY(-100%);opacity:0}}
@keyframes hw-sub-in{to{transform:none;opacity:1}}
@keyframes hw-unblur{to{filter:none;transform:none}}
@keyframes hw-fade-out{to{opacity:0}}

/* the scene plays when its card comes into view (how.js adds .on); without script, everything simply shows */
.hw-js .hw2-card [data-a]{opacity:0;transform:translateY(8px)}
.hw-js .hw2-card .hw-lines path{stroke-dashoffset:1}
.hw-js .hw2-card.on [data-a]{animation:arrive .5s var(--ease) var(--d,0s) both}
.hw-js .hw2-card.on .hw-lines path{animation:hw-draw .9s var(--ease) var(--d,0s) both}
.hw-js .hw2-card.on .hw2-typing{animation:hw-typing 1.1s linear var(--d,0s) both}
.hw-js .hw2-card.on .hw2-typing i{animation:hw-dot .9s ease-in-out infinite}
.hw2-typing i:nth-child(2){animation-delay:.15s!important}.hw2-typing i:nth-child(3){animation-delay:.3s!important}
.hw-js .hw2-card.on .hw2-tap{animation:hw-tap .4s var(--ease) 2.6s both}
.hw-js .hw2-card .hw2-line{stroke-dashoffset:1}
.hw-js .hw2-card.on .hw2-line{animation:hw-draw 1.2s var(--ease) var(--d,0s) both}
.hw-js .hw2-card .hw2-area{opacity:0}
.hw-js .hw2-card.on .hw2-area{animation:arrive .8s var(--ease) 1.2s both}
.hw-js .hw2-card .hw2-topics i{transform:scaleX(0)}
.hw-js .hw2-card.on .hw2-topics i{animation:hw-bar .9s var(--ease) var(--d,0s) both}
.hw-js .hw2-card.on .hw2-ring{animation:hw-ring .9s ease-out var(--d,0s) both}
.hw-js .hw2-card.on .hw2-link{animation:hw-press .3s ease-out 1.05s both}
.hw-js .hw2-card.on .hw-hub{animation:arrive .5s var(--ease) var(--d,0s) both,hw-pulse 2.4s ease-in-out 1.6s infinite}
@keyframes hw-bar{from{transform:scaleX(0)}to{transform:scaleX(var(--w))}}
@keyframes hw-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
@keyframes hw-press{50%{transform:scale(.95)}100%{transform:none}}
@keyframes hw-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hw-typing{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
@keyframes hw-dot{0%,100%{transform:none;opacity:.5}50%{transform:translateY(-3px);opacity:1}}
@keyframes hw-tap{to{background:var(--bleu);border-color:var(--bleu);color:#fff}}
@keyframes hw-pulse{0%,100%{box-shadow:0 12px 24px -12px rgba(23,51,214,.6),0 0 0 0 rgba(23,51,214,.25)}50%{box-shadow:0 12px 24px -12px rgba(23,51,214,.6),0 0 0 10px rgba(23,51,214,0)}}
/* questions and answers on a page (the same look as the FAQ panel of the home page) */
.pg .qa{margin:28px 0 0;max-width:860px}
.qa-group+.qa-group{margin-top:clamp(56px,6vw,88px)}
/* long text: legal pages and articles */
.prose{max-width:720px;font-size:var(--fs-body);line-height:1.68;color:#2F3036}
.prose>:first-child{margin-top:0}
.prose h2{margin:56px 0 14px;font-size:var(--fs-subhead);line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink)}
.prose h3{margin:34px 0 10px;font-size:var(--fs-title);line-height:1.3;font-weight:600;color:var(--ink)}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:7px 0;padding-left:4px}
.prose li::marker{color:var(--cobalt)}
.prose a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:rgba(23,51,214,.3);text-underline-offset:3px;overflow-wrap:anywhere}
@media (hover:hover){.prose a:hover{text-decoration-color:var(--cobalt)}}
.prose strong,.prose b{font-weight:650;color:var(--ink)}
.prose hr{margin:44px 0;border:0;border-top:1px solid #ECECEE}
.prose blockquote{margin:24px 0;padding:2px 0 2px 22px;border-left:3px solid var(--cobalt);font-size:var(--fs-title);line-height:1.55;color:var(--ink)}
.prose .tbl{margin:18px 0 28px;overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.5}
.prose th,.prose td{padding:12px 14px 12px 0;border-top:1px solid #ECECEE;text-align:left;vertical-align:top}
.prose th{font-weight:600;color:var(--ink)}
.prose .pg-short{margin:0 0 44px;font-size:var(--fs-title);line-height:1.5;font-weight:500;color:var(--ink)}
.pg-short b{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:600;color:var(--cobalt)}
.pg-meta{margin-top:20px;font-size:var(--fs-small);font-weight:500;opacity:.9}
.pg-body{padding-top:clamp(56px,6vw,88px)}
/* The legal pages in two languages (legal.js): the version the address asks for shows, the other hides; without the
   script both read one under the other. The button under the title leads to the other version: white on the sky,
   the size of "Get it". The line that opens a version (a translation, an old version) reads before its first title. */
html[data-lang="en"] .lg[lang="fr"],html[data-lang="fr"] .lg[lang="en"]{display:none}
.lg-go{display:inline-flex;align-items:center;gap:10px;height:var(--btn-md);margin-top:34px;padding:0 20px 0 16px;border-radius:12px;
  background:#fff;color:var(--ink);font-size:var(--fs-body);font-weight:600;box-shadow:0 18px 36px -18px rgba(8,18,40,.5);
  transition:background .2s,transform .2s var(--ease)}
.lg-go svg{flex:none;width:20px;height:20px}
.lg-go:active{transform:scale(.97)}
@media (hover:hover){.lg-go:hover{background:#F1F4FF}}
.prose .lg-note{margin-bottom:32px;font-weight:500;color:var(--ink)}
.prose [id]{scroll-margin-top:24px}
.prose a[href^="mailto:"]{white-space:nowrap}
.pg-toc{position:sticky;top:32px;font-size:var(--fs-small);line-height:1.4}
.pg-toc p{margin-bottom:10px;font-weight:600;color:var(--gray)}
.pg-toc a{display:block;padding:7px 0;color:#45464B}
@media (hover:hover){.pg-toc a:hover{color:var(--cobalt)}}
.pg-with-toc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.prose .dd{letter-spacing:.14em}
@media (max-width:640px){
  .prose .tbl{overflow:visible}
  .prose .tbl table,.prose .tbl tbody,.prose .tbl tr,.prose .tbl td{display:block;width:auto}
  .prose .tbl thead{display:none}
  .prose .tbl tr{padding:16px 0;border-top:1px solid #ECECEE}
  .prose .tbl td{border:0;padding:0 0 10px}
  .prose .tbl td::before{content:attr(data-label);display:block;font-weight:600;color:var(--ink)}
}
/* the journal: one article per line */
.posts{margin-top:8px}
.posts>li{border-top:1px solid #ECECEE}
.posts>li:last-child{border-bottom:1px solid #ECECEE}
.posts a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:center;padding:34px 0}
.posts h2{font-size:var(--fs-subhead);line-height:1.15;letter-spacing:-.025em;font-weight:500}
.posts p{grid-column:1;max-width:60ch;font-size:var(--fs-body);line-height:1.55;color:#55565B}
.posts .pg-date{grid-column:1;font-size:var(--fs-small);color:var(--gray)}
.posts .go{grid-row:1/span 3;grid-column:2;width:var(--btn-md);height:var(--btn-md);display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--ink);transition:background .2s,color .2s,transform .25s var(--ease)}
.posts .go svg{width:20px;height:20px}
.posts .go{padding:0;gap:0}
.prose code{font:inherit;font-weight:600;color:var(--cobalt);overflow-wrap:anywhere}
.prose .qa p{margin:0}
@media (hover:hover){.posts a:hover .go{background:var(--cobalt);color:#fff;transform:translateX(3px)}.posts a:hover h2{color:var(--cobalt)}}
/* the last call on a page */
.pg-end{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(104px,11vw,168px) var(--g) clamp(96px,10vw,152px)}
.pg-end h2{font-size:var(--fs-headline);line-height:1.04;letter-spacing:-.035em;font-weight:500}
.pg-end p{margin:18px 0 32px;max-width:42ch;font-size:var(--fs-lead);line-height:1.5;color:#45464B}
.pg-end .ch-acts{justify-content:center;margin-top:0}
.ch-more-ink,.pg .ch-more,.pg-end .ch-more{color:var(--cobalt);text-decoration-color:rgba(23,51,214,.3)}

/* /start: the form on the left, the calendar on the right */
.st-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(48px,6vw,104px);align-items:start}
.st-form{margin-top:30px;max-width:560px}
.st-field{margin-top:20px}
.st-field label{display:block;font-size:var(--fs-small);font-weight:600}
.st-opt{margin-left:6px;font-weight:500;color:var(--gray)}
.st-hint{margin-top:4px;font-size:var(--fs-small);color:var(--gray)}
.st-field input,.st-field textarea{display:block;width:100%;margin-top:8px;padding:14px 16px;border:1px solid #D9DAE0;border-radius:14px;background:#fff;font:500 var(--fs-body)/1.4 var(--font);color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
.st-field textarea{resize:vertical;min-height:120px}
.st-field input:focus,.st-field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(23,51,214,.12)}
.st-field [aria-invalid="true"]{border-color:#B4233A}
.st-err{margin-top:6px;font-size:var(--fs-small);color:#B4233A}
.st-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-btn{margin-top:28px;border:0;cursor:pointer;font-family:var(--font)}
.st-btn[disabled]{opacity:.6;cursor:wait}
.st-legal{margin-top:14px;font-size:var(--fs-small);color:var(--gray)}
.st-legal a,.st-fail a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.st-fail{margin-top:14px;font-size:var(--fs-small);color:#B4233A}
.st-done{margin-top:30px}
.st-done:focus{outline:none}
.st-cal{position:relative;margin-top:26px;border-radius:20px;overflow:hidden}
.st-cal-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-small);color:var(--gray)}
.calendly-inline-widget{position:relative;width:100%;height:700px}
.book{padding-top:clamp(48px,5vw,72px)}
.book-cal{position:relative;max-width:1060px;min-height:320px;margin:0 auto;display:grid;place-items:center}
.book-gate{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.book-p{font-size:var(--fs-lead);line-height:1.5;color:#33363F}
.book-go{border:0;cursor:pointer}
.book-note{max-width:46ch;font-size:var(--fs-small);line-height:1.5;color:var(--gray)}
.book-note a{color:var(--cobalt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.book-cal.is-open{display:block;min-height:0}
.book-frame{display:block;width:100%;height:700px;border:0}
.book-wait{position:absolute;inset:0;display:grid;place-items:center;font-size:var(--fs-small);color:var(--gray)}
#call .ch-more{margin-top:10px}
@media (max-width:900px){.st-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.st-btn{width:100%;justify-content:center}.calendly-inline-widget{height:640px}.book-frame{height:640px}}

/* Phone menu: the header links in a sheet, opened by "Menu" */
.menu-btn{display:none}
.menu{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100vw;max-height:88vh;padding:8px var(--g) max(28px,env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;
  background:#fff;color:var(--ink);box-shadow:0 -30px 80px -30px rgba(10,14,24,.35);overflow-y:auto}
.menu:not([open]){display:none}
.menu[open]{animation:sheet-up .4s var(--ease)}
.menu::backdrop{background:rgba(10,14,24,.38);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.menu-top{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.menu-top .wm{color:var(--ink)}
.menu nav a{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-top:1px solid #ECECEE;font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em}
.menu nav a[aria-current="page"]{color:var(--cobalt)}
.menu .ch-go{display:flex;justify-content:center;width:100%;margin-top:22px}
.menu :focus-visible{outline-color:var(--blue)}
/* at 900px and below the header keeps AZUL, "Sign in" as a white button and "Menu": the links and "Create your twin" move into the menu */
@media (max-width:900px){
  .nav,.hdr .get{display:none}
  .hdr{background:linear-gradient(180deg,var(--haut),rgba(0,0,0,0))}
  .hdr{gap:14px}
  .hdr-in{position:relative;height:var(--btn-sm);min-height:0;padding:0 14px;border-radius:12px;background:#fff;color:var(--ink);transition:transform .2s var(--ease)}
  .hdr-in::before{content:"";position:absolute;inset:calc((var(--btn-sm) - var(--tap)) / 2) 0}
  .hdr-in:active{transform:scale(.97)}
  .menu-btn{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 6px;border:0;background:none;font:600 var(--fs-body)/1 var(--font);color:inherit;cursor:pointer}
}
@media (max-width:760px){
  .pg-hero{padding:112px var(--g) 52px}
  .pg-split,.pg-with-toc{grid-template-columns:minmax(0,1fr)}
  .pg-toc{position:static;padding-bottom:8px;border-bottom:1px solid #ECECEE}
  .hw2-card{width:82vw;max-width:360px}
    .posts a{grid-template-columns:minmax(0,1fr);padding:28px 0}
  .posts .go{display:none}
  .pg-end .ch-acts{flex-direction:column;align-items:stretch;width:100%}
}

/* Where to find a creator's twin: what the ask bar of the home page opens */
.find{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:28px;background:#fff;color:var(--ink);
  box-shadow:0 40px 100px -30px rgba(10,14,24,.5);overflow:auto}
.find:not([open]){display:none}
.find[open]{animation:sheet-up .4s var(--ease)}
.find::backdrop{background:rgba(10,14,24,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.find-in{position:relative;padding:34px 32px 30px}
.find .faq-close{position:absolute;top:16px;right:16px}
.find h2{max-width:16ch;font-size:var(--fs-subhead);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.find-note{margin-top:14px;font-size:var(--fs-small);line-height:1.5;color:var(--gray)}
.find-share{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start}
.find-share p{font-size:var(--fs-body);font-weight:600}
.find-share .join-go{margin-top:14px;border:0;cursor:pointer;font-family:var(--font)}
.fs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.fs li{display:flex;flex-direction:column;gap:10px;min-width:0}
.fs-cap{font-size:var(--fs-small);line-height:1.4;color:var(--ink)}
.fs-art{position:relative;display:grid;place-items:center;height:104px;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 0%,#DCE6FF 0%,rgba(220,230,255,0) 60%),radial-gradient(90% 80% at 100% 100%,#F6E3F1 0%,rgba(246,227,241,0) 65%),#F3F5FB}
.fs-nets{display:flex;justify-content:center;align-items:center}
.fs-nets img{box-sizing:content-box;width:20px;height:20px;padding:11px;margin:0 -4px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -10px rgba(20,30,70,.45)}
.fs-bio{grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-content:center;justify-items:start;column-gap:8px;row-gap:9px;padding:0 9px}
.fs-bio img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.fs-bio b{align-self:center;font-size:13px;font-weight:600}
.fs-bio i{position:relative;grid-column:1/-1;padding:5px 8px;border-radius:999px;background:#fff;color:var(--cobalt);font-style:normal;font-size:10px;font-weight:600;white-space:nowrap;box-shadow:0 8px 18px -12px rgba(20,30,70,.5)}
.fs-bio i::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:rgba(23,51,214,.28);opacity:0}
.fs-chat{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:0 12px}
.fs-me{align-self:flex-end;max-width:100%;padding:6px 10px;border-radius:14px;border-bottom-right-radius:4px;background:var(--cobalt);color:#fff;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-twin{display:flex;align-items:flex-end;gap:6px}
.fs-twin img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.fs-dots{display:flex;align-items:center;gap:3px;height:24px;padding:0 10px;border-radius:14px;border-bottom-left-radius:4px;background:#fff;box-shadow:0 8px 18px -12px rgba(20,30,70,.45)}
.fs-dots i{width:5px;height:5px;border-radius:50%;background:var(--gray)}
@media (prefers-reduced-motion:no-preference){
  .find[open] .fs li{opacity:0;animation:rise .5s var(--ease) forwards}
  .find[open] .fs li:nth-child(2){animation-delay:.12s}
  .find[open] .fs li:nth-child(3){animation-delay:.24s}
  .find[open] .fs-nets img{animation:fs-pop .45s var(--ease) both}
  .find[open] .fs-nets img:nth-child(1){animation-delay:.35s}
  .find[open] .fs-nets img:nth-child(2){animation-delay:.45s}
  .find[open] .fs-nets img:nth-child(3){animation-delay:.55s}
  .find[open] .fs-bio i::after{animation:hw-ring .9s ease-out 1.1s 2}
  .find[open] .fs-me{animation:fs-pop .4s var(--ease) 1.3s both}
  .find[open] .fs-twin{animation:fs-pop .4s var(--ease) 1.8s both}
  .find[open] .fs-dots i{animation:hw-dot .9s ease-in-out infinite}
  .find[open] .fs-dots i:nth-child(2){animation-delay:.15s}
  .find[open] .fs-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes fs-pop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
.find :focus-visible{outline-color:var(--blue)}
@media (max-width:760px){
  .find{inset:auto 0 0 0;width:100%;max-width:100vw;max-height:90vh;border-radius:24px 24px 0 0}
  .find-in{padding:28px var(--g) max(26px,env(safe-area-inset-bottom))}
  .fs{grid-template-columns:1fr;gap:10px}
  .fs li{flex-direction:row;align-items:center;gap:14px}
  .fs-art{flex:none;width:132px;height:74px;border-radius:16px}
  .fs-cap{font-size:var(--fs-body)}
}

/* less motion asked: the same story, shorter and closer */
@media (prefers-reduced-motion:reduce){
  .cr-js .cr-tag,.cr-js .cr-b,.cr-js .cr-card{transform:translateY(4px)}
  .cr-js.is-in .cr-tag,.cr-js.is-in .cr-b,.cr-js.is-in .cr-card{transition:opacity .45s ease,transform .45s ease,visibility 0s}
  .cr-secret-img img{transition:filter .5s ease,transform .5s ease}
  .cr-veil svg{animation-duration:3.2s!important}
  .hw-js .hw2-card [data-a],.hw-js .hw2-card .hw-lines path,.hw-js .hw2-card .hw2-line,.hw-js .hw2-card .hw2-area{opacity:1;transform:none;stroke-dashoffset:0;animation:none!important}
  .hw-js .hw2-card .hw2-topics i{transform:scaleX(var(--w));animation:none!important}
  .hw-js .hw2-card .hw2-typing{display:none}
  .hw-js .hw2-card .hw2-sub-a{display:none}
  .hw-js .hw2-card .hw2-sub-b{transform:none;opacity:1;animation:none!important}
  .hw-js .hw2-card .hw2-locked img{filter:none;transform:none;animation:none!important}
  .hw-js .hw2-card .hw2-lock{opacity:0;animation:none!important}
}
@keyframes dock-stick{from{translate:0 0}to{translate:0 calc(var(--below,0px) - 6px)}}