/* gemelo.app landing v2 — art direction: apps/landing/DIRECTION.md */

:root{
  --bg:#F4EFE6; --bg-2:#ECE5D8; --surface:#FFFDF8; --surface-2:#F8F4EC;
  --ink:#111111; --ink-2:#3B3833; --muted:#76706A; --line:rgba(17,17,17,.08);
  --stage:#161616; --stage-2:#1F1F1F; --on-stage:#F2F2F2;
  --yellow:#F2C94C;
  --red:#D7263D;
  --cta-bg:#111111; --cta-fg:#FFFDF8;
  --shadow-1:0 1px 2px rgba(30,22,10,.06),0 8px 24px -10px rgba(30,22,10,.14);
  --shadow-2:0 2px 6px rgba(30,22,10,.06),0 28px 64px -20px rgba(30,22,10,.28);
  --shadow-up:0 -10px 30px -12px rgba(30,22,10,.18);
  --hi:inset 0 1px 0 rgba(255,255,255,.7);
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-bg:rgba(244,239,230,.8);
  --sticky-bg:rgba(244,239,230,.85);
  --step-hi:rgba(255,255,255,.35);
  --sans:"Geist","Geist Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#121212; --bg-2:#181818; --surface:#1E1E1E; --surface-2:#262626;
  --ink:#ECECEC; --ink-2:#C9C9C9; --muted:#9A9A9A; --line:rgba(255,255,255,.08);
  --stage:#0B0B0B; --stage-2:#171717; --cta-bg:#F2F2F2; --cta-fg:#111111;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-2:0 2px 6px rgba(0,0,0,.4),0 28px 64px -20px rgba(0,0,0,.75);
  --shadow-up:0 -10px 30px -12px rgba(0,0,0,.6);
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --nav-bg:rgba(18,18,18,.8); --sticky-bg:rgba(18,18,18,.85); --step-hi:rgba(255,255,255,.025);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#121212; --bg-2:#181818; --surface:#1E1E1E; --surface-2:#262626;
  --ink:#ECECEC; --ink-2:#C9C9C9; --muted:#9A9A9A; --line:rgba(255,255,255,.08);
  --stage:#0B0B0B; --stage-2:#171717; --cta-bg:#F2F2F2; --cta-fg:#111111;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6);
  --shadow-2:0 2px 6px rgba(0,0,0,.4),0 28px 64px -20px rgba(0,0,0,.75);
  --shadow-up:0 -10px 30px -12px rgba(0,0,0,.6);
  --hi:inset 0 1px 0 rgba(255,255,255,.06);
  --nav-bg:rgba(18,18,18,.8); --sticky-bg:rgba(18,18,18,.85); --step-hi:rgba(255,255,255,.025);
  color-scheme:dark;
}

/* metric-matched fallback so the swap to Geist does not shift layout */
/* size-adjust measured against Geist: 400 is 2.2% wider than Arial, 600 is 5.3% wider than Arial Bold */
@font-face{font-family:"Geist Fallback";font-weight:400 500;src:local("Arial"),local("Helvetica"),local("Arimo"),local("Liberation Sans");size-adjust:102%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Geist Fallback";font-weight:600 700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Arimo Bold"),local("Liberation Sans Bold");size-adjust:105%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cta-bg);color:var(--cta-fg);padding:10px 16px;border-radius:var(--r-pill);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.wrap{max-width:1248px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.02em;line-height:1.2}
.dim{color:var(--muted)}

section{padding:clamp(72px,10vw,136px) 0;position:relative}
.sec-bg{background:var(--bg)}
.sec-surface{background:var(--surface)}
.sec-surface .dim{color:var(--muted)}
.sec-bg .dim{color:var(--ink-2)}

.eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--ink-2);margin-bottom:18px;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
h1{font-size:clamp(44px,7vw,96px);letter-spacing:-.045em;line-height:.95}
h2{font-size:clamp(32px,4.2vw,56px);letter-spacing:-.035em;line-height:1}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.2}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--ink-2);max-width:34ch}
.sec-head{margin-bottom:clamp(40px,6vw,72px);max-width:720px}
.sec-head .lede{margin-top:18px}
.sec-head.center,.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

