/* Agenius, site.css. Plain CSS, no build step. Colors only through the tokens below. */

:root{
  --canvas:#0C0C16;        /* page background: the frame's graphite haze tinted indigo, never pure black */
  --canvas-deep:#080810;   /* the fixed environment layer's darker pole, the vignette corners of the frame */
  --panel:#15152A;         /* glass cards, service tiles, the form panel, accordion rows; the frame's mid haze */
  --line:#262640;          /* hairlines, ledger and spec-sheet rules, the footer rule (decorative only) */
  --line-strong:#3A3A5C;   /* interactive borders: inputs, accordion buttons, the step rules under the artwork (3:1 on canvas) */
  --accent:#7A5AF5;        /* electric violet sampled from the wireframe: the CTA, focus rings, the accent word "impact.", the completed hold ring */
  --accent-hover:#8F74FF;  /* CTA hover and pressed states, the hold ring's fill while the visitor holds */
  --accent-muted:#2B2352;  /* the accent at whisper level: card glows, cube particles, the breathing ring behind the form, the open FAQ row's border */
  --ring:#D9CDFF;          /* the ring's light bar sampled from the frame: every SVG ring highlight, the loading ring, the "Running." readout; never body text */
  --text-secondary:#A7A3B6;/* sublines, ledger rows, spec-sheet lines, FAQ answers, form labels (7.9:1 on canvas) */
  --text-primary:#F3EFE8;  /* warm white: headlines, card titles, nav, input text (17:1 on canvas) */
  --tshadow:0 1px 2px rgba(5,5,12,.95),0 3px 12px rgba(5,5,12,.78),0 10px 44px rgba(5,5,12,.8); /* text over live footage in every hero band; off on buttons and below the hero */
}

/* Derived tokens (not colors of their own): the scrim base is the frame's corner tone, the easings are the two curves used everywhere. */
:root{
  --scrim:5,5,12;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --nav-h:64px;
  --lane-l:6%;
  --lane-w:36%;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--canvas);scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.5;opacity:0;transition:opacity .7s var(--ease-out);-webkit-font-smoothing:antialiased}
body.ready{opacity:1}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kicker{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.mono{font-family:var(--mono);font-weight:400}

/* skip link */
.skip{position:fixed;left:16px;top:-64px;z-index:60;padding:10px 16px;border-radius:8px;background:var(--panel);border:1px solid var(--line-strong);color:var(--text-primary);text-decoration:none;font-weight:500;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:8px;font-family:var(--body);font-weight:500;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .45s var(--ease-out);text-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--text-primary);border-color:var(--accent)}
.btn-primary:hover,.btn-primary:active{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ---------- environment layer (vector plan item 11) ---------- */
.env{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--canvas-deep);pointer-events:none}
.env-glow{position:absolute;width:80vmax;height:80vmax;border-radius:50%;background:radial-gradient(circle,var(--accent-muted) 0%,rgba(43,35,82,0) 62%);opacity:.32;will-change:transform}
.env-glow-a{left:-30vmax;top:-34vmax;animation:drift-a 90s var(--ease-in-out) -31s infinite}
.env-glow-b{right:-34vmax;bottom:-36vmax;animation:drift-b 90s var(--ease-in-out) -58s infinite}
@keyframes drift-a{0%{transform:translate(0,0)}50%{transform:translate(9vmax,7vmax)}100%{transform:translate(0,0)}}
@keyframes drift-b{0%{transform:translate(0,0)}50%{transform:translate(-8vmax,-9vmax)}100%{transform:translate(0,0)}}
.env-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.03}
.nav,main,.footer{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h)}
.nav::before{content:"";position:absolute;inset:0;background:var(--canvas);opacity:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .45s var(--ease-out);pointer-events:none}
.nav.scrolled::before,.nav.open::before{opacity:.84}
.nav-inner{position:relative;height:100%;max-width:1360px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand .mark{width:24px;height:24px;flex:none}
.brand-logo{display:block;height:24px;width:auto}
.wordmark{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--text-primary)}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:6px;font-weight:500;font-size:14px;color:var(--text-primary);text-decoration:none;opacity:.86;transition:opacity .3s var(--ease-out),background-color .3s var(--ease-out)}
.nav-links a:hover{opacity:1;background:rgba(var(--scrim),.28)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover,.btn-ghost:active{border-color:var(--accent);background:rgba(var(--scrim),.45)}
.btn-nav{height:40px;padding:0 18px;font-size:14px}
.nav-toggle{display:none;position:relative;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center}
.nav-toggle .bar{position:absolute;left:12px;width:20px;height:2px;border-radius:1px;background:var(--text-primary);transition:transform .4s var(--ease-out),opacity .3s var(--ease-out)}
.nav-toggle .bar:nth-child(1){transform:translateY(-4px)}
.nav-toggle .bar:nth-child(2){transform:translateY(4px)}
.nav.open .nav-toggle .bar:nth-child(1){transform:rotate(45deg)}
.nav.open .nav-toggle .bar:nth-child(2){transform:rotate(-45deg)}
@media (max-width:860px){
  :root{--nav-h:58px}
  .nav-inner{padding:0 16px;gap:10px}
  .wordmark{font-size:18px}
  .brand-logo{height:21px}
  .nav-toggle{display:inline-flex;order:3}
  .btn-nav{order:2;height:38px;padding:0 14px}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:8px 12px 14px;background:var(--canvas);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s .35s}
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s}
  .nav-links a{width:100%;justify-content:flex-start;padding:12px 10px;font-size:16px}
}
@media (max-width:400px){.btn-nav{font-size:13px;padding:0 11px}}

/* ---------- hero ----------
   One continuous scroll: the hero film (figure, ring, fly-through, dark side) runs to p 0.47, the copy
   block arrives top-left over the film's empty corner, then the process film draws in across the whole
   stage width and the five steps rise under it, one step under each station of the artwork. --hp is the
   raw hero progress, written once per changed frame by the drive loop; every scroll-driven state in the
   stage is a pure CSS expression off it.

   The five stations, measured off process-hold.jpg (1920x1126, the 4K-sourced encode) at the CENTER OF
   EACH PEDESTAL BASE (the bottom ellipse of the glowing disc the object stands on, not the bright object
   above it), as fractions of the frame width:
     cloud platform x296 .154 | cube pedestal x655 .341 | layer stack x992 .5165 |
     cloud pedestal x1309 .6815 | head sphere x1662 .8655
   The same numbers live in site.js as PSTATIONS. With JS on, a layout pass writes --pf-left/-top/-width
   /-height on the stage and --bx/--bw on each step, so every step block is CENTRED on its station and
   the row hugs the path's floor. The percentage grid below is the no-JS fallback for the same idea. */
.hero{position:relative;height:480vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas);isolation:isolate;
  --hp:0;
  --pk:clamp(0,(var(--hp,0) - .97)/.03,1);   /* the handover: the film's last frame out, the ending still in */
  --copy-top:max(calc(var(--nav-h) + 24px),11%)}
.poster{position:absolute;inset:0;z-index:1;background-color:var(--canvas);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;opacity:calc(1 - var(--pk))}
/* the hero film's dark side, laid over BOTH films as a lighten pass once the handover is done: it carries the
   haze across the whole stage, so the process panel's lifted floor and the canvas around it read as one surface */
.ending{position:absolute;inset:0;z-index:5;background:url('hero-ending.jpg') no-repeat 50% 50%/cover;mix-blend-mode:lighten;opacity:var(--pk);pointer-events:none}
.stage > video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready > video{opacity:calc(1 - var(--pk))}
.stage.video-failed > video{display:none}
/* the base scrim sits above BOTH films, so the process panel's lifted floor and the stage around it are
   darkened by exactly the same amount and the panel has no edge to show */
.scrim{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:calc(1 - .78*var(--pk));background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(var(--scrim),0) 35%,rgba(var(--scrim),.62) 100%)}

/* kicker and side label (chip scrims for small text over footage) */
.chip{background:rgba(var(--scrim),.5);border:1px solid rgba(58,58,92,.35);border-radius:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(var(--scrim),.85)}
.hero-kicker{margin:0;display:flex;align-items:center;gap:14px}
.hero-kicker::after{content:"";width:74px;height:1px;background:var(--line-strong)}
/* the settle kicker: a plain label with the rule of the mockup, crossfading in where the opening chip was */
/* the process kicker's rule tail, now on the section's own kicker */
.ps-kicker{display:flex;align-items:center;gap:14px}
.ps-kicker::after{content:"";width:74px;height:1px;background:var(--line-strong)}
.side{position:absolute;z-index:9;right:20px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;padding:10px 6px;opacity:.7;transition:opacity .5s var(--ease-out);pointer-events:none}
@media (max-height:620px){.hero-kicker,.side{display:none}}

/* loading ring and the scroll cue that replaces it on failure */
.ring,.cue{position:absolute;z-index:7;left:50%;top:84%;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none}
.ring{color:var(--ring);transition:opacity .6s var(--ease-out),visibility 0s .6s}
.ring circle{fill:none;stroke-width:1.25}
.ring-track{stroke:var(--line-strong)}
.ring-bar{stroke:var(--ring);stroke-linecap:round;transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--lp,0)*360deg - 90deg));transition:transform .25s var(--ease-out)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0;visibility:hidden}
/* the process film's own loading ring: centred on its panel, shown only while the visitor has reached the handover and the second Blob is still streaming */
.pf-ring{left:50%;top:48%;opacity:0;visibility:hidden}
.p-wait .pf-ring{opacity:1;visibility:visible;transition:opacity .6s var(--ease-out),visibility 0s}
.cue{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out) .5s,visibility 0s .5s;color:var(--text-secondary)}
.cue svg{width:24px;height:24px;margin:12px auto 0;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.stage.video-failed .cue{opacity:.8;visibility:visible}
.stage.video-failed .cue svg{animation:bob 3.2s var(--ease-in-out) -1.1s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- bands ---------- */
.hero-out{position:absolute;inset:0;z-index:10;background:var(--canvas);opacity:clamp(0,(var(--hp,0) - .955)/.045,1);pointer-events:none}
.bands{position:absolute;inset:0;z-index:6;pointer-events:none}
.band{position:absolute;inset:0;opacity:0;text-shadow:var(--tshadow);pointer-events:none}
.band.off{visibility:hidden}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*min(1,var(--k,1)*2.5));background:radial-gradient(ellipse 34% 62% at 22% 56%,rgba(var(--scrim),.62) 0%,rgba(var(--scrim),.42) 46%,rgba(var(--scrim),0) 76%)}
/* the copy block sits top-left, so its scrim rides the upper left quarter, where the film is near black */
.band-3::before{background:radial-gradient(ellipse 39% 60% at 22% 38%,rgba(var(--scrim),.8) 0%,rgba(var(--scrim),.6) 46%,rgba(var(--scrim),.24) 66%,rgba(var(--scrim),0) 80%)}
.band-inner{position:absolute;left:var(--lane-l);width:var(--lane-w);pointer-events:none}
.band a,.band .btn{pointer-events:auto}
.band .btn{text-shadow:none}
.band-3 .band-inner{top:var(--copy-top)}
.headline{margin-top:22px;font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.02;letter-spacing:-.035em;font-weight:600}
/* the headline's break is structural, never left to the measure: the .sr span still carries the whole
   sentence, and the visual copy is built as two blocks, "From AI ideas to" and "real-world impact.",
   each held on one line so "real-world" can never be orphaned from "impact." */
.headline .vis{display:block}
.headline .hl{display:block;white-space:nowrap}
/* phones: the second block can be wider than the gutter allows, so let it wrap rather than overflow */
@media (max-width:720px){.headline .hl{white-space:normal}}
.subline{margin-top:24px;font-size:1.125rem;line-height:1.55;color:var(--text-secondary);max-width:40ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* the microcopy is the lowest line of the copy block, so it is the one that could reach the artwork:
   61 percent of the lane keeps its right edge inside 28 percent of the stage, and nothing in the film
   is brighter than near-black above the particle cloud inside that column. */
.micro{margin-top:18px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-secondary);opacity:.82;max-width:61%}

/* the four-card strip along the bottom of the stage: inside the copy block, so it rides the same --k */
.hero-strip{position:absolute;z-index:7;left:var(--lane-l);right:var(--lane-l);bottom:clamp(18px,2.8vh,38px);margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;background:rgba(var(--scrim),.6);text-shadow:none;--kb:clamp(0,(var(--k,0) - .86)/.14,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-strip{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}
.hero-strip li{display:flex;align-items:center;gap:14px;padding:15px 20px;border-left:1px solid var(--line)}
.hero-strip li:first-child{border-left:0}
.hs-ibox{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--scrim),.5)}
.hero-strip .ico{width:20px;height:20px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.hs-t{display:block;font-family:var(--body);font-weight:500;font-size:15px;line-height:1.25;color:var(--text-primary)}
.hs-d{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--text-secondary)}
@media (max-width:1100px){
  .hero-strip li{padding:13px 15px;gap:11px}
  .hs-ibox{width:34px;height:34px}
  .hero-strip .ico{width:18px;height:18px}
  .hs-t{font-size:14px}
  .hs-d{font-size:12px}
}
/* a short stage gives the strip's pixels back to the copy */
@media (max-height:720px){.hero-strip{display:none}}

/* split spans: the visual copy is aria-hidden, the .sr span carries the sentence */
.vis{display:inline}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;position:relative}

/* the copy block's arrival, once on load and then held: Words rise 18px in reading order, impact. last with a longer settle and a --ring glow riding k; then the subline, then the buttons and microcopy. */
.band-3 .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
.band-3 .w.em{--kc:clamp(0,(var(--k,0) - var(--th,0))*1.8,1);color:var(--accent);position:relative}
.band-3 .w.em::after{content:attr(data-w);position:absolute;left:0;top:0;color:transparent;text-shadow:0 0 18px var(--ring),0 0 42px var(--accent);opacity:calc(var(--k,0)*.55);pointer-events:none}
.band-3 .subline{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.band-3 .actions,.band-3 .micro{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:calc(var(--kb)*var(--mo,1));transform:translateY(calc((1 - var(--kb))*12px))}
.band-3 .micro{--mo:.82}

/* ---------- the process section: the stage the film and the steps now live on ----------
   Same composition as the hero's old second act: the copy lane top left, the film across the stage
   with its floor just above the steps row, and the five steps rising as their station lights. --hp is
   this section's own progress, --k1 the lane's ramp off it. The stage keeps a footer strip free for
   the closing rule, which the layout pass in site.js accounts for. */
.prosec{position:relative;height:480vh;z-index:1}
.pstage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas);isolation:isolate;
  --hp:0;
  --k1:0;
  --pay:.7363;         /* the frame fraction of the path's floor: the lowest lit row of the platform under the particle cloud (y828 of 1126) */
  --rowh:154px;        /* the room the steps row needs at this type size; JS replaces it with the measured height */
  --pfoot:66px;        /* the strip the closing rule keeps at the bottom of the stage */
  --pat:min(76%,calc(100% - var(--rowh) - var(--pfoot) - 4px));
  --srow:calc(var(--pat) + 4px);
  --pk:clamp(0,var(--hp,0)/.04,1)}
.pstage .ps-lane{top:clamp(80px,9vh,140px);width:min(44%,620px);text-shadow:var(--tshadow)}
.pstage .ps-h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.pstage .ps-sub{max-width:52ch;font-size:1rem}
/* the rule rides --hp, not the film stages' --k3 */
.pstage .ps-rule{bottom:clamp(16px,2.4vh,28px);--kr:clamp(0,(var(--hp,0) - .70)/.14,1)}
.pstage .ps-rule .bar-rl{color:var(--text-secondary)}
.ps-btn{pointer-events:auto;flex:none}
/* the reduced-motion pin, for a live flip on a desktop: the final composition over the last frame */
.pstage.pinned{--hp:1;--k1:1}
.pstage.pinned .p-video{display:none}
.pstage.pinned .p-hold{opacity:1}

/* ---------- the process film: the full width of the stage ----------
   Its blacks are pure #000, so a lighten blend of the canvas over the panel lifts them to exactly the
   canvas tone and the panel has no rectangle edge to show. Same technique as the security film.
   The panel is the frame's own aspect at 100 percent width, then pulled up so the frame fraction --pay
   lands at the stage fraction --pat: the path's floor sits just above the steps row at every size. */
.pfilm{position:absolute;z-index:3;left:0;right:0;top:var(--pat);width:100%;aspect-ratio:1920/1126;transform:translateY(calc(var(--pay)*-100%));overflow:hidden;isolation:isolate;pointer-events:none;opacity:var(--pk)}
/* with JS on, the layout pass places the panel in pixels: width-fitted to the stage (or scaled down when
   the head sphere would reach the nav), its floor parked 4px above the steps row. One set of numbers then
   feeds both the panel and the step blocks, so a station and its text can never drift apart. */
.pf-fit .pfilm{left:var(--pf-left);right:auto;top:var(--pf-top);width:var(--pf-width);height:var(--pf-height);aspect-ratio:auto;transform:none}
.p-video,.p-hold{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;object-fit:cover;background-color:#000}
.p-video{opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.pfilm.video-ready .p-video{opacity:1}
.pfilm.video-failed .p-video{display:none}
.p-hold{z-index:2;opacity:0;background:#000 url('process-hold.jpg') no-repeat 50% 50%/cover}
.pfilm.video-failed .p-hold{opacity:1}
.p-lift{position:absolute;inset:0;z-index:3;background:var(--canvas);mix-blend-mode:lighten;pointer-events:none}
/* nothing to fade on the pinned stage: the lift and the haze pass above it leave no edge. The flowing
   layout, where the still runs full width against the page, turns this on. */
.p-fade{position:absolute;inset:0;z-index:4;pointer-events:none}

/* ---------- the five steps, rising under the artwork as their station lights ----------
   With JS on, each step is an absolutely placed block whose CENTRE sits on its station: the layout pass
   writes --bx (the block's left edge) and --bw (its width) in pixels off the same --pf-left/--pf-width
   the panel uses. The number, the rule and the text stay left-aligned inside the block, as in the mockup.

   Without JS the row falls back to a percentage grid whose track starts are the pedestal-base fractions
   themselves: 0 (a spacer), then 15.4%, 34.1%, 51.65%, 68.15%, 86.55%. The last pair carries the clamp:
   track six never falls under --c5min, and track five gives up exactly that difference, so the fifth
   description still fits against the right edge. Nothing here may use gap, which would push every start
   off its station. */
.steps-row{position:absolute;z-index:8;left:0;right:0;top:var(--srow);margin:0;padding:0;list-style:none;
  --c5min:150px;
  display:grid;
  grid-template-columns:15.4% 18.7% 17.55% 16.5% calc(31.85% - max(13.45%,var(--c5min))) max(13.45%,var(--c5min));
  gap:0;align-items:start;pointer-events:none}
.steps-row::before{content:"";display:block}
.pf-fit .steps-row{display:block;height:var(--rowh)}
.pf-fit .steps-row::before{display:none}
.pf-fit .pstep{position:absolute;top:0;left:var(--bx,0px);width:var(--bw,300px)}
.pstep{--ks:clamp(0,(var(--hp,0) - var(--st,1))*12,1);
  --kr:clamp(0,(var(--hp,0) - var(--st,1) - .012)*12,1);
  --kt:clamp(0,(var(--hp,0) - var(--st,1) - .023)*12,1);
  position:relative;min-width:0;opacity:var(--ks)}
.pnum{display:block;font-size:1.1rem;line-height:1;letter-spacing:.04em;color:var(--accent-hover);transform:translateY(calc((1 - var(--ks))*14px))}
.prule{position:absolute;left:38px;top:5px;right:20px;height:8px;opacity:var(--kr);transform:translateY(calc((1 - var(--kr))*14px))}
.prule::before{content:"";position:absolute;left:0;top:1px;width:6px;height:6px;border-radius:50%;border:1px solid var(--line-strong);box-sizing:border-box}
.prule::after{content:"";position:absolute;left:12px;right:7px;top:3.5px;height:1px;background:var(--line)}
.parrow{position:absolute;right:0;top:0;width:8px;height:8px;fill:none;stroke:var(--text-secondary);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.ptitle{margin-top:18px;padding-right:22px;font-family:var(--display);font-weight:500;font-size:1.3125rem;line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);opacity:var(--kt);transform:translateY(calc((1 - var(--kt))*14px))}
.pdesc{margin-top:9px;padding-right:22px;font-size:.875rem;line-height:1.5;color:var(--text-secondary);opacity:var(--kt);transform:translateY(calc((1 - var(--kt))*14px))}

/* narrower scrub screens keep the copy lane readable and the last column honest */
@media (max-width:1100px){
  :root{--lane-w:40%}
  .steps-row{--c5min:140px}
  .prule{left:30px;right:16px}
  .ptitle{font-size:1.125rem;margin-top:14px;padding-right:16px}
  .pdesc{font-size:.8125rem;padding-right:16px}
}
/* Shorter stages. The vertical budget is fixed: the copy block, then the artwork's cloud band (the
   0.248 of the frame height between the cloud's first speck and the path's floor, which at full width
   is 14.5 percent of the stage WIDTH), then the steps row. When the stage loses height the copy and the
   row have to give the cloud band its pixels back, so both shrink and the microcopy runs full lane
   width on two lines instead of three. */
@media (max-height:860px),(min-width:1500px) and (max-height:940px),(min-width:2100px) and (max-height:1150px){
  .pstage{--rowh:142px}
  .stage{--copy-top:max(calc(var(--nav-h) + 16px),9%)}
  .band-3 .band-inner{top:calc(var(--copy-top) + 38px)}
  .headline{margin-top:18px;font-size:clamp(1.9rem,3.5vw,3.1rem)}
  .subline{margin-top:14px;font-size:.9375rem;max-width:42ch}
  .actions{margin-top:20px}
  .actions .btn{height:44px}
  .micro{margin-top:12px;font-size:11px}
  .ptitle{margin-top:14px;font-size:1.1875rem}
  .pdesc{margin-top:8px;font-size:.8125rem}
}
@media (max-height:760px),(min-width:1500px) and (max-height:820px),(min-width:2100px) and (max-height:1000px){
  .pstage{--rowh:128px}
  .stage{--copy-top:max(calc(var(--nav-h) + 4px),8%)}
  .band-3 .band-inner{top:calc(var(--copy-top) + 34px)}
  .headline{margin-top:14px;font-size:clamp(1.6rem,2.9vw,2.4rem)}
  .subline{margin-top:8px;font-size:.8125rem}
  .actions{margin-top:14px}
  .actions .btn{height:42px}
  .micro{margin-top:8px;font-size:9.5px}
  .pnum{font-size:.9375rem}
  .prule{top:3px}
  .ptitle{margin-top:8px;font-size:1.0625rem}
  .pdesc{margin-top:4px}
}
/* narrow scrub windows wrap every description, so the row is taller than any of the bands above assume */
@media (max-width:1100px){.pstage{--rowh:176px}}
@media (max-height:699px){.steps-row,.pf-fit .steps-row{display:none}}

/* ---------- phone cubes (vector plan item 5), shown only in the stacked static hero ---------- */
.cubes{display:none;position:absolute;left:0;top:0;width:100%;height:520px;z-index:0;pointer-events:none;color:var(--accent-muted);overflow:hidden}
.cubes use{opacity:.9}
.cubes .cb{animation:sink 40s linear infinite}
.cubes .cb:nth-child(1){animation-delay:-3s}.cubes .cb:nth-child(2){animation-delay:-9s}.cubes .cb:nth-child(3){animation-delay:-15s}.cubes .cb:nth-child(4){animation-delay:-21s}
.cubes .cb:nth-child(5){animation-delay:-27s}.cubes .cb:nth-child(6){animation-delay:-33s}.cubes .cb:nth-child(7){animation-delay:-6s}.cubes .cb:nth-child(8){animation-delay:-18s}
@keyframes sink{0%{transform:translateY(-40px)}100%{transform:translateY(560px)}}

/* ---------- the static hero: the five gates, identical strings in site.js ---------- */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:100vh;min-height:640px;--hp:1}
  .pstage{--hp:1;--k1:1}
  .stage > video,.ring,.cue,.band-1,.band-2,.side{display:none}
  .band-3{opacity:1;visibility:visible;--k:1}
  .band-3 .w,.band-3 .w.em{--kc:1}
  .band-3 .subline{--ks:1}
  .band-3 .actions,.band-3 .micro,.hero-strip{--kb:1}
  .hero-out{display:none}
  .p-video{display:none}
  .p-hold{opacity:1}
  .steps-row{display:grid}
}
/* the stacked portrait layout: the four device gates (reduced motion on a desktop keeps the pinned composition above) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .stage{height:auto;min-height:0;display:flex;flex-direction:column;padding:calc(var(--nav-h) + 40px) 16px 40px;overflow:visible}
  .prosec{height:auto}
  .pstage{position:relative;height:auto;display:flex;flex-direction:column;padding:96px 16px 80px;overflow:visible}
  .pstage .ps-lane{position:relative;order:1;left:auto;top:auto;width:auto;transform:none;pointer-events:auto;text-shadow:none}
  .pstage .ps-h2{font-size:clamp(2rem,8.4vw,2.8rem)}
  .pstage .ps-sub{max-width:none}
  .pstage .ps-rule{position:relative;order:6;left:auto;right:auto;bottom:auto;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap;gap:14px 20px;transform:none}
  .ps-btn{width:100%}
  .scrim,.side,.ending{display:none}
  .cubes{display:block}
  .bands{position:relative;order:2;inset:auto;z-index:2;margin-top:18px}
  .band-3{position:relative;inset:auto;text-shadow:none}
  .band-3::before{display:none}
  .band-3 .band-inner{position:relative;left:auto;top:auto;width:auto;transform:none}
  .headline{margin-top:18px;font-size:clamp(2.1rem,9.4vw,3.1rem)}
  .subline{margin-top:18px;font-size:1rem}
  .actions{margin-top:24px}
  .actions .btn{flex:1 1 auto}
  .micro{max-width:none;font-size:12px}
  .hero-strip{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;margin-top:28px;transform:none}
  .hero-strip li{border-left:0;border-top:1px solid var(--line)}
  .hero-strip li:first-child{border-top:0}
  @media (min-width:600px){
    .hero-strip{grid-template-columns:1fr 1fr}
    .hero-strip li:nth-child(2){border-top:0}
    .hero-strip li:nth-child(odd){border-left:0}
    .hero-strip li:nth-child(even){border-left:1px solid var(--line)}
  }
  .poster{position:relative;order:3;inset:auto;z-index:1;margin:32px -16px 0;aspect-ratio:4/3;background-position:62% 40%;opacity:1}
  .poster::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(var(--scrim),0) 35%,rgba(var(--scrim),.62) 100%),linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 18%,rgba(12,12,22,0) 82%,var(--canvas) 100%)}
  .pfilm{position:relative;order:4;right:auto;top:auto;width:auto;z-index:2;margin:24px -16px 0;transform:none;opacity:1}
  .p-fade{background:linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 14%),linear-gradient(to top,var(--canvas) 0%,rgba(12,12,22,0) 16%)}
  .steps-row{position:relative;order:5;left:auto;right:auto;top:auto;bottom:auto;z-index:2;display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px;pointer-events:auto}
  .steps-row::before{display:none}
  .pstep{opacity:1}
  .pnum,.ptitle,.pdesc{transform:none;opacity:1}
  .prule{display:none}
  .ptitle{margin-top:8px;font-size:1.25rem;padding-right:0}
  .pdesc{max-width:46ch;font-size:1rem;padding-right:0}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  @media (min-width:600px){
    .steps-row{grid-template-columns:1fr 1fr;gap:26px 28px}
  }
}

/* ---------- entrance families for the sections (one IntersectionObserver adds .in, JS adds .settled after the stagger) ---------- */
[data-enter] [data-part],[data-enter][data-part]{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-enter] [data-part]:nth-child(1){transition-delay:0ms}
[data-enter] [data-part]:nth-child(2){transition-delay:90ms}
[data-enter] [data-part]:nth-child(3){transition-delay:180ms}
[data-enter] [data-part]:nth-child(4){transition-delay:270ms}
[data-enter] [data-part]:nth-child(5){transition-delay:360ms}
[data-enter] [data-part]:nth-child(6){transition-delay:450ms}
[data-enter] [data-part]:nth-child(7){transition-delay:540ms}
[data-enter] [data-part]:nth-child(8){transition-delay:630ms}
[data-enter] [data-part]:nth-child(n+9){transition-delay:720ms}
[data-enter].settled [data-part]:nth-child(n),[data-enter].settled[data-part]{transition-delay:0ms}
/* rise: 20px up and fade */
.rise[data-enter] [data-part],.rise[data-enter][data-part]{opacity:0;transform:translateY(20px)}
.rise[data-enter].in [data-part],.rise[data-enter].in[data-part]{opacity:1;transform:none}
/* halves: pairs pulled toward the center, sliding out */
.halves[data-enter] [data-part]{opacity:0}
.halves[data-enter] [data-part]:nth-child(odd){transform:translateX(24px)}
.halves[data-enter] [data-part]:nth-child(even){transform:translateX(-24px)}
.halves[data-enter].in [data-part]{opacity:1;transform:none}
/* blur-focus: two stacked copies, static blur on the soft one, crossfaded */
.bf{position:relative;display:inline-block}
.bf .soft{position:absolute;left:0;top:0;filter:blur(10px);pointer-events:none;user-select:none}
.focus[data-enter] .bf .sharp{opacity:0;transition:opacity .9s var(--ease-out)}
.focus[data-enter] .bf .soft{opacity:1;transition:opacity .9s var(--ease-out)}
.focus[data-enter].in .bf .sharp{opacity:1}
.focus[data-enter].in .bf .soft{opacity:0}
.focus[data-enter] [data-part]:nth-child(2) .bf span{transition-delay:120ms}
.focus[data-enter] [data-part]:nth-child(3) .bf span{transition-delay:240ms}
.focus[data-enter] [data-part]:nth-child(4) .bf span{transition-delay:360ms}
.focus[data-enter] [data-part]:nth-child(5) .bf span{transition-delay:480ms}
.focus[data-enter] [data-part]:nth-child(6) .bf span{transition-delay:600ms}
.focus[data-enter].settled [data-part]:nth-child(n) .bf span{transition-delay:0ms}
/* draw: SVG paths with pathLength="1" draw themselves */
.draw[data-enter] path[data-part],.draw[data-enter] [data-part] path,.draw[data-enter] .draw-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-in-out)}
.draw[data-enter].in path[data-part],.draw[data-enter].in [data-part] path,.draw[data-enter].in .draw-path{stroke-dashoffset:0}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 24px 40px;color:var(--text-secondary);font-size:14px}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;gap:22px}
.footer-brand{color:var(--text-primary);font-size:15px;max-width:60ch}
.footer-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0}
.footer-nav a{display:inline-flex;align-items:center;justify-content:center;padding:4px 0;color:var(--text-primary);text-decoration:none;font-weight:500;opacity:.86;transition:opacity .3s var(--ease-out)}
.footer-nav a:hover{opacity:1}
.footer-nav .dot{padding:0 10px;color:var(--text-secondary)}
.footer-note{max-width:60ch}
.footer-copy{font-family:var(--mono);font-size:12px;letter-spacing:.04em}

