/* Round 8 (TASK L): the main page's live blocks on the Site kit (tokens.css, site-kit.css): the hero demo on the V15
   monitor, WHAT IT IS, Three jobs with live columns, the Features mini-preview, WHO IT'S FOR, Packages with the
   founder's racks and the final CTA. The live views are Features demo views (landing-live.mjs); their stage, program
   frame and zoom-in windows are styled by features.css / feature-stories.css, the landing only places them. */

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────────────── */
.lp-hero .eyebrow{flex-wrap:wrap}
.lp-hero h1{font-size:clamp(56px,6.7vw,112px)}
.lp-hero-title{min-width:0}
.lp-hero .hero-heading{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);margin-bottom:28px}
.lp-hero .hero-aside{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:none;justify-self:stretch;padding-bottom:4px}
.lp-hero .hero-aside>p:first-child{margin:0 0 20px;max-width:30em}
.lp-hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.lp-hero-ctas .button{width:auto;min-height:56px}
.lp-hero-ctas .text-link{margin:0;padding:0;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.lp-discord{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;color:var(--text);font-size:15px;font-weight:500;text-decoration:none;border-radius:var(--r-xs)}
.lp-discord svg{width:20px;height:20px;flex:none;color:#7f8cff}
.lp-discord span{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:4px}
.lp-discord:hover span{text-decoration-color:currentColor}
.lp-discord:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.lp-works{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:22px 0 0;font-size:15px;line-height:1.4;color:var(--body)}
.lp-works>span:first-child{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted2)}
.lp-works i{font-style:normal;color:var(--muted2);padding:0 2px}
/* The monitor's screen is the stage host: the hero demo fills it edge to edge (no ticks, no frame of its own). */
.lp-hero-host{position:relative;overflow:hidden;background:#05070a}
.lp-hero-host>.fx-screen{position:absolute;inset:0}
.lp-hero-host .cinema-stage{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
/* Round 8r fix 2: the monitor turns the stage as ONE flat picture. The stage is its own stacking context, flat, and a
   group the compositor keeps as one render surface (an identity filter), so a plate swap inside it (one video going on
   air, the one that left retiring) never rebuilds or re-sorts layers in the monitor's preserve-3d context: the FULL
   bomb swap painted the whole stage black for 1-2 frames there (2 of 16 screencasts), never on the flat Features stage. */
.lp-hero-host .cinema-stage{isolation:isolate;transform-style:flat;filter:brightness(1)}
.lp-hero-host .fx-zoom-bar{font-size:12px;letter-spacing:.03em}
.studio-monitor .monitor-bar>span.lp-monitor-note{font:500 11px/1 var(--font-mono);letter-spacing:.12em;color:#9fb0ba}
.director-scroll[data-next-scene=true] .lp-hero-host>.fx-screen{visibility:hidden}
/* Round 8i: the sample-marks footnote, the Features .fx-footnote's muted style. Under the monitor it hangs below the
   stand (absolute, so nothing moves); under the mini-preview it closes the block. */
.lp-marks-note{margin:0;font:500 11px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--muted2);text-align:center}
.studio-monitor>.lp-marks-note{position:absolute;left:28px;right:28px;top:100%;margin-top:6px;opacity:var(--hardware-alpha,1)}
/* Round 8j: on the phone layout (<=760px, where the monitor is untransformed and the note wraps to 2-3 lines) the note
   takes real height under the stand, so it can never run into the handoff line below; wider, it still hangs. */
@media(max-width:760px){.studio-monitor>.lp-marks-note{position:static;margin:6px 21px 0}}
.lp-preview>.lp-marks-note{margin-top:18px;text-align:left}
/* The pinned monitor sits under the nav, not centred: at load its screen is in view enough to go live (60 %). */
@media(min-width:761px) and (min-height:680px){
  :is([data-motion=on],[data-director=on]) main[data-landing] .director-sticky{align-items:flex-start;padding-top:6px}
  :is([data-motion=on],[data-director=on]) main[data-landing] .director-scroll{margin-top:14px}
}

/* Round 7g (decision 5): the flip hands over to nothing on the landing. WHAT IT IS is an ordinary block below the
   monitor (v15.css rose Three jobs into the departing monitor; the landing undoes that), and the monitor stays. */
@media(min-width:761px) and (min-height:680px){
  :is([data-motion=on],[data-director=on]) main[data-landing] #features{margin-top:0;opacity:1;transform:none;z-index:auto}
}
/* The off-air slate on the screen during the turn (motion.js: .lp-slate-screen, shown with data-next-scene): dark
   glass, the Overhub mark, a mono PROGRAM · STANDBY line, a fine grain. No HUD, no LIVE marker, no copy of the page.
   Inside the 16:9 screen, sizes are cqw of it (v15.css makes the screen a size container). Dark in both themes: it is
   the monitor's own picture. */
.lp-slate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.4cqw;overflow:hidden;background:radial-gradient(120% 95% at 50% 36%,#141c25 0,#0b1016 48%,#05070a 100%);color:#e8edf3;box-shadow:inset 0 0 0 1px #ffffff0d,inset 0 0 14cqw #000000b3}
/* The glass: one soft diagonal sheen across the screen. */
.lp-slate::before{content:"";position:absolute;inset:-20% -10%;background:linear-gradient(112deg,#ffffff00 34%,#ffffff0d 46%,#ffffff03 52%,#ffffff00 62%);pointer-events:none}
/* The grain: a static noise tile, barely there. */
.lp-slate::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;opacity:.07;pointer-events:none}
.lp-slate-mark{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.lp-slate-mark img{display:block;width:8.5cqw;height:auto;opacity:.92;filter:drop-shadow(0 .6cqw 2.4cqw #000000b3)}
.lp-slate-mark span{font:700 2.9cqw/1 'Saira Condensed',sans-serif;letter-spacing:.42em;margin-right:-.42em;color:#f2f5f8}
.lp-slate-line{position:relative;z-index:1;display:flex;align-items:center;gap:1.1cqw;margin:0;font:500 1.32cqw/1 var(--font-mono);letter-spacing:.32em;margin-right:-.32em;color:#9fb0ba;white-space:nowrap}
.lp-slate-line::before,.lp-slate-line::after{content:"";width:6cqw;height:1px;background:linear-gradient(90deg,#9fb0ba00,#9fb0ba66)}
.lp-slate-line::after{background:linear-gradient(90deg,#9fb0ba66,#9fb0ba00)}
/* A steady standby lamp between the left rule and the words (amber, never the live red; it does not blink). */
.lp-slate-line i{display:block;flex:none;width:.72cqw;height:.72cqw;margin-left:.4cqw;border-radius:50%;background:#ffb070;box-shadow:0 0 1.2cqw #ffb07080}
.director-scroll .lp-slate-screen{background:#05070a}

/* ── WHAT IT IS ───────────────────────────────────────────────────────────────────────────────────────── */
.lp-what{padding-top:96px}
.lp-what>.section-label{margin-bottom:34px}
.lp-what-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px 64px;align-items:end}
.lp-what h2,.lp-who h2,.lp-packages h2{margin:0;font:700 clamp(48px,5.4vw,92px)/.93 'Saira Condensed',sans-serif;letter-spacing:-.02em}
.lp-what h2 em,.lp-who h2 em,.lp-packages h2 em{font-style:normal;color:var(--cta-text)}
.lp-what-head>p{max-width:640px;margin:0;font-size:18px;line-height:1.55;color:var(--body)}
.lp-steps{counter-reset:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:48px 0 0;padding:0;list-style:none;border-block:1px solid var(--line)}
.lp-steps>li{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:baseline;padding:22px 28px 24px 0}
.lp-steps>li+li{padding-left:28px;border-left:1px solid var(--line)}
.lp-steps>li+li::before{content:"→";position:absolute;left:-11px;top:50%;translate:0 -50%;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-base);color:var(--cta-text);font-size:13px;line-height:1}
.lp-step-num{grid-row:1/3;font:800 44px/.8 'Saira Condensed',sans-serif;color:var(--cta-text);letter-spacing:-.02em}
.lp-steps b{font:700 24px/1.05 'Saira Condensed',sans-serif;letter-spacing:.01em;text-transform:uppercase}
.lp-steps li>span:last-child{margin-top:6px;font-size:15px;line-height:1.4;color:var(--body)}
.lp-more{margin-top:0;border-bottom:1px solid var(--line)}
.lp-more>summary{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:4px 2px;cursor:pointer;list-style:none;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
.lp-more>summary::-webkit-details-marker{display:none}
.lp-more>summary:hover{color:var(--text)}
.lp-more>summary:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:2px}
.lp-more-icon{position:relative;width:20px;height:20px;border:1px solid var(--edge);border-radius:50%}
.lp-more-icon::before,.lp-more-icon::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;background:currentColor;translate:-50% -50%;transition:rotate .25s}
.lp-more-icon::after{rotate:90deg}
.lp-more[open] .lp-more-icon::after{rotate:0deg}
.lp-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:4px 0 26px}
.lp-more-grid>p{margin:0;padding:0 28px 0 0;font-size:15px;line-height:1.55;color:var(--body)}
.lp-more-grid>p+p{padding-left:28px;border-left:1px solid var(--line2)}
.lp-more-grid b{display:block;margin-bottom:6px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--cta-text)}
html:not([data-motion=off]) .lp-more[open] .lp-more-grid{animation:lp-open .32s cubic-bezier(.2,.7,.2,1)}
@keyframes lp-open{from{opacity:0;translate:0 -6px}}

/* ── A live view (any block): the program frame, the episode marks and the caption ───────────────────── */
.lp-view{position:relative;min-width:0}
.lp-view[hidden],.lp-calm[hidden]{display:none!important}
.lp-frame>.cinema-stage{border-radius:4px}
.lp-meta{display:flex;align-items:center;gap:16px;min-height:44px;padding:10px 2px 0}
/* Round 8r (founder item 5): the view's pause / play key (shell.css .stage-motion-key) closes its meta bar. */
/* Round 8r fix: in flow, the 44 x 44 hit box takes only the keycap's room (negative block margins), and stacks above its bar. */
.lp-meta>.lp-motion-key{flex:none;z-index:2;margin:calc((var(--smk-h) - 44px) / 2) 0 calc((var(--smk-h) - 44px) / 2) auto}
/* The hero monitor's chin: the key sits where the power button was, beside the dial. */
.studio-chin>.chassis-motion-key{--smk-w:46px;--smk-h:26px;--smk-r:13px;--smk-bb:2px;z-index:2;margin:calc((var(--smk-h) - 44px) / 2) 2px calc((var(--smk-h) - 44px) / 2) 0}
/* Round 8s (founder: the act strip, its caption and the pause key need the rail's polish): quiet mono steps on a
   hairline, the act on air on the surface with its number in the accent and a hairline track under its bar; the caption
   is set off by a hairline; the pause key is a real 44 x 44 button with a clear glyph. The strip stays inert (an
   indicator: the stage owns the acts). */
.lp-meta{--lp-ease:cubic-bezier(.2,.7,.2,1);gap:14px;padding-top:12px}
.lp-eps{display:flex;flex:none;gap:6px;margin:0;padding:0;list-style:none}
.lp-ep{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-xs);background:transparent;font:500 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--muted2);white-space:nowrap;overflow:hidden;transition:border-color .18s var(--lp-ease),background-color .18s var(--lp-ease),color .18s var(--lp-ease)}
.lp-ep-num{color:inherit;font-variant-numeric:tabular-nums}
.lp-ep-title{text-transform:uppercase}
.lp-ep::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);opacity:0;transition:opacity .18s var(--lp-ease)}
/* Round 8s: transform only (publicSiteProgress.ts writes scaleX every frame from one clock; the stage's own value is the fallback). */
.lp-ep-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cta);transform-origin:0 50%;transform:scaleX(var(--ep-progress,0));will-change:transform}
.lp-ep[data-demo-active]{border-color:var(--edge);background:var(--surface);color:var(--text)}
.lp-ep[data-demo-active] .lp-ep-num{color:var(--cta-text);opacity:1}
.lp-ep[data-demo-active]::after{opacity:1}
.lp-ep-bar{z-index:1}
:root[data-theme=light] .lp-ep-bar{background:var(--cta-text)}
.lp-view[data-lp-episodes="1"] .lp-eps{display:none}
.lp-caption{flex:1;min-width:0;margin:0;font:400 15px/1.4 var(--font-sans);letter-spacing:0;color:var(--body);text-wrap:balance}
.lp-eps+.lp-caption{align-self:stretch;display:flex;align-items:center;padding-left:14px;border-left:1px solid var(--line)}
/* The view's pause / play key: a 44 x 44 page button (quiet surface, hairline, a 14 px glyph, the run LED in its corner). */
.lp-meta>.lp-motion-key{--smk-w:44px;--smk-h:44px;--smk-bt:1px;--smk-bb:1px;--smk-r:var(--r-xs);--smk-edge:var(--edge);--smk-shadow:none;--smk-led:var(--success);color:var(--text);transition:color .18s var(--lp-ease),translate .12s ease-out}
.lp-meta>.lp-motion-key::before{border-bottom-color:var(--smk-edge);background:var(--surface);transition:border-color .18s var(--lp-ease),background-color .18s var(--lp-ease)}
.lp-meta>.lp-motion-key:hover{--smk-edge:var(--edge-hover);color:var(--text)}
.lp-meta>.lp-motion-key:hover::before{background:var(--code-bg)}
.lp-meta>.lp-motion-key:focus-visible::before{outline:2px solid var(--text);outline-offset:2px}
.lp-meta>.lp-motion-key .smk-glyph{width:14px;height:14px}
.lp-meta>.lp-motion-key .smk-led{position:absolute;top:7px;right:7px;width:5px;height:5px;box-shadow:none;background:var(--line)}
.lp-meta>.lp-motion-key[aria-pressed=false] .smk-led{background:var(--smk-led);box-shadow:0 0 4px var(--smk-led)}
html[data-motion=off] .lp-meta :is(.lp-ep,.lp-ep::after,.lp-motion-key,.lp-motion-key::before){transition:none}
/* The camera views (kind B in Features): the gameplay stage becomes a picture-in-picture inset once the cam arrives. */
.lp-view[data-demo-section=camera] .fx-zoom-host{z-index:3;background:radial-gradient(90% 80% at 30% 20%,#141c28,#06080c)}
.lp-view[data-demo-section=camera] .lp-frame>.cinema-stage{z-index:1;transform-origin:calc(100% - 22px) calc(100% - 22px);transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s,border-radius .42s}
.lp-view[data-demo-section=camera][data-pip] .lp-frame>.cinema-stage{z-index:5;transform:scale(.34);border-radius:8px;box-shadow:0 0 0 3px #ffffffd9,0 24px 60px -16px #000}
html[data-motion=off] .lp-view *{transition:none!important}

/* ── The calm stills (Replays, Sponsors): the collector's three real states ─────────────────────────── */
.lp-calm{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-calm-shot{position:relative;display:grid;aspect-ratio:var(--calm-ar);background:#05070a;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);border-radius:6px;overflow:hidden}
.lp-calm-pic{grid-area:1/1;display:none;min-height:0;height:100%;opacity:0;transition:opacity .42s ease-in-out}
.lp-calm-pic>img{display:block;width:100%;height:100%;object-fit:contain}
:root[data-theme=dark] .lp-calm-pic[data-theme-still=dark],:root[data-theme=light] .lp-calm-pic[data-theme-still=light],:root:not([data-theme]) .lp-calm-pic[data-theme-still=dark]{display:block}
.lp-calm[data-calm-state="1"] .lp-calm-pic[data-state="1"],.lp-calm[data-calm-state="2"] .lp-calm-pic[data-state="2"],.lp-calm[data-calm-state="3"] .lp-calm-pic[data-state="3"]{opacity:1}
:root[data-theme=light] .lp-calm-shot{background:#eef1f5}
.lp-calm-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lp-calm-step{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 6px;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--body);font:600 14px/1 var(--font-sans);cursor:pointer;transition:border-color .2s,color .2s,background-color .2s}
.lp-calm-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--text) 10%,transparent);font:600 12px/1 var(--font-mono)}
.lp-calm-step[aria-pressed=true]{border-color:var(--cta);color:var(--text);background:color-mix(in srgb,var(--cta) 10%,transparent)}
.lp-calm-step[aria-pressed=true] .lp-calm-num{background:var(--cta);color:var(--cta-ink)}
.lp-calm-step:hover{color:var(--text);border-color:var(--edge-hover)}
.lp-calm-step:focus-visible{outline:2px solid var(--text);outline-offset:2px}
html[data-motion=off] .lp-calm-pic{transition:none}

/* ── THREE JOBS: the V15 hover-expand columns, each a live view ───────────────────────────────────────── */
.lp-jobs .op3-head{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
#features.lp-jobs h2{font-size:clamp(46px,4.8vw,80px)}
.lp-jobs .op3-strips{--grow:2.4}
.lp-jobs .op3-strip{--scr:calc((100cqw - var(--gap)*6)*var(--grow)/(var(--grow) + 2) - 2px);cursor:pointer}
.lp-jobs .op3-strip.is-active{flex-grow:var(--grow);cursor:auto}
.lp-jobs .op3-slot{height:calc(var(--scr)*9/16 + 88px);align-items:flex-end}
.lp-jobs .op3-monitor{display:flex;flex-direction:column}
.lp-jobs .op3-copy{width:calc((100cqw - var(--gap)*6)/(var(--grow) + 2))}
.lp-jobs .op3-read b{letter-spacing:.12em}
.lp-col-screen{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:calc(var(--scr)*9/16 + 56px);padding:0;background:#05070a}
/* A closed column shows its demo's poster at the open column's height (the Features collapsed panel: tall, dimmed). */
.lp-col-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.55);transition:opacity .3s,filter .3s}
.op3-strip:hover .lp-col-poster{opacity:.8}
.op3-strip.is-active .lp-col-poster{display:none}
.lp-col-screen>.lp-view,.lp-col-screen>.lp-calm{height:100%;justify-content:flex-start}
.lp-col-screen .lp-frame>.cinema-stage{border-radius:0;border:0;box-shadow:none}
.lp-col-screen .lp-meta{min-height:56px;padding:8px 12px;--body:rgba(226,236,252,.78);--muted2:rgba(176,192,218,.82);--text:#f4f8ff;--line:rgba(178,201,235,.16);--surface:#0f141d;--edge:rgba(178,201,235,.22);--edge-hover:rgba(178,201,235,.5);--code-bg:rgba(178,201,235,.08);--cta-text:#ffb070}
.lp-col-screen .lp-caption{font-size:14px}
.lp-col-screen>.lp-calm{display:flex;flex-direction:column;justify-content:flex-end;gap:0}
.lp-col-screen .lp-calm-shot{flex:1;aspect-ratio:auto;border:0;border-radius:0}
.lp-col-screen .lp-calm-steps{flex-wrap:nowrap;min-height:56px;align-items:center;padding:8px 10px;gap:6px;--body:rgba(226,236,252,.78);--text:#f4f8ff;--line:rgba(178,201,235,.2);--edge-hover:rgba(178,201,235,.5)}
.lp-col-screen .lp-calm-step{min-height:36px;padding-right:10px;font-size:12.5px;white-space:nowrap}
.lp-col-screen .lp-calm-num{width:24px;height:24px}
/* The zoom-ins at a column's width: a narrower floor than the Features chapters (the window never covers the stage). */
.lp-jobs .fx-zoom{--zoom-min:260px!important;--zoom-max:420px!important}
.op3-pick{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.op3-pick::after{content:"";position:absolute;inset:0;z-index:0}
.op3-strip.is-active .op3-pick{cursor:default}
.op3-strip.is-active .op3-pick::after{display:none}
.op3-pick:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
.lp-jobs .op3-copy a{position:relative;z-index:1;align-self:flex-start;min-height:44px}
.lp-jobs .op3-copy p{text-wrap:pretty}
.lp-jobs .op3-strip[data-intent]::before{opacity:.75}
.lp-jobs .op3-bus a{min-height:44px}

/* ── ON AIR mini-preview: the paper card, the stage, the five keys ─────────────────────────────────────── */
.lp-preview .oa-stage{--oa-col:268px}
.lp-preview .oa-card-wrap{margin-top:36px}
.lp-preview .oa-card[hidden]{display:none}
.lp-preview .oa-card-copy{margin:12px 0 0;font-size:15px;line-height:1.45}
.lp-preview .oa-card-foot{display:flex;margin-top:14px;padding-top:10px;border-top:1px solid #5d403033;font:500 11.5px/1.3 var(--font-mono);letter-spacing:.04em;color:#5d4030}
.lp-card-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;color:#28211d;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-color:#28211d55;text-underline-offset:4px}
.lp-card-link:hover{text-decoration-color:#28211d}
.lp-card-link:focus-visible{outline:2px solid #28211d;outline-offset:2px}
.lp-pv-frame{aspect-ratio:auto;overflow:visible;border:0;background:none;container-type:normal}
.lp-pv-panel[hidden]{display:none}
.lp-pv-panel>.lp-calm{padding-top:0}
.lp-pv-panel .lp-calm-shot{aspect-ratio:16/9}
.lp-pv-note{margin:10px 2px 0;font-size:15px;line-height:1.4;color:var(--body)}
/* Round 8s (founder: the chapter keys read raw): one rail of five quiet cards in the site's language. A mono index over
   the display word; idle is a hairline on a quiet surface, hover lifts it and brightens the hairline, the chapter on air
   carries the primary button's orange as a filled index chip and a thin bar that fills for the chapter's real length
   (publicSiteProgress.ts draws it from the stage clock; it shows only while the preview runs). 44 px+ targets, 180 ms. */
.lp-preview .lp-pv-rail{--pv-ease:cubic-bezier(.2,.7,.2,1);--pv-bar:var(--cta);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
:root[data-theme=light] .lp-preview .lp-pv-rail{--pv-bar:var(--cta-text)}
.lp-preview .lp-pv-rail button{display:grid;grid-template-rows:auto auto;align-content:center;justify-content:start;justify-items:start;gap:9px;min-width:0;min-height:76px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:var(--r-xs);background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--body);box-shadow:0 0 0 transparent;transition:translate .18s var(--pv-ease),border-color .18s var(--pv-ease),background-color .18s var(--pv-ease),color .18s var(--pv-ease),box-shadow .18s var(--pv-ease)}
.lp-preview .lp-pv-rail button>.lp-pv-idx{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-left:-6px;border-radius:3px;font:500 11px/1 var(--font-mono);letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--muted2);transition:background-color .18s var(--pv-ease),color .18s var(--pv-ease)}
.lp-preview .lp-pv-rail b{font:600 clamp(22px,1.9vw,28px)/1 'Saira Condensed',sans-serif;letter-spacing:.005em;color:inherit;white-space:nowrap}
.lp-preview .lp-pv-rail button:not([aria-selected=true]):is(:hover,[data-intent]){translate:0 -2px;border-color:var(--edge-hover);background:var(--surface);color:var(--text);box-shadow:0 12px 24px -18px rgba(0,0,0,.75)}
.lp-preview .lp-pv-rail button[aria-selected=true]{border-color:var(--edge);background:var(--surface);color:var(--text)}
.lp-preview .lp-pv-rail button[aria-selected=true] .lp-pv-idx{background:var(--cta);color:var(--cta-ink)}
.lp-preview .lp-pv-rail button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* The chapter's bar: a hairline track and a 2 px fill, scaled (transform only) from one clock. */
.lp-preview .lp-pv-rail .oa-prog{z-index:1;left:0;right:0;bottom:0;height:2px;background:var(--pv-bar);transform:scaleX(var(--oa-p,0));will-change:transform;opacity:0;transition:opacity .18s var(--pv-ease)}
.lp-preview .lp-pv-rail button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);opacity:0;transition:opacity .18s var(--pv-ease)}
.lp-preview .oa-stage[data-running=true] .lp-pv-rail [aria-selected=true]>.oa-prog,.lp-preview .oa-stage[data-running=true] .lp-pv-rail button[aria-selected=true]::after{opacity:1}
[data-motion=off] .lp-preview .lp-pv-rail :is(button,.lp-pv-idx,.oa-prog){transition:none}
.lp-all{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.lp-preview .oa-head{margin-bottom:28px}

/* ── WHO IT'S FOR ─────────────────────────────────────────────────────────────────────────────────────── */
.lp-who,.lp-packages{padding-top:88px}
.lp-who>.section-label,.lp-packages>.section-label{margin-bottom:28px}
.lp-who h2,.lp-packages h2{font-size:clamp(44px,4.6vw,76px)}
.lp-who-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none}
.lp-who-cards>li{display:flex;flex-direction:column;padding:26px 26px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.lp-who-kick{font:500 10.5px/1.3 var(--font-mono);letter-spacing:.14em;color:var(--cta-text)}
.lp-who-cards b{margin-top:16px;font:700 32px/1 'Saira Condensed',sans-serif;letter-spacing:-.01em}
.lp-who-cards p{flex:1;margin:12px 0 14px;font-size:16px;line-height:1.5;color:var(--body)}
.lp-who-cards a{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-weight:600}

/* ── PACKAGES: the racks grow with the tier (1, 3, 6 units), no prices ───────────────────────────────── */
.lp-pkg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.lp-pkg-head>p{margin:0;font-size:17px;line-height:1.5;color:var(--muted2);text-align:right}
.lp-pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin:40px 0 0;padding:0;list-style:none}
.lp-pkg{display:flex;flex-direction:column;padding:22px 26px 22px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.lp-pkg[data-units="6"]{border-color:color-mix(in srgb,var(--cta) 38%,var(--line))}
.lp-pkg-art{display:flex;align-items:flex-end;justify-content:flex-start;height:184px;margin:-6px 0 14px}
.lp-pkg-art img{display:block;width:auto;height:var(--rack,120px);object-fit:contain;filter:drop-shadow(0 18px 22px #0006)}
.lp-pkg[data-units="1"]{--rack:104px}
.lp-pkg[data-units="3"]{--rack:148px}
.lp-pkg[data-units="6"]{--rack:196px}
.lp-pkg-desc{font:500 10.5px/1.3 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cta-text)}
.lp-pkg-desc i{font-style:normal;color:var(--muted2)}
.lp-pkg-name{margin:8px 0 0;font:800 46px/.95 'Saira Condensed',sans-serif;letter-spacing:-.015em}
.lp-pkg-line{margin:10px 0 14px;font-size:16px;line-height:1.45;color:var(--body)}
.lp-pkg-list{flex:1;display:grid;align-content:start;gap:9px;margin:0 0 18px;padding:14px 0 0;list-style:none;border-top:1px solid var(--line)}
.lp-pkg-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.4;color:var(--text)}
.lp-pkg-list li::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:8px;border-radius:2px;background:var(--cta)}
.lp-pkg-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-weight:600}
.lp-pkg-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center;gap:20px 36px;margin-top:22px;padding:18px 0;border-top:1px solid var(--line)}
.lp-pkg-foot>p{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;line-height:1.5;color:var(--body)}
.lp-pkg-foot b{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted2)}
.lp-pkg-all{white-space:nowrap}

/* ── Final CTA ────────────────────────────────────────────────────────────────────────────────────────── */
.lp-contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.lp-discord-dark{margin-top:0;color:inherit}
.lp-discord-dark svg{color:currentColor}

/* ── 1023 px and below: stacked columns, the zoom-in slot under the stage ────────────────────────────── */
@media(max-width:1180px){
  .lp-what-head{grid-template-columns:1fr}
  .lp-pkg-foot{grid-template-columns:1fr 1fr}
  .lp-pkg-foot .lp-pkg-all{grid-column:1/-1;justify-self:start}
}
@media(max-width:1023px){
  .lp-hero-host .fx-zoom-host{display:none}
  .lp-steps,.lp-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps>li:nth-child(3){padding-left:0;border-left:0}
  .lp-steps>li:nth-child(3)::before{display:none}
  .lp-steps>li:nth-child(n+3){border-top:1px solid var(--line)}
  .lp-more-grid>p:nth-child(3){padding-left:0;border-left:0}
  .lp-more-grid>p{padding-bottom:16px}
  .lp-jobs .op3-strips{flex-direction:column;margin-inline:0;border-bottom:0}
  .lp-jobs .op3-strip{--scr:100cqw;padding:18px 0 22px;border-left:0;border-bottom:1px solid var(--line)}
  .lp-jobs .op3-strip::before{left:0;right:0}
  .lp-jobs .op3-copy{width:auto;margin-top:16px}
  .lp-jobs .op3-strip:not(.is-active) .op3-slot{display:none}
  .lp-jobs .op3-strip:not(.is-active) .op3-copy{margin-top:0}
  .lp-jobs .op3-strip:not(.is-active) .op3-copy>:is(p,a){display:none}
  .lp-jobs .op3-strip:not(.is-active) .op3-copy h3{margin-bottom:0;font-size:26px}
  .lp-jobs .op3-strip:not(.is-active) .op3-num{font-size:44px}
  .lp-jobs .op3-strip:not(.is-active) .op3-what{margin-top:10px}
  .lp-jobs .op3-strip:not(.is-active) h3 br{display:none}
  .lp-col-screen{height:auto}
  .lp-jobs .op3-slot{display:block;height:auto}
  .lp-jobs .op3-monitor{width:100%;margin:0}
  .lp-who-cards,.lp-pkgs{grid-template-columns:1fr}
  .lp-pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .lp-pkg>*{grid-column:1}
  .lp-pkg-art{grid-column:2;grid-row:1/5;height:auto;margin:0;align-items:flex-start}
  .lp-pkg[data-units="1"]{--rack:64px}.lp-pkg[data-units="3"]{--rack:92px}.lp-pkg[data-units="6"]{--rack:120px}
  .lp-pkg-list,.lp-pkg-cta{grid-column:1/-1}
  /* A view's zoom-in windows dock in a slot under the stage (as the Features chapters do on a phone). */
  .lp-view .lp-frame:has(>.fx-zoom-host[data-slot]){container-type:inline-size}
  .lp-view .fx-zoom-host[data-slot]{position:relative;top:auto;left:auto;width:100%;aspect-ratio:auto;height:0;overflow:hidden;border-radius:8px;background:color-mix(in srgb,var(--text) 4%,var(--bg-base));transition:height .18s ease-in-out,margin-top .18s ease-in-out}
  .lp-view[data-zoom-slot=open] .fx-zoom-host[data-slot]{height:calc(100cqw / var(--slot-ar,1.6) + 36px);margin-top:10px}
  .lp-view .fx-zoom-host[data-slot] .fx-zoom{--thumb-w:min(64cqw,calc((100cqh - 36px) * var(--ctx-ar)));--zoom-w:min(100cqw,calc((100cqh - 36px) * var(--zoom-ar)));right:auto;bottom:auto;left:50%;top:50%;translate:-50% -50%}
  .lp-view .fx-zoom-host[data-slot] .fx-zoom[data-zoom-state=hidden]{--w:var(--thumb-w);--ar:var(--ctx-ar);opacity:1;visibility:visible;transform:none}
  .lp-view[data-demo-section=camera] .fx-zoom-host[data-slot]{background:radial-gradient(90% 80% at 30% 20%,#141c28,#06080c)}
  .lp-jobs .fx-zoom{--zoom-min:200px!important}
}
@media(max-width:760px){
  .lp-hero h1{font-size:clamp(52px,14.4vw,84px)}
  .lp-hero .hero-aside{margin-top:20px}
  .lp-what{padding-top:72px}
  .lp-steps,.lp-more-grid{grid-template-columns:1fr}
  .lp-steps>li,.lp-steps>li+li{padding:16px 0;border-left:0}
  .lp-steps>li+li{border-top:1px solid var(--line)}
  .lp-steps>li::before{display:none}
  .lp-more-grid>p,.lp-more-grid>p+p{padding:0 0 14px;border-left:0}
  .lp-step-num{font-size:36px}
  .lp-what-head>p{font-size:16px}
  .lp-meta{flex-direction:column;align-items:flex-start;gap:10px}
  .lp-meta:has(>.lp-motion-key){position:relative;padding-right:58px}
  /* Round 8s: at a phone's width the steps beside the act on air show their number only, so the strip never runs under
     the pause key; the caption sits under it without the hairline. */
  .lp-ep{height:30px;padding:0 10px}
  .lp-ep:not([data-demo-active]) .lp-ep-title{display:none}
  .lp-eps+.lp-caption{padding-left:0;border-left:0}
  .lp-meta>.lp-motion-key{position:absolute;right:2px;top:calc(10px - (44px - var(--smk-h)) / 2);margin:0}
  .lp-col-screen .lp-meta>.lp-motion-key{right:12px;top:calc(8px - (44px - var(--smk-h)) / 2)}
  .studio-chin>.chassis-motion-key{--smk-w:40px;--smk-h:22px}
  .lp-col-screen .lp-meta{min-height:0}
  .lp-col-screen .lp-calm-steps{flex-wrap:wrap}
  .lp-jobs .op3-head{grid-template-columns:1fr}
  .lp-steps>li+li::before{display:none}
  .studio-monitor .monitor-bar>span.lp-monitor-note{display:none}
  .lp-preview .oa-rail{order:1}
  .lp-preview .oa-card-wrap{order:2;margin-top:6px}
  .lp-preview .lp-pv-frame{order:3}
  /* Round 8s: five words do not fit 358 px at a readable size, and wrapping them breaks the rail into uneven rows: the
     rail stays one row and scrolls sideways with snap, bleeding to the screen edges so no card is cut by the gutter;
     the fourth card peeks in as the cue. The chapter on air scrolls into view as the preview moves on. */
  .lp-preview .lp-pv-rail{display:flex;gap:6px;margin-inline:calc(-1 * var(--pv-gutter,20px));padding:4px var(--pv-gutter,20px) 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pv-gutter,20px);overscroll-behavior-x:contain;scrollbar-width:none}
  .lp-preview .lp-pv-rail::-webkit-scrollbar{display:none}
  .lp-preview .lp-pv-rail button{flex:0 0 auto;min-width:112px;min-height:62px;gap:7px;padding:10px 14px 12px;scroll-snap-align:start}
  .lp-preview .lp-pv-rail b{font-size:21px}
  .lp-preview .lp-pv-rail button:not([aria-selected=true]):is(:hover,[data-intent]){translate:none;box-shadow:none}
  .lp-preview .oa-card-foot{display:none}
  .lp-preview .oa-card{min-height:0;height:auto}
  .lp-preview .oa-card>strong{display:block;margin-top:10px;font-size:26px}
  .lp-preview .oa-card-copy{margin-top:6px;font-size:14px}
  .lp-card-link{min-height:40px;font-size:14px}
  .lp-pkg-head>p{text-align:left}
  .lp-pkg-foot{grid-template-columns:1fr}
  .lp-pkg-name{font-size:38px}
  .lp-who-cards b{font-size:28px}
  .lp-calm-step{font-size:13px}
}