@media (min-width:1024px){
  .sec-head:not(.center){max-width:none;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .sec-head:not(.center)>*{grid-column:1}
  .sec-head:not(.center) .eyebrow{justify-self:start}
  .sec-head:not(.center) .lede{grid-column:2;grid-row:1/3;margin:0 0 6px;justify-self:end}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);text-decoration:none;font-weight:500;white-space:nowrap;border:0;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -10px rgba(0,0,0,.5)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--hi)}
.btn-ghost:hover{background:var(--surface)}
.btn-invert{background:#F2F2F2;color:#111}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.btn-xs{height:32px;padding:0 14px;font-size:13px}
.btn-block{width:100%;height:48px;font-size:16px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;height:64px;background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.nav-in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-weight:600;font-size:23px;letter-spacing:-.04em;text-decoration:none;line-height:1;padding:8px 0}
.wordmark .g{color:var(--red)}
.nav-links{display:flex;gap:4px}
.nav-links a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:10px 12px;border-radius:var(--r-pill);transition:background-color .18s var(--ease),color .18s}
.nav-links a:hover{background:var(--surface);color:var(--ink)}

/* ---------- chips, waves, phones, stages ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips-center{justify-content:center}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip-line{box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.chip-on{background:var(--ink);color:var(--bg)}

.wave{display:inline-flex;align-items:center;gap:2px;height:26px;color:var(--ink)}
.wave i{display:block;width:2px;height:calc(var(--h) * 100%);border-radius:2px;background:currentColor;transform-origin:50% 50%}
.js .wave i{animation:breathe 2.4s var(--ease) infinite;animation-delay:calc(var(--h) * -2.4s)}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.wave-lg{height:84px;gap:4px;width:100%;justify-content:space-between}
.wave-lg i{width:4px}

.play-dot{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg)}
.play-dot svg{width:14px;height:14px;margin-left:2px}

.stage{background:var(--stage);border-radius:var(--r-xl);box-shadow:var(--shadow-2);position:relative;color:var(--on-stage)}
.phone{position:relative;flex:none;width:300px;border-radius:40px;padding:10px;background:#050505;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(0,0,0,.7)}
/* the screen matches its media exactly (9:16 stills, 576x1088 hero, 360x680 poster) so nothing is cropped */
.phone .screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#0d0d0d;isolation:isolate}
.hero-phone .screen,.out-left .screen{aspect-ratio:576/1088}
.phone .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-md{width:280px;border-radius:38px}
.phone-md .screen{border-radius:28px}
.phone-lg{width:330px}
.phone-sm{width:150px;padding:6px;border-radius:24px}
.phone-sm .screen{border-radius:18px}
.phone-out{width:216px;border-radius:32px;padding:8px}
.phone-out .screen{border-radius:24px}

.stage-caption{margin-top:18px;font-size:14px;color:var(--ink-2)}

/* ---------- card surfaces ---------- */
.float,.card-xl,.window,.b-card,.t-q,.polaroid{background:var(--surface);box-shadow:var(--shadow-1),var(--hi)}
.sec-surface .card-xl,.sec-surface .b-card,.sec-surface .t-q{background:var(--surface-2)}

