/* The use-case pages (tools/sitemd cases.go): /cases/ and one page per case. Loaded
   after site.css and news.css on those pages only; site.css holds the tokens.
   Both open on a dark stage in either theme, as the homepage's .wave does; the header,
   the developer section and the footer follow the theme. The recorded media is the
   picture: no drawn frames, no grid, no glow. */
.stage{--s-line:rgba(227,241,237,.13);--s-text:#e3f1ed;--s-muted:rgba(227,241,237,.7);--s-faint:rgba(227,241,237,.56);--s-card:#0b1d19;
  background:#03110e;color:var(--s-text);padding:28px 0 clamp(64px,8vw,112px);overflow-x:clip}
.stage :focus-visible{outline-color:var(--mint)}
.stage ::selection{background:rgba(151,252,228,.32);color:#fff}
.stage h1,.stage h2{color:#fff}
.stage .crumbs{max-width:none;margin:0 0 clamp(28px,4vw,48px);color:var(--s-faint)}
.stage .crumbs a:hover{color:#fff}

/* the detail page: title, then the replay (input and steps beside the screen), then price */
.case-head{max-width:860px;margin-bottom:clamp(32px,4vw,56px)}
.case-head h1{font-size:clamp(44px,6vw,84px);text-wrap:balance}
.hook{margin-top:18px;font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:var(--s-muted);letter-spacing:-.015em;max-width:36ch}
.demo,.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);grid-template-areas:"scr in" "scr st";grid-template-rows:auto 1fr;gap:28px clamp(28px,3.4vw,48px)}
.demo-in{grid-area:in}
.screen{grid-area:scr}
.demo-steps{grid-area:st;display:grid;align-content:start;gap:24px}
.plan{grid-template-areas:"in st";grid-template-rows:auto;align-items:start;grid-template-columns:minmax(0,1fr) minmax(280px,440px)}
.plan .demo-in .prompt-t{font-size:clamp(24px,2.6vw,34px)}
@media(max-width:900px){.demo,.plan{grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "scr" "st";gap:20px}.plan{grid-template-areas:"in" "st";gap:32px}}

.input-l{font-size:14px;color:var(--s-faint)}
.prompt-t{display:grid;margin-top:8px;font-size:clamp(19px,1.6vw,22px);line-height:1.38;letter-spacing:-.018em;color:#fff;text-wrap:pretty}
.prompt-t>*{grid-area:1/1}
.prompt-t .ghost{visibility:hidden}
.typing [data-type]::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--mint);animation:blink 1s steps(2,jump-none) infinite}
.attach{display:inline-block;margin:10px 14px 0 0;font-size:15px;color:var(--s-muted)}

.screen{position:relative;aspect-ratio:var(--r,16/9);overflow:hidden;border-radius:10px;background:var(--s-card)}
.out{position:absolute;inset:0;display:grid;place-items:center}
.out>video,.out>img{display:block;width:100%;height:100%;object-fit:cover}
.out.go{animation:arrive .8s cubic-bezier(.16,1,.3,1) both}
/* several stills: each as large as its aspect ratio allows, side by side or 2×2 */
.frames{container-type:size;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px;width:100%;height:100%}
.frames img{width:min(100cqw,100cqh*var(--r));aspect-ratio:var(--r);object-fit:cover}
.frames[data-n="2"] img{width:min(50cqw - 3px,100cqh*var(--r))}
.frames[data-n="3"] img,.frames[data-n="4"] img{width:min(50cqw - 3px,(50cqh - 3px)*var(--r))}
.out-text{place-self:stretch;display:grid;align-content:start;gap:22px;overflow:auto;padding:clamp(18px,3vw,40px);background:var(--s-card);scrollbar-width:thin;scrollbar-color:rgba(227,241,237,.22) transparent}
.out-text h2{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:0;color:var(--s-faint);margin-bottom:6px}
.out-text p{font-size:clamp(14px,1.2vw,16px);line-height:1.6;color:var(--s-text);max-width:68ch;white-space:pre-wrap}
.out-text section{padding:0}
.out-text section:has(p:empty){display:none}
.out-none{padding:24px;font-size:15px;color:var(--s-faint);text-align:center}

/* the steps: a numbered list; during the replay the running row fills along its rule */
.steps-run{list-style:none;border-top:1px solid var(--s-line)}
.step{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 0;width:100%;padding:13px 0 12px;border-bottom:1px solid var(--s-line);transition:opacity .3s}
button.step{cursor:pointer}
button.step:hover .st{color:var(--mint)}
.step:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
.sn{grid-row:span 2;font-size:15px;color:var(--s-faint)}
.st{font-size:16px;font-weight:500;line-height:1.3;color:#fff;letter-spacing:-.01em;transition:color .2s}
.sm{font-size:13px;color:var(--s-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step[aria-current] .sn,.step[aria-current] .st{color:var(--mint)}
.step[data-state=wait]{opacity:.4}
.step[data-state=run]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint);transform-origin:0 0;animation:fill var(--len,2s) linear both}
.readout{display:flex;align-items:flex-end;gap:12px 32px;flex-wrap:wrap}
.readout p{display:grid;gap:2px;font-size:14px;color:var(--s-faint)}
.readout b{font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.03em;color:#fff;min-width:4.6ch}
.replay{all:unset;margin-left:auto;cursor:pointer;padding:9px 16px;border:1px solid var(--s-line);border-radius:999px;font-size:14px;color:var(--s-text);transition:background .2s}
.replay:hover{background:rgba(227,241,237,.07)}
.replay:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.rec{font-size:14px;color:var(--s-faint);margin-top:-8px}
.plan .rec{margin-top:20px}
@keyframes arrive{from{opacity:0}}
@keyframes fill{from{transform:scaleX(0)}}
@keyframes blink{50%{opacity:0}}
/* price, variants and the fork, in one row under the replay */
.buy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"price var ctas" "fine fine fine";align-items:center;gap:20px clamp(32px,4vw,64px);margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid var(--s-line)}
.price{grid-area:price;display:grid;gap:6px}
.price b{font-weight:500;font-size:clamp(44px,4.4vw,60px);line-height:1;letter-spacing:-.04em;color:#fff}
.price span{font-size:14px;color:var(--s-muted)}
.variants{grid-area:var;list-style:none;max-width:420px}
.variants li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:15px;color:var(--s-muted)}
.variants li+li{border-top:1px solid var(--s-line)}
.variants b{font-weight:500;color:#fff;white-space:nowrap}
.variants small{margin-left:8px;font-size:13px;color:var(--s-faint)}
.buy .ctas{grid-area:ctas}
.fine{grid-area:fine;font-size:14px;line-height:1.5;color:var(--s-faint)}
@media(max-width:900px){.buy{grid-template-columns:minmax(0,1fr);grid-template-areas:"price" "var" "ctas" "fine"}}

/* the developer section and the closing card, on the page's own theme */
.build{padding-top:clamp(64px,8vw,104px)}
.build-head{margin-bottom:28px}
.build-head .sub{max-width:720px}
.build .sub code,.req-line code{font-size:.86em;background:var(--hover);padding:2px 6px;border-radius:6px}
.build .sub a{text-decoration:underline;text-underline-offset:3px}
.reqs{list-style:none;counter-reset:r;padding-bottom:16px}
.reqs li{padding:20px 0;border-top:1px solid var(--line)}
.reqs li:first-child{border-top:0;padding-top:0}
.reqs h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.req-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:12px;font-size:14px;color:var(--muted)}
.req-json{max-height:440px;overflow:auto;border-radius:14px;background:var(--code);color:var(--code-text)}
.build .dev .code{margin:0 0 24px!important}
.case-end{margin-top:clamp(64px,8vw,104px)}
.case-end h2{font-size:clamp(28px,3.4vw,44px);color:#fff}
.case-end .ctas{justify-content:flex-end}
@media(max-width:900px){.case-end .ctas{justify-content:flex-start}}

/* the index: a cinema. Each case's film fills the screen under the header, its words
   on the picture over a dark fall-off, a strip of every case along the bottom edge.
   cases.js crossfades from film to film; without it the first case stands still. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cinema{--c-text:#e3f1ed;--c-muted:rgba(227,241,237,.84);--c-faint:rgba(227,241,237,.62);--c-ease:cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;height:calc(100svh - 69px);min-height:560px;padding:0;overflow:hidden;background:#03110e;color:var(--c-text)}
.cinema ::selection{background:rgba(151,252,228,.32);color:#fff}
.cinema :focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.films{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* Chrome draws controls on a video when scripting is off; the films are pictures */
.film::-webkit-media-controls{display:none!important}
/* the incoming film fades in over the outgoing one, which drops once it is covered,
   so a crossfade never dips to black; the picture settles from a slight push-in */
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 0s 1.4s,transform 0s 1.4s}
.film.on{z-index:1;opacity:1;transform:none;transition:opacity 1.4s cubic-bezier(.4,0,.2,1),transform 10s var(--c-ease)}
.films::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(to top,rgba(3,17,14,.94) 0,rgba(3,17,14,.74) 20%,rgba(3,17,14,.3) 46%,rgba(3,17,14,0) 66%),
  linear-gradient(to right,rgba(3,17,14,.6) 0,rgba(3,17,14,.18) 42%,rgba(3,17,14,0) 62%)}
.cine-ui{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"copy ctl" "strip strip";align-items:end;gap:clamp(28px,4vh,48px) 24px;padding-top:24px;padding-bottom:clamp(20px,3.2vh,36px)}
/* every case's words share one cell, so the tallest sets the height and nothing shifts */
.slides{grid-area:copy;display:grid;align-items:end}
.slide{grid-area:1/1;max-width:780px;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .35s,visibility 0s .35s,transform 0s .35s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .9s .45s var(--c-ease),transform 1.2s .45s var(--c-ease)}
.slide h2{font-size:clamp(46px,7.4vw,96px);line-height:.94;letter-spacing:-.052em;color:#fff;text-wrap:balance}
.slide h2 a{transition:color .2s}
.slide h2 a:hover{color:var(--mint-2)}
.slide-hook{margin-top:clamp(14px,1.6vw,20px);font-size:clamp(18px,1.7vw,23px);line-height:1.36;letter-spacing:-.016em;color:var(--c-muted);max-width:32ch;text-wrap:pretty}
.slide-act{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:clamp(24px,3vh,34px)}
.slide-price{font-size:15px;color:var(--c-faint)}
.cine-ctl{grid-area:ctl;display:flex;gap:8px}
/* a dark tint under the controls keeps them legible on a bright frame */
.cine-btn{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(3,17,14,.32);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.cine-btn:hover{background:rgba(3,17,14,.5);border-color:rgba(255,255,255,.45)}
.cine-btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.cine-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cine-btn .i-play{fill:currentColor;stroke-width:1.5}
.cinema:not([data-paused]) .i-play,.cinema[data-paused] .i-pause,.cine-btn[aria-pressed=true] .i-off,.cine-btn[aria-pressed=false] .i-on{display:none}
/* the strip: one column per case, a rule over each that fills as its film plays */
.strip{grid-area:strip;position:relative;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(14px,2vw,28px)}
.thumb{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding-top:16px;color:var(--c-faint);transition:color .3s}
.thumb-bar{position:absolute;top:0;left:0;right:0;height:2px;border-radius:1px;background:rgba(227,241,237,.2);overflow:hidden}
.thumb-bar i{display:block;height:100%;background:var(--mint);transform:scaleX(0);transform-origin:0 50%}
.thumb-pic{width:clamp(76px,7.4vw,112px);aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0b1d19;opacity:.55;transition:opacity .3s}
.thumb-pic img{width:100%;height:100%;object-fit:cover}
.thumb-t{font-size:15px;font-weight:500;line-height:1.25;letter-spacing:-.012em}
.thumb:hover{color:#fff}
.thumb:hover .thumb-pic{opacity:.85}
.thumb:is([aria-current],[aria-pressed=true]){color:#fff}
.thumb:is([aria-current],[aria-pressed=true]) .thumb-pic{opacity:1}
.thumb[aria-current] .thumb-bar i{transform:none}
.thumb:focus-visible{outline-offset:6px;border-radius:2px}
@media(max-width:720px){
  .cine-ui{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"ctl" "copy" "strip";padding-top:16px}
  .cine-ctl{justify-self:end;align-self:start}
  .films::after{background:linear-gradient(to top,rgba(3,17,14,.96) 0,rgba(3,17,14,.82) 30%,rgba(3,17,14,.35) 56%,rgba(3,17,14,0) 74%)}
  .slide-act{gap:12px 18px}
  .strip{grid-auto-columns:minmax(196px,64%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);margin:0 calc(-1*var(--gut));padding:0 var(--gut) 4px;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip li{scroll-snap-align:start}
  .thumb-pic{width:72px}
}
.cases-note{padding:clamp(80px,10vw,136px) var(--gut) 0}
.cases-note p{max-width:34ch;font-size:clamp(22px,2.4vw,32px);line-height:1.3;letter-spacing:-.025em;color:var(--ink);text-wrap:pretty}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,24px)}
.case-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px);border-radius:14px;background:var(--s-card);transition:background .2s}
.case-card:hover{background:#0f2420}
.case-card:has(a:focus-visible){outline:2px solid var(--mint);outline-offset:3px}
.case-card a:focus-visible{outline:0}
.case-card h2{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.035em}
.case-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-hook{font-size:16px;color:var(--s-muted)}
.eg{margin-top:clamp(12px,2vw,28px);font-size:clamp(18px,1.6vw,21px);line-height:1.4;letter-spacing:-.015em;color:#fff;text-wrap:pretty}
.eg span{display:block;margin-bottom:6px;font-size:14px;letter-spacing:0;color:var(--s-faint)}
.eg small{font-size:15px;color:var(--s-muted);white-space:nowrap}
.card-foot{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--s-faint)}
.card-foot span:last-child{color:var(--s-text)}

@media(prefers-reduced-motion:reduce){
  .stage *,.stage *::before,.stage *::after{animation:none!important;transition:none!important}
  .film,.slide{transform:none!important}
  .film,.film.on,.slide,.slide.on{transition-duration:.2s!important;transition-delay:0s!important}
}