/* Retakio homepage: "Two takes". Tokens first, then page markup only.
   The engine's [data-sc-*] selectors are never restyled here. */
:root{
  --sc-canvas:#EDF0F3; --sc-surface:#FFFFFF; --sc-ink:#151A21; --sc-ink-soft:#4C5664;
  --sc-accent:#C9351C; --sc-accent-ink:#FFFFFF;
  --sc-font-display:"Archivo",system-ui,sans-serif; --sc-font-text:"Geist",system-ui,sans-serif;
  --sc-shadow-color:215 30% 18%;
  --pen:#D9381E; --paper-dot:#BAC3CE; --line:#D6DCE3; --app-line:#EEF1F4;
  --bar-h:68px;
}
body{background:var(--sc-canvas)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--sc-font-display);color:var(--sc-ink)}
.display{font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;text-wrap:balance}
.lede{font-size:var(--sc-t-lg);line-height:1.45;color:var(--sc-ink-soft);max-width:34rem;margin:0;text-wrap:pretty}
.step{display:inline-flex;align-items:center;gap:10px;font:600 var(--sc-t-sm)/1 var(--sc-font-text);color:var(--sc-accent);margin-bottom:var(--sc-4)}
.step b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;font:700 13px/1 var(--sc-font-display)}

/* ------------------------------------------------------------------ bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--bar-h);display:flex;align-items:center;gap:var(--sc-5);padding:0 clamp(16px,3.4vw,44px);
  background:color-mix(in oklab,var(--sc-canvas) 84%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.bar.is-scrolled{border-bottom-color:var(--line)}
.mark{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--sc-font-display);letter-spacing:-.02em;text-decoration:none;color:var(--sc-ink)}
.mark svg{width:26px;height:26px;flex:none}
.driver{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:auto;font:600 13px/1 var(--sc-font-text);color:var(--sc-ink);background:var(--sc-surface);padding:8px 12px 8px 10px;border-radius:999px;box-shadow:var(--sc-e1)}
.driver svg{width:16px;height:16px;transition:transform .3s var(--sc-ease-out)}
.driver .dot{width:7px;height:7px;border-radius:50%;background:var(--pen)}
.driver[data-who="ai"] .dot{background:var(--sc-ink)}
.driver[data-who="video"] .dot{background:#1E8A52}
.driver span{min-width:7.6em}
.links{display:flex;gap:var(--sc-5);font:500 14px/1 var(--sc-font-text)}
.links a{text-decoration:none;color:var(--sc-ink-soft)}
.links a:hover{color:var(--sc-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;font:600 15px/1 var(--sc-font-text);padding:14px 20px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform .14s var(--sc-ease-out),background-color .16s}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--sc-ink);color:var(--sc-canvas);padding:11px 16px;font-size:14px}
.btn--ink:hover{background:#2A313B}
.btn--pen{background:var(--sc-accent);color:var(--sc-accent-ink)}
.btn--pen:hover{background:#B02D17}
.btn[disabled]{opacity:.6;cursor:default}

/* ---------------------------------------------------------------- forms */
.join{display:flex;gap:8px;max-width:30rem;background:var(--sc-surface);padding:6px;border-radius:999px;box-shadow:var(--sc-edge),var(--sc-e2)}
.join input[type=email]{flex:1;min-width:0;border:0;background:transparent;font:500 16px var(--sc-font-text);padding:0 14px;color:var(--sc-ink)}
.join input[type=email]::placeholder{color:#7A8491}
.join input[type=email]:focus{outline:none}
.join:focus-within{box-shadow:var(--sc-edge),var(--sc-e2),0 0 0 2px var(--sc-accent)}
.form-msg{font:500 14px/1.4 var(--sc-font-text);margin:10px 0 0 8px;min-height:1.4em;color:var(--sc-ink-soft)}
.form-msg.ok{color:#1A7A47}
.form-msg.err{color:var(--sc-accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ------------------------------------------------- the sample app (shared) */
.fit{position:relative;width:640px;height:420px;flex:none;transform:scale(var(--k,1));transform-origin:var(--fo,center center)}
.win{position:absolute;inset:0;background:#FFFFFF;border-radius:14px;overflow:hidden;
  box-shadow:var(--sc-edge),0 2px 4px hsl(var(--sc-shadow-color)/.06),0 30px 60px -24px hsl(var(--sc-shadow-color)/.38);font-family:var(--sc-font-text);color:#1F2630}
.zoom{position:absolute;inset:0;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(var(--z,1));will-change:transform}
.chrome{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--app-line);background:#F8FAFB}
.chrome i{width:10px;height:10px;border-radius:50%;background:#DCE1E7}
.url{margin-left:14px;flex:1;max-width:300px;height:22px;border-radius:6px;background:#EEF1F4;font:500 11.5px/22px var(--sc-font-text);color:#5F6975;padding-left:10px}
.app{display:grid;grid-template-columns:150px 1fr;height:382px}
.side{background:#F6F8FA;border-right:1px solid var(--app-line);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.side .logo{font:700 13px var(--sc-font-display);padding:0 8px 14px;color:#2B323B}
.nav{display:flex;align-items:center;gap:9px;font:500 12.5px var(--sc-font-text);color:#545E6A;padding:7px 8px;border-radius:7px;transition:background-color .2s}
.nav b{width:13px;height:13px;border-radius:4px;border:1.5px solid currentColor;opacity:.7}
.nav.on{background:#E3E9EF;color:#151A21}
.main{position:relative;padding:18px 20px}
.view{position:absolute;inset:18px 20px;transition:opacity .25s}
.head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.head h3{margin:0;font:700 17px var(--sc-font-display);letter-spacing:-.01em;color:#151A21}
.abtn{font:600 12px var(--sc-font-text);background:#151A21;color:#fff;padding:8px 12px;border-radius:8px;transition:transform .12s,background-color .2s}
.abtn.press{transform:scale(.93);background:#38414D}
.abtn.done{background:#1E8A52}
.app table{width:100%;border-collapse:collapse;font-size:12px}
.app th{font-weight:500;color:#6E7884;text-align:left;padding:7px 6px;border-bottom:1px solid var(--app-line)}
.app td{padding:9px 6px;border-bottom:1px solid #F1F3F6;color:#2B323B}
.app td.n,.app th.n{text-align:right;font-variant-numeric:tabular-nums}
.chip{font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:999px;background:#E6F4EC;color:#1A7343}
.chip.due{background:#FCEEE3;color:#9A4A0C}
.fld{margin-bottom:12px}
.fld label{display:block;font:500 11px var(--sc-font-text);color:#6E7884;margin-bottom:5px}
.inp{height:34px;border:1px solid #DCE1E7;border-radius:8px;display:flex;align-items:center;padding:0 10px;font:500 12.5px var(--sc-font-text);color:#1F2630;background:#fff;position:relative;transition:border-color .2s,box-shadow .2s}
.inp.focus{border-color:#151A21;box-shadow:0 0 0 3px #E3E9EF}
.inp .ph{color:#9AA3AE}
.inp .caret{display:inline-block;width:1.5px;height:14px;background:#151A21;margin-left:1px;opacity:0}
.inp.focus .caret{opacity:1}
.row2{display:grid;grid-template-columns:1fr 110px;gap:10px}
.menu{position:absolute;left:-1px;right:-1px;top:36px;background:#fff;border:1px solid #DCE1E7;border-radius:8px;box-shadow:0 10px 24px -10px rgba(21,26,33,.3);padding:4px;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s;z-index:3}
.menu.open{opacity:1;transform:none}
.menu div{padding:7px 8px;border-radius:6px;font-size:12px}
.menu div.hl{background:#EEF2F6}
.tot{display:flex;justify-content:space-between;border-top:1px solid var(--app-line);padding-top:10px;margin:2px 0 14px;font:600 13px var(--sc-font-text);font-variant-numeric:tabular-nums}
.toast{position:absolute;right:0;bottom:0;background:#151A21;color:#fff;font:500 12px var(--sc-font-text);padding:9px 12px;border-radius:8px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;display:flex;gap:7px;align-items:center}
.toast.show{opacity:1;transform:none}
svg.trail{position:absolute;left:0;top:0;width:640px;height:420px;overflow:visible;pointer-events:none}
.rough{fill:none;stroke:var(--pen);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.clean{fill:none;stroke:#151A21;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7}
.cursor{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;will-change:transform}
.cursor .ring{transform-origin:5px 3px;opacity:0;transition:opacity .15s}
.cursor.click .ring{opacity:1}
.cap{position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);opacity:0;background:rgba(21,26,33,.92);color:#fff;font:500 13px/1.35 var(--sc-font-text);padding:9px 14px;border-radius:9px;white-space:nowrap;display:flex;align-items:center;gap:9px;max-width:92%;z-index:5}
.cap svg{width:16px;height:16px;flex:none}
.cap.show{opacity:1;transform:translate(-50%,0);transition:opacity .25s,transform .25s var(--sc-ease-out)}
.sample{position:absolute;left:12px;top:-30px;font:600 11px/1 var(--sc-font-text);color:var(--sc-ink-soft);letter-spacing:.01em}

/* ----------------------------------------------------------------- hero */
.hero .stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(16px,3vw,48px);padding:calc(var(--bar-h) + 20px) clamp(16px,4vw,56px) 36px}
.far{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 76% 55%,#DCE2E9 0%,transparent 70%),radial-gradient(1.2px 1.2px at 1px 1px,var(--paper-dot) 99%,transparent) 0 0/22px 22px;
  transform:translate3d(0,calc(var(--hp,0)*-40px),0) scale(calc(1 + var(--hp,0)*.04))}
.hero .copy{position:relative;z-index:3;max-width:35rem}
.hero h1{font-size:clamp(2.5rem,5.1vw,4.6rem);margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--sc-accent)}
.hero .lede{margin-bottom:28px}
.fine{font-size:13.5px;color:var(--sc-ink-soft);margin:12px 0 0 8px;max-width:30rem}
.scene{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.hero .frame{position:relative;width:640px;height:480px;flex:none;transform:scale(var(--k,1))}
.hero .mid{position:absolute;left:0;top:50px;width:640px;height:420px;transform:translate3d(0,calc(var(--hp,0)*-60px),0)}
.near{position:absolute;left:-84px;top:-6px;width:300px;z-index:4;transform:translate3d(0,calc(var(--hp,0)*-120px),0)}
.note{background:var(--sc-surface);border-radius:14px 14px 14px 4px;padding:12px 14px 13px;box-shadow:var(--sc-edge),0 18px 40px -16px hsl(var(--sc-shadow-color)/.45);font:500 13.5px/1.5 var(--sc-font-text);color:var(--sc-ink)}
.who{display:flex;align-items:center;gap:8px;font:600 11.5px var(--sc-font-text);color:var(--pen);margin-bottom:5px}
.who svg{width:14px;height:14px}
.wave{display:inline-flex;gap:2px;align-items:center;height:12px;margin-left:auto}
.wave i{width:2px;background:currentColor;border-radius:1px;opacity:.75}
.f{margin-right:calc(var(--fo,1) * .28em);display:inline-block;color:#7D8692;text-decoration:line-through;text-decoration-color:var(--pen);text-decoration-thickness:1.5px;max-width:var(--fw,20em);overflow:hidden;white-space:nowrap;vertical-align:bottom;opacity:var(--fo,1)}
.f--end{margin-right:0}
.takes{position:absolute;right:0;top:0;display:flex;gap:6px;font:600 11.5px/1 var(--sc-font-text);z-index:4}
.takes span{padding:8px 11px;border-radius:999px;background:var(--sc-surface);color:var(--sc-ink-soft);box-shadow:0 6px 16px -10px hsl(var(--sc-shadow-color)/.5);transition:background-color .2s,color .2s}
.takes span.on{background:var(--sc-ink);color:#fff}

/* -------------------------------------------------------------- 2. tell */
.tell{padding-block:clamp(5rem,10vw,9rem) clamp(4rem,8vw,7rem)}
.tell .sc-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.tell h2,.show-lead h2,.let h2,.get h2,.uses h2,.faq h2{font-size:var(--sc-t-2xl)}
.tell .lede{margin-top:var(--sc-4)}
.prompt{background:var(--sc-surface);border-radius:20px;padding:20px;box-shadow:var(--sc-edge),var(--sc-e3)}
.prompt .q{min-height:7.4em;font:500 clamp(1rem,1.3vw,1.15rem)/1.55 var(--sc-font-text);color:var(--sc-ink);background:#F4F6F8;border-radius:12px;padding:16px 18px}
.prompt .q .caret{display:inline-block;width:2px;height:1.05em;background:var(--sc-accent);vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.opts span{font:500 13px/1 var(--sc-font-text);padding:9px 12px;border-radius:999px;background:#F1F4F7;color:var(--sc-ink-soft)}
.opts span b{color:var(--sc-ink);font-weight:600}
.prompt .go{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 13px var(--sc-font-text);color:var(--sc-ink-soft)}
.rec-btn{display:inline-flex;align-items:center;gap:8px;background:var(--sc-ink);color:#fff;font:600 14px/1 var(--sc-font-text);padding:12px 16px;border-radius:999px}
.rec-btn i{width:9px;height:9px;border-radius:50%;background:var(--pen)}

/* -------------------------------------------------------------- 3. show */
.show .rail{gap:clamp(16px,2vw,28px);padding:0 clamp(16px,4vw,56px);align-items:center;height:100%}
.show-lead{flex:0 0 min(30rem,82vw);padding-right:clamp(8px,3vw,40px)}
.show-lead .lede{margin-top:var(--sc-4)}
.moment{flex:0 0 clamp(17rem,30vw,26rem);background:var(--sc-surface);border-radius:20px;padding:14px;box-shadow:var(--sc-edge),var(--sc-e2)}
.moment .shot{position:relative;height:clamp(150px,22vh,230px);border-radius:12px;background:#F4F6F8;overflow:hidden}
.moment .shot .sb{position:absolute;left:0;top:0;bottom:0;width:26%;background:#E8EDF2}
.moment .shot .ln{position:absolute;left:32%;right:8%;height:8px;border-radius:4px;background:#E0E6EC}
.moment .shot .bt{position:absolute;right:8%;top:14px;width:26%;height:16px;border-radius:5px;background:#151A21}
.moment .shot .ld{position:absolute;inset:0;display:grid;place-items:center}
.moment .shot .ld i{width:26px;height:26px;border-radius:50%;border:3px solid #CFD6DE;border-top-color:#151A21}
.moment .shot svg{position:absolute;inset:0;width:100%;height:100%}
.moment .meta{display:flex;align-items:center;justify-content:space-between;margin:12px 2px 6px;font:600 12.5px var(--sc-font-text);color:var(--sc-ink-soft);font-variant-numeric:tabular-nums}
.moment .tag{color:var(--pen);font-weight:600}
.moment blockquote{margin:0 2px;font:500 15px/1.45 var(--sc-font-text);color:var(--sc-ink)}
.moment blockquote s{color:#7D8692;text-decoration-color:var(--pen)}
.show-note{flex:0 0 min(22rem,80vw);font:600 var(--sc-t-xl)/1.15 var(--sc-font-display);letter-spacing:-.02em;color:var(--sc-ink);padding:0 clamp(16px,4vw,56px) 0 clamp(8px,2vw,24px)}

/* -------------------------------------------------------------- 4. let go */
.let{min-height:92vh;display:flex;align-items:center}
.let .sc-wrap{max-width:60rem}
.let h2{font-size:var(--sc-t-3xl)}
.let p{margin-top:var(--sc-4)}

/* ----------------------------------------------------------- 5. takeover */
.take .stage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(20px,4vw,56px);padding:calc(var(--bar-h) + 18px) clamp(16px,4vw,56px) 24px}
.take .ttl{grid-column:1/-1;display:flex;align-items:baseline;gap:var(--sc-5);flex-wrap:wrap;margin-bottom:clamp(8px,2vh,20px)}
.take .ttl h2{font-size:var(--sc-t-xl);letter-spacing:-.02em;margin:0}
.take .ttl .step{margin:0}
.shots{list-style:none;margin:0;padding:0;align-self:center;display:flex;flex-direction:column;gap:6px}
.shot-row{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 14px;border-radius:14px;transition:background-color .25s,box-shadow .25s}
.shot-row .st{width:24px;height:24px;border-radius:50%;border:1.5px solid #B9C2CD;display:grid;place-items:center;margin-top:2px;transition:background-color .2s,border-color .2s}
.shot-row .st svg{width:12px;height:12px;opacity:0}
.shot-row h3{font:600 15px/1.3 var(--sc-font-text);margin:0;color:var(--sc-ink-soft);transition:color .2s}
.shot-row .said{display:none;margin-top:6px;font:500 13.5px/1.45 var(--sc-font-text);color:#7D8692}
.shot-row .said s{text-decoration-color:var(--pen)}
.shot-row .line{display:none;margin-top:4px;font:500 14px/1.45 var(--sc-font-text);color:var(--sc-ink)}
.shot-row .added{display:none;margin-left:8px;font:600 11px/1 var(--sc-font-text);color:#fff;background:var(--pen);padding:4px 7px;border-radius:999px;vertical-align:2px}
.shot-row.is-live{background:var(--sc-surface);box-shadow:var(--sc-edge),var(--sc-e2)}
.shot-row.is-live .st{border-color:var(--pen);background:var(--pen);animation:pulse 1.1s ease-in-out infinite}
.shot-row.is-live h3{color:var(--sc-ink)}
.shot-row.is-live .said,.shot-row.is-live .line{display:block}
.shot-row.is-done .st{background:var(--sc-ink);border-color:var(--sc-ink)}
.shot-row.is-done .st svg{opacity:1}
.shot-row.is-done h3{color:var(--sc-ink)}
.shot-row.has-added .added{display:inline-block}
@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in oklab,var(--pen) 22%,transparent)}}
.take .scene{align-items:center}
.take .done-line{grid-column:2;justify-self:center;margin-top:8px;font:600 14px/1.3 var(--sc-font-text);color:var(--sc-ink);opacity:0;transition:opacity .3s}
.take .done-line.show{opacity:1}

/* ---------------------------------------------------------------- 6. get */
.get{padding-block:clamp(5rem,9vw,8rem)}
.get .sc-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.player{background:#14181E;border-radius:22px;padding:14px;box-shadow:var(--sc-e3)}
.screen{position:relative;aspect-ratio:16/10.5;border-radius:12px;overflow:hidden;background:#F4F6F8;display:flex;align-items:center;justify-content:center}
.screen .fit{--fo:center center}
.ctrls{display:flex;align-items:center;gap:12px;padding:14px 4px 4px;color:#C9CED6;font:500 12.5px var(--sc-font-text);font-variant-numeric:tabular-nums}
.play{width:34px;height:34px;border-radius:50%;border:0;background:#F1F3F6;display:grid;place-items:center;cursor:pointer;flex:none}
.play svg{width:12px;height:12px}
.track{position:relative;flex:1;height:5px;border-radius:3px;background:#323843}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#F1F3F6;width:0}
.track b{position:absolute;top:-3px;width:2px;height:11px;background:#5C6370;border-radius:1px}
.voices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 0 4px;padding:12px 0 2px}
.voices span{font:500 12.5px var(--sc-font-text);color:#AEB4BE;margin-right:4px;align-self:center}
.voices button{font:600 12.5px/1 var(--sc-font-text);border:1px solid #3A414C;background:transparent;color:#E3E6EA;padding:8px 11px;border-radius:999px;cursor:pointer;transition:background-color .15s,border-color .15s}
.voices button[aria-pressed=true]{background:#F1F3F6;color:#14181E;border-color:#F1F3F6}
.voices button:hover{border-color:#8B93A0}
.gets{list-style:none;padding:0;margin:var(--sc-5) 0 0}
.gets li{padding:14px 0;border-top:1px solid var(--line);font:500 var(--sc-t-base)/1.45 var(--sc-font-text);color:var(--sc-ink);display:grid;grid-template-columns:22px 1fr;gap:12px}
.gets li:last-child{border-bottom:1px solid var(--line)}
.gets svg{width:18px;height:18px;margin-top:3px;color:var(--sc-accent)}
.gets small{display:block;color:var(--sc-ink-soft);font-size:14px;font-weight:400}

/* ------------------------------------------------------- 7. uses + faq */
.trust{padding-block:clamp(4rem,8vw,7rem) clamp(5rem,9vw,8rem);background:var(--sc-surface)}
.trust .sc-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem)}
.uselist{list-style:none;margin:var(--sc-5) 0 0;padding:0}
.uselist li{border-top:1px solid var(--line)}
.uselist li:last-child{border-bottom:1px solid var(--line)}
.uselist a,.uselist div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px;text-decoration:none;color:var(--sc-ink);font:600 var(--sc-t-base)/1.3 var(--sc-font-text)}
.uselist small{display:block;font:400 14px/1.4 var(--sc-font-text);color:var(--sc-ink-soft);margin-top:3px}
.uselist a svg{width:18px;height:18px;flex:none;transition:transform .16s var(--sc-ease-out)}
.uselist a:hover svg{transform:translateX(3px)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;font:600 var(--sc-t-base)/1.35 var(--sc-font-text);color:var(--sc-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;margin-top:2px;transition:transform .2s var(--sc-ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--sc-ink-soft);max-width:60ch}
.faq h2{margin-bottom:var(--sc-5)}

/* -------------------------------------------------------------- 8. close */
.close .stage{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:calc(var(--bar-h) + 12px) 16px 0}
.endcard{position:relative;width:min(56rem,100%);aspect-ratio:16/9;background:#14181E;color:#F1F3F6;border-radius:22px;box-shadow:var(--sc-e3);display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,5vw,64px);overflow:hidden}
.endcard .wrap-tag{position:absolute;left:clamp(20px,5vw,64px);top:clamp(16px,3vw,32px);font:600 12.5px var(--sc-font-text);color:#AEB4BE;display:flex;align-items:center;gap:8px}
.endcard .wrap-tag i{width:8px;height:8px;border-radius:50%;background:#3DBE7A}
.endcard h2{color:#F6F7F9;font-size:var(--sc-t-2xl);margin:0 0 12px;max-width:18ch}
.endcard p{color:#C2C8D0;margin:0 0 22px;max-width:36rem}
.endcard .join{box-shadow:none;background:#F6F7F9}
.endcard .form-msg{color:#C2C8D0}
.endcard .form-msg.ok{color:#7FE0A8}
.endcard .form-msg.err{color:#FF9C88}
.uses-pick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;border:0;padding:0}
.uses-pick legend{font:500 13px var(--sc-font-text);color:#AEB4BE;margin-bottom:8px;padding:0}
.uses-pick label{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--sc-font-text);color:#E3E6EA;border:1px solid #3A414C;padding:8px 11px;border-radius:999px;cursor:pointer}
.uses-pick input{accent-color:var(--pen);margin:0}
.endcard .sweep{position:absolute;left:0;right:0;bottom:0;height:4px;background:#2B313B}
.endcard .sweep i{display:block;height:100%;width:100%;background:var(--pen)}
.foot{width:min(56rem,100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px 4px 26px;font:500 13.5px/1.4 var(--sc-font-text);color:var(--sc-ink-soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.foot nav span{color:var(--sc-ink)}
.foot a{color:var(--sc-ink-soft);text-decoration:none}
.foot a:hover{color:var(--sc-ink);text-decoration:underline}

/* ---------------------------------------------------------------- phone */
@media (max-width:980px){
  .links{display:none}
}
@media (max-width:860px){
  :root{--bar-h:60px}
  .bar{gap:10px}
  .driver{margin-right:0;font-size:12px;padding:7px 10px 7px 9px}
  .driver span{min-width:0}
  .bar .btn--ink{display:none}
  .hero .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;padding:calc(var(--bar-h) + 14px) 16px 12px;gap:6px}
  .hero h1{font-size:clamp(2rem,8.6vw,2.6rem);margin-bottom:12px}
  .hero .lede{font-size:1rem;margin-bottom:16px}
  .hero .fine{display:none}
  .near{left:-6px;width:270px}
  .tell .sc-wrap,.get .sc-wrap,.trust .sc-wrap{grid-template-columns:minmax(0,1fr)}
  .take .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;padding:calc(var(--bar-h) + 10px) 12px 12px}
  .take .ttl{margin-bottom:4px}
  .take .ttl .step{display:none}
  .shots{order:3;align-self:start}
  .shot-row{display:none;padding:10px 12px}
  .shot-row.is-live{display:grid}
  .take .scene{order:2;min-height:0}
  .take .done-line{grid-column:1;order:4}
  .moment .shot{height:130px}
  .endcard{aspect-ratio:auto;padding:56px 20px 28px}
  .endcard .join{flex-direction:column;border-radius:16px}
  .endcard .join input[type=email]{height:46px}
}
@media (max-width:860px) and (max-height:740px){ .hero .lede{display:none} }
@media (prefers-reduced-motion:reduce){
  .far,.hero .mid,.near{transform:none!important}
  .shot-row.is-live .st{animation:none}
  .prompt .q .caret{animation:none}
}