/* ---------- 2.1 hero ---------- */
.hero{padding-top:clamp(40px,6vw,88px);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0;align-items:center}
.hero-copy{grid-column:1/8;grid-row:1;padding-right:12px}
.hero-copy h1{max-width:11ch}
.hero-copy .lede{margin-top:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.micro{margin-top:14px;font-size:14px;color:var(--ink-2)}
.trust-row{grid-column:1/8;grid-row:2;align-self:start;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:40px}
.trust-row li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.trust-row svg{width:18px;height:18px;color:var(--ink)}
.hero-figure{grid-column:8/13;grid-row:1/3;position:relative}
.hero-stage{display:flex;justify-content:center;padding:64px 0 56px}
.sound-pill{position:absolute;left:12px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border:0;border-radius:var(--r-pill);background:rgba(17,17,17,.55);color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .18s}
.sound-pill:hover{background:rgba(17,17,17,.75)}
.sound-pill svg{width:15px;height:15px}
.sound-pill::after{content:"";position:absolute;inset:-6px}
.play-big{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);z-index:2;width:64px;height:64px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
.play-big svg{width:26px;height:26px;margin-left:3px}
.play-big[hidden]{display:none}

.float{position:absolute;z-index:3;border-radius:var(--r-md);color:var(--ink);box-shadow:var(--shadow-2),var(--hi)}
.card-a{top:-18px;right:calc(50% + 150px - 40px);width:268px;padding:14px 16px 14px;transform:rotate(-2deg)}
.composer{font-size:15px;line-height:1.4;min-height:42px;color:var(--ink)}
.js .typed{opacity:0;animation:typedFallback 0s 2.5s forwards}
.js .typed.go{animation:none;opacity:1}
@keyframes typedFallback{to{opacity:1}}
.caret{display:inline-block;width:2px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--ink);opacity:0}
.js .card-a.typing .caret{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.card-a .chips{margin-top:12px}
.js .card-a.typing .chips{opacity:0;transform:translateY(4px)}
.card-a .chips{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card-b{top:56%;right:calc(50% + 150px - 30px);display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:var(--r-pill)}
.card-b .wave{height:22px}
.card-b .label{color:var(--ink-2);white-space:nowrap}
.card-c{bottom:30px;right:calc(50% - 150px - 112px);width:176px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;transform:rotate(1.5deg)}
.approve-pill{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border-radius:var(--r-pill);background:var(--cta-bg);color:var(--cta-fg);font-weight:500;font-size:15px}
.card-c .small{font-size:11px;color:var(--ink-2)}
.hero-figure .stage-caption{text-align:center}

/* ---------- 2.2 looks ---------- */
.looks-grid{display:grid;grid-template-columns:240px 120px 1fr;align-items:center;gap:8px}
.polaroid{padding:12px 12px 14px;border-radius:var(--r-md);transform:rotate(-1.5deg)}
.polaroid img{border-radius:8px;aspect-ratio:4/5;width:100%;object-fit:cover}
.polaroid figcaption{margin-top:12px;text-align:center;color:var(--ink-2)}
.draw-arrow{width:120px;height:60px;color:var(--ink-2)}
.js .draw-arrow .draw{stroke-dasharray:130;stroke-dashoffset:130;transition:stroke-dashoffset .9s var(--ease) .2s}
.js .draw-arrow .draw-head{opacity:0;transition:opacity .3s var(--ease) 1s}
.js .in .draw-arrow .draw{stroke-dashoffset:0}
.js .in .draw-arrow .draw-head{opacity:1}
.fan-wrap{min-width:0}
/* --ov: largest overlap that keeps every head box uncovered, measured with tools/face.mjs (0.16 passes, 0.18 fails) */
.fan{--cw:176px;--ov:.15;--step:calc(var(--cw) * (1 - var(--ov)));position:relative;height:calc(var(--cw) * 1.7778 + 56px);margin:0 auto}
.fan li{position:absolute;bottom:28px;left:calc(50% - var(--cw) / 2 + var(--i) * var(--step));width:var(--cw);aspect-ratio:9/16;transform-origin:50% 100%;transform:rotate(calc(var(--i) * 4deg));transition:transform .28s var(--ease),box-shadow .28s var(--ease);border-radius:20px;box-shadow:var(--shadow-2);cursor:pointer;z-index:1}
.fan li:nth-child(2),.fan li:nth-child(4){z-index:2}
.fan li.is-top{z-index:3}
.fan li.lift{z-index:5;transform:translateY(-8px) rotate(calc(var(--i) * 4deg))}
.fan img{width:100%;height:100%;object-fit:cover;border-radius:20px}
.fan-wrap .chips{margin-top:10px}

/* ---------- 2.3 voice ---------- */
.split{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.script{align-self:center;margin:clamp(20px,3vw,40px);padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),var(--hi);display:flex;flex-direction:column;justify-content:center;gap:32px}
.split{background:var(--surface-2)}
.karaoke{display:flex;flex-direction:column;gap:18px}
.karaoke li{display:flex;gap:16px;align-items:baseline;font-size:17px;line-height:1.45;font-weight:500;color:var(--ink);transition:color .35s var(--ease),opacity .35s var(--ease)}
.karaoke .n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);transition:background-color .35s,color .35s}
.js .karaoke.run li{opacity:.4}
.js .karaoke.run li.on{opacity:1}
.js .karaoke li.on .n{background:var(--ink);color:var(--bg)}
.voice-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.voice-row .wave{gap:3px}
.voice-row .wave i{width:3px}
.voice-row .label{color:var(--ink-2)}
.split-stage{border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;padding:48px 24px}
#voice-phone{transition:box-shadow .2s var(--ease)}
#voice-phone.arrived{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 46px 4px rgba(255,255,255,.16),0 30px 60px -24px rgba(0,0,0,.7)}