/* ---------- coarse pointers: 44px targets without changing layout ---------- */
@media (pointer:coarse){
  .btn,.nav-links a,.footer-nav a,.skip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a{justify-content:flex-start}
  .brand{min-height:44px;display:inline-flex;align-items:center;justify-content:flex-start}
}

/* ---------- pause everything on a hidden tab ---------- */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- reduced motion: no motion at all, final states everywhere ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .env-glow{transform:none}
  .btn:hover{transform:none}
  .cubes .cb{transform:translateY(120px)}
  [data-enter] [data-part],[data-enter][data-part],.halves[data-enter] [data-part]{opacity:1;transform:none}
  .focus[data-enter] .bf .sharp{opacity:1}
  .focus[data-enter] .bf .soft{opacity:0}
  .draw[data-enter] path[data-part],.draw[data-enter] [data-part] path,.draw[data-enter] .draw-path{stroke-dashoffset:0}
  .nav-links{transform:none}
}


/* ======================================================================
   SECTIONS (builder B). Everything below the hero. Colors only through the tokens above.
   ====================================================================== */

/* ---------- shared scaffolding ---------- */
.sec{position:relative;padding:128px 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.col{max-width:768px;margin:0 auto;padding:0 24px}
.h2{font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.03em;color:var(--text-primary);margin-top:18px;max-width:22ch}
.h2.big{font-size:clamp(2.2rem,4.2vw,3.6rem);max-width:16ch}
.lede{margin-top:20px;font-size:1.0625rem;line-height:1.6;color:var(--text-secondary);max-width:56ch}
.close{margin-top:40px;font-size:1.125rem;line-height:1.5;color:var(--text-primary);max-width:48ch}
.foot{margin-top:16px}
.tlink{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 0;font-weight:500;color:var(--text-primary);text-decoration:none;position:relative;opacity:.86;transition:opacity .35s var(--ease-out)}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--text-primary);transform:scaleX(.42);transform-origin:left;transition:transform .5s var(--ease-out);opacity:.7}
.tlink:hover{opacity:1}
.tlink:hover::after{transform:scaleX(1)}
.sec h3{font-weight:500;letter-spacing:-.015em}

