/* THE LIVE PAGE — layout around the scenes. Loaded after clear.css / draft.css. */
.sec-h{max-width:720px}
.sec-h h2{font:400 clamp(30px,3.6vw,46px)/1.08 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.sec-h p{margin-top:14px;font-size:18px;line-height:1.55;color:var(--dim);text-wrap:pretty}

/* Hero */
.hero .def{max-width:700px}
.scene{margin:0}
.hero-scene{margin:52px auto 0;max-width:1120px}
.stage{position:relative}

/* The rail under a scene: where we are, what was said, controls. */
.rail{margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.rail .steps{list-style:none;display:flex;flex-direction:row;margin:0;gap:6px;flex-wrap:wrap;grid-column:1/-1;justify-content:center}
.rail .steps li{position:relative;padding:8px 14px 8px 34px;border-radius:999px;border:1px solid var(--line);font:500 14px var(--ui);color:var(--faint);transition:background .3s,color .3s,border-color .3s;counter-increment:st}
.rail .steps{counter-reset:st}
.rail .steps li::before{content:counter(st);position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ececec;color:#777;font:600 11px var(--ui);transition:background .3s,color .3s}
.rail .steps li.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rail .steps li.on::before{background:#fff;color:var(--ink)}
.rail .steps li.done{color:var(--ink)}
.rail .steps li.done::before{background:var(--ink);color:#fff}
.rail .said{grid-column:1/-1;text-align:center;font:500 17px/1.45 var(--ui);color:var(--ink);min-height:0;display:none}
.rail .ctl{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.rail .ctl button{padding:8px 15px;border-radius:999px;border:1px solid #d4d4d4;background:#fff;color:var(--ink);font:500 13.5px var(--ui);cursor:pointer}
.rail .ctl button:hover{background:var(--soft)}
.rail .ctl button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Where: tabs of apps */
.where{max-width:1120px;margin:auto;padding:110px 24px 30px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 22px}
.tabs .tab{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font:500 15px var(--ui);color:var(--dim);cursor:pointer;transition:all .2s}
.tabs .tab img{width:18px;height:18px;object-fit:contain}
.tabs .tab:hover{border-color:#bdbdbd;color:var(--ink)}
.tabs .tab[aria-selected="true"]{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:#fff}
.where .rail{grid-template-columns:1fr}
.where .tab-note{font:500 16px var(--ui);color:var(--dim);text-align:center}
.tbar{height:3px;border-radius:2px;background:#e6e6e6;overflow:hidden;max-width:420px;margin:2px auto 0;width:100%}
.tbar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0)}

/* How: a scroll-driven walk through the five states */
.how{max-width:1180px;margin:auto;padding:110px 24px 0}
.scrolly{height:380vh;position:relative;margin-top:28px}
.scrolly .sticky{position:sticky;top:96px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:44px;align-items:center;min-height:calc(100vh - 140px)}
.stages{list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:sg}
.stages li{counter-increment:sg;position:relative;padding:14px 16px 14px 52px;border-radius:14px;color:var(--faint);transition:background .35s,color .35s}
.stages li::before{content:counter(sg);position:absolute;left:14px;top:15px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #d6d6d6;font:600 12px var(--ui);color:#999;transition:all .35s}
.stages li b{display:block;font:600 18px/1.3 var(--ui);letter-spacing:-.01em}
.stages li span{display:block;margin-top:4px;font-size:15px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s,opacity .35s}
.stages li.on{background:var(--soft);color:var(--ink)}
.stages li.on::before{background:var(--ink);color:#fff;border-color:var(--ink)}
.stages li.on span{max-height:80px;opacity:1;color:var(--dim)}
.stages li.done{color:var(--ink)}.stages li.done::before{background:#ececec;color:var(--ink);border-color:#ececec}

/* Several at once */
.many{max-width:1120px;margin:auto;padding:120px 24px 30px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:44px;align-items:center}

/* Use cases: real tasks, each showing what came back */
.uses{max-width:1120px;margin:auto;padding:110px 24px 30px}
.tk-groups{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tk-groups h3{font:600 13px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.tasks{list-style:none;display:flex;flex-direction:column;gap:10px}
.uses .task{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff;transition:border-color .25s,box-shadow .25s}
.uses .task:hover{border-color:#cfcfcf;box-shadow:0 14px 30px -24px rgba(0,0,0,.35)}
.tk-h{display:flex;align-items:center;gap:8px;font:500 13px var(--ui);color:var(--faint)}
.tk-h img{width:16px;height:16px;object-fit:contain;border-radius:4px}
.tk-q{margin-top:8px;font:500 17px/1.4 var(--ui);color:var(--ink);letter-spacing:-.01em}
.tk-q .w{opacity:.18;transition:opacity .25s}.tk-q .w.in{opacity:1}
.tk-r{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);min-height:22px}
.tk-r > img{width:16px;height:16px;object-fit:contain}
.tk-s{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;background:#f2f2f2;font:600 12px var(--ui);color:#666;transition:all .3s}
.tk-s .dot{width:7px;height:7px;border-radius:50%;background:#bbb}
.task.working .tk-s{background:rgba(48,209,88,.12);color:#1f9d4a}.task.working .tk-s .dot{background:#30D158;animation:breathe 1.2s ease-in-out infinite alternate}
.task.done .tk-s{background:#0a0a0a;color:#fff}.task.done .tk-s .dot{background:#fff;animation:none}
.tk-out{opacity:0;transform:translateX(-4px);transition:opacity .35s,transform .35s}
.task.done .tk-out{opacity:1;transform:none}

/* The real recording */
.film-sec{max-width:1120px;margin:auto;padding:110px 24px 20px}
.real{margin-top:28px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 34px 80px -40px rgba(0,0,0,.5)}
.real video{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* Phones and small screens */
@media(max-width:900px){
  .scrolly .sticky,.many{grid-template-columns:1fr;gap:20px}
  .scrolly{height:420vh}
  .scrolly .sticky{top:70px;min-height:auto}
  .stages{flex-direction:row;gap:6px;overflow:hidden}
  .stages li{flex:1;padding:10px 6px 10px 6px;text-align:center}
  .stages li::before{position:static;transform:none;margin:0 auto 6px}
  .stages li b{font-size:12px}.stages li span{display:none}
  .stages li:not(.on) b{display:none}
  .stages li.on{flex:5}
  .stages li.on span{display:block;font-size:13px;line-height:1.4}
  .tk-groups{grid-template-columns:1fr}
}
@media(max-width:640px){
  .rail .steps li:not(.on){display:none}
  .rail .steps li.on{padding:10px 18px 10px 38px;font-size:15px}
  .rail .said{display:block}
  .tabs{flex-wrap:nowrap;overflow-x:auto;margin:24px -20px 16px;padding:0 20px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:none}
  .where,.uses,.film-sec{padding-top:80px}
  .how{padding-top:80px}.many{padding-top:80px}
  .sec-h p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.scrolly{height:auto}.scrolly .sticky{position:static}.stages li span{max-height:none;opacity:1}}
/* Before the card has "said" its sentence there is no status yet. */
.uses .task:not(.working):not(.done) .tk-s{opacity:0}

/* The full flow */
.film-scene{margin:30px auto 0;max-width:min(1120px,calc((100svh - 300px) * 1.6))}
.film-cap{margin:18px auto 0;max-width:820px;min-height:2.9em;text-align:center;font:500 clamp(18px,1.7vw,22px)/1.4 var(--ui);color:var(--ink);text-wrap:balance}
.chapters{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;grid-column:1/-1;counter-reset:ch;margin:0}
.chapters button{position:relative;padding:8px 14px 8px 34px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px var(--ui);color:var(--faint);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.chapters li{counter-increment:ch}
.chapters button::before{content:attr(data-n);position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ececec;color:#777;font:600 11px var(--ui)}
.chapters button:hover{border-color:#bdbdbd;color:var(--ink)}
.chapters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chapters button.on::before{background:#fff;color:var(--ink)}
.chapters button.done{color:var(--ink)}.chapters button.done::before{background:var(--ink);color:#fff}
.film-sec .rail{grid-template-columns:1fr}
.real-wrap{margin-top:30px;text-align:center}
.real-wrap summary{display:inline-block;cursor:pointer;font:500 15px var(--ui);color:var(--dim);text-decoration:underline;text-underline-offset:3px;list-style:none}
.real-wrap summary::-webkit-details-marker{display:none}
.real-wrap .real{text-align:left}
@media(max-width:640px){.chapters li:not(:has(.on)){display:none}.film-cap{font-size:17px;min-height:4.2em}}
.film-snd{position:absolute;z-index:20;right:4%;bottom:16%;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;border:0;background:rgba(10,10,10,.86);color:#fff;font:600 15px var(--ui);cursor:pointer;box-shadow:0 14px 40px -12px rgba(0,0,0,.6);backdrop-filter:blur(10px);transition:transform .2s,background .2s}
.film-snd:hover{background:#000;transform:scale(1.04)}
.film-snd[hidden]{display:none}

/* Unmute vs Wispr Flow */
.cmp{max-width:1120px;margin:auto;padding:110px 24px 40px}
.cmp-t{margin-top:34px;border:1px solid var(--line);border-radius:20px;overflow:clip;background:#fff}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}
.cmp-h{position:sticky;top:64px;z-index:2;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.cmp-h > div{padding:22px 24px;display:flex;align-items:center}
.cmp-h .lg-un{height:32px;width:auto}
.cmp-h .lg-wf{height:27px;width:auto}
.cmp .cmp-u{background:#f6f6f4;box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line)}
.cmp-gh{padding:22px 24px 8px;font:600 12.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
.cmp-g:first-of-type .cmp-gh{border-top:0}
.cmp-r{border-top:1px solid #f0f0f0}
.cmp-gh + .cmp-r{border-top:0}
.cmp-r > div{padding:15px 24px}
.cmp-f{font:500 16px/1.4 var(--ui);color:var(--ink)}
.cmp-f small{display:block;font-size:13.5px;color:var(--faint);margin-top:2px}
.cv{display:flex;align-items:flex-start;gap:10px;font:400 14.5px/1.45 var(--ui);color:var(--dim)}
.cv b{color:var(--ink);font-weight:600}
.cv i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:-1px;font-style:normal}
.cv .cy{background:var(--ink);color:#fff}.cv .cy svg{width:12px;height:12px}
.cv .cn{background:#f1f1f1;color:#a8a8a8;font:600 14px var(--ui)}
.cmp-u .cv{color:var(--ink)}
.cmp-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--faint)}
@media(max-width:760px){
  .cmp-h,.cmp-r{grid-template-columns:1fr 1fr}
  .cmp-h > div:first-child{display:none}
  .cmp-h{top:60px}.cmp-h > div{padding:16px}
  .cmp-h .lg-un{height:24px}.cmp-h .lg-wf{height:21px}
  .cmp-r .cmp-f{grid-column:1/-1;padding:14px 16px 4px;font-size:15px}
  .cmp-r .cmp-u,.cmp-r .cmp-w{padding:6px 16px 14px}
  .cmp .cmp-r .cmp-u{background:none;box-shadow:none}
  .cmp-gh{padding:18px 16px 6px}
  .cv{font-size:13.5px}
}