/* ---------- 2.4 styles ---------- */
.style-tabs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 28px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.style-tabs [role=tab]{height:40px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s,box-shadow .18s}
.style-tabs [role=tab]:hover{color:var(--ink)}
.style-tabs [role=tab][aria-selected=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1),var(--hi)}
.style-stage-row{display:flex;justify-content:center}
.style-stage{display:flex;align-items:center;justify-content:center;padding:56px 72px;width:min(100%,760px)}
.frames .frame{opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.frames .frame.on{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.style-rail{position:absolute;top:50%;left:calc(50% + 165px + 36px);transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.style-rail button{display:block;width:54px;aspect-ratio:9/16;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;opacity:.5;background:#000;transition:opacity .18s,box-shadow .18s,transform .18s}
.style-rail button:hover{opacity:.85}
.style-rail button.on{opacity:1;box-shadow:0 0 0 2px var(--on-stage)}
.style-rail img{width:100%;height:100%;object-fit:cover}
.mid-cta{display:flex;justify-content:center;margin-top:48px}

/* ---------- 2.5 agent ---------- */
.agent-grid{display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:56px;align-items:center}
.window{border-radius:28px;box-shadow:var(--shadow-2),var(--hi);overflow:hidden}
.window-bar{display:flex;gap:6px;padding:16px 20px 0}
.window-bar i{width:10px;height:10px;border-radius:50%;background:var(--bg-2)}
.thread{display:flex;flex-direction:column;gap:18px;padding:22px clamp(16px,3vw,32px) 32px}
.t-item{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .thread.pending .t-item{opacity:0;transform:translateY(8px)}
.js .thread .t-item.shown{opacity:1;transform:none}
.t-user{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bubble{background:var(--bg-2);color:var(--ink);padding:12px 16px;border-radius:18px 18px 6px 18px;max-width:80%}
.link-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.link-chip svg{width:14px;height:14px}
.t-maya{display:flex;gap:12px;align-items:flex-start}
.avatar{flex:none;width:24px;height:24px;border-radius:50%;background:#111;color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;margin-top:10px}
.t-card{flex:1;min-width:0;background:var(--surface-2);border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 1px var(--line)}
.t-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.t-head svg{width:16px;height:16px}
.t-line{color:var(--ink-2);font-size:15px}
.voice-row.compact{margin-top:4px}
.voice-row.compact .wave{height:22px;max-width:320px}
.approval{flex-direction:row;gap:16px;align-items:stretch}
.approval .thumb{flex:none;width:72px;height:128px;border-radius:10px;object-fit:cover;background:#111}
.approval-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.t-title{font-weight:600;font-size:16px}
.price-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--ink-2)}
.price-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:rgba(242,201,76,.22);color:var(--ink)}
.approval-actions{display:flex;gap:8px}
.foot-note{font-size:13px;color:var(--ink-2)}
.facts{display:flex;flex-direction:column;gap:22px}
.facts li{display:flex;align-items:center;gap:14px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.tile{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--surface-2);display:grid;place-items:center;color:var(--ink);box-shadow:var(--hi)}
.sec-bg .tile{background:var(--surface)}
.tile svg{width:20px;height:20px}

/* ---------- 2.6 studios ---------- */
.bento{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"video photo" "video voice" "library library";gap:20px}
.b-card{border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:6px;transition:transform .18s var(--ease),box-shadow .18s var(--ease);overflow:hidden}
.b-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2),var(--hi)}
.b-card>p{color:var(--ink-2)}
.b-video{grid-area:video}
.b-photo{grid-area:photo}
.b-voice{grid-area:voice}
.b-library{grid-area:library}
.mini-editor{margin-top:22px;flex:1;display:flex;flex-direction:column;gap:18px}
.steps{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--ink-2)}
.steps li{display:flex;align-items:center;gap:6px}
.steps li+li::before{content:"";width:14px;height:1px;background:var(--muted);opacity:.6;margin-right:4px}
.steps svg{width:15px;height:15px;padding:2px;border-radius:50%;background:var(--ink);color:var(--bg)}
.steps .open i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.steps .open{color:var(--ink);font-weight:500}
.mini-stage{flex:1;min-height:300px;border-radius:var(--r-md);background:var(--stage);display:flex;align-items:center;justify-content:center;padding:24px}
.mini-stage .phone-sm{width:min(236px,62%)}
.seg{display:flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);width:max-content;max-width:100%}
.seg span{padding:8px 12px;border-radius:var(--r-pill);color:var(--ink-2)}
.seg .on{background:var(--ink);color:var(--bg)}
.looks3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 14px}
.looks3 img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:12px}
.big-wave{margin:22px 0 16px;padding:18px 20px;border-radius:var(--r-md);background:var(--surface)}
.big-wave .wave{color:var(--ink)}
.voice-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lib-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:20px}
.lib-grid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#111}