/* ---------- 1. barriers: the problem stage, the first beat after the hero film (its own controller in site.js). The stage pins for 260vh, 320vh once a film is in; --k1, --k2, --k3 are written by the drive loop and every state here is pure CSS off them ---------- */
/* both film stages share the drive variables, the sticky stage, the card look and the static gates; the per-section rules below only carry geometry */
.filmstage{--k1:0;--k2:0;--k3:0}
/* the card rows are links now, so they leave the tab order until they are on screen */
.filmstage.cards-off .cardrow{visibility:hidden}
/* a card that links somewhere lifts on hover and takes a focus ring */
a.bar-card{text-decoration:none;color:inherit;transition:transform .5s var(--ease-out),border-color .4s var(--ease-out)}
a.bar-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
a.bar-card:focus-visible{outline:none;transform:translateY(-4px);border-color:var(--accent)}
.cap-ex{grid-column:1/-1;margin-top:13px;padding-top:11px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-secondary);transition:color .35s var(--ease-out)}
.cap-ex .ico{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
a.bar-card:hover .cap-ex,a.bar-card:focus-visible .cap-ex{color:var(--text-primary)}
a.bar-card:hover .cap-ex .ico{transform:translateX(3px)}
.barriers{position:relative;height:460vh;z-index:1}
.barriers.has-film{height:520vh}
.bar-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
/* the film panel: full bleed behind the copy. Empty until the footage lands, so the stage is a calm vignette on its own */
.bar-film{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--canvas);container-type:size;isolation:isolate}
.bar-poster,.bar-hold{position:absolute;inset:0;background-color:var(--canvas);background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.bar-poster{z-index:1}
.bar-hold{z-index:3;opacity:0}
.bar-video{position:absolute;inset:0;z-index:2;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.bar-film.video-ready .bar-video{opacity:1}
.bar-film.video-failed .bar-video{display:none}
/* the film's blacks are pure #000; a lighten blend of the canvas lifts them to the canvas tone, so the frame has no edge to show */
.bar-lift{position:absolute;inset:0;z-index:3;background:var(--canvas);mix-blend-mode:lighten;pointer-events:none}
/* the fade dissolves the frame's edges into the canvas, plus the base scrim under the copy lane */
.bar-fade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 14%),linear-gradient(to top,var(--canvas) 0%,rgba(12,12,22,.55) 12%,rgba(12,12,22,0) 38%),linear-gradient(to right,rgba(var(--scrim),.66) 0%,rgba(var(--scrim),.28) 34%,rgba(var(--scrim),0) 62%),radial-gradient(ellipse 120% 90% at 55% 45%,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.34) 100%)}
/* with no footage in place there is nothing to lift or fade from black: the poster and the lift stand down and the vignette carries the stage */
.bar-film.film-empty .bar-poster,.bar-film.film-empty .bar-lift,.bar-film.film-empty .bar-hold{display:none}
/* the top edge resolves to flat canvas, so the stage arriving under the hero's dark end shows no seam */
.bar-film.film-empty .bar-fade{background:linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 20%),radial-gradient(ellipse 110% 80% at 62% 46%,var(--accent-muted) 0%,rgba(43,35,82,.28) 38%,rgba(12,12,22,0) 72%),radial-gradient(ellipse 120% 90% at 50% 52%,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.4) 100%)}
/* the loading ring shows only while the film is streaming */
.bar-ring{left:50%;top:50%;z-index:6;opacity:0;visibility:hidden}
.bar-film.loading .bar-ring{opacity:1;visibility:visible}
/* the copy lane: top left. The text shadow is for footage: with an empty film there is nothing to sit over, so it stays off until a film is in */
.bar-lane{position:absolute;z-index:5;left:6%;top:clamp(96px,16vh,190px);width:min(62%,860px);pointer-events:none;text-shadow:none}
.filmstage.has-film .bar-lane{text-shadow:var(--tshadow)}
.bar-kicker{margin:0;color:var(--accent-hover);--kq:clamp(0,var(--k1,0)*4,1);opacity:var(--kq);transform:translateY(calc((1 - var(--kq))*10px))}
.bar-h2{margin-top:20px;font-size:clamp(2rem,3.5vw,3.4rem);line-height:1.04;letter-spacing:-.03em;font-weight:600;color:var(--text-primary)}
.bar-l1,.bar-l2{display:block}
/* ignition: each word is a muted ghost with a bright copy fading in over it, rising 10px in reading order on its own --th off --k1 */
.bar-h2 .w{position:relative;display:inline-block;white-space:nowrap;color:var(--accent-muted);--kc:clamp(0,(var(--k1,0) - var(--th,0))*4,1);opacity:calc(.55 + .45*var(--kc));transform:translateY(calc((1 - var(--kc))*10px))}
.bar-h2 .w::after{content:attr(data-w);position:absolute;left:0;top:0;color:var(--text-primary);opacity:var(--kc)}
.bar-l2 .w::after,.bar-h2 .w.vio::after{background:linear-gradient(90deg,var(--accent-hover),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.bar-sub{margin-top:22px;font-size:1.0625rem;line-height:1.6;color:var(--text-secondary);max-width:58ch;--ks:clamp(0,(var(--k1,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
/* the four cards along the bottom, one by one across --k3 on their own --at */
/* the films and the cards share one grid: row one is the film panels, row two the cards, so a panel
   and its card can never drift apart */
.bar-grid{position:absolute;left:6%;right:6%;bottom:clamp(56px,7.4vh,104px);display:grid;gap:clamp(10px,1.4vh,18px)}
/* this section carries a film over every card, so its lane sits higher than the other stages' */
.barriers .bar-lane{top:clamp(84px,13vh,170px);right:6%;width:auto}
.barriers .bar-film{z-index:auto}
.bar-cards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bar-panels{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* each panel is centred in its column at the film's own aspect, and its height is capped so the copy
   lane above always has room */
.bp{display:flex;align-items:flex-end;justify-content:center;--ka:clamp(0,(var(--k3,0) - var(--at,0))*5,1)}
/* no rectangle to see: each film is lit shapes on pure black, so a screen blend drops the black out
   against whatever is behind and only the light is left. The opacity and the blend both sit on this
   element, because an ancestor carrying the opacity would isolate the blend from the page behind. */
.bp-in{position:relative;display:block;width:100%;aspect-ratio:4/3;max-height:26vh;overflow:hidden;opacity:var(--ka,0);mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 88% 88% at 50% 50%,#000 58%,rgba(0,0,0,.6) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 88% 88% at 50% 50%,#000 58%,rgba(0,0,0,.6) 82%,transparent 100%)}
.bp-poster,.bp-hold{position:absolute;inset:0;background-color:#000;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.bp-poster{z-index:1}
.bp-hold{z-index:3;opacity:0}
.bp-video{position:absolute;inset:0;z-index:2;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .7s var(--ease-out)}
.bp-in.video-ready .bp-video{opacity:1}
.bp-in.video-failed .bp-video{display:none}
.bp-in.video-failed .bp-hold{opacity:1}
/* the screen blend does what the lift used to do, so the lift layer stands down */
.bp-lift{display:none}
/* the lane's two statements share one grid cell: the problem fades out and the solution's words
   ignite off --sol, which the scroll writes once the cards have landed and before the films start */
/* the problem holds the left of the stage and the solution answers from the right, both in one
   grid cell so the lane is as tall as the taller of the two */
.lane-swap{display:grid}
.lane-swap > div{grid-area:1/1}
.ls-a{justify-self:start;max-width:min(62%,860px);opacity:calc(1 - var(--sol,0))}
.ls-b{justify-self:end;max-width:min(54%,720px);text-align:right;opacity:var(--sol,0)}
/* the kicker's rule tail and the prompt's dot mirror, so both hug the right margin */
.ls-b .bar-kicker,.ls-b .bar-hint{flex-direction:row-reverse}
.ls-b .bar-sub{margin-left:auto}
.sol-h2 .w{--kc:clamp(0,(var(--sol,0) - var(--th,0))*4,1)}
/* the invitation, out once every card has been answered */
.bar-hint{display:flex;align-items:center;gap:10px;margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);--kh:clamp(0,(var(--sol,0) - .7)/.3,1);opacity:var(--kh);transition:opacity .6s var(--ease-out)}
.barriers.all-done .bar-hint{opacity:0}
.hint-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
.barriers.live .hint-dot{animation:hintpulse 2.6s var(--ease-in-out) infinite}
@keyframes hintpulse{0%,100%{box-shadow:0 0 0 3px var(--accent-muted)}50%{box-shadow:0 0 0 7px var(--accent-muted)}}
/* the whole card is the button: the hit area covers it, so the heading inside stays a heading */
.bar-card{position:relative}
.bar-hit{position:absolute;inset:0;z-index:3;width:100%;border-radius:12px;cursor:pointer;background:none;border:0}
.bar-hit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bar-slot:hover .bar-card{border-color:var(--line-strong)}
.bar-slot:hover .bar-card::after{opacity:1}
/* the card's two states share one grid cell, so the card is as tall as the longer of the two */
.bar-swap{display:grid;grid-column:1/-1}
.bar-swap > div{grid-area:1/1}
.bs-a{opacity:calc(1 - var(--sw,0))}
.bs-b{opacity:var(--sw,0)}
.bar-swap h3,.bar-swap .cap-cb{margin-top:0}
.bar-swap-t{margin-top:1px}
.bar-swap-d{margin-top:8px}
.bar-slot{--ka:clamp(0,(var(--k3,0) - var(--at,0))*5,1);opacity:var(--ka);transform:translateY(calc((1 - var(--ka))*18px))}
.bar-card{position:relative;display:flex;gap:14px;padding:18px;border-radius:12px;border:1px solid var(--line);background:var(--panel);text-shadow:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar-card{background:color-mix(in srgb,var(--panel) 58%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.bar-card::after{content:"";position:absolute;inset:-1px;border-radius:13px;pointer-events:none;box-shadow:0 0 0 1px var(--accent-muted),0 0 24px var(--accent-muted);opacity:var(--ka,0);transition:opacity .45s var(--ease-out)}
/* the section's living element: the idle float of the cards, on only while the section is on screen */
.filmstage.live .cardrow{animation:floaty 14s var(--ease-in-out) infinite}
.bar-ibox{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:rgba(var(--scrim),.45)}
.bar-card .ico{width:20px;height:20px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.bar-text{min-width:0}
.bar-ix{font-size:11px;letter-spacing:.14em;color:var(--accent-hover)}
.bar-card h3{margin-top:6px;font-size:1.0625rem;line-height:1.25;font-weight:500;letter-spacing:-.015em;color:var(--text-primary)}
.bar-card p:last-child{margin-top:8px;font-size:.9375rem;line-height:1.5;color:var(--text-secondary)}
/* the closing rule, last in */
.bar-rule{position:absolute;z-index:5;left:6%;right:6%;bottom:clamp(30px,4.4vh,56px);display:flex;align-items:center;gap:20px;--kr:clamp(0,(var(--k3,0) - .84)/.16,1);opacity:var(--kr);transform:translateY(calc((1 - var(--kr))*8px))}
/* this section's rule comes after the fourth film, not with the cards */
/* the section closes only once all four are answered, whichever way they were answered */
.barriers .bar-rule{--kr:0;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.barriers.all-done .bar-rule{--kr:1}
.bar-rl,.bar-rr{font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.bar-rl{color:var(--text-primary)}
.bar-rr{color:var(--text-secondary)}
.bar-hair{flex:1 1 auto;min-width:24px;height:1px;background:var(--line)}
@media (max-height:680px){.bar-rule{display:none}}
/* under about 860px of stage there is no room for a full-width film over a card, so it falls back
   to a smaller one centred in the column, and under 760px the row stands down altogether */
@media (max-height:860px){.bp-in{width:auto;height:clamp(104px,16vh,170px);max-height:none}}
@media (max-height:760px){.bar-panels{display:none}}
@media (max-width:1400px){
  .bar-cards,.bar-panels{gap:12px}
  .bar-card{padding:15px;gap:12px}
  .bar-card p:last-child{font-size:.9rem}
}
/* narrow scrub windows (a fine-pointer landscape window under 1100px): a wider lane and two rows of cards */
@media (max-width:1100px){
  .bar-lane{width:min(74%,640px)}
  .bar-h2{font-size:clamp(1.9rem,3.4vw,3.2rem)}
  .bar-sub{max-width:46ch;font-size:1rem}
  .bar-cards{grid-template-columns:1fr 1fr;gap:10px}
  /* two cards to a row leaves no height for a film over each one */
  .bar-panels{display:none}
  .bar-card .cap-cb,.bar-card p:last-child{display:none}
}
/* the static states: the five gates (identical strings in site.js) and the reduced-motion pin. Every state is final and the film stands down */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .filmstage{--k1:1;--k2:1;--k3:1}
  .filmstage.cards-off .cardrow{visibility:visible}
  .cap-labels{opacity:1;visibility:visible}
  .barriers .bar-rule{--kr:1}
  /* no scroll to drive the lane either, so both statements stand, the solution under a rule */
  .lane-swap{display:block}
  .lane-swap > div{grid-area:auto}
  .ls-a,.ls-b{opacity:1}
  .ls-a,.ls-b{max-width:none;text-align:left}
  .ls-b .bar-kicker,.ls-b .bar-hint{flex-direction:row}
  .ls-b{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
  .sol-h2 .w{--kc:1}
  .bar-hint,.bar-hit{display:none}
  /* nothing drives the swap here, so the card carries both states: the problem in full, then the
     answer under a rule. display:contents lets one flex order interleave the two swap groups, so it
     reads problem title, problem line, answer title, answer line. */
  .bar-text{display:flex;flex-direction:column}
  .bar-swap{display:contents}
  .bs-a,.bs-b{opacity:1}
  .bar-swap-t .bs-a{order:1}
  .bar-swap-d .bs-a{order:2}
  .bar-swap-t .bs-b{order:3;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .bar-swap-d .bs-b{order:4;margin-top:6px}
  .bar-swap-t .bs-b h3{color:var(--accent-hover)}
  .bp-video{display:none}
  .bp-hold{opacity:1}
  .bar-video,.bar-poster,.bar-ring{display:none}
  .bar-hold{opacity:1}
  .filmstage.live .cardrow{animation:none}
}
.filmstage.pinned{--k1:1;--k2:1;--k3:1}
.filmstage.pinned.cards-off .cardrow{visibility:visible}
.filmstage.pinned .bar-video,.filmstage.pinned .bar-poster,.filmstage.pinned .bar-ring{display:none}
.filmstage.pinned .bar-hold{opacity:1}
.filmstage.pinned.live .cardrow{animation:none}
/* the flowing layout: the four device gates (reduced motion on a desktop keeps the pinned composition over the still) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .filmstage,.filmstage.has-film{height:auto}
  .bar-stage{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;padding:104px 16px 88px}
  .bar-film{position:relative;order:2;inset:auto;height:auto;aspect-ratio:16/9;margin:32px -16px 0}
  .bar-film.film-empty{display:none}
  .bar-lane{position:relative;order:1;left:auto;top:auto;width:auto;pointer-events:auto;text-shadow:none}
  .barriers .bar-lane{top:auto;right:auto}
  .bar-kicker,.bar-h2 .w,.bar-sub{transform:none}
  .bar-h2{font-size:clamp(2.1rem,9vw,3rem)}
  .bar-sub{margin-top:18px;font-size:1rem;max-width:none}
  .cardrow{grid-template-columns:1fr;gap:12px}
  .bar-grid{position:relative;order:3;left:auto;right:auto;bottom:auto;margin-top:28px}
  .bar-panels{display:none}
  .bar-slot{transform:none}
  .bar-card{padding:16px;gap:14px;text-shadow:none}
  .bar-card::after{opacity:.6}
  .bar-card p:last-child{display:block;font-size:.9375rem}
  .bar-rule{position:relative;order:4;left:auto;right:auto;bottom:auto;display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);transform:none}
  .bar-hair{display:none}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  @media (min-width:600px){
    .cardrow{grid-template-columns:1fr 1fr}
  }
}

/* ---------- 1c. capabilities: the what-we-build stage, on the same film-stage machinery and the same card style as #barriers. The lane is narrower because this artwork works from the middle out, and the row carries six cards instead of four ---------- */
.capabilities{position:relative;height:280vh;z-index:1}
.capabilities.has-film{height:340vh}
/* the lane: narrower and higher than the problem stage's, with the headline broken over three lines by hand */
.cap-lane{top:clamp(80px,10vh,140px);width:min(34%,520px)}
.capabilities.picked .cap-lane{width:min(40%,600px)}
.cap-h2{font-size:clamp(1.9rem,3vw,3rem)}
.cap-sub{max-width:46ch;font-size:1rem;line-height:1.55}
.cap-actions{margin:26px 0 0;--kb:clamp(0,(var(--k1,0) - .68)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}
.cap-actions .btn{pointer-events:auto}
/* the three proof lines under the button */
.cap-proof{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:16px 22px;--kp:clamp(0,(var(--k1,0) - .78)*5,1);opacity:var(--kp);transform:translateY(calc((1 - var(--kp))*10px))}
.cap-proof li{display:flex;align-items:center;gap:9px}
.cap-proof .ico{flex:none;width:18px;height:18px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.cap-pt{display:block;font-size:13px;line-height:1.35;font-weight:500;color:var(--text-primary)}
.cap-pl{display:block;font-weight:400;color:var(--text-secondary)}
/* the six cards along the bottom: the number and the icon share the top row, the title and the line sit under them */
.cap-cards{position:absolute;z-index:5;left:6%;right:6%;bottom:clamp(64px,9vh,112px);margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cap-card{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:16px;align-content:start;height:100%}
.cap-card .bar-ix{grid-column:1;grid-row:1;align-self:center}
.cap-card .bar-ibox{grid-column:2;grid-row:1;width:32px;height:32px;border-radius:8px}
.cap-card .bar-ibox .ico{width:17px;height:17px}
.cap-card h3{grid-column:1/-1;margin-top:10px;font-size:.975rem;line-height:1.22}
.cap-card .cap-cb,.cap-card p:last-child{grid-column:1/-1;margin-top:7px;font-size:.85rem;line-height:1.45}
/* the closing label stands alone here: there is no second line to terminate a hairline */
.cap-rule{bottom:clamp(26px,3.8vh,50px)}
.cap-rule .bar-hair{display:none}
/* on a short window the proof lines are the first thing to go */
@media (max-height:820px){.cap-proof{display:none}}
@media (max-width:1400px){
  .cap-cards{gap:10px}
  .cap-card{padding:13px}
  .cap-card h3{font-size:.9375rem}
  .cap-card .cap-cb,.cap-card p:last-child{font-size:.825rem}
}
/* narrow scrub windows: a wider share for the lane and the six cards in two rows of three */
@media (max-width:1100px){
  .capabilities{--film-l:46%;--film-r:2%}
  .cap-lt{font-size:1.5cqw;letter-spacing:.06em}
  .cap-lane{width:min(42%,470px)}
  .cap-h2{font-size:clamp(1.8rem,2.9vw,2.6rem)}
  .cap-sub{max-width:40ch;font-size:.9375rem}
  .cap-cards{grid-template-columns:repeat(3,1fr)}
  .cap-card .cap-cb,.cap-card p:last-child{display:none}
}
/* the flowing layout: the four device gates (the shared .bar-stage and .cardrow rules do the rest) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .capabilities .bar-film{position:relative;order:2;left:auto;right:auto;top:auto;margin:32px -16px 0;aspect-ratio:1600/938}
  .cap-labels{display:none}
  .cap-swap{display:block}
  .cap-swap > div{grid-area:auto}
  .cap-detail{display:none}
  .cap-lane{width:auto;top:auto}
  .cap-h2{font-size:clamp(2rem,8.4vw,2.8rem)}
  .cap-sub{max-width:none;font-size:1rem}
  .cap-actions,.cap-proof{transform:none}
  .cap-proof{display:flex;gap:14px 20px}
  .cap-actions .btn{width:100%}
  /* this block owns every property the cap rules above set, because those rules sit later in the file than the shared .cardrow and .bar-rule flow overrides and would otherwise win here */
  .cap-cards{position:relative;order:3;left:auto;right:auto;bottom:auto;margin-top:28px;grid-template-columns:1fr}
  .cap-rule{bottom:auto}
  @media (min-width:600px){
    .cap-cards{grid-template-columns:1fr 1fr}
  }
  .cap-card{padding:16px}
  .cap-card h3{font-size:1.0625rem}
  .cap-card .cap-cb,.cap-card p:last-child{display:block;font-size:.9375rem}
}

/* ---- the artwork: the film sits in the upper right of the stage at its own aspect, and the label
   layer is pinned to exactly the same box, so every label can be placed as a fraction of the frame.
   The film is lit glass on pure black, so a screen blend drops the black out: no panel edge, and
   nothing between it and the stage may open a stacking context or the blend cannot reach the page. ---- */
.capabilities{--film-l:41.5%;--film-r:2%;--film-t:clamp(40px,5.6vh,84px)}
.capabilities .bar-film,.cap-labels{position:absolute;left:var(--film-l);right:var(--film-r);top:var(--film-t);bottom:auto;height:auto;aspect-ratio:1600/938}
.capabilities .bar-film{z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen}
.capabilities .bar-poster,.capabilities .bar-hold,.capabilities .bar-video{background-color:#000}
.capabilities .bar-lift,.capabilities .bar-fade{display:none}
/* the labels arrive once the cubes have settled, which the stage flags with .artwork-in */
.cap-labels{z-index:6;margin:0;padding:0;list-style:none;container-type:size;opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility 0s .7s}
.capabilities.artwork-in .cap-labels{opacity:1;visibility:visible;transition:opacity .7s var(--ease-out),visibility 0s}
/* one hit area per glass face, turned to sit square on it */
.cap-lb{position:absolute;left:calc(var(--cx)*100%);top:calc(var(--cy)*100%);width:calc(var(--cw)*100%);height:calc(var(--ch)*100%);transform:translate(-50%,-50%) rotate(var(--ca))}
.cap-lbtn{display:block;width:100%;height:100%;padding:0;background:none;border:0;border-radius:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cap-lbtn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* the name sits in the empty band under the icon, in the artwork's own register */
.cap-lt{position:absolute;left:50%;top:calc((var(--cly) - var(--cy) + var(--ch)/2)/var(--ch)*100%);width:88%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:1.2cqw;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:var(--ring);text-shadow:0 0 6px var(--accent),0 0 18px var(--accent-muted);transition:color .35s var(--ease-out),text-shadow .35s var(--ease-out)}
.cap-lbtn:hover .cap-lt,.cap-lbtn:focus-visible .cap-lt{color:var(--text-primary);text-shadow:0 0 8px var(--ring),0 0 26px var(--accent)}
.capabilities .cap-lbtn[aria-expanded="true"] .cap-lt{color:var(--text-primary);text-shadow:0 0 10px var(--ring),0 0 30px var(--accent)}
/* the lane: the statement and the six descriptions share one cell, so the button below never moves */
.cap-swap{display:grid}
.cap-swap > div{grid-area:1/1}
.cap-detail{opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
.cap-detail.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease-out),visibility 0s}
.capabilities.picked .cs-default{opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
.cd-t{text-shadow:none;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;letter-spacing:-.025em;font-weight:600;background:linear-gradient(90deg,var(--accent-hover),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.cd-p{margin-top:16px;font-size:1rem;line-height:1.6;color:var(--text-secondary)}
/* these two states are declared again because this block sits after the gates that set them */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .capabilities .cap-labels{opacity:1;visibility:visible}
}
/* the flowing layout: the film is a block at its own aspect and the labels stand down, because the
   six cards below already carry these names and their descriptions */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .capabilities .bar-film{position:relative;order:2;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:24px -16px 0;aspect-ratio:1600/938}
  .capabilities .cap-labels{display:none}
}
/* ---------- 1d. the six capability sections: one per card in #capabilities. Each is a film stage (the id sits on the pinned block, so a card link lands on the stage) followed by ordinary flow bands that use the shared [data-enter] rise ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.capsec{position:relative;z-index:1}
.cs-pin{position:relative;height:240vh}
.cs-pin.has-film{height:300vh}
/* the lane sits centred in the stage: there is no card row down here, so the copy owns the height */
.cs-lane{top:50%;width:min(40%,600px);transform:translateY(-50%)}
/* ---- a capability stage that has its film: the artwork takes the upper right at its own aspect,
   the copy lane moves up and narrows beside it, and the section's cards come up onto the same
   screen in a row along the bottom, the way #capabilities carries its six ---- */
.cs-pin.has-film{--film-r:2%;--film-w:53vw;--film-t:clamp(40px,5vh,80px);--film-gap:26px;--lower-gap:clamp(12px,1.8vh,22px)}
/* the stage is two rows: the artwork band takes whatever height is left, and the lower stack is
   exactly as tall as its own content. The steps, the cards and the rule are stacked inside it, so
   no two of them can reach each other whatever shape the window is */
.cs-pin.has-film .cs-stage{display:grid;grid-template-rows:minmax(0,1fr) auto;padding-bottom:clamp(12px,1.9vh,30px)}
.cs-top{position:relative;min-height:0}
/* the film is as wide as the band allows, or as tall as the band allows, whichever binds first: the
   height is the single dimension set and the aspect ratio derives the width, so it never distorts */
.cs-pin.has-film .bar-film{position:absolute;left:auto;right:var(--film-r);top:var(--film-t);bottom:auto;width:auto;height:min(calc(var(--film-w)*820/1400),calc(100% - var(--film-t) - var(--film-gap)));aspect-ratio:1400/820;z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 92%,transparent 100%)}
.cs-pin.has-film .bar-poster,.cs-pin.has-film .bar-hold,.cs-pin.has-film .bar-video{background-color:#000}
.cs-pin.has-film .bar-lift,.cs-pin.has-film .bar-fade{display:none}
.cs-pin.has-film .cs-lane{top:clamp(72px,9vh,130px);width:min(36%,540px);transform:none}
.cs-pin.has-film .cs-h2{font-size:clamp(1.9rem,3vw,3rem)}
.cs-pin.has-film .cs-sub{max-width:44ch;font-size:1rem}
/* the row of cards on the stage, and the rule that closes it */
/* the steps take the band between the film and the cards, on the same --k3 arrival */
.cs-lower{position:relative;z-index:5;margin:0 6%;display:flex;flex-direction:column;gap:var(--lower-gap)}
.cs-stepblock{position:relative;z-index:5;--ka:clamp(0,(var(--k3,0) - .04)*4,1);opacity:var(--ka);transform:translateY(calc((1 - var(--ka))*12px))}
.cs-sk{margin:0}
.cs-sksub{margin-top:5px;font-size:.9375rem;line-height:1.4;color:var(--text-secondary)}
.cs-steps-stage{margin-top:10px;gap:14px;grid-template-columns:repeat(4,1fr)}
.cs-steps-stage .cs-step{padding-top:12px}
.cs-steps-stage .cs-step h4{margin-top:11px;font-size:.9375rem}
.cs-steps-stage .cs-step p{margin-top:5px;font-size:.85rem}
.cs-steps-stage .bar-ibox{width:28px;height:28px;border-radius:8px}
.cs-steps-stage .ico{width:15px;height:15px}
.cs-row{position:relative;z-index:5;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cs-row .cs-card{height:100%;padding:15px}
.cs-row .cs-card h4{font-size:.9375rem;margin-top:11px}
.cs-row .cs-card p{font-size:.85rem;margin-top:7px}
.cs-rowrule{position:relative;left:auto;right:auto;bottom:auto}
/* ---- #applications: the four-layer stack, with each layer's label beside it. The stack's content
   occupies the middle 53% of the frame, so the film's box can overhang the columns either side of it
   and only its black margins land there, which the screen blend drops out. The stage's top is three
   columns: the copy and the closing sentence on the left, the artwork in the middle, the layer
   labels on the right. The film sets only its HEIGHT, capped so its content cannot grow wider than
   its own column, and the aspect ratio derives the width; the label layer takes the same height, so
   every label lines up with its layer whatever the window does. ---- */
#applications{--film-t:clamp(16px,2.2vh,34px);--film-b:clamp(12px,1.8vh,28px);
  --lane-w:clamp(250px,20vw,300px);--lab-w:clamp(300px,26vw,390px);--ap-gap:24px;
  --art-w:calc((100vw - 18px)*.925 - var(--lane-w) - var(--lab-w) - var(--ap-gap)*2);
  --film-h:min(calc(100% - var(--film-t) - var(--film-b)),calc(var(--art-w)/.532*.58533))}
#applications .cs-top{display:grid;grid-template-columns:var(--lane-w) minmax(0,1fr) var(--lab-w);
  gap:0 var(--ap-gap);padding:var(--film-t) 1.5% var(--film-b) 6%}
#applications .ap-film{grid-column:2;align-self:center;justify-self:center;
  position:relative;left:auto;right:auto;top:auto;bottom:auto;
  height:var(--film-h);width:auto;aspect-ratio:1254/734;
  z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen}
#applications .bar-poster,#applications .bar-hold,#applications .bar-video{background-color:#000}
#applications .bar-lift,#applications .bar-fade{display:none}
/* the left column: the copy at the top, the closing sentence at the bottom */
#applications .cs-lane{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:5;
  left:auto;top:auto;width:auto;transform:none;padding-top:clamp(52px,6vh,70px)}
#applications .cs-h2{font-size:clamp(1.35rem,1.95vw,1.9rem)}
#applications .cs-sub{max-width:34ch;font-size:.9375rem}
.ap-sum{grid-column:1;grid-row:1;align-self:end;position:relative;z-index:5;margin:0;
  padding-top:14px;border-top:1px solid var(--line);font-size:clamp(.875rem,.95vw,1.05rem);line-height:1.55;
  color:var(--text-secondary);--ka:clamp(0,(var(--kf,0) - .76)*12,1);opacity:var(--ka)}
/* the right column: one block per layer, each centred on its own layer */
.ap-labels{grid-column:3;grid-row:1;align-self:center;position:relative;z-index:6;height:var(--film-h);container-type:size}
.ap-lb{position:absolute;left:0;right:0;top:calc(var(--ty)*100%);transform:translateY(-50%);
  --ka:clamp(0,(var(--kf,0) - var(--at))*12,1);opacity:var(--ka)}
.ap-lb h3{font-size:clamp(.875rem,2.41cqh,1.05rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--accent-hover)}
.ap-lb .ap-sub{margin-top:.34em;font-size:clamp(.75rem,2.08cqh,.875rem);line-height:1.35;color:var(--text-primary)}
.ap-lb p:not(.ap-sub){margin-top:.42em;font-size:clamp(.62rem,1.93cqh,.8rem);line-height:1.45;color:var(--text-secondary)}
/* an artwork too short to carry the paragraphs keeps each layer's name and its one line */
@container (max-height:520px){
  .ap-lb p:not(.ap-sub){display:none}
}
#applications .cs-row{grid-template-columns:repeat(6,1fr)}
/* ---- #multi-agent: the artwork is one horizontal band of five panels with empty black above it, so
   the copy runs across the top left as a wide two-column block and the film takes the full stage
   width beneath it. The film is an absolutely positioned grid child, so its containing block is its
   own grid row: it is centred on that row at the height where its panel band (the middle 46% of the
   frame) fills the row, its black top runs up behind the copy, and a mask ends it above the cards.
   The label layer takes exactly the film's box. ---- */
#multi-agent .cs-top{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  padding:clamp(72px,8.6vh,112px) 0 0}
#multi-agent .cs-lane{grid-row:1;grid-column:1;position:relative;z-index:5;left:auto;top:auto;transform:none;
  margin-left:6%;width:min(88%,1000px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:"k s" "h s" "h a" "h p";column-gap:clamp(28px,4vw,64px);align-items:start}
#multi-agent .cs-lane > .bar-kicker{grid-area:k}
#multi-agent .cs-lane > .cs-h2{grid-area:h;font-size:clamp(1.5rem,2.3vw,2.25rem)}
#multi-agent .cs-lane > .cs-sub{grid-area:s;margin-top:0;max-width:52ch;font-size:.9375rem}
#multi-agent .cs-lane > .cap-actions{grid-area:a;margin-top:16px}
#multi-agent .cs-lane > .cap-proof{grid-area:p;margin-top:14px}
#multi-agent .bar-film,#multi-agent .ma-labels{position:absolute;grid-row:2;grid-column:1;inset:0;margin:auto;
  height:min(calc((100vw - 18px)*.97*.58533),calc(100% / .46));width:auto;aspect-ratio:1254/734}
#multi-agent .bar-film{z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,#000 73%,transparent 80%);mask-image:linear-gradient(to bottom,#000 73%,transparent 80%)}
#multi-agent .bar-poster,#multi-agent .bar-hold,#multi-agent .bar-video{background-color:#000}
#multi-agent .bar-lift,#multi-agent .bar-fade{display:none}
/* the panel copy: every line at its own height in its panel, sheared to the panel's angle there */
.ma-labels{z-index:6;margin:0;padding:0;list-style:none;container-type:size;pointer-events:none}
.ma-p{display:contents}
.ma-e{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);white-space:nowrap;line-height:1;
  transform-origin:0 50%;transform:translateY(-50%) skewY(calc(var(--r,0)*1deg));
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 .6em rgba(6,5,20,.95),0 0 1.2em rgba(6,5,20,.7);opacity:clamp(0,(var(--kf,0) - var(--at))*14,1)}
.ma-n{font-family:var(--mono);font-size:.66cqw;letter-spacing:.06em;color:#a9a0f2}
.ma-t,.ma-pill{transform-origin:50% 50%;transform:translate(-50%,-50%) skewY(calc(var(--r,0)*1deg))}
.ma-t{font-size:.86cqw;font-weight:600;letter-spacing:-.005em;color:#f4f2fc}
.ma-d{width:calc(var(--w)*1cqw);white-space:normal;transform-origin:0 0;transform:skewY(calc(var(--r,0)*1deg));
  font-size:.6cqw;line-height:1.38;color:#c3bde0}
.ma-r{display:flex;align-items:center;gap:.55em;font-size:.58cqw;color:#e6e3f7}
.ma-r::before{content:"";width:1.05em;height:1.05em;flex:none;border-radius:.28em;border:1px solid rgba(160,140,255,.7);
  background:rgba(120,100,255,.18);box-shadow:0 0 .5em rgba(140,120,255,.45)}
.ma-pill{display:flex;align-items:center;gap:.6em;padding:.45em 1em;border-radius:999px;border:1px solid rgba(160,140,255,.55);
  background:rgba(12,10,32,.6);font-size:.45cqw;font-weight:600;letter-spacing:.12em;color:#ece9ff}
.ma-pill::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#57d9c6;box-shadow:0 0 .5em #57d9c6}
/* artwork too small for the small print keeps the numbers, names and status */
@container (max-width:1060px){
  .ma-r{display:none}
}
@container (max-width:880px){
  .ma-d{display:none}
}
@container (max-width:700px){
  .ma-labels .ma-e{display:none}
}
/* ---- #infrastructure: the stack, its pillars and the enclosure. The artwork's content fills the
   middle 70% of the frame's width and 65% of its height, so the film is a grid item sized so that
   content fills its own column, and it overhangs the lane and the rows above and below with nothing
   but black (the screen blend drops it; a mask ends the floor above the cards). Its tile layer shares
   the same grid cell and size, and every tile is a button that swaps the lane for its description. ---- */
#infrastructure{--film-t:clamp(16px,2.2vh,34px);--film-b:clamp(12px,1.8vh,28px);
  --lane-w:clamp(270px,24vw,360px);--in-gap:26px;
  --art-w:calc((100vw - 18px)*.925 - var(--lane-w) - var(--in-gap));
  --film-h:min(calc((100% - var(--film-t) - var(--film-b)) / .68),calc(var(--art-w)/.70*.58533))}
#infrastructure .cs-top{display:grid;grid-template-columns:var(--lane-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  column-gap:var(--in-gap);padding:var(--film-t) 1.5% var(--film-b) 6%}
#infrastructure .bar-film,#infrastructure .in-labels{grid-column:2;grid-row:1;align-self:unsafe center;justify-self:unsafe center;
  position:relative;left:auto;right:auto;top:auto;bottom:auto;height:var(--film-h);width:auto;aspect-ratio:1254/734}
#infrastructure .bar-film{z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 88%);mask-image:linear-gradient(to bottom,#000 80%,transparent 88%)}
#infrastructure .bar-poster,#infrastructure .bar-hold,#infrastructure .bar-video{background-color:#000}
#infrastructure .bar-lift,#infrastructure .bar-fade{display:none}
#infrastructure .cs-lane{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:7;left:auto;top:auto;width:auto;
  transform:none;padding-top:clamp(52px,6vh,70px);pointer-events:auto}
#infrastructure .cs-h2{font-size:clamp(1.4rem,2vw,1.95rem)}
#infrastructure .cs-sub{max-width:36ch;font-size:.9375rem}
#infrastructure .cd-t{font-size:clamp(1.3rem,1.8vw,1.7rem)}
#infrastructure .cd-p{margin-top:12px;font-size:.9rem;line-height:1.55}
.cd-k{margin:0 0 10px;font-size:11px;letter-spacing:.16em;color:var(--accent-hover)}
#infrastructure.picked .cs-default{opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
/* only the open description takes space here: nothing sits below the lane, so its height may change,
   and thirteen descriptions stacked in one cell would make the lane as tall as the longest */
#infrastructure .cap-detail:not(.on){display:none}
#infrastructure .cap-detail.on{animation:in-fade .45s var(--ease-out)}
@keyframes in-fade{from{opacity:0}to{opacity:1}}
/* a short window: smaller type for the descriptions, and as a last resort the lane scrolls on its own
   rather than running into the cards */
@media (max-height:760px){
  #infrastructure .cd-t{font-size:1.2rem}
  #infrastructure .cd-p{margin-top:8px;font-size:.8125rem;line-height:1.45}
  #infrastructure .cs-lane{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
/* the tile words: every line at its measured place, sheared to its tile's angle */
.in-labels{z-index:6;container-type:size;pointer-events:none}
.in-text,.in-hits{position:absolute;inset:0}
.in-lb{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);margin-top:-.5em;transform-origin:0 50%;
  transform:skewY(calc(var(--r,0)*1deg));font-size:calc(var(--f)*1cqw);line-height:1;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.7);opacity:clamp(0,(var(--kf,0) - var(--at))*12,1);
  transition:color .3s var(--ease-out),text-shadow .3s var(--ease-out)}
.in-t,.in-pt{font-weight:500;letter-spacing:-.005em;color:#f1eefc}
.in-s,.in-ps{letter-spacing:.2em;color:#b7b0dc}
.in-lb.hot,.in-lb.on{color:#fff;text-shadow:0 0 .45em var(--accent),0 0 1.2em var(--accent-muted)}
.in-hits .in-hit{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);width:calc(var(--w)*100%);height:calc(var(--h)*100%);pointer-events:auto}
@container (max-width:760px){
  .in-s,.in-ps{display:none}
}
/* ---- #integrations: the connected-systems diagram. Its content fills the middle 74% of the frame's
   width and 55% of its height, so the film is sized, as in #infrastructure, for that content to fill its
   own column, overhanging the lane with nothing but black. Every box is a button; the words sit in the
   video's own boxes, and the side panels' rows follow their perspective one row at a time. ---- */
#integrations{--film-t:clamp(16px,2.2vh,34px);--film-b:clamp(12px,1.8vh,28px);
  --lane-w:clamp(270px,24vw,360px);--in-gap:26px;
  --art-w:calc((100vw - 18px)*.925 - var(--lane-w) - var(--in-gap));
  --film-h:min(calc((100% - var(--film-t) - var(--film-b)) / .6),calc(var(--art-w)/.76*.58533))}
#integrations .cs-top{display:grid;grid-template-columns:var(--lane-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  column-gap:var(--in-gap);padding:var(--film-t) 1.5% var(--film-b) 6%}
#integrations .bar-film,#integrations .in-labels{grid-column:2;grid-row:1;align-self:unsafe center;justify-self:unsafe center;
  position:relative;left:auto;right:auto;top:auto;bottom:auto;height:var(--film-h);width:auto;aspect-ratio:1254/734}
#integrations .bar-film{z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,#000 81%,transparent 88%);mask-image:linear-gradient(to bottom,#000 81%,transparent 88%)}
#integrations .bar-poster,#integrations .bar-hold,#integrations .bar-video{background-color:#000}
#integrations .bar-lift,#integrations .bar-fade{display:none}
#integrations .cs-lane{grid-column:1;grid-row:1;align-self:start;position:relative;z-index:7;left:auto;top:auto;width:auto;
  transform:none;padding-top:clamp(52px,6vh,70px);pointer-events:auto}
#integrations .cs-h2{font-size:clamp(1.4rem,2vw,1.95rem)}
#integrations .cs-sub{max-width:38ch;font-size:.875rem;line-height:1.55}
#integrations .cs-sub + .cs-sub{margin-top:10px}
.ig-tag{margin-top:12px;font-size:1rem;font-weight:500;line-height:1.35;color:var(--text-primary)}
#integrations .cd-t{font-size:clamp(1.3rem,1.8vw,1.7rem)}
.cd-tag{margin-top:8px;font-size:.9375rem;font-weight:500;line-height:1.4;color:var(--text-primary)}
#integrations .cd-p{margin-top:12px;font-size:.875rem;line-height:1.55}
#integrations.picked .cs-default{opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s .45s}
#integrations .cap-detail:not(.on){display:none}
#integrations .cap-detail.on{animation:in-fade .45s var(--ease-out)}
@media (max-height:760px){
  #integrations .cs-sub,#integrations .cd-p{margin-top:8px;font-size:.8125rem;line-height:1.45}
  #integrations .cs-lane{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
/* the diagram's words */
.ig-cen{margin-top:0;transform:translate(-50%,-50%)}
.ig-h{font-size:.52cqw;font-weight:600;letter-spacing:.12em;color:#d6d0f4}
.ig-r{font-size:.678cqw;font-weight:500;color:#eeeafc}
.ig-t{font-size:.797cqw;font-weight:600;letter-spacing:-.01em;color:#f4f2fc}
.ig-c{font-size:.54cqw;font-weight:600;letter-spacing:.08em;color:#ece8ff}
.ig-b{font-size:.34cqw;letter-spacing:.08em;color:#b9b2dc}
.ig-b::before{content:"\2022";margin-right:.6em;color:var(--accent-hover)}
@container (max-width:1500px){
  .ig-b{display:none}
}
@container (max-width:900px){
  .ig-h,.ig-c{display:none}
}
/* the closing statement, as the stage's bottom band */
.ig-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,64px);align-items:center;
  --ka:clamp(0,(var(--k3,0) - .04)*4,1);opacity:var(--ka);transform:translateY(calc((1 - var(--ka))*12px))}
.ig-close-h{font-size:clamp(1.05rem,1.45vw,1.4rem);font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--text-primary)}
.ig-close-p{font-size:.9rem;line-height:1.55;color:var(--text-secondary)}
/* ---------- 1f. USE CASES: a solution-discovery experience rather than a catalogue ----------
   The section opens on a pinned stage where each capability is translated into business language as
   the visitor scrolls, then flows through six modules: the discovery catalogue (families, filters,
   twelve use cases with a detail view), the three levels of intelligence, four before-and-after
   transformations, the industries, and the invitation to build around a challenge. ---------- */
#usecases{height:300vh}
#usecases .bar-film{display:none}
#usecases .bar-stage{background:radial-gradient(ellipse 46% 62% at 72% 52%,rgba(122,90,245,.1),transparent 72%),var(--canvas)}
#usecases .cs-lane{width:min(38%,560px)}
#usecases .cs-h2{font-size:clamp(2rem,3.4vw,3.3rem)}
#usecases .cs-sub{max-width:40ch}
/* the translation board: what we build, and what it means for a business */
.uc-board{position:absolute;z-index:5;right:6%;top:50%;width:min(50%,760px);transform:translateY(-50%);pointer-events:auto}
.uc-bh{display:grid;grid-template-columns:minmax(0,.78fr) 44px minmax(0,1.3fr);gap:0 16px;padding-bottom:12px;font-size:11px;letter-spacing:.16em;color:var(--text-secondary)}
.uc-bh span:last-child{grid-column:3}
.uc-rows{margin:0;padding:0;list-style:none}
.uc-row{display:grid;grid-template-columns:minmax(0,.78fr) 44px minmax(0,1.3fr);gap:0 16px;align-items:center;padding:clamp(10px,1.6vh,17px) 0;border-top:1px solid var(--line);
  --kr:clamp(0,(var(--kf,0) - var(--at))*9,1)}
.uc-row:last-child{border-bottom:1px solid var(--line)}
.uc-cap{font-family:var(--display);font-size:clamp(1rem,1.25vw,1.2rem);font-weight:500;letter-spacing:-.01em;text-decoration:none;
  color:color-mix(in srgb,var(--accent-hover) calc(var(--kr)*100%),var(--text-primary));transition:color .3s var(--ease-out)}
.uc-cap:hover{color:var(--text-primary)}
.uc-cap:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.uc-link{position:relative;height:1px;background:linear-gradient(90deg,var(--accent-muted),var(--accent));transform-origin:0 50%;transform:scaleX(var(--kr))}
.uc-link::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform:rotate(45deg);opacity:var(--kr)}
.uc-biz{font-size:clamp(.9375rem,1.1vw,1.05rem);line-height:1.45;color:var(--text-primary);opacity:var(--kr);transform:translateX(calc((1 - var(--kr))*-14px))}
.uc-why{margin-top:22px;font-family:var(--display);font-size:clamp(1.05rem,1.4vw,1.35rem);letter-spacing:-.01em;color:var(--text-primary);
  --kw:clamp(0,(var(--kf,0) - .8)*8,1);opacity:var(--kw);transform:translateY(calc((1 - var(--kw))*10px))}

/* ---- the flowing modules ---- */
.uc{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(96px,12vh,140px) 24px clamp(110px,14vh,160px);display:grid;gap:clamp(110px,14vh,170px);grid-template-columns:minmax(0,1fr)}
.uc-head{max-width:760px}
.uc-h{margin-top:14px;font-family:var(--display);font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.06;letter-spacing:-.03em;font-weight:600;color:var(--text-primary)}
.uc-sub{margin-top:16px;font-size:1.0625rem;line-height:1.6;color:var(--text-secondary);max-width:62ch}
.uc .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#uc-discover{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* the family cards: the artwork takes most of the card, and plays on hover */
.uc-fams{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.uc-fam{display:flex;flex-direction:column;width:100%;height:100%;padding:0;text-align:left;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:inherit;
  cursor:pointer;overflow:hidden;transition:border-color .35s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.uc-fam:hover,.uc-fam:focus-visible{border-color:var(--line-strong);transform:translateY(-3px)}
.uc-fam:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.uc-fam[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-muted),0 0 32px var(--accent-muted)}
.uc-art{display:block;min-height:0;aspect-ratio:240/132;padding:18px 18px 6px;background:radial-gradient(ellipse 80% 90% at 50% 100%,rgba(122,90,245,.14),transparent 70%)}
.uc-art svg{display:block;width:100%;height:100%;overflow:visible}
.uc-fbody{display:grid;gap:6px;padding:14px 20px 20px}
.uc-fn{font-size:11px;letter-spacing:.14em;color:var(--accent-hover)}
.uc-ft{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.uc-fd{font-size:.9375rem;line-height:1.45;color:var(--text-secondary)}
.uc-fc{margin-top:6px;font-size:10.5px;letter-spacing:.16em;color:var(--text-secondary)}
/* the line art: dim structure, and the parts that come alive */
.uc-art *{vector-effect:non-scaling-stroke}
.ua-dim,.ua-dim *{fill:none;stroke:var(--line-strong);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ua-box,.ua-st,.ua-reply{fill:rgba(122,90,245,.06);stroke:var(--line-strong);stroke-width:1.3;transition:stroke .5s var(--ease-out),fill .5s var(--ease-out)}
.ua-p,.ua-led{fill:var(--line-strong);transition:fill .4s var(--ease-out) var(--d,0s),filter .4s var(--ease-out) var(--d,0s)}
.ua-flow{fill:none;stroke:var(--accent-hover);stroke-width:1.4;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset .9s var(--ease-out) var(--d,0s)}
.ua-fill line{stroke:var(--ring);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .6s var(--ease-out) calc(.5s + var(--d,0s))}
.ua-tick{fill:none;stroke:var(--ring);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s var(--ease-out) 1s}
.ua-mover rect{fill:rgba(217,205,255,.12);stroke:var(--ring);stroke-width:1.3}
.ua-mover line{stroke:var(--ring);stroke-width:1.2;stroke-linecap:round}
.ua-coin circle{fill:var(--accent-hover);filter:drop-shadow(0 0 4px var(--accent))}
.ua-scan{fill:var(--accent-hover);opacity:0;filter:drop-shadow(0 0 5px var(--accent))}
.uc-fam:is(:hover,:focus-visible,[aria-pressed="true"]) :is(.ua-box,.ua-st,.ua-reply){stroke:var(--accent-hover);fill:rgba(122,90,245,.14)}
.uc-fam:is(:hover,:focus-visible,[aria-pressed="true"]) :is(.ua-p,.ua-led){fill:var(--ring);filter:drop-shadow(0 0 4px var(--accent))}
.uc-fam:is(:hover,:focus-visible,[aria-pressed="true"]) :is(.ua-flow,.ua-fill line,.ua-tick){stroke-dashoffset:0}
.ua-st{transition-delay:var(--d,0s)}
.uc-fam:is(:hover,:focus-visible) .ua-mover{animation:ua-move 2.2s linear infinite}
@keyframes ua-move{0%{transform:translate(0,0)}14%{transform:translate(22px,34px)}100%{transform:translate(214px,34px)}}
.uc-fam:is(:hover,:focus-visible) .ua-coin{animation:ua-coin 2.4s var(--ease-in-out) infinite}
@keyframes ua-coin{0%{transform:translate(0,0)}75%,100%{transform:translate(168px,62px)}}
.uc-fam:is(:hover,:focus-visible) .ua-scan{animation:ua-scan 1.8s var(--ease-in-out) infinite}
@keyframes ua-scan{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(96px)}}
.uc-fam:is(:hover,:focus-visible) .ua-led{animation:ua-blink 1.6s var(--ease-in-out) var(--d,0s) infinite}
@keyframes ua-blink{0%,100%{fill:var(--line-strong)}40%{fill:var(--ring)}}

/* the filters */
.uc-filters{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px 24px;align-items:end;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:rgba(21,21,42,.55)}
.uc-f-ch{grid-column:1/-1}
.uc-fl{display:block;margin-bottom:10px;font-size:11px;letter-spacing:.16em;color:var(--text-secondary)}
.uc-chips{display:flex;flex-wrap:wrap;gap:8px}
.uc-chip{padding:9px 15px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font:inherit;font-size:.875rem;cursor:pointer;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out)}
.uc-chip:hover{border-color:var(--accent)}
.uc-chip:focus-visible,.uc-sel:focus-visible,.uc-clear:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uc-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-muted)}
.uc-sel{min-width:220px;height:42px;padding:0 38px 0 14px;border-radius:8px;border:1px solid var(--line-strong);color-scheme:dark;appearance:none;-webkit-appearance:none;
  background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7A3B6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/16px;
  color:var(--text-primary);font:inherit;font-size:.9375rem;cursor:pointer}
.uc-status{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px;border-top:1px solid var(--line)}
.uc-count{padding-top:14px;font-size:.875rem;color:var(--text-secondary)}
.uc-clear{margin-top:14px;padding:0;background:none;border:0;color:var(--accent-hover);font:inherit;font-size:.875rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.uc-clear[hidden]{display:none}

/* a family's introduction, shown when the family is chosen */
.uc-famintros{margin-top:22px}
.uc-famintros:not(:has(.uc-fi:not([hidden]))){display:none}
.uc-fi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:10px 36px;padding:24px 26px;border-radius:14px;border:1px solid var(--accent-muted);
  background:linear-gradient(90deg,rgba(122,90,245,.13),transparent 75%);animation:ul-rise .45s var(--ease-out)}
.uc-fi[hidden]{display:none}
.uc-fi-k{grid-column:1/-1;font-size:11px;letter-spacing:.16em;color:var(--accent-hover)}
.uc-fi-t{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--text-primary)}
.uc-fi-p{font-size:.9688rem;line-height:1.6;color:var(--text-secondary)}
/* the use-case cards */
.uc-grid{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.uc-card[hidden]{display:none}
.uc-ci{flex-direction:column;gap:0;height:100%;padding:22px;transition:border-color .35s var(--ease-out),transform .45s var(--ease-out)}
.uc-card:hover .uc-ci,.uc-card:focus-within .uc-ci{border-color:var(--line-strong);transform:translateY(-3px)}
.uc-card:hover .bar-card::after,.uc-card:focus-within .bar-card::after{opacity:1}
.uc-cn{display:flex;gap:12px;font-size:11px;letter-spacing:.14em;color:var(--accent-hover)}
.uc-cn span{color:var(--text-secondary)}
.uc-ci h4{margin-top:14px;font-family:var(--display);font-size:1.25rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.uc-cl{margin-top:10px;font-size:.9375rem;line-height:1.55;color:var(--text-secondary)}
.uc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.uc-tags span{padding:4px 9px;border-radius:999px;border:1px solid var(--line);font-size:11.5px;color:var(--text-secondary)}
.uc-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:.9rem;font-weight:500;color:var(--text-primary)}
.uc-more .ico{transition:transform .3s var(--ease-out)}
.uc-card:hover .uc-more .ico{transform:translateX(3px)}
.uc-moreall{margin-top:18px;text-align:center}
.uc-moreall[hidden]{display:none}
.uc-morebtn{padding:11px 20px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);font:inherit;font-size:.9rem;cursor:pointer;transition:border-color .25s var(--ease-out)}
.uc-morebtn:hover{border-color:var(--accent)}
.uc-morebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uc-empty{margin-top:22px;padding:22px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--text-secondary)}
.uc-empty a{color:var(--accent-hover)}

/* the detail view */
.uc-dialog{width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 40px);padding:0;border:1px solid var(--line-strong);border-radius:18px;
  background:var(--canvas);color:var(--text-primary);box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 0 1px var(--accent-muted)}
.uc-dialog::backdrop{background:rgba(5,5,12,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.uc-dialog[open]{animation:uc-in .45s var(--ease-out)}
@keyframes uc-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
.uc-dlg-in{position:relative;max-height:calc(100vh - 42px);overflow-y:auto;overscroll-behavior:contain;padding:clamp(28px,4vw,48px) clamp(22px,4vw,52px) 0}
.uc-x{position:sticky;top:0;float:right;margin:-10px -14px 0 0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--canvas);color:var(--text-primary);cursor:pointer;z-index:2}
.uc-x:hover{border-color:var(--accent)}
.uc-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uc-detail[hidden]{display:none}
.ud-head{max-width:760px;padding-right:40px}
.ud-t{margin-top:12px;font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.06;letter-spacing:-.03em;font-weight:600;
  background:linear-gradient(90deg,var(--text-primary),var(--accent-hover));-webkit-background-clip:text;background-clip:text;color:transparent}
.ud-line{margin-top:14px;font-size:1.0625rem;line-height:1.55;color:var(--text-primary)}
.ud-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.ud-sec + .ud-sec{margin-top:28px}
.ud-h{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.16em;color:var(--accent-hover)}
.ud-sec p{margin-top:10px;font-size:.9688rem;line-height:1.62;color:var(--text-secondary)}
.ud-list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.ud-list li{position:relative;padding-left:22px;font-size:.9375rem;line-height:1.5;color:var(--text-primary)}
.ud-list li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:2px;border:1px solid var(--accent);background:var(--accent-muted)}
.ud-ex{padding:20px 22px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.ud-ex p{color:var(--text-primary)}
.ud-chips{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ud-chips li{padding:7px 12px;border-radius:999px;border:1px solid var(--line);font-size:.8125rem;color:var(--text-primary)}
.ud-caps li{padding:0;border:0}
.ud-caps a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--accent-muted);background:rgba(122,90,245,.1);
  font-size:.8125rem;color:var(--text-primary);text-decoration:none;transition:border-color .25s var(--ease-out)}
.ud-caps a:hover,.ud-caps a:focus-visible{border-color:var(--accent);outline:none}
.ud-caps .ico{width:13px;height:13px}
.uc-dlg-foot{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:36px calc(-1*clamp(22px,4vw,52px)) 0;
  padding:18px clamp(22px,4vw,52px);border-top:1px solid var(--line);background:rgba(12,12,22,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.uc-nav{display:flex;gap:10px}
.uc-nav .btn{height:42px;padding:0 18px;font-size:.9rem}
html.uc-lock{overflow:hidden}

/* the detail view's full-width sections */
.ud-wide{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.ud-sec.ud-wide{margin-top:34px}
.ud-steps{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;counter-reset:uds}
.ud-steps li{position:relative;padding:14px 14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:.9rem;line-height:1.4;color:var(--text-primary);counter-increment:uds}
.ud-steps li::before{content:counter(uds,decimal-leading-zero);display:block;margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--accent-hover)}
.ud-flows{display:grid;gap:16px;margin-top:18px}
.ud-flow{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px}
.ud-flow > span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-secondary)}
.ud-flow .us-line{grid-area:auto}
.ud-flow:first-child .us-node{color:var(--text-secondary)}
.uc-copied{align-self:center;font-size:.85rem;color:var(--accent-hover)}
/* the three levels */
.ul-wrap{margin-top:40px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:24px;align-items:start}
.ul-tabs{display:grid;gap:12px}
.ul-tab{display:grid;gap:6px;padding:18px 20px;text-align:left;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.ul-tab:hover{border-color:var(--line-strong)}
.ul-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ul-tab[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-muted),0 0 28px var(--accent-muted)}
.ul-n{font-size:11px;letter-spacing:.14em;color:var(--accent-hover)}
.ul-t{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:-.015em;color:var(--text-primary)}
.ul-d{font-size:.9rem;line-height:1.5;color:var(--text-secondary)}
.ul-stage{padding:24px;border-radius:14px;border:1px solid var(--line);background:rgba(21,21,42,.55)}
.ul-chain{margin:0 0 22px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ul-chain li{--on:clamp(0,var(--lit) - var(--i) + 1,1);position:relative;padding:9px 4px;text-align:center;border-radius:8px;font-size:.8125rem;
  border:1px solid color-mix(in srgb,var(--accent) calc(var(--on)*100%),var(--line));background:color-mix(in srgb,var(--accent-muted) calc(var(--on)*100%),transparent);
  color:color-mix(in srgb,var(--text-primary) calc(var(--on)*100%),var(--text-secondary));opacity:calc(.45 + var(--on)*.55);transition:all .45s var(--ease-out) calc(var(--i)*60ms)}
.ul-panel{display:grid;gap:12px}
.ul-panel[hidden]{display:none}
.ul-who{display:block;margin-bottom:6px;font-size:10.5px;letter-spacing:.16em;color:var(--text-secondary)}
.ul-msg{max-width:88%;padding:14px 16px;border-radius:12px;animation:ul-rise .5s var(--ease-out) both}
.ul-msg p{font-size:.9375rem;line-height:1.5;color:var(--text-primary)}
.ul-cust{justify-self:start;border:1px solid var(--line);background:var(--panel)}
.ul-sys{justify-self:end;border:1px solid var(--accent-muted);background:rgba(122,90,245,.12);animation-delay:.25s}
.ul-msg .ul-src{margin-top:10px;font-size:10.5px;letter-spacing:.12em;color:var(--accent-hover)}
.ul-ctx,.ul-act{padding:14px 16px;border-radius:12px;border:1px dashed var(--line-strong);animation:ul-rise .5s var(--ease-out) .12s both}
.ul-ctx ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ul-ctx li{padding:5px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:.8125rem;color:var(--text-primary)}
.ul-act ol{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ul-act li{position:relative;padding-left:24px;font-size:.875rem;line-height:1.45;color:var(--text-primary);animation:ul-rise .45s var(--ease-out) calc(.2s + var(--k)*.12s) both}
.ul-act li::before{content:"";position:absolute;left:3px;top:.3em;width:10px;height:6px;border-left:1.6px solid var(--accent-hover);border-bottom:1.6px solid var(--accent-hover);transform:rotate(-45deg)}
.ul-esc{font-size:.875rem;line-height:1.5;color:var(--text-secondary);padding-left:2px}
@keyframes ul-rise{from{opacity:0;transform:translateY(8px)}}

/* before and after */
.us-tabs{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.us-tab{display:grid;gap:4px;padding:14px 16px;text-align:left;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:inherit;font:inherit;cursor:pointer;transition:border-color .3s var(--ease-out)}
.us-tab .ico{width:14px;height:14px;color:var(--accent-hover)}
.us-tab:hover{border-color:var(--line-strong)}
.us-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.us-tab[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-muted)}
.us-from{font-size:.8125rem;color:var(--text-secondary)}
.us-to{font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}
.us-panel{margin-top:16px;padding:28px;border-radius:14px;border:1px solid var(--line);background:rgba(21,21,42,.55)}
.us-panel[hidden]{display:none}
.us-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.us-pair p{margin-top:10px;font-size:.9688rem;line-height:1.6;color:var(--text-secondary)}
.us-flow{margin-top:28px;padding:22px;border-radius:12px;border:1px solid var(--line);background:var(--canvas)}
.us-switch{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line-strong)}
.us-switch button{padding:7px 16px;border-radius:999px;border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:.8125rem;cursor:pointer;transition:background .3s var(--ease-out),color .3s var(--ease-out)}
.us-switch button[aria-pressed="true"]{background:var(--accent);color:var(--text-primary)}
.us-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.us-lines{display:grid;margin-top:22px;min-height:88px}
.us-line{grid-area:1/1;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 0;align-content:center}
.us-node{position:relative;display:inline-flex;align-items:center;padding:9px 14px;border-radius:9px;border:1px solid var(--line-strong);background:var(--panel);font-size:.875rem;color:var(--text-primary);
  margin-right:30px;transition:opacity .4s var(--ease-out) calc(var(--i)*70ms),transform .4s var(--ease-out) calc(var(--i)*70ms)}
.us-node:not(:last-child)::after{content:"";position:absolute;right:-24px;top:50%;width:16px;height:1px;background:var(--line-strong)}
.us-node:not(:last-child)::before{content:"";position:absolute;right:-24px;top:calc(50% - 3px);width:6px;height:6px;border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);transform:rotate(45deg)}
.us-before .us-node{color:var(--text-secondary)}
.us-ai{border-color:var(--accent);background:rgba(122,90,245,.16);box-shadow:0 0 18px var(--accent-muted)}
.us-gate{border-style:dashed;border-color:var(--accent-hover)}
.us-after .us-node:not(:last-child)::after{background:var(--accent)}
.us-after .us-node:not(:last-child)::before{border-color:var(--accent)}
.us-flow[data-state="before"] .us-after .us-node,.us-flow[data-state="after"] .us-before .us-node{opacity:0;transform:translateY(10px);pointer-events:none}
.us-flow[data-state="after"] .us-before .us-node{transform:translateY(-10px)}
.us-out{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.us-out li{padding:14px 16px;border-radius:10px;border:1px solid var(--line);font-size:.9375rem;line-height:1.4;color:var(--text-primary);background:var(--panel)}
.us-out li::before{content:"";display:block;width:22px;height:2px;margin-bottom:10px;background:var(--accent)}
.us-see{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:0;background:none;border:0;color:var(--accent-hover);font:inherit;font-size:.9375rem;font-weight:500;cursor:pointer}
.us-see:hover .ico{transform:translateX(3px)}
.us-see .ico{transition:transform .3s var(--ease-out)}
.us-see:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* the industries */
.ui-grid{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ui-tile{flex-direction:column;gap:0;padding:22px}
.ui-ico{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;border:1px solid var(--line-strong);background:rgba(122,90,245,.08);color:var(--ring)}
.ui-ico .ico{width:22px;height:22px}
.ui-tile h4{margin-top:16px;font-family:var(--display);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.ui-feat{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ui-feat li{font-size:.9375rem;color:var(--text-secondary)}
.ui-feat li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:10px;border-radius:50%;background:var(--accent);vertical-align:middle}
.ui-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:18px 0 0;background:none;border:0;color:var(--text-primary);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;text-align:left}
.ui-go .ico{color:var(--accent-hover);transition:transform .3s var(--ease-out)}
.ui-go:hover .ico{transform:translateX(3px)}
.ui-go:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.ui-note{margin-top:22px;padding:20px 22px;border-left:2px solid var(--accent);background:linear-gradient(90deg,rgba(122,90,245,.09),transparent);font-size:.9688rem;line-height:1.6;color:var(--text-secondary)}
.ui-note span{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.16em;color:var(--accent-hover)}

/* build around your challenge */
.uc-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:center}
.ub-art{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);gap:14px;align-items:center;justify-items:center;padding:34px;
  border-radius:18px;border:1px solid var(--line);background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(122,90,245,.18),transparent 70%),var(--canvas)}
.ub-slot{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;width:100%;min-height:92px;padding:12px;border-radius:14px;border:1.5px dashed var(--accent-hover);
  font-family:var(--display);font-size:1.05rem;font-weight:600;text-align:center;color:var(--text-primary);box-shadow:inset 0 0 30px var(--accent-muted)}
.ub-p{width:100%;padding:12px 8px;text-align:center;border-radius:11px;border:1px solid var(--line-strong);background:var(--panel);font-size:.875rem;color:var(--text-primary);
  opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.9);transition:opacity .6s var(--ease-out) calc(var(--i)*90ms),transform .8s var(--ease-out) calc(var(--i)*90ms),border-color .6s var(--ease-out) calc(.6s + var(--i)*90ms)}
.ub-p:nth-child(2){grid-area:1/1;--dx:-30px;--dy:-24px}.ub-p:nth-child(3){grid-area:1/2;--dy:-34px}.ub-p:nth-child(4){grid-area:1/3;--dx:30px;--dy:-24px}
.ub-p:nth-child(5){grid-area:3/1;--dx:-30px;--dy:24px}.ub-p:nth-child(6){grid-area:3/2;--dy:34px}.ub-p:nth-child(7){grid-area:3/3;--dx:30px;--dy:24px}
.ub-art.in .ub-p{opacity:1;transform:none;border-color:var(--accent)}
.ub-art::before,.ub-art::after{content:"";grid-column:1/-1;grid-row:2;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-muted) 20%,var(--accent-muted) 80%,transparent)}
.ub-art::after{display:none}
.uc-final{text-align:center;justify-items:center;display:grid;padding:clamp(48px,7vw,80px) 24px;border-radius:20px;border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(122,90,245,.2),transparent 70%),var(--panel)}
.uc-final .uc-h{margin-top:0;max-width:22ch}
.uc-final .uc-sub{margin-inline:auto}
.uc-msg{margin-bottom:16px;color:var(--accent-hover)}
.uc-close{margin-top:30px;padding-top:24px;max-width:62ch;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.6;color:var(--text-secondary)}
.uc-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ---- explore by challenge, on one screen: the heading beside its introduction, the six families in
   one row, and the filters in two lines (the challenges, then department, industry and the count) ---- */
@media (min-width:1101px){
  .uc-head{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .uc-head .kicker{grid-column:1/-1}
  .uc-head .uc-sub{margin-top:0;font-size:.9688rem}
  .uc-fams{margin-top:30px;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .uc-art{aspect-ratio:240/118;padding:14px 12px 2px}
  .uc-fbody{gap:5px;padding:10px 14px 16px}
  .uc-ft{font-size:1.0625rem;line-height:1.2}
  .uc-fd{font-size:.8438rem;line-height:1.4}
  .uc-fc{margin-top:auto;padding-top:4px;font-size:10px}
  .uc-fbody{flex:1;grid-template-rows:auto auto auto 1fr}
  .uc-filters{margin-top:20px;grid-template-columns:auto auto minmax(0,1fr);gap:14px 20px;padding:18px 22px}
  .uc-fl{margin-bottom:8px}
  .uc-chip{padding:8px 14px;font-size:.8438rem}
  .uc-sel{height:40px;min-width:210px}
  .uc-status{grid-column:auto;align-self:end;justify-content:flex-end;padding-top:0;border-top:0;min-height:40px}
  .uc-count,.uc-clear{padding-top:0;margin-top:0}
}
/* shorter desktop windows: the artwork gives up some height */
@media (min-width:1101px) and (max-height:820px){
  .uc-art{aspect-ratio:240/96;padding-top:10px}
  .uc-fams{margin-top:24px}
}
/* laptop windows: everything tightens so the module still fits under the navigation */
@media (min-width:1101px) and (max-height:760px){
  .uc-head .uc-h{margin-top:10px;font-size:clamp(1.6rem,2.4vw,2.2rem)}
  .uc-head .uc-sub{font-size:.9063rem;line-height:1.5}
  .uc-fams{margin-top:18px}
  .uc-art{aspect-ratio:240/94;padding:8px 12px 0}
  .uc-fbody{padding:8px 14px 12px;gap:4px}
  .uc-ft{font-size:1rem}
  .uc-filters{margin-top:14px;padding:14px 18px;gap:10px 18px}
  .uc-fl{margin-bottom:6px;font-size:10.5px}
  .uc-chips{gap:6px}
  .uc-chip{padding:6px 12px}
  .uc-sel{height:36px}
  .uc-status{min-height:36px}
  .uc-fd{font-size:.8125rem;line-height:1.35}
  .uc-fc{padding-top:2px}
}
/* the shortest: the families keep their names and counts, and their one-line promise steps aside */
@media (min-width:1101px) and (max-height:640px){
  .uc-fd{display:none}
  .uc-fc{margin-top:4px}
}

/* ---- narrower windows ---- */
@media (max-width:1100px){
  .uc-fams,.uc-grid,.ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .us-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ul-wrap{grid-template-columns:1fr}
  .ul-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .uc-filters{grid-template-columns:1fr 1fr}
  .uc-sel{min-width:0;width:100%}
  #usecases .cs-lane{width:min(44%,480px)}
  .uc-board{width:min(48%,560px)}
  .uc-bh,.uc-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .uc-link{display:none}
  .uc-bh span:last-child{display:none}
}
/* middle widths: three families to a row, with compact artwork */
@media (min-width:721px) and (max-width:1100px){
  .uc-fams{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
  .uc-art{aspect-ratio:240/84;padding:10px 12px 0}
  .uc-fbody{padding:10px 16px 14px;gap:4px}
  .uc-ft{font-size:1.0625rem}
  .uc-fd{font-size:.875rem;line-height:1.4}
}
@media (max-width:720px){
  .uc-fams,.uc-grid,.ui-grid,.us-tabs,.ul-tabs,.us-out,.us-pair,.uc-filters,.ud-body,.uc-build{grid-template-columns:minmax(0,1fr)}
  .ub-art{padding:18px;gap:10px}
  .ul-chain{grid-template-columns:repeat(3,minmax(0,1fr))}
  .us-panel{padding:18px}
  .uc-dlg-foot{flex-direction:column;align-items:stretch}
  .uc-fi,.ud-flow{grid-template-columns:1fr}
  .uc-nav{flex-wrap:wrap}
  .uc-nav .btn{flex:1}
}
/* the flowing layout: the four device gates. The pinned opening becomes a heading and a list */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  #usecases{height:auto}
  #usecases .cs-lane{width:auto}
  .uc-board{position:relative;order:2;right:auto;top:auto;width:auto;transform:none;margin-top:34px}
  .uc-row{--kr:1}
  .uc-why{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .uc-row{--kr:1}
  .uc-why{opacity:1;transform:none}
  .uc-fam *,.ul-msg,.ul-ctx,.ul-act,.ul-act li,.us-node,.ub-p,.uc-dialog[open]{animation:none !important;transition:none !important}
  .ub-p{opacity:1;transform:none}
}
/* ---- #automation: the artwork carries the diagram's own words. The film takes the right of the
   stage beside the copy, then opens out to the whole stage as the machine starts to form and the
   copy clears; the words etch into their panels as each part finishes forming, which is what the
   reference render shows. Only the height is set on the film and the aspect ratio derives the width,
   so it never distorts, and the label layer is pinned to exactly the same box: every line is then a
   fraction of the frame and the type scales with the artwork in cqw. ---- */
#automation,#knowledge{--film-t:clamp(18px,2.4vh,38px);--film-b:clamp(14px,2vh,30px);--film-r:1.5%;--lane-w:clamp(270px,24vw,350px);
  --film-maxw:calc(92.5vw - clamp(270px,24vw,350px) - 26px - 18px)}
#automation .bar-film,#automation .au-labels,#knowledge .bar-film,#knowledge .kn-labels{position:absolute;left:auto;right:var(--film-r);
  top:var(--film-t);bottom:var(--film-b);margin-block:auto;
  height:min(calc(100% - var(--film-t) - var(--film-b)),calc(var(--film-maxw)*.58533));
  width:auto;aspect-ratio:1254/734}
#automation .bar-film,#knowledge .bar-film{z-index:auto;isolation:auto;overflow:visible;background:none;mix-blend-mode:screen}
#automation .bar-poster,#automation .bar-hold,#automation .bar-video,#knowledge .bar-poster,#knowledge .bar-hold,#knowledge .bar-video{background-color:#000}
#automation .bar-lift,#automation .bar-fade,#knowledge .bar-lift,#knowledge .bar-fade{display:none}
/* the #knowledge panel words: a title and two lines per panel, sized to the artwork in cqw. The panels are
   in perspective, so their horizontals fan while their verticals stay vertical: each block is sheared
   (skewY) to its own panel angle, which keeps every line starting on the same vertical */
.kn-labels{z-index:6;margin:0;padding:0;list-style:none;container-type:size;pointer-events:none}
.kn-lb{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);transform-origin:0 50%;transform:translateY(-50%) skewY(calc(var(--r,0)*1deg));
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.75);opacity:clamp(0,(var(--kf,0) - var(--at))*12,1)}
.kn-t{display:block;font-size:1.12cqw;font-weight:500;line-height:1.15;letter-spacing:-.005em;color:#f1eefc}
.kn-s{display:block;margin-top:.3cqw;font-size:.8cqw;line-height:1.3;color:#b9b3d8}
@container (max-width:880px){
  .kn-s{display:none}
}
/* the tower's shelf labels: letter-spaced capitals centred on each shelf's front band */
.kn-sh{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);transform:translate(-50%,-50%) skewY(calc(var(--r,0)*1deg));
  white-space:nowrap;font-size:.74cqw;font-weight:500;line-height:1;letter-spacing:.08em;color:#e4e0ff;
  text-shadow:0 0 .5cqw rgba(140,120,255,.9),0 1px 2px rgba(0,0,0,.8);opacity:clamp(0,(var(--kf,0) - var(--at))*12,1)}
@container (max-width:760px){
  .kn-sh{display:none}
}
/* the copy holds the top left */
#automation .cs-lane,#knowledge .cs-lane{top:clamp(72px,8.6vh,112px);width:var(--lane-w);transform:none}
/* this section brings six cards up onto the stage, not five */
#automation .cs-row,#knowledge .cs-row,#infrastructure .cs-row{grid-template-columns:repeat(6,1fr)}
#automation .cs-h2,#knowledge .cs-h2{font-size:clamp(1.4rem,2.05vw,2rem)}
#automation .cs-sub,#knowledge .cs-sub{max-width:34ch;font-size:.9375rem}
/* the label layer */
.au-labels{z-index:6;margin:0;padding:0;list-style:none;container-type:size;pointer-events:none}
.au-lb{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);margin-top:-.5em;
  transform-origin:0 50%;transform:rotate(calc(var(--r,0)*1deg));
  font-size:calc(var(--f)*1cqw);line-height:1;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:clamp(0,(var(--kf,0) - var(--at))*12,1)}
.au-k{font-weight:600;letter-spacing:.005em;color:#efedfa}
.au-k2{font-weight:600;letter-spacing:.015em;color:#f4f2fc}
.au-t{font-weight:600;color:#f4f2fc}
.au-c{font-weight:400;color:#eae8f7}
.au-s{font-weight:400;color:#b9b4d4}
.au-b1{font-family:var(--mono);font-weight:500;letter-spacing:.24em;color:#cec8ea}
.au-b2{font-family:var(--mono);font-weight:400;letter-spacing:.2em;color:#a7a0cd}
/* an artwork too small to carry the small print keeps only the words that can be read */
@container (max-width:880px){
  .au-s{display:none}
}
@container (max-width:700px){
  .au-c,.au-k2,.au-b2{display:none}
}
/* no drive, no labels: the hold frame is artwork on its own */
@media (prefers-reduced-motion: reduce){
  #automation .au-labels{display:none}
  /* these layer labels are the section's own copy, so they stand on the hold frame */
  #applications .ap-lb,#applications .ap-sum{opacity:1}
  #knowledge .kn-lb,#knowledge .kn-sh{opacity:1}
  #multi-agent .ma-e{opacity:1}
  #infrastructure .in-lb,#integrations .in-lb{opacity:1}
}
.cs-h2{font-size:clamp(2rem,3.6vw,3.5rem)}
.cs-sub{max-width:48ch;font-size:1rem}
/* ---- the bands under each stage ---- */
.cs-bands{position:relative;z-index:1;display:grid;gap:104px;padding:112px 0 120px}
.cs-bands:empty{display:none}
.cs-band{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
.cs-band .kicker{margin:0}
.cs-bh{margin-top:14px;font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.12;letter-spacing:-.025em;color:var(--text-primary);max-width:28ch}
.cs-bsub{margin-top:14px;font-size:1rem;line-height:1.6;color:var(--text-secondary);max-width:60ch}
.cs-cards{margin:30px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
/* the row holds its whole set on one line: auto-fit would leave the sixth card alone below the other five at this width */
.cs-cards[data-n="4"]{grid-template-columns:repeat(4,1fr)}
.cs-cards[data-n="5"]{grid-template-columns:repeat(5,1fr)}
.cs-cards[data-n="10"]{grid-template-columns:repeat(5,1fr)}
.cs-cards[data-n="6"]{grid-template-columns:repeat(6,1fr)}
@media (max-width:1320px){.cs-cards[data-n]{grid-template-columns:repeat(3,1fr)}}
/* the band cards are the same glass card as the stage rows, with the icon on top and no number */
.cs-card{display:grid;grid-template-columns:1fr;gap:0;padding:17px;align-content:start;height:100%}
.cs-card .bar-ibox{grid-column:1;grid-row:1;justify-self:start;width:34px;height:34px;border-radius:9px}
.cs-card .bar-ibox .ico{width:18px;height:18px}
.cs-card h4,.cs-card p{grid-column:1}
.cs-card h4{margin-top:13px;font-weight:500;font-size:1rem;line-height:1.24;letter-spacing:-.015em;color:var(--text-primary)}
.cs-card p{margin-top:8px;font-size:.9rem;line-height:1.5;color:var(--text-secondary)}
/* the numbered variant (the applications band) keeps the stage row's number and icon on one line */
.cs-card.num{grid-template-columns:1fr auto;gap:0 10px}
.cs-card.num .bar-ibox{grid-column:2;grid-row:1;justify-self:end}
.cs-card.num h4,.cs-card.num p{grid-column:1/-1}
.cs-card.num h4{margin-top:11px}
.cs-card .bar-ix{grid-column:1;grid-row:1;align-self:center}
/* the numbered steps: no card, a hairline over each one */
.cs-steps{margin:30px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:18px}
.cs-step{padding-top:17px;border-top:1px solid var(--line)}
.cs-sh{display:flex;align-items:center;gap:12px}
.cs-step .bar-ibox{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:rgba(var(--scrim),.45)}
.cs-step .ico{width:18px;height:18px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.cs-step h4{margin-top:14px;font-weight:500;font-size:1rem;line-height:1.24;letter-spacing:-.015em;color:var(--text-primary)}
.cs-step p{margin-top:7px;font-size:.9rem;line-height:1.5;color:var(--text-secondary)}
/* the name rows: the tools a section names, as text (no third-party marks are shipped) */
.cs-chips{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.cs-chips li{padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13.5px;line-height:1.2;color:var(--text-primary)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cs-chips li{background:color-mix(in srgb,var(--panel) 58%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.cs-stack{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px 32px}
.cs-sgroup .cs-chips{margin-top:12px}
.cs-slabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
/* the closing call to action band */
/* a closing rule on the stage itself, arriving last off --k3 like the other stages' rules */
.cs-srule{bottom:clamp(26px,4vh,52px)}
.cs-srule .bar-hair{display:none}
/* the same device in the flow bands, where there is no drive variable to hang it on */
.cs-brule{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cs-cta{margin-top:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 28px;padding:32px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cs-cta{background:color-mix(in srgb,var(--panel) 62%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.cs-cta h3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.02em;color:var(--text-primary)}
.cs-cta p{margin-top:8px;font-size:1rem;line-height:1.55;color:var(--text-secondary);max-width:46ch}
/* a short stage: the step lines and the sub go first, then the card lines. The lane and the film
   keep their size, and the stack shrinks to about half its height */
@media (max-height:860px){
  .cs-sksub{display:none}
  .cs-steps-stage{margin-top:6px}
  .cs-steps-stage .cs-step p{display:none}
}
@media (max-height:780px){
  .cs-row .cs-card p{display:none}
}
@media (max-height:680px){
  .cs-pin.has-film .cs-lane{top:clamp(68px,9vh,80px)}
  .cs-pin.has-film .cs-h2{font-size:clamp(1.55rem,2.6vw,2.2rem)}
  .cs-pin.has-film .cs-sub{margin-top:12px;font-size:.9375rem;max-width:40ch}
  .cs-pin.has-film .cap-actions{margin-top:18px}
}
@media (max-height:680px) and (max-width:1200px){
  .cs-pin.has-film .cs-lane{width:min(44%,460px)}
  .cs-pin.has-film .cs-h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
  .cs-pin.has-film .cs-sub{display:none}
}
@media (max-width:1100px){
  #automation .cs-row,#applications .cs-row,#knowledge .cs-row,#infrastructure .cs-row{grid-template-columns:repeat(3,1fr)}
  .cs-steps-stage{grid-template-columns:repeat(4,1fr);gap:10px}
  .cs-steps-stage .cs-step p{display:none}
  .cs-steps-stage .cs-step h4{font-size:.875rem}
  .cs-row{grid-template-columns:repeat(3,1fr)}
  .cs-row .cs-card p{display:none}
  .cs-lane{width:min(48%,520px)}
  .cs-h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
  .cs-sub{max-width:40ch;font-size:.9375rem}
  .cs-bands{gap:88px;padding:96px 0 104px}
}
@media (max-width:1100px) and (max-height:780px){
  .cs-row{grid-template-columns:repeat(5,1fr)}
  .cs-row .cs-card{padding:13px}
  .cs-row .cs-card h4{font-size:.875rem}
}
/* the flowing layout: the four device gates. Every property the rules above set has to be restated, because they sit later in the file than the shared .bar-stage and .bar-lane flow overrides */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .cs-pin,.cs-pin.has-film{height:auto}
  .cs-pin.has-film .cs-stage{display:flex;flex-direction:column;padding-bottom:88px}
  .cs-top{display:flex;flex-direction:column}
  .cs-lower{margin:0;gap:0}
  .cs-pin.has-film .bar-film{position:relative;order:2;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;margin:24px -16px 0;aspect-ratio:1400/820}
  .cs-pin.has-film .cs-lane{position:relative;order:1;left:auto;top:auto;width:auto;transform:none;text-shadow:none}
  #automation .bar-film,#knowledge .bar-film{position:relative;order:2;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:auto;margin:24px -16px 0;aspect-ratio:1254/734}
  #automation .cs-lane,#knowledge .cs-lane{position:relative;order:1;left:auto;top:auto;width:auto;transform:none;text-shadow:none}
  #automation .au-labels,#knowledge .kn-labels,#multi-agent .ma-labels,#infrastructure .in-labels,#integrations .in-labels{display:none}
  #integrations .cs-top{display:flex;flex-direction:column;padding:0}
  #integrations .cs-lane{order:1;padding-top:0;text-shadow:none}
  #integrations .bar-film{order:2;height:auto;width:auto;margin:24px -16px 0;align-self:auto;justify-self:auto;-webkit-mask-image:none;mask-image:none}
  #integrations .cap-swap{display:block}
  #integrations .cap-detail{display:none}
  #integrations.picked .cs-default{opacity:1;visibility:visible}
  .ig-close{grid-template-columns:1fr;gap:12px;margin-top:28px}
  #infrastructure .cs-top{display:flex;flex-direction:column;padding:0}
  #infrastructure .cs-lane{order:1;padding-top:0;text-shadow:none}
  #infrastructure .bar-film{order:2;height:auto;width:auto;margin:24px -16px 0;align-self:auto;justify-self:auto;-webkit-mask-image:none;mask-image:none}
  #infrastructure .cap-swap{display:block}
  #infrastructure .cap-detail{display:none}
  #infrastructure.picked .cs-default{opacity:1;visibility:visible}
  #multi-agent .cs-top{display:flex;flex-direction:column;padding:0}
  #multi-agent .cs-lane{order:1;display:block;margin-left:0;width:auto;text-shadow:none}
  #multi-agent .cs-lane > .cs-sub{margin-top:14px}
  #multi-agent .bar-film{position:relative;order:2;inset:auto;margin:24px -16px 0;height:auto;width:auto;-webkit-mask-image:none;mask-image:none}
  #automation .cs-row,#applications .cs-row,#knowledge .cs-row,#infrastructure .cs-row{grid-template-columns:1fr}
  @media (min-width:600px){
    #automation .cs-row,#applications .cs-row,#knowledge .cs-row,#infrastructure .cs-row{grid-template-columns:1fr 1fr}
  }
  #applications .cs-top{display:flex;flex-direction:column;padding:0}
  #applications .ap-film{order:2;height:auto;width:auto;margin:24px -16px 0;align-self:auto;justify-self:auto}
  #applications .cs-lane{order:1;text-shadow:none}
  #applications .ap-labels{order:3;container-type:normal;height:auto;margin-top:30px;display:grid;gap:26px}
  #applications .ap-lb{position:relative;top:auto;transform:none;opacity:1}
  #applications .ap-lb h3{font-size:1.0625rem}
  #applications .ap-lb .ap-sub{font-size:.9375rem}
  #applications .ap-lb p:not(.ap-sub){display:block;font-size:.9375rem;line-height:1.55;margin-top:8px}
  #applications .ap-sum{order:4;margin-top:30px;font-size:1rem;opacity:1}
  .cs-pin.has-film .cs-sub{display:block;margin-top:14px;max-width:none;font-size:1rem}
  .cs-stepblock{position:relative;order:4;left:auto;right:auto;top:auto;margin-top:34px;transform:none}
  .cs-sksub{display:block}
  .cs-steps-stage{grid-template-columns:1fr;gap:14px;margin-top:10px}
  .cs-steps-stage .cs-step p{display:block;font-size:.9375rem}
  .cs-steps-stage .cs-step h4{font-size:1rem}
  .cs-row{position:relative;order:3;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;gap:12px;margin-top:26px}
  .cs-row .cs-card p{display:block;font-size:.9375rem}
  .cs-rowrule{position:relative;order:5;left:auto;right:auto;bottom:auto;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px 16px;transform:none}
  @media (min-width:600px){
    .cs-row{grid-template-columns:1fr 1fr}
  }
  .cs-srule{position:relative;order:5;left:auto;right:auto;bottom:auto;margin-top:30px;transform:none}
  .cs-lane{position:relative;order:1;left:auto;top:auto;width:auto;transform:none;pointer-events:auto;text-shadow:none}
  .cs-h2{font-size:clamp(2rem,8.4vw,2.8rem)}
  .cs-sub{max-width:none;font-size:1rem}
  .cs-bands{gap:72px;padding:76px 0 88px}
  .cs-band{padding:0 16px}
  .cs-cards[data-n]{grid-template-columns:1fr}
  .cs-cards{gap:12px}
  .cs-steps{grid-template-columns:1fr;gap:14px}
  .cs-cta{padding:24px}
  .cs-cta .btn{width:100%}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  @media (min-width:600px){
    .cs-cards[data-n],.cs-steps{grid-template-columns:1fr 1fr}
    .cs-cta .btn{width:auto}
  }
}

/* ---------- 1e. why agenius: the film stage once more, with the mockup's five principle cards as a row along the bottom. Every rule here sits after the bar and cap classes it refines, so it wins on order ---------- */
.why{position:relative;height:300vh;z-index:1}
.why.has-film{height:360vh}
.why-lane{top:clamp(76px,9vh,140px);width:min(38%,560px)}
.why-h2{font-size:clamp(1.8rem,2.8vw,2.7rem)}
.why-sub{max-width:48ch;font-size:1rem;line-height:1.6}
.why-actions{display:flex;flex-wrap:wrap;gap:12px}
.why-actions .btn{pointer-events:auto}
/* the three mono labels, hairline separated, last of the lane to arrive */
.why-proof{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;--kp:clamp(0,(var(--k1,0) - .82)*5,1);opacity:var(--kp);transform:translateY(calc((1 - var(--kp))*10px))}
.why-proof li{padding:0 20px;border-left:1px solid var(--line);font-family:var(--mono);font-size:11px;line-height:1.55;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.why-proof li:first-child{padding-left:0;border-left:0}
.why-cards{position:absolute;z-index:5;left:6%;right:6%;bottom:clamp(66px,9.4vh,116px);margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.why-card{height:100%;grid-template-columns:1fr}
.why-card .bar-ibox{grid-column:1;grid-row:1;justify-self:start}
.why-card h3,.why-card .cap-cb{grid-column:1}
.why-card h3{margin-top:12px}
.why-rule{bottom:clamp(24px,3.6vh,48px)}
.why-rule .bar-hair{display:none}
@media (max-width:1400px){
  .why-cards{gap:10px}
  .why-card{padding:14px}
}
@media (max-width:1100px){
  .why-lane{width:min(46%,500px)}
  .why-h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}
  .why-sub{max-width:40ch;font-size:.9375rem}
  .why-cards{grid-template-columns:repeat(3,1fr)}
  .why-card .cap-cb{display:none}
}
/* the flowing layout: the four device gates */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .why,.why.has-film{height:auto}
  .why-lane{width:auto;top:auto}
  .why-h2{font-size:clamp(1.9rem,8vw,2.7rem)}
  .why-sub{max-width:none;font-size:1rem}
  .why-actions,.why-proof{transform:none}
  .why-actions .btn{flex:1 1 auto}
  .why-proof{gap:10px 0}
  .why-cards{position:relative;order:3;left:auto;right:auto;bottom:auto;margin-top:28px;grid-template-columns:1fr}
  .why-card{padding:16px}
  .why-card .cap-cb{display:block}
  .why-rule{position:relative;order:4;left:auto;right:auto;bottom:auto;margin-top:32px;padding-top:22px;border-top:1px solid var(--line);transform:none}
  @media (min-width:600px){
    .why-cards{grid-template-columns:1fr 1fr}
  }
}

/* ---------- 1b. problem: the centered ledger ---------- */
.problem{overflow:hidden}
.problem .col{position:relative;z-index:1}
.problem .kicker{margin:0}
.problem .close{margin-top:44px}
.ledger{width:100%;border-collapse:collapse;margin-top:44px;font-size:1rem;line-height:1.5;color:var(--text-secondary)}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:16px 20px 16px 0;font-weight:400}
.ledger thead th{font-family:var(--display);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;color:var(--text-primary);padding-top:0;padding-bottom:14px}
.ledger tbody td{border-top:1px solid var(--line)}
.ledger tbody tr:first-child td{border-top-color:var(--line-strong)}
.ledger .rail{width:124px;padding-right:20px;padding-top:18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);opacity:.85;white-space:nowrap;border-top:0}
.ledger .s,.ledger .e{width:calc((100% - 124px)/2)}
.ledger .e{color:var(--text-primary)}
/* entrance: halves parting, row by row */
.problem[data-enter] .ledger td{opacity:0;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.problem[data-enter] .ledger td.s{transform:translateX(24px)}
.problem[data-enter] .ledger td.e{transform:translateX(-24px)}
.problem[data-enter].in .ledger td{opacity:1;transform:none}
.problem[data-enter] tbody:nth-of-type(1) tr:nth-child(1) td{transition-delay:120ms}
.problem[data-enter] tbody:nth-of-type(1) tr:nth-child(2) td{transition-delay:210ms}
.problem[data-enter] tbody:nth-of-type(1) tr:nth-child(3) td{transition-delay:300ms}
.problem[data-enter] tbody:nth-of-type(1) tr:nth-child(4) td{transition-delay:390ms}
.problem[data-enter] tbody:nth-of-type(1) tr:nth-child(5) td{transition-delay:480ms}
.problem[data-enter] tbody:nth-of-type(2) tr:nth-child(1) td{transition-delay:600ms}
.problem[data-enter] tbody:nth-of-type(2) tr:nth-child(2) td{transition-delay:690ms}
.problem[data-enter] tbody:nth-of-type(2) tr:nth-child(3) td{transition-delay:780ms}
.problem[data-enter] .ledger .rail,.problem[data-enter] thead th{opacity:0;transition:opacity .8s var(--ease-out)}
.problem[data-enter].in .ledger .rail,.problem[data-enter].in thead th{opacity:1}
.problem[data-enter] tbody:nth-of-type(2) .rail{transition-delay:540ms}
.problem[data-enter].settled tbody:nth-of-type(n) tr:nth-child(n) td,.problem[data-enter].settled tbody:nth-of-type(n) .rail{transition-delay:0ms}
.problem[data-enter] .close,.problem[data-enter] .foot{opacity:0;transform:translateY(12px)}
.problem[data-enter].in .close{opacity:1;transform:none;transition-delay:900ms}
.problem[data-enter].in .foot{opacity:1;transform:none;transition-delay:1000ms}
.problem[data-enter].settled .close,.problem[data-enter].settled .foot{transition-delay:0ms}
.problem[data-enter] .kicker,.problem[data-enter] .h2{opacity:0;transform:translateY(14px)}
.problem[data-enter].in .kicker,.problem[data-enter].in .h2{opacity:1;transform:none}
/* living: cube outlines sinking through the outer margins (reserved: the column never exceeds 768px, the cubes stay inside 10 percent of each edge) */
.drift{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:var(--accent-muted);opacity:.25;display:none}
.drift .dc{transform:translateY(0)}
.problem.live .drift .dc{animation:sink-b 40s linear infinite}
.drift .dc:nth-child(1){animation-delay:-4s}.drift .dc:nth-child(2){animation-delay:-13s}.drift .dc:nth-child(3){animation-delay:-22s}.drift .dc:nth-child(4){animation-delay:-31s}.drift .dc:nth-child(5){animation-delay:-37s}
@keyframes sink-b{0%{transform:translateY(-120px)}100%{transform:translateY(760px)}}
@media (min-width:1000px) and (min-height:621px){.drift{display:block}}

/* ---------- 2. services: the 2x2 glass grid ---------- */
.services .lead{max-width:640px}
.services .kicker{margin:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:56px 0 0 8%}
.tile{position:relative;overflow:hidden;padding:28px 28px 26px;border-radius:12px;border:1px solid var(--line);background:var(--panel);transition:border-color .45s var(--ease-out),transform .8s var(--ease-out),opacity .8s var(--ease-out)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tile{background:color-mix(in srgb,var(--panel) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.tile::before{content:"";position:absolute;inset:-1px;border-radius:13px;pointer-events:none;box-shadow:0 0 0 1px var(--accent-muted),0 0 28px var(--accent-muted);opacity:0;transition:opacity .5s var(--ease-out)}
.tile:hover{border-color:var(--line-strong)}
.tile:hover::before{opacity:.9}
.tile h3{margin-top:18px;padding-right:64px;font-size:1.25rem;line-height:1.2;color:var(--text-primary)}
.tile p{margin-top:12px;color:var(--text-secondary);line-height:1.55;font-size:.975rem;max-width:44ch}
.tile .refrain{margin-top:18px;font-size:12.5px;letter-spacing:.02em;color:var(--text-secondary);opacity:.85}
.ti{width:28px;height:28px;fill:none;stroke:var(--accent-muted);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;color:var(--ring)}
.ti .dot{fill:var(--ring);stroke:none;transition:opacity 1s var(--ease-out) 1.1s;opacity:0}
.services[data-enter].in .ti .dot{opacity:1}
.services[data-enter] .ti circle:not(.dot),.services[data-enter] .ti path,.services[data-enter] .ti rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease-in-out)}
.services[data-enter].in .ti circle:not(.dot),.services[data-enter].in .ti path,.services[data-enter].in .ti rect{stroke-dashoffset:0}
.services[data-enter] .tile:nth-child(1) .ti *{transition-delay:250ms}
.services[data-enter] .tile:nth-child(2) .ti *{transition-delay:340ms}
.services[data-enter] .tile:nth-child(3) .ti *{transition-delay:430ms}
.services[data-enter] .tile:nth-child(4) .ti *{transition-delay:520ms}
.services[data-enter] .tile:nth-child(n) .ti .dot{transition-delay:1.1s}
.services[data-enter].settled .tile:nth-child(n) .ti *{transition-delay:0ms}
/* the corner arc: a quarter of the ring in the top-right corner; the four turn as one at one degree per second */
.arc{position:absolute;right:-80px;top:-80px;width:160px;height:160px;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-out) .9s}
.services[data-enter].in .arc{opacity:1}
.arc circle{fill:none;stroke-width:1.25}
.arc-t{stroke:var(--accent-muted)}
.arc-b{stroke:var(--ring);stroke-linecap:round;opacity:.45;transition:opacity .5s var(--ease-out)}
.tile:hover .arc-b{opacity:1}
.arc-g{transform-box:fill-box;transform-origin:center}
.services.live .arc-g{animation:turn 360s linear infinite}
.tile:nth-child(1) .arc-g{animation-delay:0s}
.tile:nth-child(2) .arc-g{animation-delay:-90s}
.tile:nth-child(3) .arc-g{animation-delay:-270s}
.tile:nth-child(4) .arc-g{animation-delay:-180s}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.after-tiles{margin-left:8%}
.after-tiles .close{margin-top:44px}

/* ---------- 4. after: the spec sheet and the three questions ---------- */
.after .kicker{margin:0}
.a-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px 72px;margin-top:56px;align-items:start;position:relative}
.a-grid::before{content:"";position:absolute;left:calc(51.2% - 1px);top:0;bottom:0;width:1px;background:var(--line);opacity:0;transition:opacity 1s var(--ease-out) .6s}
.after[data-enter].in .a-grid::before{opacity:1}
.sheet-wrap{position:relative;padding:4px 0 8px}
.sheet-title{font-size:1.0625rem;color:var(--text-primary);padding:0 0 14px 0;margin:0}
.sheet{margin:0;border-top:1px solid var(--line-strong)}
.sheet .row{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateX(-6px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.after[data-enter].in .sheet .row{opacity:1;transform:none}
.sheet dt{font-weight:500;color:var(--text-primary);font-size:.975rem}
.sheet dd{margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.5;max-width:44ch}
.sheet dd::after{content:"";display:inline-block;width:.55em;height:1em;vertical-align:-.15em;margin-left:.35em;background:var(--ring);opacity:0}
.after[data-enter].in .sheet dd::after{animation:cursor-once .7s steps(2,jump-none) 1}
@keyframes cursor-once{0%{opacity:1}100%{opacity:0}}
.after[data-enter] .sheet .row:nth-child(1),.after[data-enter] .sheet .row:nth-child(1) dd::after{transition-delay:120ms;animation-delay:120ms}
.after[data-enter] .sheet .row:nth-child(2),.after[data-enter] .sheet .row:nth-child(2) dd::after{transition-delay:230ms;animation-delay:230ms}
.after[data-enter] .sheet .row:nth-child(3),.after[data-enter] .sheet .row:nth-child(3) dd::after{transition-delay:340ms;animation-delay:340ms}
.after[data-enter] .sheet .row:nth-child(4),.after[data-enter] .sheet .row:nth-child(4) dd::after{transition-delay:450ms;animation-delay:450ms}
.after[data-enter] .sheet .row:nth-child(5),.after[data-enter] .sheet .row:nth-child(5) dd::after{transition-delay:560ms;animation-delay:560ms}
.after[data-enter] .sheet .row:nth-child(6),.after[data-enter] .sheet .row:nth-child(6) dd::after{transition-delay:670ms;animation-delay:670ms}
.after[data-enter].settled .sheet .row:nth-child(n){transition-delay:0ms}
/* living: the 4px scan dot around the sheet's border */
.scan{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:var(--ring);offset-path:inset(0px);offset-distance:0%;opacity:0;pointer-events:none}
.scan::before{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 8px 2px var(--ring);opacity:.8}
.after.live .scan{animation:scan-run 30s linear -9s infinite}
@keyframes scan-run{0%{offset-distance:0%;opacity:0}3%{opacity:1}97%{opacity:1}100%{offset-distance:100%;opacity:0}}
.qs-title{font-size:1.0625rem;color:var(--text-primary);padding-bottom:14px;margin:0}
.qlist{list-style:none;margin:0;padding:0}
.q{position:relative;padding:22px 0 22px 56px}
.q + .q{border-top:1px solid var(--line)}
.qn{position:absolute;left:0;top:18px;font-family:var(--display);font-weight:500;font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--accent-muted)}
.qh{font-size:1.5rem;line-height:1.15;color:var(--text-primary);letter-spacing:-.02em}
.qh .bf{display:block;max-width:20ch}
.q p{margin-top:10px;color:var(--text-secondary);line-height:1.55;max-width:40ch}
.after.focus[data-enter] .q:nth-child(1) .bf span{transition-delay:760ms}
.after.focus[data-enter] .q:nth-child(2) .bf span{transition-delay:940ms}
.after.focus[data-enter] .q:nth-child(3) .bf span{transition-delay:1120ms}
.after.focus[data-enter] .q{opacity:0;transform:translateY(8px)}
.after.focus[data-enter].in .q{opacity:1;transform:none}
.after.focus[data-enter] .q:nth-child(1){transition-delay:700ms}
.after.focus[data-enter] .q:nth-child(2){transition-delay:880ms}
.after.focus[data-enter] .q:nth-child(3){transition-delay:1060ms}
.after.focus[data-enter].settled .q:nth-child(n),.after.focus[data-enter].settled .q:nth-child(n) .bf span{transition-delay:0ms}
.a-close{margin-top:48px}

/* ---------- 4b. security: the second scrub film (its own controller in site.js). The stage pins for 320vh; --k1, --k2, --k3 are written by the drive loop; every card and chip state is pure CSS off them ---------- */
.security{position:relative;height:320vh;z-index:1;--k1:0;--k2:0;--k3:0;--scw:224px}
.s-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
/* the film panel: the right 70 percent of the stage; the frame is right-anchored so the shield lands near 68vw; cq units let the mark find the sphere at any crop */
.s-film{position:absolute;top:0;bottom:0;left:30%;right:0;z-index:1;overflow:hidden;background:var(--canvas);container-type:size;isolation:isolate;--fx:.702;--fy:.395}
/* the film's blacks are pure #000; a lighten blend of the canvas over the panel lifts them to the canvas tone, so the frame has no edge to show */
.s-lift{position:absolute;inset:0;z-index:3;background:var(--canvas);mix-blend-mode:lighten;pointer-events:none}
/* the frame's rendered size: at least the panel's height (cover) and at least 1.53 panel widths, right-anchored and top-aligned, so the shield (frame x .70) lands near 68vw at every aspect ratio. The cards and chips layers are size containers over the same box, so the same cq math places them */
.s-film > *,.s-cards > *,.s-chips > *{--fw:max(153cqw,170.84cqh);--fh:calc(var(--fw)*.58533)}
.s-poster,.s-hold{position:absolute;right:0;top:0;width:var(--fw);height:var(--fh);background-color:var(--canvas);background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.s-poster{z-index:1}
.s-hold{z-index:3;opacity:0}
.s-video{position:absolute;right:0;top:0;z-index:2;width:var(--fw);height:var(--fh);max-width:none;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-out);will-change:transform;transform:translateZ(0)}
.s-film.video-ready .s-video{opacity:1}
.s-film.video-failed .s-video{display:none}
.s-film.video-failed .s-hold{opacity:1;background-image:url('security-hold.jpg')}
/* the film's edges are pure black; the fade dissolves them into the canvas on the left, top and bottom, plus the base scrim at whisper */
.s-fade{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to right,var(--canvas) 0%,rgba(12,12,22,.8) 8%,rgba(12,12,22,0) 26%),linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 13%),linear-gradient(to top,var(--canvas) 0%,rgba(12,12,22,0) 15%),radial-gradient(ellipse 120% 90% at 55% 45%,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.32) 100%)}
/* the mark over the sphere: --fw and --fh are the rendered frame's size under object-fit cover (aspect 1254/734), right-anchored, so the sphere's frame fractions map to the panel */
.s-mark{position:absolute;z-index:5;--km:clamp(0,(var(--k3,0) - .75)*5,1);height:calc(var(--fh)*.05);width:calc(var(--fh)*.05);right:calc((1 - var(--fx))*var(--fw));top:calc(var(--fy)*var(--fh));transform:translate(50%,-50%) scale(calc(.86 + .14*var(--km)));opacity:var(--km);filter:drop-shadow(0 0 8px var(--ring)) drop-shadow(0 0 22px var(--accent));pointer-events:none}
.s-ring{left:50%;top:50%;z-index:6}
.s-film.video-ready .s-ring,.s-film.video-failed .s-ring{opacity:0;visibility:hidden}
/* the copy lane: 6 to 40 percent, vertically centered, over the canvas (the panel's left fade keeps the film out from under it), so no text shadow here */
.s-lane{position:absolute;z-index:3;left:6%;width:34%;top:50%;transform:translateY(-50%);pointer-events:none;text-shadow:none}
.s-lane .btn{pointer-events:auto}
.s-kicker{display:inline-block;margin:0;padding:6px 10px;--kq:clamp(0,var(--k1,0)*4,1);opacity:var(--kq);transform:translateY(calc((1 - var(--kq))*10px))}
.s-h2{margin-top:22px;font-size:clamp(2.1rem,3.7vw,3.6rem);line-height:1.04;letter-spacing:-.03em;max-width:12ch;font-weight:600;color:var(--text-primary)}
.s-l1,.s-l2{display:block}
.s-l2{white-space:nowrap}
/* ignition: each word is a muted ghost with a bright copy fading in over it, rising 10px in reading order on its own --th off --k1 */
.s-h2 .w{position:relative;display:inline-block;white-space:nowrap;color:var(--accent-muted);--kc:clamp(0,(var(--k1,0) - var(--th,0))*4,1);opacity:calc(.55 + .45*var(--kc));transform:translateY(calc((1 - var(--kc))*10px))}
.s-h2 .w::after{content:attr(data-w);position:absolute;left:0;top:0;color:var(--text-primary);opacity:var(--kc)}
.s-l2 .w::after{background:linear-gradient(90deg,var(--accent-hover),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-sub{margin-top:22px;font-size:1.0625rem;line-height:1.55;color:var(--text-secondary);max-width:40ch;--ks:clamp(0,(var(--k1,0) - .6)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.s-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;--kb:clamp(0,(var(--k1,0) - .8)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}
.security.cta-off .s-actions{visibility:hidden}
/* the cards layer sits exactly over the film panel, so --cx and --cy are fractions of the panel; each card arrives on its own --at off --k3, sliding 16px toward the shield */
.s-cards{position:absolute;z-index:4;left:30%;right:0;top:0;bottom:0;list-style:none;margin:0;padding:0;container-type:size}
.security.cards-off .s-cards{visibility:hidden}
/* --fe is the frame fraction of the card's shield-facing edge (left cards hang from their right edge, right cards from their left), so the card body never enters the shield at any scale; --cy is the panel fraction of the card's vertical center */
.s-slot{position:absolute;width:var(--scw);--ka:clamp(0,(var(--k3,0) - var(--at,0))*6,1);top:clamp(calc(var(--nav-h) + 40px),calc(var(--cy)*100%),calc(100% - 60px));opacity:var(--ka);transform:translate(var(--ax,-50%),-50%) translate(calc(var(--sx,0px)*(1 - var(--ka))),calc(var(--sy,0px)*(1 - var(--ka)))) scale(calc(.92 + .08*var(--ka)))}
.s-slot.l{--ax:-100%;left:max(calc(var(--scw) + 12px),calc(100% - (1 - var(--fe))*var(--fw)))}
.s-slot.r{--ax:0%;left:min(calc(100% - var(--scw) - 12px),calc(100% - (1 - var(--fe))*var(--fw)))}
.s-card{display:flex;width:100%;text-decoration:none;color:var(--text-primary)}
.s-float{display:flex;width:100%}
/* the section's living element: the idle float of the cards, on only while the section is on screen */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.security.live .s-float{animation:floaty 12s var(--ease-in-out) infinite}
.s-slot:nth-child(1) .s-float{animation-delay:-2s}
.s-slot:nth-child(2) .s-float{animation-delay:-5s}
.s-slot:nth-child(3) .s-float{animation-delay:-8s}
.s-slot:nth-child(4) .s-float{animation-delay:-3.5s}
.s-slot:nth-child(5) .s-float{animation-delay:-9.5s}
.s-slot:nth-child(6) .s-float{animation-delay:-6.5s}
.s-body{position:relative;display:flex;gap:12px;width:100%;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);transition:transform .5s var(--ease-out),border-color .4s var(--ease-out)}
.s-chip{position:absolute;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .s-body,.s-chip{background:color-mix(in srgb,var(--panel) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.s-body::before,.s-body::after,.s-chip::after{content:"";position:absolute;inset:-1px;border-radius:11px;pointer-events:none;transition:opacity .45s var(--ease-out)}
.s-body::after{box-shadow:0 0 0 1px var(--accent-muted),0 0 24px var(--accent-muted);opacity:var(--ka,0)}
.s-body::before{box-shadow:0 0 0 1px var(--accent),0 0 28px var(--accent-muted),0 0 10px var(--accent-muted);opacity:0}
.s-card:hover .s-body,.s-card:focus-visible .s-body{transform:translateY(-4px)}
.s-card:hover .s-body::before,.s-card:focus-visible .s-body::before{opacity:.9}
.s-card:focus-visible{outline:none}
.s-card:focus-visible .s-body{border-color:var(--accent)}
.s-card .ico{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.s-line{font-family:var(--mono);font-size:10.5px;line-height:1.55;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
/* the four small icon chips: decorative, one by one across --k2 */
.s-chips{position:absolute;z-index:4;left:30%;right:0;top:0;bottom:0;pointer-events:none;container-type:size}
.s-chip{display:flex;align-items:center;justify-content:center;left:calc(100% - (1 - var(--fe))*var(--fw));top:clamp(calc(var(--nav-h) + 22px),calc(var(--cy)*100%),calc(100% - 40px));--kq:clamp(0,(var(--k2,0) - var(--at,0))*5,1);opacity:var(--kq);transform:translate(-50%,-50%) scale(calc(.92 + .08*var(--kq)))}
.s-chip::after{box-shadow:0 0 0 1px var(--accent-muted),0 0 20px var(--accent-muted);opacity:calc(var(--kq)*.8)}
.s-chip svg{width:20px;height:20px;fill:none;stroke:var(--ring);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
/* the chips row along the bottom, baseline aligned, hairlines between */
.s-row{position:absolute;z-index:5;left:6%;right:6%;bottom:6%;margin:0;padding:0;list-style:none;display:flex;align-items:baseline;--kr:clamp(0,(var(--k3,0) - .85)/.15,1);opacity:var(--kr);transform:translateY(calc((1 - var(--kr))*10px))}
.s-row li{display:flex;flex-direction:column;gap:6px;padding:0 28px;border-left:1px solid var(--line)}
.s-row li:first-child{padding-left:0;border-left:0}
.s-rt{font-family:var(--body);font-weight:500;font-size:15px;line-height:1.2;color:var(--text-primary)}
.s-rl{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-height:640px){.s-row,.s-chips{display:none}}
@media (max-width:1400px){.security{--scw:204px}.s-body{padding:12px}.s-line{font-size:10px;letter-spacing:.05em}}
/* narrow scrub windows (a fine-pointer landscape window under 1100px): a narrower lane, smaller cards, and a frame fixed at 1.5 panel widths (letterboxed under the bottom fade) so the shield stays small enough for the cards to sit beside it */
@media (max-width:1100px){
  .security{--scw:150px}
  .s-line{white-space:normal}
  .s-lane{width:24%}
  .s-h2{font-size:clamp(2rem,3.4vw,3.6rem)}
  .s-sub{max-width:32ch;font-size:1rem}
  .s-film > *,.s-cards > *,.s-chips > *{--fw:150cqw}
  .s-fade{background:linear-gradient(to right,var(--canvas) 0%,rgba(12,12,22,.8) 8%,rgba(12,12,22,0) 26%),linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 13%),linear-gradient(to top,var(--canvas) 0%,rgba(12,12,22,.9) 12%,rgba(12,12,22,0) 34%),radial-gradient(ellipse 120% 90% at 55% 45%,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.32) 100%)}
}
/* the static states: the five gates (identical strings in site.js) and the reduced-motion pin. The hold still replaces the film, every state is final */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .security{--k1:1;--k2:1;--k3:1}
  .security.cards-off .s-cards,.security.cta-off .s-actions{visibility:visible}
  .s-video,.s-poster,.s-ring{display:none}
  .s-hold{opacity:1;background-image:url('security-hold.jpg')}
  .security.live .s-float{animation:none}
}
.security.pinned{--k1:1;--k2:1;--k3:1}
.security.pinned.cards-off .s-cards,.security.pinned.cta-off .s-actions{visibility:visible}
.security.pinned .s-video,.security.pinned .s-poster,.security.pinned .s-ring{display:none}
.security.pinned .s-hold{opacity:1;background-image:url('security-hold.jpg')}
.security.pinned.live .s-float{animation:none}
/* the flowing layout: the four device gates (reduced motion on a desktop keeps the pinned layout over the still) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .security{height:auto}
  .s-stage{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;padding:96px 16px 88px}
  .s-lane{position:relative;order:1;left:auto;top:auto;width:auto;transform:none;pointer-events:auto}
  .s-kicker{padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:none;transform:none}
  .s-h2{font-size:clamp(2.1rem,9vw,3rem);max-width:none}
  .s-h2 .w,.s-sub,.s-actions{transform:none}
  .s-sub{margin-top:18px;font-size:1rem}
  .s-actions{margin-top:24px}
  .s-actions .btn{flex:1 1 auto}
  .s-film{position:relative;order:2;left:auto;right:auto;top:auto;bottom:auto;height:auto;aspect-ratio:1254/734;margin:32px -16px 0}
  .s-film > *,.s-cards > *{--fw:100cqw}
  .s-cards{container-type:normal}
  .s-fade{background:linear-gradient(to bottom,var(--canvas) 0%,rgba(12,12,22,0) 14%),linear-gradient(to top,var(--canvas) 0%,rgba(12,12,22,0) 16%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(var(--scrim),0) 40%,rgba(var(--scrim),.32) 100%)}
  .s-mark{transform:translate(50%,-50%)}
  .s-cards{position:relative;order:3;left:auto;right:auto;top:auto;bottom:auto;display:grid;gap:12px;margin-top:20px}
  .s-slot{position:static;width:auto;opacity:1;transform:none}
  .s-body{padding:14px 16px}
  .s-body::after{opacity:.6}
  .s-chips{display:none}
  .s-row{position:relative;order:4;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 20px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);opacity:1;transform:none}
  .s-row li{padding:0;border-left:0}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  @media (min-width:600px){
    .s-cards{grid-template-columns:1fr 1fr}
  }
}

/* ---------- 5. principles: full-bleed over the ring still ---------- */
.principles{padding:152px 0;overflow:hidden;background-color:var(--canvas)}
.p-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--canvas) url('hero-ring.jpg') no-repeat 100% 50%/cover}
.p-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(var(--scrim),.94) 0%,rgba(var(--scrim),.9) 42%,rgba(var(--scrim),.62) 62%,rgba(var(--scrim),.5) 100%)}
.p-ring{position:absolute;inset:0;width:100%;height:100%}
.p-drawn{fill:none;stroke:var(--accent-muted);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-in-out) .3s}
.principles[data-enter].in .p-drawn{stroke-dashoffset:0}
.p-glow{opacity:.6;transform-box:fill-box;transform-origin:center}
.principles.live .p-glow{animation:breathe-glow 9s var(--ease-in-out) -3s infinite}
@keyframes breathe-glow{0%,100%{opacity:.6}50%{opacity:1}}
.principles .wrap{position:relative;z-index:1}
.principles .lane{max-width:640px}
.principles .kicker{margin:0}
.pgrid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:32px 36px}
.pgrid h3{font-size:1.1875rem;line-height:1.25;color:var(--text-primary)}
.pgrid .bf{display:block}
.pgrid p{margin-top:8px;color:var(--text-secondary);line-height:1.5;font-size:.95rem;max-width:34ch}
.notlist{margin-top:52px}
.not-h{font-family:var(--body);font-weight:500;font-size:1rem;color:var(--text-primary)}
.not{list-style:none;margin:10px 0 0;padding:0;color:var(--text-secondary);line-height:1.6}
.not li{position:relative;padding-left:18px}
.not li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--text-secondary)}
.principles .foot{margin-top:28px}

/* ---------- 6. answers: the grouped accordion ---------- */
.answers .kicker{margin:0}
.answers .col{position:relative;z-index:1}
.group{margin-top:56px}
.glabel{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);font-weight:400;padding-bottom:12px}
.answers .row{position:relative;border-top:1px solid var(--line)}
.group .row:last-child{border-bottom:1px solid var(--line)}
.answers .row::before{content:"";position:absolute;inset:-1px 0;pointer-events:none;box-shadow:inset 0 1px 0 var(--accent-muted),inset 0 -1px 0 var(--accent-muted),0 0 24px var(--accent-muted);opacity:0;transition:opacity .6s var(--ease-out)}
.answers .row.open::before{opacity:1}
.qrow{margin:0;font-weight:500}
.qbtn{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 28px;align-items:baseline;gap:12px;width:100%;padding:18px 0;text-align:left;font-family:var(--display);font-weight:500;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em;color:var(--text-primary);border-radius:6px}
.qbtn .idx{font-size:12px;letter-spacing:.18em;color:var(--text-secondary)}
.qbtn .qt{opacity:.92;transition:opacity .35s var(--ease-out)}
.qbtn:hover .qt{opacity:1}
.plus{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--text-secondary);transition:transform .5s var(--ease-out)}
.plus::after{transform:rotate(90deg)}
.row.open .plus::before{transform:rotate(180deg)}
.row.open .plus::after{transform:rotate(135deg)}
.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-in-out)}
.row.open .ans{grid-template-rows:1fr}
.ans-in{overflow:hidden;min-height:0}
.ans p{padding:0 40px 22px 52px;color:var(--text-secondary);line-height:1.6;max-width:60ch;opacity:0;transform:translateY(-4px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.row.open .ans p{opacity:1;transform:none;transition-delay:.12s}
/* entrance: the label first, then the rows rise 12px, 60ms apart */
.group[data-enter] .glabel,.group[data-enter] .row{opacity:0;transform:translateY(12px)}
.group[data-enter].in .glabel,.group[data-enter].in .row{opacity:1;transform:none}
.group[data-enter] .row:nth-child(2){transition-delay:120ms}.group[data-enter] .row:nth-child(3){transition-delay:180ms}.group[data-enter] .row:nth-child(4){transition-delay:240ms}.group[data-enter] .row:nth-child(5){transition-delay:300ms}.group[data-enter] .row:nth-child(6){transition-delay:360ms}.group[data-enter] .row:nth-child(7){transition-delay:420ms}.group[data-enter] .row:nth-child(8){transition-delay:480ms}.group[data-enter] .row:nth-child(9){transition-delay:540ms}.group[data-enter] .row:nth-child(10){transition-delay:600ms}.group[data-enter] .row:nth-child(11){transition-delay:660ms}.group[data-enter] .row:nth-child(12){transition-delay:720ms}
.group[data-enter].settled .row:nth-child(n){transition-delay:0ms}
.ans-head[data-enter] [data-part]{opacity:0;transform:translateY(14px)}
.ans-head[data-enter].in [data-part]{opacity:1;transform:none}
.ans-foot{margin-top:48px}
.ans-foot .close{margin-top:0}
/* living: a faint cube drifting down the right margin every 45 seconds (reserved: the column is 768px wide, the cube stays in the outer 6 percent) */
.a-cube{position:absolute;right:4%;top:0;width:18px;height:18px;fill:none;stroke:var(--accent-muted);stroke-width:1.25;stroke-linejoin:round;opacity:0;pointer-events:none;display:none}
.answers.live .a-cube{animation:cube-fall 45s linear -12s infinite}
@keyframes cube-fall{0%{transform:translateY(0);opacity:0}8%{opacity:.7}90%{opacity:.7}100%{transform:translateY(calc(100vh + 1400px));opacity:0}}
@media (min-width:1000px) and (min-height:621px){.a-cube{display:block}}

/* ---------- 7. build: the form panel and the ring behind it ---------- */
.build{padding-bottom:140px}
.b-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px 80px;align-items:start}
.b-lane{padding-top:24px;padding-right:48px}
.build .kicker{margin:0}
.build .h2{max-width:14ch}
.build .h2 .w{display:inline-block;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.build[data-enter].in .h2 .w{opacity:1;transform:none}
.build[data-enter] .h2 .w:nth-child(1){transition-delay:900ms}.build[data-enter] .h2 .w:nth-child(2){transition-delay:980ms}.build[data-enter] .h2 .w:nth-child(3){transition-delay:1060ms}.build[data-enter] .h2 .w:nth-child(4){transition-delay:1140ms}.build[data-enter] .h2 .w:nth-child(5){transition-delay:1220ms}
.build[data-enter] .kicker,.build[data-enter] .b-intro{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.build[data-enter].in .kicker{opacity:1;transform:none;transition-delay:820ms}
.build[data-enter].in .b-intro{opacity:1;transform:none;transition-delay:1300ms}
.build[data-enter].settled .h2 .w:nth-child(n),.build[data-enter].settled .kicker,.build[data-enter].settled .b-intro{transition-delay:0ms}
.b-side{position:relative}
.b-ring{position:absolute;left:-120px;top:50%;width:420px;height:420px;margin-top:-210px;pointer-events:none;z-index:0;transform-box:fill-box;transform-origin:center;display:none}
.b-ring circle{fill:none;stroke-width:1.5}
.br-track{stroke:var(--accent-muted);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-in-out)}
.build[data-enter].in .br-track{stroke-dashoffset:0}
.br-bar-dim,.br-bar-lit{stroke-linecap:round;stroke-dashoffset:.75;transition:stroke-dashoffset 1.4s var(--ease-in-out) 1.1s,opacity .6s var(--ease-out)}
.br-full{stroke:var(--ring);stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.6s var(--ease-in-out),opacity .4s var(--ease-out)}
.br-bar-dim{stroke:var(--accent-muted);opacity:0}
.br-bar-lit{stroke:var(--ring);opacity:0}
.build[data-enter].in .br-bar-dim,.build[data-enter].in .br-bar-lit{stroke-dashoffset:.43}
.build[data-enter].in .br-bar-dim{opacity:1}
.b-side:focus-within .br-bar-lit{opacity:1}
.b-side.sent .br-full{opacity:1;stroke-dashoffset:0}
.b-side.sent .br-bar-lit{opacity:1}
.build.live .b-ring{animation:breathe-ring 10s var(--ease-in-out) -4s infinite}
@keyframes breathe-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media (min-width:1000px) and (min-height:621px){.b-ring{display:block}}
.panel{position:relative;z-index:1;padding:32px 32px 28px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{background:color-mix(in srgb,var(--panel) 78%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
.bform{transition:opacity .4s var(--ease-out)}
.panel.leaving .bform{opacity:0}
.field{margin-top:18px;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.field:first-child{margin-top:0}
.build[data-enter].in .field{opacity:1;transform:none}
.build[data-enter] .field:nth-child(1){transition-delay:1200ms}.build[data-enter] .field:nth-child(2){transition-delay:1300ms}.build[data-enter] .field:nth-child(3){transition-delay:1400ms}.build[data-enter] .field:nth-child(4){transition-delay:1500ms}.build[data-enter] .field:nth-child(5){transition-delay:1600ms}.build[data-enter] .field:nth-child(6){transition-delay:1760ms}
.build[data-enter].settled .field:nth-child(n){transition-delay:0ms}
.field label{display:block;font-size:.95rem;font-weight:500;color:var(--text-secondary);margin-bottom:8px}
.field .opt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);opacity:.7;margin-left:6px}
.field input,.field textarea{display:block;width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--line-strong);background:rgba(var(--scrim),.35);color:var(--text-primary);font-family:var(--body);font-size:1rem;line-height:1.45;resize:vertical;transition:border-color .35s var(--ease-out)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:.55}
.field input:hover,.field textarea:hover{border-color:var(--text-secondary)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--accent-hover)}
.err{margin-top:8px;font-size:.9rem;color:var(--text-primary);opacity:0;transform:translateY(-4px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);min-height:0}
.err.show{opacity:1;transform:none}
.field-btn{margin-top:24px}
.field-btn .btn{width:100%}
.thanks{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);padding:12px 0 8px}
.thanks.show{opacity:1;transform:none}
.thanks-h{font-size:2rem;color:var(--text-primary);font-weight:600;letter-spacing:-.03em}
.thanks-h:focus{outline:none}
.thanks-h:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.thanks p{margin-top:14px;color:var(--text-secondary);line-height:1.6;max-width:44ch}
.b-note{margin-top:16px;font-size:12px;letter-spacing:.06em;color:var(--text-secondary);opacity:.8;text-align:center}

/* ---------- narrower screens: one column everywhere, 16px gutters ---------- */
@media (max-width:1000px){
  .tiles,.after-tiles{margin-left:0}
}
@media (max-width:860px){
  .sec{padding:88px 0}
  .wrap,.col{padding:0 16px}
  .h2{margin-top:14px}
  .tiles{grid-template-columns:1fr;gap:14px;margin-top:40px}
  .a-grid{grid-template-columns:1fr;gap:48px;margin-top:40px}
  .a-grid::before{display:none}
  .q{padding-left:48px}
  .pgrid{grid-template-columns:1fr;gap:24px;margin-top:36px}
  .principles{padding:96px 0 88px}
  .p-bg{background-size:100% auto;background-position:50% 0}
  .p-bg::before{background:linear-gradient(to bottom,rgba(var(--scrim),.66) 0%,rgba(var(--scrim),.86) 45%,var(--canvas) 100%)}
  .p-ring{height:auto;aspect-ratio:1284/716;bottom:auto}
  .b-grid{grid-template-columns:1fr;gap:36px}
  .b-lane{padding-top:0}
  .panel{padding:22px 18px 20px}
  .ans p{padding:0 16px 20px 52px}
}
@media (max-width:640px){
  .ledger,.ledger thead,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block;width:auto}
  .ledger thead{display:none}
  .ledger .rail{padding:26px 0 8px;border:0;width:auto}
  .ledger tbody:first-of-type .rail{padding-top:0}
  .ledger td{padding:0;border:0}
  .ledger tbody tr{padding:14px 0;border-top:1px solid var(--line)}
  .ledger tbody tr:first-child{border-top-color:var(--line-strong)}
  .ledger .s,.ledger .e{width:auto}
  .ledger .e{margin-top:6px;padding-left:14px;position:relative}
  .ledger .e::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--text-secondary)}
  .problem[data-enter] .ledger td.s{transform:translateX(12px)}
  .problem[data-enter] .ledger td.e{transform:translateX(-12px)}
  .sheet .row{grid-template-columns:1fr;gap:4px}
  .qbtn{grid-template-columns:32px minmax(0,1fr) 24px;font-size:1.0625rem}
  .ans p{padding-left:44px}
  .tile{padding:22px 20px 20px}
}

/* ---------- coarse pointers: 44px targets without changing layout ---------- */
@media (pointer:coarse){
  .tlink{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .qbtn{min-height:44px;display:grid;align-items:baseline}
  .field-btn .btn{min-height:44px}
  .s-card{min-height:44px;display:flex;align-items:stretch;justify-content:flex-start}
}

/* ---------- reduced motion for the sections: final states, drives pinned by JS ---------- */
@media (prefers-reduced-motion: reduce){
  .problem[data-enter] .ledger td,.problem[data-enter] .ledger .rail,.problem[data-enter] thead th,.problem[data-enter] .close,.problem[data-enter] .foot,.problem[data-enter] .kicker,.problem[data-enter] .h2{opacity:1;transform:none}
  .drift .dc{transform:translateY(200px)}
  .services[data-enter] .ti circle:not(.dot),.services[data-enter] .ti path,.services[data-enter] .ti rect{stroke-dashoffset:0}
  .ti .dot,.arc{opacity:1}
  .arc-g{transform:none}
  .sheet .row,.after.focus[data-enter] .q{opacity:1;transform:none}
  .a-grid::before,.p-glow{opacity:1}
  .scan{opacity:1;offset-distance:0%}
  .p-drawn{stroke-dashoffset:0}
  .group[data-enter] .glabel,.group[data-enter] .row,.ans-head[data-enter] [data-part]{opacity:1;transform:none}
  .a-cube{opacity:.5;transform:translateY(40vh)}
  .build[data-enter] .h2 .w,.build[data-enter] .kicker,.build[data-enter] .b-intro,.field{opacity:1;transform:none}
  .br-track{stroke-dashoffset:0}
  .br-bar-dim,.br-bar-lit{stroke-dashoffset:.43}
  .br-bar-dim{opacity:1}
  .b-ring{transform:none}
  .err.show,.thanks.show{opacity:1;transform:none}
  .ans p{opacity:1;transform:none}
  .s-card:hover .s-body,.s-card:focus-visible .s-body{transform:none}
  .s-float{transform:none}
}

/* ==== DESIGN COMPARISON (v2). The quality-pass redesign, shown only with ?v=2 in the address (the page
   adds .v2 to <html>). Every rule here is scoped to .v2, and the rewritten headlines sit beside the
   originals in index.html as .v1only / .v2only, so the current design is untouched. To drop v2, delete
   this block, the .v1only/.v2only pairs, the chapter section and the two comparison scripts; to adopt it,
   fold the rules in and delete the originals.
   What it changes:
   - rhythm: the capability run alternates artwork left and right, and the cards take four forms (boxed
     index, table, open columns, none); two sections are artwork and a sentence
   - type: a brighter secondary grey, a 15px floor for card text, no mono label under 12px, larger
     application-layer labels
   - decoration: no badge rows, no tagline strips, no duplicate step strips, no brand bands
   - colour: purple is for actions (buttons, links, selected states) and the hero's one word
   - headlines rewritten in the plain voice of the lower half
   - a chapter break and a lighter, wider surface for the lower half
   - the hero's dark tail is compressed, Why Agenius fills its right half, and a progress bar and a
     capability index show where you are ==== */

/* the switch between the two headline sets */
html:not(.v2) .v2only{display:none !important}
.v2 .v1only{display:none !important}
span.v1only,span.v2only{display:contents}
.v2only .bar-l1,.v2only .s-l1{display:block;white-space:nowrap}

/* ---- type and colour, everywhere ---- */
html.v2{--text-secondary:#C0BCCD}
.v2 .bar-kicker{color:var(--text-secondary)}
.v2 .bar-l2 .w::after,.v2 .bar-h2 .w.vio::after,.v2 .s-l2 .w::after{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text-primary)}
.v2 :is(.bar-ix,.pnum,.cd-k,.uc-fn,.uc-fi-k,.uc-cn,.ud-h,.ul-n,.ul-msg .ul-src,.ui-note span,.uc-msg){color:var(--text-secondary)}
.v2 .ud-steps li::before,.v2 .ig-b::before{color:var(--text-secondary)}
.v2 :is(.bar-ix,.uc-fn,.uc-fc,.uc-cn,.ud-h,.ul-n,.uc-fi-k,.cd-k,.ul-msg .ul-src){font-size:12px}
.v2 :is(.bar-card p,.cs-card p,.cap-card .cap-cb,.why-card .cap-cb){font-size:.9375rem;line-height:1.5}
.v2 .cs-row .cs-card h4{font-size:1rem}
.v2 :is(.cs-sub,.cap-sub){font-size:1rem;line-height:1.6}
.v2 .ap-lb h3{font-size:clamp(.95rem,2.5cqh,1.125rem);color:var(--text-primary)}
.v2 .ap-lb .ap-sub{font-size:clamp(.8125rem,2.15cqh,.9375rem)}
.v2 .ap-lb p:not(.ap-sub){font-size:clamp(.75rem,1.9cqh,.8438rem);line-height:1.4}
.v2 #applications{--lab-w:clamp(310px,27.5vw,420px)}
/* v2 gives the artwork more height, so the paragraphs show from a taller artwork than before */
@container (max-height:620px){
  .v2 .ap-lb p:not(.ap-sub){display:none}
}
.v2 .ap-sum{font-size:clamp(.9375rem,1vw,1.0625rem)}
@media (max-height:760px){.v2 .capabilities .cap-sub{font-size:.9375rem;line-height:1.55}}
/* short windows: the capability index keeps its numbers, names and links; each section below carries the description */
@media (max-height:780px) and (min-width:721px) and (orientation:landscape){.v2 .cap-card .cap-cb{display:none}}
@media (max-height:780px) and (min-width:721px) and (max-width:1100px) and (orientation:landscape){.v2 .cap-cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.v2 .cap-card{padding:12px}}

/* ---- decoration that goes ---- */
.v2 :is(.cap-proof,.why-proof,.hero .side,.cs-bands,.cs-stepblock,.cs-rowrule,.s-row){display:none}
.v2 :is(.bar-rl,.bar-rr,.bar-hair){display:none}

/* ---- the security labels: title above, its three lines stacked beneath ---- */
.v2 .s-card .card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2 .s-card .card-t{font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--text-primary)}

/* ---- the lower half: a chapter break, then a lighter surface ---- */
.v2 .sec{--canvas:#121221;background-color:var(--canvas)}
.v2-chapter{position:relative;padding:clamp(120px,22vh,240px) 0 clamp(96px,16vh,180px);border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0C0C16 0%,#121221 100%)}
.v2-ch-in{max-width:1240px;margin:0 auto;padding:0 24px}
.v2-ch-t{margin-top:22px;max-width:22ch;font-family:var(--display);font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--text-primary)}

/* ---- where you are: a progress line along the top, a capability index down the left edge ---- */
.v2-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:200;pointer-events:none}
.v2-progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.v2-rail{display:none}

/* ---- desktop layouts: the section rhythm ---- */
@media (min-width:721px) and (orientation:landscape) and (min-height:561px), (min-width:721px) and (orientation:landscape) and (pointer:fine){
  /* the capability index */
  .v2-rail{position:fixed;left:24px;top:50%;z-index:40;display:flex;flex-direction:column;gap:clamp(7px,1.35vh,13px);margin:0;padding:0;list-style:none;
    transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
  .v2-rail.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out)}
  .v2-rail a{position:relative;display:block;width:9px;height:9px;border-radius:50%;border:1px solid var(--text-secondary);opacity:.6;transition:opacity .25s,background .25s}
  .v2-rail a:hover,.v2-rail a:focus-visible,.v2-rail a[aria-current="true"]{opacity:1}
  .v2-rail a[aria-current="true"]{background:var(--text-primary);border-color:var(--text-primary)}
  .v2-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .v2-rail span{position:absolute;left:20px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:5px 11px;border-radius:999px;
    border:1px solid var(--line-strong);background:rgba(12,12,22,.94);font-size:.8125rem;color:var(--text-primary);opacity:0;pointer-events:none;transition:opacity .2s}
  .v2-rail a:hover span,.v2-rail a:focus-visible span{opacity:1}

  /* cards without boxes: the shared reset for the table and column forms */
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .cs-card{padding:14px 0 0;border:0;border-top:1px solid var(--line-strong);border-radius:0;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .3s var(--ease-out)}
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .cs-card::after{display:none}
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .cs-card .bar-ibox{display:none}
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .cs-card h4{margin-top:0;color:var(--text-primary)}
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .bar-slot:hover .cs-card{border-top-color:var(--text-primary)}
  .v2 :is(#agents,#automation,#knowledge,#infrastructure) .cs-card p{margin-top:8px}

  /* the table form (agents, knowledge): a name and a line, two columns of rows */
  .v2 :is(#agents,#knowledge) .cs-row{grid-template-columns:1fr 1fr;gap:0 56px}
  .v2 :is(#agents,#knowledge) .cs-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:0 20px;align-items:baseline;padding:12px 0 13px}
  .v2 :is(#agents,#knowledge) .cs-card h4{grid-column:1;grid-row:1}
  .v2 :is(#agents,#knowledge) .cs-card p{display:block;grid-column:2;grid-row:1;margin:0}

  /* the column form (automation, infrastructure): open columns with a rule on top */
  .v2 :is(#automation,#infrastructure) .cs-row{gap:28px}
  .v2 :is(#automation,#infrastructure) .cs-card{display:block}

  /* automation and knowledge: the artwork on the left, the copy on the right */
  .v2 :is(#automation .bar-film,#automation .au-labels,#knowledge .bar-film,#knowledge .kn-labels){left:3.5%;right:auto;margin-top:auto;margin-bottom:0}
  .v2 :is(#automation,#knowledge) .cs-lane{left:auto;right:6%;width:var(--lane-w)}
  .v2 :is(#automation,#knowledge) .cs-h2{font-size:clamp(1.6rem,2.35vw,2.3rem);line-height:1.08}

  /* applications and multi-agent: artwork and a sentence */
  .v2 :is(#applications,#multi-agent,#integrations) .cs-lower{display:none}

  /* infrastructure: the artwork on the left */
  .v2 #infrastructure .cs-top{grid-template-columns:minmax(0,1fr) var(--lane-w);padding-left:1.5%;padding-right:6%}
  .v2 #infrastructure .bar-film,.v2 #infrastructure .in-labels{grid-column:1}
  .v2 #infrastructure .cs-lane{grid-column:2}

  /* why: no film exists, so the five reasons fill the right half as a list */
  .v2 .why .bar-film{display:none}
  .v2 .why-cards{left:auto;right:6%;top:clamp(96px,13vh,170px);bottom:auto;width:min(46%,620px);grid-template-columns:1fr;gap:0}
  .v2 .why-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 24px;align-items:baseline;padding:18px 0;
    border:0;border-top:1px solid var(--line-strong);border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .v2 .why-card::after,.v2 .why-card .bar-ibox{display:none}
  .v2 .why-card h3{grid-column:1;grid-row:1;margin:0;font-size:1.125rem;color:var(--text-primary)}
  .v2 .why-card .cap-cb{display:block;grid-column:2;grid-row:1;margin:0;font-size:1rem}

  /* the lower half runs wider, on the same gutter as the stages above */
  .v2 .sec .wrap{max-width:1240px}
  .v2 .sec .col{max-width:1040px}
}

/* the comparison switch */
.v-switch{position:fixed;right:16px;top:76px;z-index:100;display:flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(12,12,22,.9)}
.v-switch button{padding:7px 14px;border:0;border-radius:999px;background:none;color:var(--text-secondary);font:inherit;font-size:.8125rem;cursor:pointer}
.v-switch button[aria-pressed="true"]{background:var(--accent);color:#fff}
html:not(.v2) .v2-progress,html:not(.v2) .v2-rail{display:none !important}

/* ==== v3: the films as live three.js scenes (assets/three/v3.js), shown only with ?v=3. The flag
   script in index.html stops the mp4 downloads; here the video layers give way to the scene canvas,
   and the words that were fitted to the films give way to the scenes' own labels. The tile buttons
   stay in the page, invisible and focusable, so the pickers keep working from the keyboard while the
   pointer works through the scene. ==== */
.v3 :is(.bar-film .bar-poster,.bar-film .bar-video,.bar-film .bar-hold,.bar-film .bar-ring,.bp-poster,.bp-video,.bp-hold,
  .p-video,.p-hold,.s-poster,.s-video,.s-hold,.s-ring,.s-mark,.hero .stage > .poster,.hero .stage > video,.hero .ending,.hero .stage > svg.ring){display:none !important}
.v3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.v3 :is(.au-labels,.kn-labels,.ma-labels){display:none}
.v3 .in-labels .in-lb{display:none}
.v3 .cap-lbtn{opacity:0;pointer-events:none}
html.v3-pointing,html.v3-pointing body{cursor:pointer}
.v3-tip{position:fixed;left:0;top:0;z-index:300;pointer-events:none;padding:6px 11px;border-radius:8px;border:1px solid var(--line-strong);
  background:rgba(12,12,22,.94);color:var(--text-primary);font-size:.8125rem;line-height:1.3;white-space:nowrap;opacity:0;transition:opacity .15s}
.v3-tip.on{opacity:1}
/* the security labels: title above, its three lines stacked beneath (the same fix as v2) */
.v3 .s-card .card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.v3 .s-card .card-t{font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--text-primary)}

/* ==== v2 on phones (assets/v2-mobile.js; html.v2m = v2 on a static layout). The landing film, then one
   card per section, each opening the whole section as a sheet; the menu lists every section. ==== */
html:not(.v2m) .m-only{display:none !important}
.v2m main > section:not(.m-hero):not(.m-sheet){display:none}
.v2m .hero{display:none}
.v2m .nav-links > li:not(.m-nav):not(.nav-lang){display:none}
html.m-locked,html.m-locked body{overflow:hidden}

/* the landing: the film plays first and the words arrive over it. Phone films get no blend mode (Safari
   can fail to draw a video that has one); their black sits on black tiles instead. */
.m-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.m-hero-media{position:absolute;top:calc(var(--nav-h) + 2svh);left:50%;height:58svh;aspect-ratio:1284/716;transform:translateX(-60%)}
.m-hero-v{display:block;width:100%;height:100%;object-fit:cover}
.m-hero-fade{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,rgba(0,0,0,0),#000 62%);opacity:0;transition:opacity 1.1s var(--ease-out)}
.m-hero-copy{position:absolute;left:16px;right:16px;bottom:max(28px,5svh);opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.m-hero.m-in .m-hero-fade{opacity:1}
.m-hero.m-in .m-hero-copy{opacity:1;transform:none}
.m-hero-h{margin-top:12px;font-family:var(--display);font-size:clamp(2.3rem,10.5vw,3.1rem);line-height:1.02;letter-spacing:-.035em;font-weight:600;color:var(--text-primary)}
.m-accent{color:var(--accent-hover)}
.m-hero-sub{margin-top:14px;max-width:36ch;font-size:1rem;line-height:1.55;color:var(--text-secondary)}
.m-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.m-hero-actions .btn{flex:1 1 auto;justify-content:center}

/* the tiles: each section is its own black panel, edge to edge, and a band of lighter indigo between
   tiles marks where one ends and the next begins (the gaps are the list's background) */
.m-list{display:grid;gap:10px;padding:10px 0;background:#1F1D38}
.m-card{display:flex;flex-direction:column;align-items:center;min-height:min(660px,86svh);padding:56px 20px 0;text-align:center;
  background:#000;overflow:hidden;scroll-margin-top:var(--nav-h)}
.m-card:not(:has(.m-media)){min-height:min(440px,62svh);justify-content:center;padding:56px 24px;
  background:radial-gradient(120% 70% at 50% 115%,rgba(122,90,245,.26),transparent 62%),#07060F}
.m-kick{margin:0;font-size:12px}
.m-h{margin:12px auto 0;max-width:16ch;font-family:var(--display);font-size:clamp(1.95rem,8.6vw,2.6rem);line-height:1.05;letter-spacing:-.03em;font-weight:600;color:var(--text-primary)}
.m-sub{margin:14px auto 0;max-width:34ch;font-size:1.0625rem;line-height:1.5;color:var(--text-secondary)}
.m-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:22px;padding:0 22px;border-radius:999px;background:var(--accent);
  color:#fff;font-weight:500;font-size:1rem;text-decoration:none}
.m-more:focus-visible,.m-back:focus-visible,.m-media:focus-visible,.m-play:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.m-more span{font-size:1.25em;line-height:1}
/* the picture closes the tile: pushed to the bottom, full width */
.m-media{position:relative;width:calc(100% + 40px);margin:auto -20px 0;padding-top:32px;cursor:pointer}
.m-media video{display:block;width:100%;height:auto;aspect-ratio:1254/734;object-fit:cover;background:#000}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:32px 4px 4px}
.m-grid video{aspect-ratio:4/3}
.m-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:32px 20px 24px;cursor:default}
.m-art{display:block;aspect-ratio:240/132;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.m-art svg{display:block;width:100%;height:100%;overflow:visible}
/* a film the phone held back: a play button over it */
.m-play{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(20,18,40,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer}
.m-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor}
.m-hero .m-play{right:auto;left:50%;top:calc(var(--nav-h) + 2svh + 29svh);bottom:auto;transform:translate(-50%,-50%);width:64px;height:64px}
/* the chapter break is a tile of its own */
.m-chapter{padding:72px 24px;text-align:center;background:linear-gradient(180deg,#171531,#0A0914)}
.m-chapter .kicker{margin:0;font-size:12px}
.m-chapter-t{margin:16px auto 0;max-width:20ch;font-family:var(--display);font-size:1.7rem;line-height:1.15;letter-spacing:-.025em;font-weight:600;color:var(--text-primary)}

/* the sheet: the whole section, on its own, under the navigation */
.v2m main > section.m-sheet{display:block;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:45;height:auto;min-height:0;margin:0;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--canvas);animation:m-up .35s var(--ease-out)}
@keyframes m-up{from{opacity:0;transform:translateY(28px)}}
.m-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;
  background:rgba(12,12,22,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.m-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--text-primary);font-weight:500;text-decoration:none}
.m-back span{font-size:1.4em;line-height:1}
.m-bar-t{margin-left:auto;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-secondary)}
/* the stages pad their tops to clear the fixed navigation; a sheet starts under its own bar */
.v2m .m-sheet :is(.bar-stage,.pstage,.s-stage){padding-top:28px}
.v2m .m-sheet.sec{padding-top:0}
.v2m .m-sheet.sec > .m-bar{margin-bottom:36px}
@media (prefers-reduced-motion: reduce){
  .m-hero-copy,.m-hero-fade{transition:none}
  .v2m main > section.m-sheet{animation:none}
}
/* the use-case families on their card: drawn lit, as the tiles look when chosen */
.m-art :is(.ua-box,.ua-st,.ua-reply){stroke:var(--accent-hover);fill:rgba(122,90,245,.14)}
.m-art :is(.ua-p,.ua-led){fill:var(--ring)}
.m-art :is(.ua-flow,.ua-fill line,.ua-tick){stroke-dashoffset:0}
/* snapping: each tile is one screen under the navigation, and a swipe always settles on the next one
   (stop:always keeps a fast flick from skipping tiles). Off while a sheet is open. */
html.v2m{scroll-snap-type:y mandatory}
html.v2m.m-locked{scroll-snap-type:none}
.m-hero{scroll-snap-align:start;scroll-snap-stop:always}
.m-card,.m-chapter{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--nav-h);min-height:calc(100svh - var(--nav-h))}
.m-card:not(:has(.m-media)){min-height:calc(100svh - var(--nav-h))}
.m-chapter{display:flex;flex-direction:column;justify-content:center}
.v2m footer{scroll-snap-align:end}
/* short phones: the tile's words tighten so the film still fits on the screen */
@media (max-height:700px){
  .m-card{padding-top:36px}
  .m-h{font-size:clamp(1.7rem,7.6vw,2.2rem)}
  .m-sub{margin-top:10px;font-size:1rem}
  .m-more{margin-top:16px}
  .m-media{padding-top:20px}
}
@media (max-height:660px){
  .m-card{padding-top:28px}
  .m-media{padding-top:12px}
}

/* ---- use cases on phones (v2): one row of family pills, filters behind a button, compact rows ---- */
.v2m .uc{gap:44px;padding-top:32px;padding-bottom:56px}
.v2m .uc-board,.v2m #uc-discover .uc-sub,.v2m .ub-art,.v2m .uc-fi-p{display:none}
.v2m .uc-fams{display:flex;gap:8px;margin:20px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.v2m .uc-fams::-webkit-scrollbar{display:none}
.v2m .uc-fams li{flex:none;scroll-snap-align:start}
.v2m .uc-fam{flex-direction:row;width:auto;height:auto;padding:10px 16px;border-radius:999px;box-shadow:none}
.v2m .uc-fam:hover,.v2m .uc-fam:focus-visible{transform:none}
.v2m .uc-fam :is(.uc-art,.uc-fn,.uc-fd,.uc-fc){display:none}
.v2m .uc-fbody{display:block;padding:0}
.v2m .uc-ft{font-family:var(--sans,inherit);font-size:.9375rem;font-weight:500;letter-spacing:0;white-space:nowrap}
.v2m .uc-fam[aria-pressed="true"]{background:var(--accent-muted)}
.m-ftog{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:none;color:var(--text-primary);font:inherit;font-size:.9375rem;cursor:pointer}
.m-ftog svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.m-ftog[aria-expanded="true"]{border-color:var(--accent)}
.v2m .uc-filters{display:none}
.v2m .uc-filters.m-show{display:grid;margin-top:12px}
.v2m .uc-filters .uc-status{display:none}
.m-count{margin:12px 0 0;font-size:.875rem;color:var(--text-secondary)}
.v2m .uc-famintros{margin-top:14px}
.v2m .uc-fi{padding:14px 16px;gap:4px}
/* each use case is a row: its name, two lines and a chevron; the row is the button */
.v2m .uc-grid{gap:0;margin-top:16px}
.v2m .uc-ci{display:block;position:relative;padding:16px 34px 16px 0;border:0;border-top:1px solid var(--line);border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.v2m .uc-ci::after{display:none}
.v2m .uc-ci :is(.uc-cn,.uc-tags,.uc-more){display:none}
.v2m .uc-ci h4{margin:0;font-size:1.0625rem}
.v2m .uc-ci .uc-cl{display:-webkit-box;margin-top:6px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem;line-height:1.45}
.v2m .uc-ci::before{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-top:1.6px solid var(--text-secondary);border-right:1.6px solid var(--text-secondary);transform:translateY(-50%) rotate(45deg)}
.v2m .uc-grid li:last-child .uc-ci,.v2m .uc-grid li:not([hidden]):last-of-type .uc-ci{border-bottom:1px solid var(--line)}
/* the explainers fold into rows */
.v2m .m-fold:not(.m-open) > :not(.m-tog){display:none}
.m-tog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;width:100%;padding:18px 0;border:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.m-tog-k{grid-column:1;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--text-secondary)}
.m-tog-t{grid-column:1;font-family:var(--display);font-size:1.25rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.m-tog-i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);font-size:1.25rem;line-height:1;transition:transform .25s var(--ease-out)}
.m-fold.m-open .m-tog{margin-bottom:24px}
.m-fold.m-open .m-tog-i{transform:rotate(45deg)}
.m-tog:focus-visible,.m-ftog:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.v2m .m-sheet .uc-pin .cs-stage{padding-bottom:0}

/* ---- the language switcher (EN / PT / BR), the last item of the navigation ---- */
.nav-links .nav-lang{display:flex;align-items:center;gap:2px;margin-left:4px;padding-left:12px;border-left:1px solid var(--line)}
.nav-links .nav-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:0 6px;border-radius:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-secondary);text-decoration:none}
.nav-links .nav-lang a:hover{color:var(--text-primary)}
.nav-links .nav-lang a[aria-current="true"]{color:var(--text-primary);background:rgba(255,255,255,.07)}
.nav-links .nav-lang a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.v2m .nav-links .nav-lang{order:99;margin:8px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}

/* ---- Portuguese runs about a fifth longer than English: where a copy column would reach the content
   below it, it gets a little more width (the films sit right of it with black margins to spare) ---- */
html:lang(pt) #agents .cs-lane{width:min(40%,600px)}
html:lang(pt) #agents .cs-sub{max-width:52ch}
/* phones: the small-caps taglines wrap rather than run off the screen (the Portuguese ones are longer) */
@media (max-width:720px){.bar-rl,.bar-rr{white-space:normal;line-height:1.6}}
/* the security labels, in every version: the title, then its three lines stacked beneath it */
.s-card .card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.s-card .card-t{font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--text-primary)}
/* the use-cases stage has no film, so its tagline strip landed at the top of the screen behind the
   header; the same words close the section (.uc-msg), so the strip goes */
#usecases .cs-rowrule{display:none}

/* ==== v2: the use-cases section, simplified. Four parts: an intro, one catalogue (family tabs, an
   industry filter, plain cards), one demo (the levels), one closing. The goal chips, the department
   filter, the opening table, the before/after module, the industries module and the second call to
   action are left out; the detail view is regrouped into five parts. ==== */
/* 1. the intro: a plain header, no longer a pinned stage */
.v2 #usecases{height:auto}
.v2 #usecases .bar-stage{position:relative;height:auto;min-height:0;padding:clamp(96px,12vh,140px) 0 0;background:none}
.v2 #usecases .uc-board{display:none}
.v2 #usecases .cs-lane{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:1240px;margin:0 auto;padding:0 24px}
.v2 #usecases .cs-h2{max-width:18ch}
.v2 #usecases .cs-sub{max-width:62ch}
.v2 #usecases .bar-kicker{--kq:1}
.v2 #usecases .bar-sub{--ks:1}
.v2 #usecases .bar-h2 .w{--kc:1}
.v2 .uc-sec .uc{padding-top:clamp(36px,5vh,56px)}
/* 2. the catalogue: one row of family tabs, the industry filter beside the count, plain cards */
.v2 #uc-discover .uc-head{display:none}
.v2 .uc-fams{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.v2 .uc-fams li{flex:none}
.v2 .uc-fam{flex-direction:row;width:auto;height:auto;padding:10px 18px;border-radius:999px;box-shadow:none;transform:none}
.v2 .uc-fam:hover,.v2 .uc-fam:focus-visible{transform:none}
.v2 .uc-fam :is(.uc-art,.uc-fn,.uc-fd,.uc-fc){display:none}
.v2 .uc-fbody{display:block;padding:0}
.v2 .uc-ft{font-family:inherit;font-size:.9375rem;font-weight:500;letter-spacing:0;line-height:1.2;white-space:nowrap}
.v2 .uc-fam[aria-pressed="true"]{background:var(--accent-muted);border-color:var(--accent)}
.v2 .uc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px;padding:0;border:0;background:none}
.v2 .uc-filters :is(.uc-f-ch,.uc-f:has(#uc-dp)){display:none}
.v2 .uc-filters .uc-f{display:flex;align-items:center;gap:10px}
.v2 .uc-filters .uc-fl{margin:0}
.v2 .uc-filters .uc-sel{height:40px;min-width:200px}
.v2 .uc-filters .uc-status{display:flex;align-items:center;gap:16px;min-height:0;margin-left:auto;padding:0;border:0}
.v2 .uc-filters :is(.uc-count,.uc-clear){margin:0;padding:0}
.v2 .uc-ci :is(.uc-cn,.uc-tags){display:none}
.v2 .uc-ci h4{margin-top:0}
/* 3. one demo: the levels stay; before/after and the industries go */
.v2 :is(.uc-shifts,.uc-inds){display:none}
/* 4. one closing: "Don't see your challenge?" leads into the call to action */
.v2 .uc-build{display:none}
.v2 .uc-final .uc-msg{display:none}
.uc-lead{margin:0 0 14px;font-size:1.0625rem;color:var(--text-secondary)}
/* the detail view in five parts: the challenge beside the example; what we would build, as steps;
   human control beside the value; the systems, with the capabilities in small print; the before/after */
.v2 .uc-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px clamp(28px,4vw,56px)}
.v2 .uc-detail :is(.ud-body,.ud-col){display:contents}
.v2 .uc-detail > .ud-head{grid-column:1/-1;padding-bottom:28px;border-bottom:1px solid var(--line)}
.v2 .uc-detail .ud-col:first-child > .ud-sec:nth-child(1){order:1}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(1){order:2}
.v2 .uc-detail .ud-col:first-child > .ud-sec:nth-child(2){order:3;grid-column:1/-1}
.v2 .uc-detail .ud-col:first-child > .ud-sec:nth-child(2) .ud-list{display:none}
.v2 .uc-detail > section.ud-wide:nth-of-type(1){order:4;grid-column:1/-1;margin-top:-14px;padding-top:0;border-top:0}
.v2 .uc-detail > section.ud-wide:nth-of-type(1) > .ud-h{display:none}
.v2 .uc-detail > section.ud-wide:nth-of-type(1) .ud-steps{margin-top:0}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(2){order:5}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(3){order:6}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(4){order:7}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(5){order:8}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(5) .ud-chips{gap:6px}
.v2 .uc-detail .ud-col:last-child > .ud-sec:nth-child(5) .ud-chips a{padding:4px 10px;font-size:.8125rem}
.v2 .uc-detail > section.ud-wide:nth-of-type(2){order:9;grid-column:1/-1}
.v2 .uc-detail .ud-sec{margin:0}
@media (max-width:720px){
  .v2 .uc-detail{grid-template-columns:minmax(0,1fr)}
  .v2 .uc-filters .uc-status{margin-left:0}
}
/* phones: the industry filter sits in view (it is the only one left), so no filter button */
.v2m .m-ftog{display:none}
.v2m .uc-filters{display:flex}
.v2m .uc-filters .uc-status{display:none}
.v2m .uc-fams{flex-wrap:nowrap}
.v2 .uc-detail .ud-col:first-child > .ud-sec:nth-child(2) > p{display:none}

/* ==== v2: no decorative numbering. The order is in the layout itself; the numbers only repeated it. ==== */
.v2 :is(.cap-card .bar-ix,.cs-card .bar-ix,.ma-n,.pnum,.qn,.qbtn .idx,.cd-k){display:none}
.v2 .ud-steps li::before{content:none}
.v2 .ud-steps li{padding-top:14px}
.v2 .cap-card .bar-ibox,.v2 .cs-card.num .bar-ibox{grid-column:1;justify-self:start}
.v2 .after .q{padding-left:0}
.v2 .qbtn{grid-template-columns:minmax(0,1fr) 28px}
@media (max-width:720px){.v2 .qbtn{grid-template-columns:minmax(0,1fr) 24px}}
.v2 .ans p{padding-left:0}

/* ==== v2: the application layers. Each title is larger and violet, and a straight leader line runs from
   it across to its layer in the artwork, ending in a small glowing node. The line's length (--lead) is
   measured from the page by site.js, so it meets the layers at any window size; desktop only. ==== */
.v2 .ap-lb h3{font-size:clamp(1.125rem,3.2cqh,1.45rem);line-height:1.15;color:var(--accent-hover)}
@media (min-width:721px) and (orientation:landscape) and (min-height:561px), (min-width:721px) and (orientation:landscape) and (pointer:fine){
  .v2 .ap-lb h3{position:relative}
  .v2 .ap-lb h3::before{content:"";position:absolute;right:calc(100% + 10px);top:.62em;width:var(--lead,0px);height:1.5px;border-radius:2px;
    background:linear-gradient(90deg,rgba(143,116,255,.25),var(--accent-hover));box-shadow:0 0 8px rgba(122,90,245,.55);pointer-events:none}
  .v2 .ap-lb h3::after{content:"";position:absolute;right:calc(100% + 10px + var(--lead,0px) - 4px);top:calc(.62em - 3.25px);width:8px;height:8px;border-radius:50%;
    background:var(--ring);box-shadow:0 0 0 3px rgba(122,90,245,.35),0 0 12px var(--accent);pointer-events:none}
  .v2 .ap-lb:not([style*="--lead"]) h3::before,.v2 .ap-lb:not([style*="--lead"]) h3::after{display:none}
}
/* shorter artwork: the context layer's second paragraph steps aside, so the larger titles keep clear */
@container (max-height:700px){
  .v2 .ap-lb p:not(.ap-sub) ~ p{display:none}
}

/* ==== text fitting, all languages ==== */
/* security labels: a line wraps inside its card rather than running past it */
.s-line{white-space:normal;overflow-wrap:anywhere}
.v2 .s-line{font-size:11px;line-height:1.45}
@media (max-width:1400px){.v2 .s-line{font-size:10.5px}}
/* the copy column's buttons wrap their words inside the column, never past it */
.cs-lane .cap-actions .btn,.bar-lane .cap-actions .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
/* the multi-agent panel names: one line, as on the film */
.ma-t{white-space:nowrap}
.cs-lane .cap-actions .btn,.bar-lane .cap-actions .btn{height:auto;min-height:46px;padding-top:12px;padding-bottom:12px}

/* ==== v2: AI agents and security, smaller and centred. Desktop layouts only. ==== */
@media (min-width:721px) and (orientation:landscape) and (min-height:561px), (min-width:721px) and (orientation:landscape) and (pointer:fine){
  /* agents: the figure sits in the middle of the space right of the copy, clear of the header */
  .v2 #agents .bar-film{left:69%;right:auto;top:50%;height:min(26vw,82%);transform:translate(-50%,-50%)}
  /* security: the scene drawn at a set size (--sfw), its shield centred on the stage height, and the
     panel ending short of the right edge so the cards keep a margin. The shield sits at 70.2% of the
     frame's width and 39.5% of its height; the frame is right-anchored in the panel. */
  .v2 .security{--sfw:min(80vw,128vh);--scw:208px}
  .v2 :is(.s-film,.s-cards,.s-chips){left:40%;right:8%;top:calc(50vh + 20px - var(--sfw)*.585*.395);bottom:auto;height:calc(var(--sfw)*.585)}
  .v2 :is(.s-film,.s-cards,.s-chips) > *{--fw:var(--sfw);--fh:calc(var(--sfw)*.58533)}
  .v2 .s-slot{top:calc(var(--cy)*100%)}
}
@media (min-width:721px) and (orientation:landscape) and (min-height:561px), (min-width:721px) and (orientation:landscape) and (pointer:fine){
  /* the cards hang from their shield-facing edge, outside the shield, wherever that falls */
  .v2 .s-slot.l{left:calc(100% - (1 - var(--fe))*var(--fw))}
  .v2 .s-slot.r{left:calc(100% - (1 - var(--fe))*var(--fw))}
  /* the film fades out on all four sides, so no edge of its frame shows */
  .v2 .s-film{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
}
@media (min-width:721px) and (max-width:1320px) and (orientation:landscape){.v2 .security{--sfw:min(76vw,128vh);--scw:190px}}
.v2 .s-chips{display:none}

/* ==== v2: the infrastructure and integrations diagrams, fewer and larger words. Each kept word keeps
   its place on the artwork; lists are cut to their most important items (marked .k, re-spaced by --y2). ==== */
.v2 .in-lb{top:calc(var(--y2,var(--y))*100%)}
/* infrastructure: the pillars lose their three-word lists and their titles grow; the tiers' words grow */
.v2 #infrastructure .in-ps{display:none}
.v2 #infrastructure .in-pt{font-size:calc(var(--f)*1.22cqw)}
.v2 #infrastructure .in-t{font-size:calc(var(--f)*1.05cqw)}
.v2 #infrastructure .in-s{font-size:calc(var(--f)*1.15cqw);letter-spacing:.08em}
/* integrations: row names, headers and titles grow; the lists keep their marked items, larger */
.v2 #integrations .ig-r{font-size:.82cqw}
.v2 #integrations .ig-h{font-size:.62cqw;letter-spacing:.1em}
.v2 #integrations .ig-t{font-size:.95cqw}
.v2 #integrations .ig-c{font-size:.66cqw}
.v2 #integrations .ig-b{display:none}
.v2 #integrations .ig-b.k{display:block;font-size:.52cqw;letter-spacing:.06em;color:#cfc9ec}
.v2 #integrations .ig-b.k[data-t="5"],.v2 #integrations .ig-b.k[data-t="6"]{font-size:.56cqw}
@container (max-width:900px){.v2 #integrations .ig-b.k{display:none}}

/* ==== the before and after, told apart: the before is quiet and dashed, the after is lit; a rule with a
   centred marker runs between them ==== */
.ud-flows{gap:0}
.ud-flow{padding:16px 18px;border-radius:12px}
.ud-flow > span{display:inline-flex;align-self:start;justify-content:center;padding:5px 0;border-radius:999px;font-size:11px}
.ud-before{border:1px dashed var(--line-strong);background:rgba(255,255,255,.015)}
.ud-before .us-node{border-style:dashed;background:transparent;color:var(--text-secondary)}
.ud-before > span{color:var(--text-secondary)}
.ud-after{border:1px solid var(--accent-muted);background:linear-gradient(90deg,rgba(122,90,245,.12),rgba(122,90,245,.03))}
.ud-after > span{color:var(--accent-hover)}
.ud-after .us-node:not(:last-child)::after{background:var(--accent)}
.ud-after .us-node:not(:last-child)::before{border-color:var(--accent)}
.ud-flows .ud-after{position:relative;margin-top:34px}
.ud-flows .ud-after::before{content:"";position:absolute;left:0;right:0;top:-18px;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent)}
.ud-flows .ud-after::after{content:"\2193";position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--accent-muted);background:var(--panel);color:var(--accent-hover);font-size:13px;line-height:1}
.ud-flows .us-node{padding:7px 11px;font-size:.8125rem}
.ud-flows .us-line{gap:10px 0}
.ud-flow{grid-template-columns:62px minmax(0,1fr)}
/* the before and after as two columns read top to bottom, the divider and its arrow between them */
.ud-flows{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;align-items:stretch}
.ud-flow{grid-template-columns:1fr;align-content:start;gap:14px;padding:18px 20px 20px}
.ud-flow > span{justify-content:flex-start}
.ud-flows .us-line{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px}
.ud-flows .us-node{margin:0;justify-content:flex-start}
.ud-flows .us-node:not(:last-child)::before{display:none}
.ud-flows .us-node:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-14px;width:1px;height:14px}
.ud-flows .ud-after{margin-top:0}
.ud-flows .ud-after::before{left:-33px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent)}
.ud-flows .ud-after::after{content:"\2192";left:-45px;top:50%;transform:translateY(-50%)}
@media (max-width:720px){
  .ud-flows{grid-template-columns:minmax(0,1fr);gap:0}
  .ud-flows .ud-after{margin-top:34px}
  .ud-flows .ud-after::before{left:0;right:0;top:-18px;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent)}
  .ud-flows .ud-after::after{content:"\2193";left:50%;top:-30px;transform:translateX(-50%)}
}
/* v2: before a type is chosen, only the types and the invitation show */
.uc-pick{display:none}
.v2 #uc-discover.uc-nofam .uc-pick{display:block;margin:18px 0 0;font-size:1rem;color:var(--text-secondary)}
.v2 #uc-discover.uc-nofam :is(.uc-filters,.uc-grid,.uc-famintros,.m-count){display:none}
.ud-t{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-hover)}

/* ==== the levels demo: a sector picker, and the conversation laid out as a chat: the customer on the
   right, Agenius (and what it retrieved and did) on the left ==== */
.ul-scns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.ul-scn-b{padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:none;color:var(--text-secondary);font:inherit;font-size:.875rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.ul-scn-b:hover{color:var(--text-primary);border-color:var(--accent)}
.ul-scn-b[aria-pressed="true"]{color:var(--text-primary);border-color:var(--accent);background:var(--accent-muted)}
.ul-scn-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ul-scn{display:grid;gap:12px}
.ul-scn[hidden]{display:none}
.ul-cust{justify-self:end;border-bottom-right-radius:4px}
.ul-sys{justify-self:start;border-bottom-left-radius:4px}
.ul-ctx,.ul-act{justify-self:start;max-width:88%}
.ul-esc{justify-self:start}
@media (max-width:720px){.ul-scns{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 16px;padding:0 16px 4px;scrollbar-width:none}.ul-scns::-webkit-scrollbar{display:none}.ul-scn-b{flex:none}}
.ul-scns{margin-top:32px}
/* the conversation arrives in order: request, what was found, the question, the answer, the actions, the result */
.ul-scn > *:nth-child(1){animation-delay:0s}
.ul-scn > *:nth-child(2){animation-delay:.3s}
.ul-scn > *:nth-child(3){animation-delay:.6s}
.ul-scn > *:nth-child(4){animation-delay:.9s}
.ul-scn > *:nth-child(5){animation-delay:1.2s}
.ul-scn > *:nth-child(6){animation-delay:1.5s}
.ul-scn > *:nth-child(7){animation-delay:1.8s}
.ul-ask{border-style:solid;border-color:var(--accent)}
.ul-ask .ul-src{color:var(--accent-hover)}