/* ---------- 2.7 output ---------- */
.output-stage{height:560px;overflow:hidden}
.out-phones{position:absolute;left:50%;top:50%;width:744px;height:440px;transform:translate(-50%,-50%)}
.out-phones .phone{position:absolute;top:0}
.out-left{left:0;transform:translateY(34px) rotate(-4deg)}
.out-centre{left:264px;transform:translateY(-8px)}
.out-right{left:528px;transform:translateY(34px) rotate(4deg)}
.callout{position:absolute;display:flex;align-items:center;gap:10px;color:var(--on-stage)}
.callout .mono,.loupe-wrap .mono{white-space:nowrap;color:var(--on-stage)}
.leader{display:block;height:1px;background:var(--muted)}
.co-vertical{right:calc(50% + 372px + 6px);top:calc(50% - 120px)}
.co-vertical .leader{width:40px}
.co-captions{right:calc(50% + 372px - 74px);top:calc(50% + 88px)}
.co-captions .leader{width:120px}
.co-captions .mono{padding:4px 0}
.loupe-wrap{position:absolute;left:calc(50% + 372px + 16px);top:calc(50% - 214px);display:flex;flex-direction:column;align-items:center;gap:12px}
.loupe{width:120px;height:120px;border-radius:50%;background:#fff url(/media/style-justme.webp) no-repeat;background-size:400px auto;background-position:-262px -2px;box-shadow:0 0 0 4px rgba(255,255,255,.12),0 20px 40px -12px rgba(0,0,0,.7)}
.leader-loupe{position:absolute;right:calc(50% + 60px);top:60px;width:44px}
.out-list{display:none}

/* ---------- 2.8 trust ---------- */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.t-q{border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;gap:12px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.t-q:hover{transform:translateY(-3px);box-shadow:var(--shadow-2),var(--hi)}
.t-q .tile{margin-bottom:8px;background:var(--bg-2)}
.t-q p{color:var(--ink-2)}

/* ---------- 2.9 faq ---------- */
.faq-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:56px;align-items:start}
.faq-list details{box-shadow:0 1px 0 var(--line),0 2px 0 var(--step-hi)}
.faq-list details:first-child{box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line),0 2px 0 var(--step-hi)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px;padding:18px 4px;cursor:pointer;font-size:18px;font-weight:500;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-1);transition:transform .28s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;background:var(--ink);border-radius:2px}
.plus::after{transform:rotate(90deg)}
details[open] .plus{transform:rotate(45deg)}
.faq-list details p{padding:0 48px 22px 4px;color:var(--ink-2);max-width:60ch}

/* ---------- 2.10 final ---------- */
.final{padding-top:0;padding-bottom:clamp(48px,6vw,88px)}
.final-band{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--stage);color:var(--on-stage);min-height:420px;display:grid;grid-template-columns:1fr 1fr;align-items:center;box-shadow:var(--shadow-2)}
.final-copy{padding:clamp(40px,6vw,80px);position:relative;z-index:2}
.final-copy h2{color:#F2F2F2}
.final-copy .lede{color:#C9C9C9;margin:16px 0 32px}
.final-fan{--cw:190px;z-index:3;position:absolute;right:clamp(24px,7vw,96px);bottom:0;width:calc(var(--cw) * 2.7);height:100%}
.final-fan li{position:absolute;bottom:calc(var(--cw) * -.72);left:calc(50% - var(--cw) / 2 + var(--i) * var(--cw) * .9);width:var(--cw);aspect-ratio:9/16;transform-origin:50% 100%;transform:rotate(calc(var(--i) * 5deg));border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);z-index:1}
.final-fan li.is-top{z-index:2;bottom:calc(var(--cw) * -.6)}
.final-fan img{width:100%;height:100%;object-fit:cover;border-radius:20px}

/* ---------- 2.11 footer ---------- */
.footer{background:var(--bg);padding:40px 0 48px}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.foot-meta{display:flex;gap:6px 20px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.foot-links{display:flex;align-items:center;gap:4px;font-size:14px}
.foot-links a{color:var(--ink-2);text-decoration:none;padding:12px 10px}
.foot-links a:hover{color:var(--ink)}
.theme-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.theme-btn:hover{background:var(--surface);color:var(--ink)}
.theme-btn svg{width:18px;height:18px}

/* ---------- 2.12 sticky mobile cta ---------- */
.sticky-cta{display:none}

/* ---------- entrance ---------- */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .52s var(--ease),transform .52s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* ================= responsive ================= */
@media (max-width:1200px){
  .hero-copy,.trust-row{grid-column:1/7}
  .hero-figure{grid-column:7/13}
  .card-a{right:auto;left:12px;top:-22px;width:232px}
  .card-b .label{display:none}
  .card-c{right:12px}
  .looks-grid{grid-template-columns:200px 90px 1fr}
  .draw-arrow{width:90px}
  .fan{--cw:140px}
  .final-fan{--cw:160px}
  .co-vertical,.co-captions,.loupe-wrap{display:none}
  .out-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:22px}
  .out-list li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}
  .out-list svg{width:18px;height:18px;color:var(--ink)}
}
@media (max-width:1100px){
  .agent-grid{grid-template-columns:1fr;gap:32px}
  .facts{flex-direction:row;flex-wrap:wrap;gap:16px 32px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  .looks-grid{grid-template-columns:1fr;justify-items:center;gap:4px}
  .polaroid{width:220px}
  .draw-arrow{transform:rotate(90deg);width:70px;height:60px;margin:4px 0}
  .fan-wrap{width:100%}
  .fan{--cw:150px}
  .output-stage{height:auto;padding:48px 24px;display:flex;justify-content:center}
  .out-phones{position:static;transform:none;width:auto;height:auto}
  .out-phones .phone{position:relative}
  .out-left,.out-right,.loupe-wrap,.callout{display:none}
  .out-centre{transform:none;left:auto}
}
@media (max-width:900px){
  .nav-links{display:none}
  .hero{padding-top:28px}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy h1{max-width:none}
  .hero .eyebrow{align-self:flex-start}
  .hero-copy .lede{margin-top:18px}
  .cta-row{margin-top:26px}
  .cta-row .btn-primary{width:100%}
  .cta-row .btn-ghost{display:none}
  .hero-figure{margin-top:36px}
  .trust-row{margin-top:28px;justify-content:center;gap:10px 18px}
  .micro{text-align:center}
  .hero-stage{padding:60px 0 56px}
  .phone.hero-phone{width:248px;border-radius:34px;padding:8px}
  .hero-phone .screen{border-radius:26px}
  .card-a{top:8px;left:10px;width:200px;padding:10px 12px}
  .composer{font-size:13px;min-height:36px}
  .card-a .chips{margin-top:8px;gap:4px}
  .card-a .chip{height:22px;padding:0 8px;font-size:11px}
  .card-b{display:none}
  .card-c{right:10px;bottom:10px;width:150px;padding:10px}
  .approve-pill{height:36px;font-size:14px}

  .looks-grid{grid-template-columns:1fr;justify-items:center;gap:4px}
  .polaroid{width:220px}
  .draw-arrow{transform:rotate(90deg);width:70px;height:60px;margin:4px 0}
  .fan-wrap{width:100%}
  .fan{--cw:160px;display:flex;gap:12px;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:8px var(--gutter) 24px;scrollbar-width:none;overscroll-behavior-x:contain}
  .fan::-webkit-scrollbar{display:none}
  .fan li{position:relative;left:auto;bottom:auto;flex:none;transform:none;scroll-snap-align:center;box-shadow:var(--shadow-1)}
  .fan li.lift{transform:translateY(-8px)}

  .split{grid-template-columns:1fr}
  .split-stage{padding:40px 24px}

  .style-tabs{justify-content:flex-start;overflow-x:auto;width:auto;margin:0 calc(var(--gutter) * -1) 22px;padding:4px var(--gutter);border-radius:0;background:transparent;box-shadow:none;scrollbar-width:none}
  .style-tabs::-webkit-scrollbar{display:none}
  .style-tabs [role=tab]{flex:none;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);height:44px}
  .style-tabs [role=tab][aria-selected=true]{background:var(--ink);color:var(--bg);box-shadow:none}
  .style-stage{padding:36px 24px;width:100%}
  .style-rail{display:none}
  .phone-lg{width:248px;border-radius:34px;padding:8px}
  .phone-lg .screen{border-radius:26px}

  .bento{grid-template-columns:1fr;grid-template-areas:"video" "photo" "voice" "library"}
  .faq-wrap{grid-template-columns:1fr;gap:24px}

  .final-band{grid-template-columns:1fr;min-height:0;text-align:left}
  .final-fan{--cw:110px;position:relative;right:auto;order:-1;width:100%;height:200px;margin-top:8px;overflow:hidden}
  .final-fan li{bottom:auto;top:28px}
  .final-fan li.is-top{bottom:auto;top:12px}
  .final-copy{padding:8px 28px 40px}

  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 16px calc(8px + env(safe-area-inset-bottom));min-height:calc(64px + env(safe-area-inset-bottom));background:var(--sticky-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--shadow-up);transform:translateY(110%);transition:transform .3s var(--ease)}
  .sticky-cta.show{transform:none}
}
@media (max-width:768px){
  .footer{padding-bottom:calc(48px + 64px + env(safe-area-inset-bottom))}
}
@media (min-width:769px){
  .sticky-cta{display:none!important}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .lib-grid{grid-template-columns:repeat(3,1fr)}
  .trust-grid{grid-template-columns:1fr}
  .b-card{padding:22px}
  .t-q{padding:24px 20px}
  .window{border-radius:24px}
  .approval{gap:12px}
  .facts{flex-direction:column;gap:14px}
  .faq-list summary{font-size:17px}
  .faq-list details p{padding-right:8px}
  .foot-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .card-a{width:176px}
  .hero-copy h1,h1{font-size:44px}
  .trust-row{gap:8px 14px}
  .trust-row li{font-size:13px}
  .seg span{padding:8px 9px}
}

/* the narrowest phones: the prompt card sits above the phone instead of over it */
@media (max-width:359px){
  .hero-stage{padding-top:124px}
  .card-a{left:10px;right:10px;width:auto;top:10px}
  .card-c{width:126px;padding:8px}
  .card-c .small{font-size:10px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .typed{opacity:1}
  .js .thread.pending .t-item{opacity:1;transform:none}
  .js .karaoke.run li{opacity:1}
  .js .draw-arrow .draw{stroke-dashoffset:0}
  .js .draw-arrow .draw-head{opacity:1}
  .js .card-a.typing .chips{opacity:1;transform:none}
  #voice-phone.arrived{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(0,0,0,.7)}
}