/* ============================================================================
Sprinklenet Design V2: shared site styles (second cut)
----------------------------------------------------------------------------
One file for every page. Page files load after it and extend it.
The world One continuous dark world. The film's shadow floor, Navy Black
#0a0e1a, is the ground of every page; Navy #0B2740 is the second
dark; light is a highlight, never a panel. White is the footer.
The line .control-line is the only rule on the site. It means Knowledge
Spaces. Accent #2563EB, 1.5 px core with a glow on dark.
The trace .trace is the same light at 1 px, drawn from a figure to the
record it came from.
Type Public Sans, two cuts at display size: Medium 500 for the hero,
the wall names, and the heads; Light 300 for statements and the
numerals. .t-hero 156, .t-wall up to 300, .t-h1 112, .t-head 80,
.t-statement 72, .t-display 52, .t-line 32, .t-deck 24,
.t-body 20, .t-body-s 18, .t-label 15, .t-caption 14,
.t-numeral 400. Phone sizes in the 767 px block.
Layout .measure is the 1,300 px measure. .beat is a section with the
standard vertical rhythm. Screens stand on the line as .screen.
Buttons .btn with .btn-white (on dark) or .btn-navy (on white).
Motion Reveal by light. Things come to color, light up, or draw.
prefers-reduced-motion renders every figure in its finished
state; the JS honors the same query.
============================================================================ */
@font-face{font-family:'Public Sans';src:url('../fonts/PublicSans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../fonts/PublicSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../fonts/PublicSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../fonts/PublicSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Public Sans';src:url('../fonts/PublicSans-Black.woff2') format('woff2');font-weight:900;font-display:block}
/* Metric-matched fallback (round 5, page speed): while a Public Sans face loads, text is laid out in a system sans scaled
to Public Sans's advance widths (size-adjust, from letter-frequency averages, then tuned on the site's own headings and hero copy with the webfonts held back 1.5 s) with its vertical metrics
(ascent .95, descent .225, no line gap), so the swap to the webfont, and the end of the Black face's block period,
moves no line and no block. Arial on Apple and Windows, Roboto on Android; measured ratios agree within half a percent. */
@font-face{font-family:'Public Sans Fallback';src:local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular');font-weight:300;size-adjust:103.1%;ascent-override:92.14%;descent-override:21.82%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular');font-weight:400;size-adjust:104.8%;ascent-override:90.65%;descent-override:21.47%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial'),local('ArialMT'),local('Roboto'),local('Roboto-Regular');font-weight:500;size-adjust:104.6%;ascent-override:90.82%;descent-override:21.51%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');font-weight:600;size-adjust:98.27%;ascent-override:96.67%;descent-override:22.9%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold');font-weight:700 900;size-adjust:101%;ascent-override:94.06%;descent-override:22.28%;line-gap-override:0%}
:root{
--navy-black:#0a0e1a;
--navy:#0B2740;
--white:#ffffff;
--ink:#0F172A;
--slate:#64748B;
--accent:#2563EB;
--accent-glow:rgba(37,99,235,.35);
--dim:rgba(255,255,255,.72);
--dim-2:rgba(255,255,255,.5);
--measure:1300px;
--gutter:70px;
--beat:160px;
--ease:cubic-bezier(.2,.7,.2,1);
/* The metric-matched sans holds the layout while the webfont loads (round 5); Georgia stays last, the loud sign of a
failed webfont on a system with neither Arial nor Roboto. */
--font:'Public Sans','Public Sans Fallback',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--navy-black);color:var(--white);font-family:var(--font);font-weight:400;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
/* ---- Grounds --------------------------------------------------------------- */
.g-black{background:var(--navy-black);color:var(--white)}
.g-navy{background:var(--navy);color:var(--white)}
.g-lit{background:radial-gradient(90% 60% at 50% 0%,rgba(37,99,235,.16) 0%,rgba(37,99,235,0) 60%),var(--navy-black);color:var(--white)}
.g-white{background:var(--white);color:var(--ink)}
.dim{color:var(--dim)}
.g-white .dim,.slate{color:var(--slate)}
/* ---- Layout ---------------------------------------------------------------- */
.measure{width:min(var(--measure),calc(100% - 2*var(--gutter)));margin-inline:auto}
.beat{padding:var(--beat) 0;position:relative}
.beat>.measure+.measure{margin-top:64px}
.head-block{max-width:1180px}
.head-block .t-deck{margin-top:28px;max-width:900px}
.link-row{margin-top:72px}
/* ---- Type scale at 1440 ----------------------------------------------------- */
/* Two voices: Black 900, tight, for the hero, the wall words, the heads, and the numerals;
Light 300 for statements. Body is Regular at 20 to 24 on white, never gray-on-navy at 18. */
.t-hero{font-size:clamp(96px,10.8vw,156px);font-weight:900;line-height:.96;letter-spacing:-.045em}
.t-wall{font-size:clamp(120px,19vw,272px);font-weight:900;line-height:.88;letter-spacing:-.05em}
.t-h1{font-size:clamp(72px,7.8vw,112px);font-weight:900;line-height:.96;letter-spacing:-.045em}
.t-name{font-size:80px;font-weight:900;line-height:1;letter-spacing:-.04em}
.t-head{font-size:clamp(56px,6vw,84px);font-weight:900;line-height:.98;letter-spacing:-.04em}
.t-statement{font-size:clamp(34px,3.6vw,52px);font-weight:300;line-height:1.14;letter-spacing:-.02em}
.t-display{font-size:44px;font-weight:500;line-height:1.1;letter-spacing:-.02em}
.t-line{font-size:32px;font-weight:400;line-height:1.3;letter-spacing:-.005em}
.t-deck{font-size:24px;font-weight:400;line-height:1.45}
.t-body{font-size:20px;font-weight:400;line-height:1.55}
.t-body-s{font-size:18px;font-weight:400;line-height:1.55}
.t-label{font-size:15px;font-weight:500;line-height:1.4;letter-spacing:.02em}
.t-caption{font-size:14px;font-weight:400;line-height:1.4;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.t-numeral{font-size:400px;font-weight:300;line-height:.86;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tabular{font-variant-numeric:tabular-nums}
/* ---- The control line ------------------------------------------------------ */
.control-line{height:1.5px;background:var(--accent);box-shadow:0 0 10px var(--accent-glow),0 0 40px rgba(37,99,235,.18);width:100%}
.g-white .control-line{height:2px;box-shadow:none}
.control-line.bleed{width:100vw;margin-left:calc(50% - 50vw)}
/* ---- Buttons and links ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:4px;font-size:16px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:filter .3s var(--ease);outline:none}
.btn-white{background:var(--white);color:var(--ink)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-white:hover{filter:brightness(.92)}
.btn-navy:hover{filter:brightness(1.18)}
.btn:focus-visible{box-shadow:0 4px 0 0 var(--accent)}
.text-link{position:relative;display:inline-block;font-size:18px;font-weight:500;text-decoration:none;padding-bottom:6px;outline:none}
.text-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transition:width .45s var(--ease)}
.g-white .text-link::after{height:2px;box-shadow:none}
.text-link:hover::after,.text-link:focus-visible::after{width:100%}
.actions{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
/* ---- Screens on the line ---------------------------------------------------- */
.screen{position:relative;box-shadow:0 30px 60px -16px rgba(0,0,0,.7),0 0 120px rgba(37,99,235,.14)}
.screen::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);pointer-events:none}
.g-white .screen{box-shadow:0 24px 48px -16px rgba(15,23,42,.35),0 0 80px rgba(37,99,235,.10)}
.screen img{width:100%;height:auto}
.screen picture{display:block}
/* ---- Navigation ------------------------------------------------------------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:72px;display:flex;align-items:center;gap:32px;padding:0 40px;background:rgba(10,14,26,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .6s var(--ease)}
.nav.is-settled{background:rgba(10,14,26,.92)}
.nav .brand{margin-right:auto;display:block;line-height:0}
.nav .wordmark{height:27px;width:auto;display:block}
.nav a{color:#fff;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;position:relative;outline:none}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after,.nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
.nav .btn{height:44px;padding:0 20px;font-size:15px}
.nav .btn-white{color:var(--ink)}
.nav .contact,.nav .menu{display:none}
.nav .menu{width:44px;height:44px;display:none;align-items:center;justify-content:center;margin-left:-8px;position:relative}
.nav .menu span{display:block;width:22px;height:1.5px;background:#fff;box-shadow:0 7px 0 #fff,0 -7px 0 #fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav .menu::after{content:"";position:absolute;width:22px;height:1.5px;background:#fff;transform:rotate(-45deg) scaleX(0);transition:transform .3s var(--ease)}
.nav.is-open .menu span{transform:rotate(45deg);box-shadow:none}
.nav.is-open .menu::after{transform:rotate(-45deg) scaleX(1)}
.nav-panel{position:fixed;z-index:49;inset:0;background:rgba(10,14,26,.97);padding:120px var(--gutter) 48px;display:none;flex-direction:column;gap:6px;overflow:auto}
.nav.is-open+.nav-panel{display:flex}
.nav-panel a{font-size:36px;font-weight:400;line-height:1.3;color:#fff;text-decoration:none;padding:10px 0;width:fit-content;position:relative}
.nav-panel a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-panel a:hover::after,.nav-panel a:focus-visible::after,.nav-panel a[aria-current="page"]::after{transform:scaleX(1)}
/* The menu's first item is the bar's button, as a button: filled accent, full width, 52 px, so it reads as the action
and the underline stays the current-page mark alone. From 768 up the bar carries the button and the panel hides
this copy (v2.css). While the menu is open the bar's Contact link gives way to the menu's own Contact item. */
.nav-panel .panel-cta{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-bottom:28px;padding:0 22px;border-radius:3px;background:var(--accent);color:#fff;font-size:17px;font-weight:600;line-height:1;letter-spacing:.005em}
.nav-panel .panel-cta::after{display:none}
.nav.is-open .contact{visibility:hidden}
/* ---- Beat 1: the film -------------------------------------------------------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--navy-black)}
.hero .poster,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The film stops a pixel above the hero's foot, under the vignette's darkest band, so the poster (frame 0 of the film,
painted first) stays the page's largest contentful paint rather than the film's first frame, which Chrome measured a
fraction of a pixel taller (round 5, page speed). */
.page-home .hero video{height:calc(100% - 1px)}
.hero .vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:
linear-gradient(90deg,rgba(10,14,26,.72) 0%,rgba(10,14,26,.46) 34%,rgba(10,14,26,.08) 62%,rgba(10,14,26,0) 100%),
linear-gradient(to top,rgba(10,14,26,.78) 0%,rgba(10,14,26,.22) 36%,rgba(10,14,26,0) 60%),
radial-gradient(120% 95% at 50% 42%,rgba(10,14,26,0) 55%,rgba(10,14,26,.5) 100%)}
.hero .grain{position:absolute;z-index:2;inset:-64px;background:url('../img/grain.webp');mix-blend-mode:overlay;opacity:.10;pointer-events:none}
.hero-copy{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:72px;display:flex;flex-direction:column;align-items:flex-start}
.hero h1{margin:0;color:#fff}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 b{display:block;font-weight:900;transform:translateY(112%);will-change:transform}
.hero-claim{margin-top:30px;max-width:680px;font-size:24px;line-height:1.42;color:rgba(255,255,255,.9);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero-cta{margin-top:32px;display:flex;align-items:center;gap:36px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease) .1s,transform .6s var(--ease) .1s}
.hero-copy.is-on .hero-claim,.hero-copy.is-on .hero-cta{opacity:1;transform:none}
.hero-copy.is-off .hero-claim,.hero-copy.is-off .hero-cta{opacity:0;transform:none;transition-duration:.35s;transition-delay:0s}
.hero-more{font-size:16px;font-weight:500;color:#fff;text-decoration:none;position:relative;padding-bottom:5px}
.hero-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform-origin:left;transition:transform .4s var(--ease)}
.hero-more:hover::after{transform:scaleX(1.0)}
.hero .lockup{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);opacity:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.hero .lockup .wm{width:420px;height:auto}
.hero .lockup .ks{width:380px;height:auto;margin-top:30px}
.hero .lockup .line{width:0;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);margin-top:18px}
/* ---- Beat 2: the stack ------------------------------------------------------- */
.stack{padding-bottom:120px;overflow:hidden}
.stack-figure{margin-top:96px;position:relative}
.stratum{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.stratum-label{font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--dim-2);margin-bottom:28px}
.markwall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 64px}
.markwall li{display:flex;align-items:center;gap:16px;opacity:.18;transition:opacity .6s var(--ease)}
.markwall li.is-lit{opacity:1}
.markwall li img{height:var(--h,44px);width:auto}
.markwall li span{font-size:26px;font-weight:500;color:#fff;white-space:nowrap;letter-spacing:-.01em}
.markwall.models{gap:48px 72px}
.markwall.models li.lockup img+img{margin-left:6px}
.stratum-connectors{padding-bottom:72px}
.stratum-apps{padding-top:24px}
.shelf{position:relative;display:flex;align-items:flex-end;justify-content:center;perspective:2400px;perspective-origin:50% 40%;padding-top:24px}
.shelf-screen{position:relative;width:30%;margin:0 -5.4%;flex:none;transform-origin:50% 100%;transform:translateY(48px);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease);box-shadow:0 30px 60px -16px rgba(0,0,0,.8),0 0 100px rgba(37,99,235,.14)}
@media (min-width:768px){.shelf-screen{-webkit-box-reflect:below 2px linear-gradient(transparent 78%,rgba(255,255,255,.12))}}
.shelf-screen:nth-child(1){z-index:1;width:25%}.shelf-screen:nth-child(2){z-index:2;width:31%}.shelf-screen:nth-child(3){z-index:4;width:40%}.shelf-screen:nth-child(4){z-index:3;width:38%}.shelf-screen:nth-child(5){z-index:2;width:31%}.shelf-screen:nth-child(6){z-index:1;width:25%}
.shelf-screen img{width:100%;height:auto;display:block}
.shelf-screen figcaption{position:absolute;left:0;right:0;bottom:-34px;font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--dim-2);text-align:center;white-space:nowrap}
.shelf-screen.is-lit{transform:none;opacity:1}
.shelf-screen.is-lit:nth-child(1){transform:translateY(30px) rotateY(26deg) scale(.92)}
.shelf-screen.is-lit:nth-child(2){transform:translateY(14px) rotateY(14deg) scale(.96)}
.shelf-screen.is-lit:nth-child(3){transform:translateX(-2%) rotateY(4deg)}
.shelf-screen.is-lit:nth-child(4){transform:translateX(2%) rotateY(-4deg)}
.shelf-screen.is-lit:nth-child(5){transform:translateY(14px) rotateY(-14deg) scale(.96)}
.shelf-screen.is-lit:nth-child(6){transform:translateY(30px) rotateY(-26deg) scale(.92)}
.stack-line{margin-top:44px;transform:scaleX(0);transform-origin:center;transition:transform 1s var(--ease)}
.stack-line.is-lit{transform:scaleX(1)}
.stack-mark{width:min(640px,70%);height:auto;margin:40px auto 0;opacity:0;transition:opacity .8s var(--ease) .3s}
.stack-mark.is-lit{opacity:1}
.stratum-models{padding-top:88px}
.stack .link-row{text-align:center;margin-top:96px}
/* ---- Beat 3: the showreel at wall scale ------------------------------------- */
.showreel{padding-bottom:120px;overflow:hidden}
.reel{position:relative;margin-top:80px;outline:none}
.reel-stage{position:relative;height:min(880px,100vh);min-height:720px;background:radial-gradient(60% 50% at 66% 100%,rgba(37,99,235,.24) 0%,rgba(37,99,235,0) 70%),var(--navy-black)}
.reel-slide{position:absolute;right:var(--gutter);bottom:0;width:min(980px,calc(100% - 2*var(--gutter)));opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translateY(24px);pointer-events:none;z-index:2;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 140px rgba(37,99,235,.16)}
@media (min-width:768px){.reel-slide{-webkit-box-reflect:below 2px linear-gradient(transparent 74%,rgba(255,255,255,.14))}}
.reel-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.reel-slide img{width:100%;height:auto;display:block}
.reel-slide figcaption{display:none}
.reel-name-block{position:absolute;left:var(--gutter);top:36px;z-index:1;width:calc(100% - 2*var(--gutter))}
.reel-mask{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.reel-name{color:#fff;white-space:nowrap}
.reel-name.is-rising{animation:rise .7s var(--ease) both}
@keyframes rise{from{transform:translateY(112%)}to{transform:translateY(0)}}
.reel-copy{position:absolute;left:var(--gutter);bottom:64px;z-index:3;width:360px}
.reel-endorse{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--dim);min-height:28px}
.reel-endorse .ks-icon{width:24px;height:auto}
.reel-endorse .ks-word{height:17px;width:auto}
.reel-endorse:empty{display:none}
.reel-line{margin-top:14px;font-size:21px;line-height:1.4;color:#fff}
.reel-line-rule{position:absolute;left:0;bottom:0;z-index:3;margin-left:0;width:100%}
.reel-index{display:flex;flex-wrap:wrap;gap:14px 40px;margin:36px auto 0;width:min(1400px,calc(100% - 2*var(--gutter)))}
.reel-index button{font-size:22px;font-weight:500;color:var(--dim-2);padding:8px 0;position:relative;transition:color .4s var(--ease);outline:none;letter-spacing:-.01em;white-space:nowrap}
.reel-index button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.reel-index button[aria-selected="true"]{color:var(--white)}
.reel-index button[aria-selected="true"]::after,.reel-index button:focus-visible::after{transform:scaleX(1)}
/* ---- Beat 4: the governed path ---------------------------------------------- */
.path-pin{padding-top:0}
.path-figure{position:relative;margin-top:88px;width:min(1400px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.path-track{position:relative;height:420px}
.path-track .control-line{position:absolute;left:50%;transform:translateX(-50%);bottom:64px}
.gates{position:absolute;left:0;right:0;bottom:64px;display:flex;justify-content:space-between;padding:0 40px}
.gate{position:relative;width:0;display:flex;flex-direction:column;align-items:center}
.gate-post{display:block;width:2px;height:230px;background:rgba(255,255,255,.12);transition:background .3s var(--ease),box-shadow .3s var(--ease),height .5s var(--ease);position:absolute;bottom:0}
.gate-label{position:absolute;top:26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:26px;font-weight:500;letter-spacing:-.01em;color:var(--dim-2);transition:color .3s var(--ease)}
.gate.is-lit .gate-post{background:var(--accent);box-shadow:0 0 18px rgba(37,99,235,.7),0 0 60px rgba(37,99,235,.35)}
.gate.is-lit .gate-label{color:var(--white)}
.path-request{position:absolute;bottom:59px;left:0;width:44px;height:11px;background:#fff;border-radius:1px;box-shadow:0 0 22px rgba(255,255,255,.8),0 0 60px rgba(37,99,235,.6);transform:translateX(-22px);will-change:transform}
.path-model{position:absolute;bottom:318px;height:48px;width:320px;transform:translateX(-50%)}
.path-model img{position:absolute;left:50%;top:0;height:48px;width:auto;transform:translateX(-50%);opacity:0;transition:opacity .5s var(--ease)}
.path-model img.is-on{opacity:1}
.path-model .bedrock{display:flex;align-items:center;gap:12px;position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0;transition:opacity .5s var(--ease)}
.path-model .bedrock.is-on{opacity:1}
.path-model .bedrock img{position:static;transform:none;opacity:1;height:44px}
.path-model .bedrock span{font-size:28px;font-weight:500;white-space:nowrap;color:#fff}
.path-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.path-trace path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset .9s var(--ease)}
.path-trace.is-drawn path{stroke-dashoffset:0}
.path-cite{position:absolute;font-size:18px;color:var(--dim);opacity:0;transition:opacity .4s var(--ease) .6s;white-space:nowrap}
.path-trace.is-drawn+.path-cite{opacity:1}
.record{margin-top:56px;display:grid;grid-template-columns:1.1fr 1.3fr 1.8fr 1fr .8fr;column-gap:32px;font-variant-numeric:tabular-nums}
.record-row{display:contents}
.record-row span{font-size:26px;font-weight:400;color:var(--white);opacity:0;transition:opacity .35s var(--ease)}
.record-row.is-on span{opacity:1}
.record-row.is-on span:nth-child(2){transition-delay:.12s}
.record-row.is-on span:nth-child(3){transition-delay:.24s}
.record-row.is-on span:nth-child(4){transition-delay:.36s}
.record-row.is-on span:nth-child(5){transition-delay:.48s}
.path-capture{margin-top:140px}
.path-capture .screen{width:1100px;max-width:100%}
.path-capture .text-link{margin-top:48px}
/* ---- Beat 5: data fusion and the dashboards --------------------------------- */
.fusion{position:relative;margin-top:88px;display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:0;align-items:end;width:min(1400px,calc(100% - 2*var(--gutter)))}
.sources{display:flex;flex-direction:column;gap:28px;padding-bottom:40px;position:relative;z-index:2}
.sources li{font-size:28px;font-weight:400;line-height:1.1;color:var(--dim-2);transition:color .5s var(--ease);white-space:nowrap}
.sources li.is-lit{color:#fff}
.fusion-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.fusion-trace path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(37,99,235,.7))}
.dash-figure{position:relative;aspect-ratio:1000/640;width:100%}
.dash-kpi{position:absolute;left:0;bottom:0;width:86%;opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dash-brief{position:absolute;right:0;bottom:0;width:62%;z-index:2;opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.dash-kpi.is-lit,.dash-brief.is-lit{opacity:1;transform:none}
.dash-figure .control-line{position:absolute;left:0;right:0;bottom:0;z-index:3}
.trace{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.trace path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
/* ---- Beat 6: two weeks and six -------------------------------------------------- */
.weeks{overflow:hidden;padding-top:140px}
.weeks-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.5}
.weeks-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.55) 0%,rgba(10,14,26,.82) 55%,rgba(10,14,26,.97) 100%)}
.weeks-copy{position:relative;z-index:1}
.numerals{display:flex;align-items:baseline;gap:120px;margin-top:40px}
.numeral{display:flex;align-items:baseline;gap:28px}
.numeral .t-line{max-width:220px;line-height:1.25}
.weeks-line{position:relative;z-index:1;display:flex;align-items:center;gap:20px;margin-top:-8px;padding-left:var(--gutter)}
.weeks-line .ks-icon-w{width:34px;height:auto;flex:none}
.weeks-line .control-line{flex:1}
.rows{margin-top:88px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:48px}
.row dt{display:flex;flex-direction:column;gap:8px}
.row .period{font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--dim-2)}
.row .title{font-size:26px;font-weight:500;line-height:1.25;letter-spacing:-.01em}
.row dd{font-size:18px;line-height:1.5;color:var(--dim);margin-top:14px}
.weeks .closing{margin-top:80px;max-width:980px}
/* ---- Beat 7: the delta ---------------------------------------------------------- */
.split{position:relative;margin-top:96px;width:min(1400px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.split-heads{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);column-gap:48px;padding-bottom:28px}
.split-heads p:first-child{color:var(--dim-2)}
.split-heads p:last-child{grid-column:3;color:#fff}
.split-row{display:grid;grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr);column-gap:48px;align-items:center;padding:52px 0}
.split-demo{font-size:22px;line-height:1.45;color:var(--dim-2);max-width:420px}
.split-noun{font-size:clamp(56px,6.4vw,92px);font-weight:500;letter-spacing:-.03em;line-height:1;text-align:center;color:rgba(255,255,255,.22);transition:color .6s var(--ease)}
.split-row.is-lit .split-noun{color:#fff}
.split-prod{position:relative;padding:28px 0 28px 40px;background:linear-gradient(90deg,rgba(37,99,235,.16) 0%,rgba(37,99,235,.04) 60%,rgba(37,99,235,0) 100%)}
.split-prod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow),0 0 48px rgba(37,99,235,.3);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.split-row.is-lit .split-prod::before{transform:scaleY(1)}
.split-prod p{font-size:22px;line-height:1.45;color:#fff;max-width:520px}
.split-marks{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:24px}
.split-marks img{height:30px;width:auto;opacity:.9}
.delta .closing{margin-top:80px;color:#fff}
/* ---- Beat 8: advisory ------------------------------------------------------------ */
.advisory{overflow:hidden;min-height:860px;display:flex;align-items:center}
.advisory-film{position:absolute;inset:0}
.advisory-film .advisory-still,.advisory-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.advisory-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,26,.92) 0%,rgba(10,14,26,.66) 48%,rgba(10,14,26,.2) 100%),linear-gradient(to top,rgba(10,14,26,.9),rgba(10,14,26,0) 30%)}
.advisory-copy{position:relative;z-index:1}
.advisory .t-display{margin-top:40px;max-width:1100px}
.advisory .t-body{margin-top:36px;max-width:900px}
.advisory .text-link{margin-top:40px}
/* ---- Beat 9: leadership ------------------------------------------------------- */
.leader{display:grid;grid-template-columns:5fr 7fr;column-gap:64px;margin-top:64px;align-items:start}
.leader-name{font-weight:500}
.leader .t-body{color:#fff}
.bench{margin-top:104px;display:flex;flex-direction:column;gap:24px}
.bench li{color:#fff;font-weight:300}
.leadership .text-link{margin-top:64px}
/* ---- Beat 10: proof ------------------------------------------------------------- */
.proof-tool{margin-top:80px}
.proof-tool .screen{width:1100px;max-width:100%}
.proof-label{margin-top:28px}
.proof-tool .text-link{margin-top:20px}
.proof-rows{margin-top:120px;display:grid;grid-template-columns:4fr 5fr 3fr;column-gap:48px;row-gap:48px;align-items:baseline}
.proof-row{display:contents}
.proof-row h3{font-size:26px;font-weight:500;line-height:1.3;letter-spacing:-.01em}
.proof-row p{font-size:18px;color:var(--dim)}
.proof-row a{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;font-size:18px;font-weight:500}
/* ---- Beat 11: the federal door --------------------------------------------------- */
.facts{margin-top:64px;display:flex;flex-direction:column;gap:16px}
.facts span{color:#fff;font-weight:300}
.federal .actions{margin-top:64px}
/* ---- Beat 12: close --------------------------------------------------------------- */
.close{text-align:center;padding:calc(var(--beat) + 20px) 0}
.close .t-deck{margin:32px auto 0;max-width:860px}
.close .btn{margin-top:48px}
/* ---- Footer ----------------------------------------------------------------------- */
/* The footer stays inside the dark world: the two marks, four link groups (Platform, Services, Resources, Company) in
one grid, a hairline, then the legal line and the social links. Grouped November 3: from 1440 px the marks stack
at the left and the four groups sit beside them, each column as wide as its longest label; from 1101 to 1439 the
marks sit in a row above the four groups, each column as wide as its longest label and spread across the measure;
from 1100 down to 768 the groups are two by two; on the phone one column, so every label holds one line (review
round four b: equal columns wrapped five labels on the phone and two at 1024). r4.css sizes the marks. */
.footer{background:var(--navy-black);color:#fff;padding:72px 0 44px}
.footer-row{display:grid;grid-template-columns:minmax(0,1fr);row-gap:48px;align-items:start}
.footer-links{display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;column-gap:40px;row-gap:40px}
.footer-group{display:flex;flex-direction:column;align-items:flex-start}
.footer-label{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;color:rgba(255,255,255,.5)}
.footer-links a{font-size:15px;font-weight:500;line-height:1.4;text-decoration:none;color:rgba(255,255,255,.78);padding:5px 0;position:relative;transition:color .3s var(--ease)}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap}
.footer-wordmark{height:24px;width:auto}
@media (min-width:1440px){
.footer-row{grid-template-columns:minmax(0,1fr) auto;column-gap:64px}
.footer .footer-marks{flex-direction:column;align-items:flex-start;gap:22px}
.footer-links{grid-template-columns:repeat(4,max-content);column-gap:64px}
}
@media (max-width:1100px){
.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:start;column-gap:32px;row-gap:36px}
}
.footer-social{display:flex;gap:28px;align-items:center}
.footer-social a{font-size:14px;font-weight:500;text-decoration:none;color:rgba(255,255,255,.78)}
.footer-social a:hover{color:#fff}
.footer-legal{display:flex;gap:8px 24px;align-items:center;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.55)}
.footer-legal a{color:rgba(255,255,255,.55);text-decoration:none}
.footer-legal a:hover{color:#fff}
.footer-note{display:none}
/* ---- Shared figures on interior pages ---------------------------------------------- */
.record-head{display:contents}
.record-head span{font-size:14px;letter-spacing:.02em;color:var(--dim-2)}
.marks-label{margin-top:88px;color:var(--dim-2)}
.marks-label+.mark-rows{margin-top:40px}
.mark-rows{display:flex;flex-direction:column;gap:44px}
.mark-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 72px}
.mark-row.tight{gap:40px 52px}
.mark-row li{display:flex;align-items:center;gap:14px}
.mark-row li img{height:var(--h,40px);width:auto}
.mark-row li span{font-size:20px;font-weight:500;color:#fff;white-space:nowrap}
.mark-rows.models li{opacity:.25;transition:opacity .5s var(--ease)}
.mark-rows.models li.is-lit{opacity:1}
.mark-rows.models li.lockup img+img{margin-left:4px}
/* ---- Interior pages: the H1 rises from its mask once ------------------------------ */
.h1-mask{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.t-h1.is-rising{animation:rise .6s var(--ease) both}
.page-light .nav{background:rgba(10,14,26,.92)}
/* ---- Below 1440: the six links collapse into the menu; the button stays ------- */
@media (max-width:1439px){
.nav a:not(.btn):not(.contact):not(.brand){display:none}
.nav .menu{display:flex}
}
/* ---- Tablet widths ------------------------------------------------------------- */
@media (max-width:1100px){
.rows{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
.split-heads,.split-row{grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);column-gap:28px}
.fusion{grid-template-columns:220px minmax(0,1fr)}
}
/* ---- Phone ---------------------------------------------------------------------- */
@media (max-width:767px){
:root{--gutter:24px;--beat:88px}
body{font-size:17px}
.t-hero{font-size:60px;letter-spacing:-.025em}
.t-wall{font-size:64px;letter-spacing:-.03em}
.t-h1{font-size:50px}
.t-name{font-size:40px}
.t-head{font-size:40px}
.t-statement{font-size:34px}
.t-display{font-size:28px}
.t-line{font-size:22px}
.t-deck{font-size:18px}
.t-body{font-size:18px}
.t-body-s{font-size:17px}
.t-numeral{font-size:180px}
.head-block .t-deck{margin-top:20px}
.beat>.measure+.measure{margin-top:40px}
.link-row{margin-top:40px}
.nav{height:60px;padding:0 20px;gap:20px}
.nav .wordmark{height:21px}
.nav .btn{display:none}
.nav .contact{display:block}
.nav .menu{display:flex;order:3;margin:0}
.nav-panel{padding:100px var(--gutter) 40px}
.nav-panel a{font-size:28px}
.hero{height:min(100svh,177.78vw);min-height:0}
.hero .vignette{background:linear-gradient(to top,rgba(10,14,26,.9) 0%,rgba(10,14,26,.5) 40%,rgba(10,14,26,.05) 70%,rgba(10,14,26,0) 100%)}
.hero-copy{left:24px;right:24px;bottom:40px}
.hero-claim{margin-top:18px;font-size:17px;line-height:1.4;max-width:360px}
.hero-cta{margin-top:22px;gap:20px;flex-wrap:wrap}
.hero-cta .btn{height:50px;padding:0 22px;font-size:15px}
.hero-more{display:none}
.hero .lockup .wm{width:230px}.hero .lockup .ks{width:220px;margin-top:18px}.hero .lockup .line{margin-top:12px}
.stack-figure{margin-top:48px}
.stratum{width:calc(100% - 2*var(--gutter))}
.stratum-label{font-size:15px;margin-bottom:18px}
.markwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px;justify-items:center}
.markwall li{gap:8px}
.markwall li img{height:calc(var(--h,44px)*.5)}
.markwall li span{font-size:14px}
.markwall.connectors li.named img{height:calc(var(--h,44px)*.55)}
.markwall.models{gap:28px 14px}
.markwall.models li.lockup{gap:4px}
.stratum-connectors{padding-bottom:48px}
.shelf{height:auto;display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);gap:14px;padding:0 0 46px;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;perspective:none}
.shelf::-webkit-scrollbar{display:none}
.shelf-screen,.shelf-screen:nth-child(n){flex:0 0 78%;width:78%;margin:0;scroll-snap-align:start;opacity:1;transform:none;z-index:auto;-webkit-box-reflect:none}
.shelf-screen.is-lit:nth-child(n){transform:none}
.showreel{padding-bottom:32px}
.shelf-screen figcaption{bottom:-30px;text-align:left;font-size:14px}
.stack-line{margin-top:10px}
.stack-mark{width:min(320px,80%);margin-top:26px}
.stratum-models{padding-top:56px}
.stack .link-row{margin-top:48px}
.reel{margin-top:40px}
.reel-stage{height:auto;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);gap:16px;padding:0 var(--gutter) 24px;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:none}
.reel-stage::-webkit-scrollbar{display:none}
.reel-slide{position:static;flex:0 0 84vw;width:84vw;opacity:1;transform:none;pointer-events:auto;-webkit-box-reflect:none;box-shadow:0 20px 40px -12px rgba(0,0,0,.7);scroll-snap-align:start}
.reel-copy,.reel-line-rule,.reel-name-block{display:none}
.reel-index{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0 26px;margin:14px 0 0;padding:0 var(--gutter);width:100%;scrollbar-width:none}
.reel-index::-webkit-scrollbar{display:none}
.reel-index button{font-size:18px}
.reel-slide figcaption{display:block;margin-top:14px;font-size:22px;font-weight:500;color:#fff}
.reel-slide figcaption small{display:block;font-size:15px;font-weight:400;color:var(--dim);margin-top:6px;line-height:1.4}
.path-figure{margin-top:40px;width:calc(100% - 2*var(--gutter))}
.path-track{height:auto;padding-left:16px}
.path-track .control-line{left:16px;right:auto;top:0;bottom:0;width:1.5px;height:100%;transform:none;margin-left:0}
.gates{position:static;flex-direction:column;gap:0;padding:0}
.gate{height:104px;width:auto;flex-direction:row;align-items:center}
.gate-post{position:static;transform:none;width:120px;height:2px;margin-left:-16px}
.gate-label{position:static;transform:none;margin-left:20px;font-size:20px}
.path-request{left:12px;bottom:auto;top:0;width:7px;height:28px;transform:translateY(-14px)}
.path-model{left:0;transform:none;bottom:auto;top:0;height:24px;width:200px}
.path-model img,.path-model .bedrock{left:0;transform:none}
.path-model img,.path-model .bedrock img{height:22px}
.path-model .bedrock span{font-size:16px}
.path-trace,.path-cite{display:none}
.record{grid-template-columns:1fr 1fr;row-gap:10px;margin-top:40px;width:100%}
.record-head{display:none}
.record-row span{font-size:17px}
.marks-label{margin-top:56px}
.marks-label+.mark-rows{margin-top:28px}
.mark-rows{gap:28px}
.mark-row{gap:28px 32px}
.mark-row li img{height:calc(var(--h,40px)*.75)}
.mark-row li span{font-size:16px}
.path-capture{margin-top:64px}
.path-capture .text-link{margin-top:32px}
.fusion{grid-template-columns:1fr;margin-top:40px;row-gap:28px}
.sources{flex-direction:row;flex-wrap:wrap;gap:10px 22px;padding-bottom:0}
.sources li{font-size:18px;color:#fff}
.fusion-trace{display:none}
.dash-figure{aspect-ratio:auto}
.dash-kpi,.dash-brief{position:static;width:100%;opacity:1;transform:none}
.dash-brief{margin-top:24px}
.dash-figure .control-line{position:static;margin-top:0}
.trace{display:none}
.weeks{padding-top:var(--beat)}
.numerals{flex-direction:column;gap:12px;margin-top:20px;align-items:flex-start}
.numeral{gap:16px}
.numeral .t-line{font-size:18px;max-width:160px}
.weeks-line{padding-left:var(--gutter);margin-top:8px}
.rows{grid-template-columns:1fr;row-gap:28px;margin-top:48px}
.row dd{margin-top:8px}
.weeks .closing{margin-top:48px}
.split{margin-top:40px;width:calc(100% - 2*var(--gutter))}
.split-heads{display:none}
.split-row{grid-template-columns:1fr;row-gap:14px;padding:36px 0}
.split-noun{text-align:left;font-size:40px;color:#fff;order:0}
.split-demo{order:1;font-size:17px}
.split-demo::before{content:"A demo in an afternoon: "}
.split-prod{order:2;padding:16px 0 16px 20px}
.split-prod p{font-size:17px}
.split-prod p::before{content:"In production: ";color:var(--dim)}
.split-marks img{height:22px}
.delta .closing{margin-top:40px}
.advisory{min-height:0}
.advisory-film .advisory-still,.advisory-film video{opacity:.35}
.advisory .t-display{margin-top:24px}
.advisory .t-body{margin-top:24px}
.leader{grid-template-columns:1fr;row-gap:20px;margin-top:32px}
.bench{margin-top:56px;gap:14px}
.leadership .text-link{margin-top:40px}
.proof-tool{margin-top:40px}
.proof-rows{grid-template-columns:1fr;row-gap:8px;margin-top:64px}
.proof-row{display:block;margin-top:28px}
.proof-row p{margin-top:6px}
.proof-row a{display:inline-block;margin-top:8px}
.facts{margin-top:36px;gap:8px}
.federal .actions{margin-top:40px;gap:24px}
.federal .btn{width:100%;justify-content:center}
.close{padding:var(--beat) 0}
.close .t-deck{margin-top:20px}
.footer{padding:56px 0 36px}
.footer-row{row-gap:40px}
/* Two columns on the phone (round 4b, November 3): one column ran 1080 px, more than a full screen of link lists. */
.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px}
.footer-label{font-size:12px;margin-bottom:10px}
.footer-links a{font-size:14px;padding:4px 0}
.footer-bottom{margin-top:40px;padding-top:24px;gap:16px}
}
/* ---- Reduced motion: every figure in its finished state ------------------------- */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero .grain{display:none}
.hero h1 b{transform:none}
.hero-claim,.hero-cta{opacity:1;transform:none;transition:none}
.reel-name.is-rising{animation:none}
.markwall li,.shelf-screen,.stack-mark{opacity:1;transform:none;transition:none}
.stack-line{transform:none}
.gate .gate-post{background:var(--accent);box-shadow:0 0 12px rgba(37,99,235,.55)}
.gate .gate-label{color:var(--white)}
.path-trace path{stroke-dashoffset:0;transition:none}
.path-cite{opacity:1}
.record-row span{opacity:1;transition:none}
.sources li{color:#fff}
.dash-kpi,.dash-brief{opacity:1;transform:none}
.split-noun{color:#fff}
.split-prod::before{transform:none}
.t-h1.is-rising{animation:none}
}
/* ============================================================================
Integrations and Models (integrations.html): the switch and the bands.
============================================================================ */
.hero-switch{padding-top:calc(72px + 128px)}
.hero-switch .t-h1{max-width:1200px}
.hero-switch .t-deck{margin-top:36px;max-width:980px}
.switch{margin-top:104px}
.switch-stage{position:relative;height:150px}
.switch-big{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;gap:22px;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.switch-big.is-on{opacity:1}
.switch-big img{height:var(--h);width:auto}
.switch-big span{font-size:56px;font-weight:400;line-height:1;color:#fff;letter-spacing:-.015em;padding-bottom:12px;white-space:nowrap}
.switch-big.lockup img+img{margin-left:2px;margin-bottom:6px}
.switch .control-line{margin-top:44px}
.switch-label{margin-top:52px;color:var(--dim-2);text-align:center}
.switch-grid{margin-top:36px;display:flex;flex-direction:column;gap:36px}
.switch-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:36px 56px}
.switch-grid button{display:flex;align-items:center;gap:12px;opacity:.28;transition:opacity .45s var(--ease);position:relative;padding:14px 10px;outline:none;max-width:100%}
.switch-grid button img{height:var(--h);width:auto}
.switch-grid button span{font-size:22px;font-weight:500;color:#fff;white-space:nowrap}
.switch-grid button.lockup img+img{margin-left:4px}
.switch-grid button[aria-selected="true"],.switch-grid button:hover,.switch-grid button:focus-visible,.switch.is-static .switch-grid button{opacity:1}
.switch-grid button::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:1.5px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.switch-grid button[aria-selected="true"]::after,.switch-grid button:focus-visible::after{transform:scaleX(1)}
.models-band{padding-top:0;overflow:hidden}
.models-hero{position:relative;min-height:860px;display:flex;align-items:center}
.models-still{position:absolute;inset:0}
.models-still img{width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.8}
.models-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,26,.92) 0%,rgba(10,14,26,.7) 38%,rgba(10,14,26,.12) 70%,rgba(10,14,26,0) 100%),linear-gradient(to top,rgba(10,14,26,1) 0%,rgba(10,14,26,0) 22%)}
.models-copy{position:relative;z-index:1}
.models-copy .t-label{color:var(--dim)}
.models-copy .t-head{margin-top:20px}
.models-copy .t-body{margin-top:36px;max-width:620px}
.models-screen{margin-top:96px}
.models-screen .screen{width:1100px;max-width:100%}
.models-line{margin-top:28px;max-width:900px}
.models-line .text-link{font-size:inherit;padding-bottom:4px;margin-left:6px;color:var(--white)}
.int-label{margin-top:28px}
/* Third cut: a wall of the connected systems at the home scale, each with its one line beneath. */
.int-rows{margin-top:96px;display:flex;flex-wrap:wrap;justify-content:center;gap:72px 64px}
.int-row{display:flex;flex-direction:column;align-items:center;width:300px;text-align:center}
.int-row dt{display:flex;align-items:center;justify-content:center;gap:16px;min-height:72px}
.int-row dt img{height:calc(var(--h)*1.5);width:auto}
.int-row dt span{font-size:26px;font-weight:500;color:#fff;white-space:nowrap;letter-spacing:-.01em}
.int-row dd{margin-top:18px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.8)}
.int-rest{margin-top:96px;color:#fff}
.int-evidence{margin-top:128px}
.int-evidence .screen{width:1100px;max-width:100%}
.int-caption{margin-top:28px}
.apis .head-block .t-deck{max-width:980px}
.api-figure{position:relative;aspect-ratio:1300/540;margin-top:88px}
.api-keys{position:absolute;left:0;bottom:0;width:61.5%}
.api-quick{position:absolute;right:0;bottom:0;width:61.5%;z-index:2}
.api-figure .control-line{position:absolute;left:0;right:0;bottom:0;z-index:3}
.api-link{margin-top:56px}
@media (max-width:767px){
.hero-switch{padding-top:calc(60px + 72px)}
.switch{margin-top:56px}
.switch-stage{height:76px}
.switch-big{gap:12px}
.switch-big img{height:calc(var(--h)*.5)}
.switch-big span{font-size:28px;padding-bottom:6px}
.switch-big.lockup img+img{margin-bottom:3px}
.switch .control-line{margin-top:24px}
.switch-label{margin-top:32px;text-align:left}
.switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:16px}
.switch-row{display:contents}
.switch-grid button.lockup img{height:calc(var(--h)*.40)}
.switch-grid button:first-child img{height:calc(var(--h)*.58)}
.hero-switch br{display:none}
.switch-grid button{padding:10px 6px;gap:8px}
.switch-grid button img{height:calc(var(--h)*.62)}
.switch-grid button span{font-size:14px}
.switch-grid button::after{left:6px;right:6px}
.models-hero{min-height:0;padding:var(--beat) 0 0}
.models-still img{opacity:.35}
.models-copy .t-body{margin-top:24px}
.models-screen{margin-top:56px}
.models-line{margin-top:20px}
.models-line .text-link{margin-left:0}
.int-rows{gap:40px 28px;margin-top:48px}
.int-row{width:calc(50% - 14px)}
.int-row dt{min-height:0}
.int-row dt img{height:var(--h)}
.int-row dt span{font-size:18px}
.int-row dd{margin-top:10px;font-size:15px}
.int-rest{margin-top:48px}
.int-evidence{margin-top:64px}
.int-caption{margin-top:20px}
.api-figure{aspect-ratio:auto;margin-top:40px}
.api-keys,.api-quick{position:static;width:100%}
.api-quick{margin-top:24px}
.api-figure .control-line{position:static}
.api-link{margin-top:40px}
}
@media (prefers-reduced-motion:reduce){
.switch-grid button{opacity:1}
}
/* ---- Fourth cut, Integrations: color marks on white; the connector wall on white ---- */
.int-ih{padding-bottom:120px}
.int-ih .marks-xl{margin-top:80px;gap:60px 84px;width:min(1380px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.page-integrations section.integrations{background:#fff;color:var(--ink)}
.page-integrations section.integrations .t-head{color:var(--ink)}
.page-integrations section.integrations .int-label{color:#64748B}
.int-row dt span{color:var(--ink)}
.int-row dd{color:#334155}
.int-rest{color:var(--ink)}
.page-integrations section.integrations .int-caption{color:#475569}
.page-integrations section.integrations .screen{box-shadow:0 30px 60px -24px rgba(15,23,42,.4),0 0 0 1px rgba(15,23,42,.08)}
.page-integrations section.integrations .text-link::after{box-shadow:none}
.models-still img{opacity:.9}
@media (max-width:767px){.int-ih{padding-bottom:64px}.int-ih .marks-xl{margin-top:40px;gap:24px 28px;width:100%;padding:0 var(--gutter)}.int-row{width:100%}.int-row dt span{white-space:normal;font-size:20px}.int-rows{gap:36px 0}}
/* ============================================================================
Sprinklenet Design V2, fourth cut: the shared layer every page loads after
site.css and before its own file.
----------------------------------------------------------------------------
What changed in the fourth cut
Light The site has three grounds now, not one: the film world (Navy
Black), white chapters (Ink type on white), and the electric
chapter (white marks on Accent #2563EB at full saturation).
Marks Real marks at full brightness, at display scale, never dimmed.
Screens Flat, bright, full-width, never tilted, never behind a wall word.
Buttons Solid Accent on dark, solid Navy on white, square-shouldered.
Figures .stk the stack (applications on top, Knowledge Spaces beneath,
any model below, connected systems feeding in)
.rl the application gallery: a snap strip of nine screens
with their marks, no scroll pin (round 5, November 4)
.ldg the record ledger: four chained records in one strip
============================================================================ */
/* ---- Buttons ---------------------------------------------------------------- */
.btn{height:58px;padding:0 30px;border-radius:3px;font-size:16px;font-weight:600;letter-spacing:.005em}
.btn-white,.btn-accent{background:var(--accent);color:#fff}
.btn-white:hover,.btn-accent:hover{filter:brightness(1.14)}
.btn-navy,.btn-ink{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.ch-blue .btn-white,.ch-blue .btn-accent{background:#fff;color:var(--navy)}
.ch-white .btn-white,.ch-white .btn-accent{background:var(--navy);color:#fff}
.nav .btn{height:44px;padding:0 22px;font-size:15px}
.nav .btn-white{background:var(--accent);color:#fff}
.nav-panel .panel-cta{color:#fff}
/* ---- Chapters --------------------------------------------------------------- */
.ch{position:relative;padding:var(--beat) 0}
.ch-black{background:var(--navy-black);color:#fff}
.ch-navy{background:var(--navy);color:#fff}
.ch-blue{background:var(--accent);color:#fff}
.ch-white{background:#fff;color:var(--ink)}
.ch-white .t-deck,.ch-white .t-body,.ch-white .t-statement{color:#1e293b}
.ch-white .dim{color:#475569}
.ch-white .text-link::after{box-shadow:none;height:2px}
.ch-blue .t-deck,.ch-blue .t-body{color:rgba(255,255,255,.92)}
.ch-blue .text-link::after{background:#fff;box-shadow:none}
.ch-blue ::selection{background:#fff;color:var(--accent)}
/* One left edge (round 4b, November 3): the chapter head sits on the 1300 px measure, the width every row, figure,
trailing link, and the footer already use, so a heading and the block under it share x = 70 at 1440 (the 1180 px
head sat 60 px in from 1440 up and 23 px at 1366). Copy width is set by max-width: decks at 860 px, the close
band's measure (about 66 characters at 24 px); the 1000 to 1060 px page overrides came down to match. */
.ch-head{width:min(1300px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.ch-head .t-deck{margin-top:30px;max-width:860px;text-wrap:pretty}
.ch-head.center{text-align:center}
.ch-head.center .t-deck{margin-inline:auto}
.ch-after{margin-top:72px}
/* ---- Marks at display scale ---------------------------------------------------- */
.marks-xl{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:52px 76px;margin-top:72px}
.marks-xl li{display:flex;align-items:center;gap:14px}
.marks-xl li img{height:var(--h,56px);width:auto}
.marks-xl li span{font-size:34px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;color:#fff;line-height:1}
.marks-xl li.lockup img+img{margin-left:6px}
.ch-white .marks-xl li span{color:var(--ink)}
.marks-md{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px 54px}
.marks-md li{display:flex;align-items:center;gap:12px}
.marks-md li img{height:var(--h,40px);width:auto}
.marks-md li span{font-size:24px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:#fff;line-height:1}
.marks-md li.lockup img+img{margin-left:4px}
.ch-white .marks-md li span{color:var(--ink)}
/* ---- The stack --------------------------------------------------------------- */
.stk{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));margin:80px auto 0}
.stk-tier{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748B;margin-bottom:18px}
.ch-black .stk-tier,.ch-navy .stk-tier{color:rgba(255,255,255,.62)}
.stk-apps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:start;padding:0 2%}
/* The six screens render finished (round 5 review, second pass): the figure opened on an empty band under APPLICATION LAYERS
for up to 1.3 s while the stages ran; the slab, the connectors, and the wires still arrive by stage. */
.stk-app{position:relative}
.stk.is-3 .stk-app{opacity:1;transform:none}
.stk.is-3 .stk-app:nth-child(2){transition-delay:.08s}.stk.is-3 .stk-app:nth-child(3){transition-delay:.16s}.stk.is-3 .stk-app:nth-child(4){transition-delay:.24s}.stk.is-3 .stk-app:nth-child(5){transition-delay:.32s}.stk.is-3 .stk-app:nth-child(6){transition-delay:.4s}
.stk-app img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;display:block;border-radius:5px;box-shadow:0 22px 44px -18px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.08)}
.ch-black .stk-app img,.ch-navy .stk-app img{box-shadow:0 22px 44px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.stk-app figcaption{margin-top:14px;font-size:17px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-align:center}
.ch-black .stk-app figcaption,.ch-navy .stk-app figcaption{color:#fff}
.stk-platform{position:relative;margin-top:44px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,2.9fr) minmax(0,.85fr);align-items:center;column-gap:36px}
.stk-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.stk-wires path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .5s var(--ease)}
.stk.is-2 .stk-wires path{opacity:1}
.stk-conn{display:flex;flex-direction:column;gap:22px;position:relative;z-index:1}
.stk-conn-l{align-items:flex-start}
.stk-conn-r{align-items:flex-end}
.stk-conn li{display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stk-conn-r li{transform:translateX(12px)}
.stk.is-2 .stk-conn li{opacity:1;transform:none}
.stk.is-2 .stk-conn li:nth-child(2){transition-delay:.06s}.stk.is-2 .stk-conn li:nth-child(3){transition-delay:.12s}.stk.is-2 .stk-conn li:nth-child(4){transition-delay:.18s}.stk.is-2 .stk-conn li:nth-child(5){transition-delay:.24s}
.stk-conn li img{height:var(--h,36px);width:auto}
.stk-conn li span{font-size:21px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.ch-black .stk-conn li span,.ch-navy .stk-conn li span{color:#fff}
.stk-slab{position:relative;z-index:1;background:var(--navy);border-radius:8px;padding:44px 48px 40px;text-align:center;box-shadow:0 30px 60px -24px rgba(11,39,64,.6);opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stk.is-2 .stk-slab{opacity:1;transform:none}
.ch-black .stk-slab,.ch-navy .stk-slab{background:var(--accent);box-shadow:0 30px 60px -24px rgba(37,99,235,.6)}
.stk-slab .ks{width:min(560px,86%);height:auto;margin:0 auto}
.stk-controls{display:flex;justify-content:center;gap:0 30px;margin-top:26px;flex-wrap:wrap}
.stk-controls li{font-size:16px;font-weight:500;color:rgba(255,255,255,.9);white-space:nowrap;position:relative;padding-top:16px}
.stk-controls li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:10px;background:#fff;opacity:.9;transform:translateX(-50%)}
.stk-models{margin-top:52px;text-align:center;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stk.is-1 .stk-models{opacity:1;transform:none}
.stk-models .marks-md{margin-top:22px;gap:30px 48px}
.stk-models .marks-md li img{height:calc(var(--h,40px)*.9)}
.stk-models .marks-md li span{font-size:22px}
/* ---- The application gallery: a snap strip at every width, no scroll pin (round 5, November 4) ------------
The strip runs edge to edge; its padding puts the first card on the 1300 px measure's left edge (the chapter head's
edge at 1440 and up, the gutter below), each card is 1120 px at most so the next card shows beside it, and the
scroll snaps each card to that edge. The nav (the counter, the two arrows) sits on the measure above the strip;
arrows hide on the phone, where the strip swipes. Each caption carries the product mark where one exists, standing
on the name's baseline, then the deck's one line. */
.rl{overflow:hidden}
.rl-gallery{--rl-pad:max(var(--gutter),calc((100vw - 1300px) / 2));--rl-gap:28px;--rl-w:min(1120px,calc(100vw - 2*var(--rl-pad) - 56px));position:relative;margin-top:88px}
.rl-nav{width:min(1300px,calc(100% - 2*var(--gutter)));margin:0 auto 22px;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.rl-count{margin-right:14px;font-size:15px;font-weight:500;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums}
.rl-arrow{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);background:transparent;cursor:pointer;transition:box-shadow .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease);outline:none}
.rl-arrow svg{display:block}
.rl-arrow:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)}
.rl-arrow:focus-visible{box-shadow:inset 0 0 0 1.5px #fff;outline:2px solid #fff;outline-offset:3px}
.rl-arrow:disabled{opacity:.3;cursor:default;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);background:transparent}
.rl-screens{position:relative;display:flex;gap:var(--rl-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--rl-pad);padding:4px var(--rl-pad) 12px;scrollbar-width:none;overscroll-behavior-x:contain;outline:none;cursor:grab}
.rl-screens::-webkit-scrollbar{display:none}
.rl-screens.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.rl-screens:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.rl-slide{flex:0 0 var(--rl-w);scroll-snap-align:start;margin:0}
.rl-shot img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8)}
.rl-slide figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-top:24px;padding:0 2px}
.rl-cap-name{display:inline-block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#fff}
.rl-cap-line{font-size:17px;line-height:1.45;color:rgba(255,255,255,.86)}
.rl-after{margin-top:56px}
/* ---- Product names with their marks (templates/part-mark.php; round 5 review, November 4) ---------------------------
One treatment wherever a product is named at full size: the gallery captions, the stack captions on Home and Knowledge
Spaces, the scene headings on Applications, and the Merlin heading on Governance. The mark is an inline image standing
on the name's baseline, left of the name, sized in em so each context's type sets it (at the gallery's 24 px: the
Merlin mark 22 px, the FARbot avatar 30 px, the Knowledge Spaces glyph 20 px and wordmark 22 px, the MASTYF wordmark
18 px, the sizes the gallery carried). The name still wraps after the mark where the column is narrow. The MASTYF
wordmark is the name (alt MASTYF); on white chapters part-mark.php serves its ink copy and the navy Knowledge Spaces
marks. */
.pm{white-space:normal}
.pm-img{display:inline-block;vertical-align:baseline;height:.92em;width:auto;margin-right:.46em;user-select:none;-webkit-user-select:none}
.pm-farbot{height:1.25em;vertical-align:-.1em;margin-right:.4em}
.pm-ksglyph{height:.83em}
.pm-ks{margin-right:.34em}
.pm-wm{height:.88em;margin-right:0;vertical-align:0}
/* Headings: the glyphs sit nearer the cap height, and the avatar steps down. */
.scene-name .pm-img,.t-head .pm-img{height:.8em;margin-right:.36em}
.scene-name .pm-farbot,.t-head .pm-farbot{height:.88em;vertical-align:-.06em}
.scene-name .pm-ksglyph,.t-head .pm-ksglyph{height:.72em}
.t-head .pm-wm{height:.72em;margin-right:0}
/* The MASTYF wordmark is a lighter face than the Black scene names beside it; at .84em (47 px at 56) its weight reads level with them. */
.scene-name .pm-wm{height:.84em;margin-right:0}
/* The stack captions (17 px, centered): the marks take the caption's own size, and none of the screen rules above
(.stk-app img: full width, 16:10, cover, radius, shadow) reaches them. */
.stk-app figcaption .pm-img{display:inline-block;width:auto;height:.95em;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:0;box-shadow:none;margin-right:.4em}
.stk-app figcaption .pm-ks{height:.9em;margin-right:.3em}
.stk-app figcaption .pm-wm{height:.9em;margin-right:0}
/* ---- The ledger -------------------------------------------------------------- */
.ldg{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));margin:64px auto 0}
.ldg-bar{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding-bottom:22px;border-bottom:2px solid rgba(255,255,255,.18)}
.ldg-status{font-size:24px;font-weight:600;letter-spacing:-.015em;color:#fff;display:block;line-height:1.3}
.ldg.is-broken .ldg-status{color:#ff9d90}
.ldg-actions{display:flex;gap:14px;flex-wrap:wrap}
.ldg-actions .btn{height:48px;padding:0 22px;font-size:15px}
.ldg-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.ldg-rec{position:relative;padding:30px 28px 28px 0;margin-right:28px;border-bottom:2px solid rgba(255,255,255,.18)}
.ldg-rec+.ldg-rec::before{content:"";position:absolute;left:-28px;top:52px;width:28px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.ldg-rec.is-link-broken::before{background:#f0564a;box-shadow:0 0 10px rgba(240,86,74,.6)}
.ldg-id{font-size:26px;font-weight:900;letter-spacing:-.025em;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ldg-verdict{font-size:14px;font-weight:600;color:#4ade80;letter-spacing:.01em}
.ldg-rec.is-broken .ldg-verdict{color:#ff9d90}
.ldg-fields{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.ldg-field{font-size:17px;line-height:1.45;color:#fff;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:10px}
.ldg-field b{font-weight:500;color:rgba(255,255,255,.58)}
.ldg-field span[contenteditable]{outline:none;border-bottom:1.5px dashed rgba(255,255,255,.4);padding-bottom:1px;cursor:text;transition:border-color .2s var(--ease)}
.ldg-field span[contenteditable]:hover,.ldg-field span[contenteditable]:focus{border-bottom-color:#fff}
.ldg-hashes{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.ldg-hashes div{font-size:13px;line-height:1.4;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;letter-spacing:.01em;word-break:break-all}
.ldg-hashes b{display:block;font-weight:500;color:rgba(255,255,255,.5);font-size:13px;margin-bottom:2px}
.ldg-hashes .ldg-own{color:#fff}
.ldg-rec.is-broken .ldg-own,.ldg-rec.is-broken .ldg-prev{color:#ff9d90}
.ldg-note{margin-top:22px;font-size:16px;color:rgba(255,255,255,.7);line-height:1.5}
/* The explainer control (round 5, November 4): an 18 px circled-i information glyph (the inline SVG in
part-ledger-info.php: a ring, a dot, a stem) set after the status line's last word, its ring standing on the baseline
and reaching the cap height of the 24 px status, quiet at rest (55%) and full on hover, focus, or open; the 44 px hit
area is the ::before. Open, the ring fills white and the glyph takes the ground. The panel sits on an accent left
rule between the status and the actions in the DOM (directly under the status, the order it keeps on the phone and
the tablet); from 1360 px up, where the status and the actions share the bar's first line in both chain states, it is
ordered after the actions and wraps beneath that line. Closed, it adds nothing to the bar's height. The control keeps
its own color so the broken state's tint never reaches it. */
.ldg-info-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:10px;padding:0;vertical-align:-1px;border:0;border-radius:50%;background:transparent;color:#fff;opacity:.55;cursor:pointer;transition:opacity .2s var(--ease)}
.ldg-info-btn::before{content:"";position:absolute;inset:-13px}
.ldg-info-glyph{display:block;width:18px;height:18px}
.ldg-info-btn:hover,.ldg-info-btn:focus-visible,.ldg-info-btn[aria-expanded="true"]{opacity:1}
.ldg-info-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}
.ldg-info-btn[aria-expanded="true"] .ldg-info-ring{fill:#fff}
.ldg-info-btn[aria-expanded="true"] .ldg-info-dot,.ldg-info-btn[aria-expanded="true"] .ldg-info-stem{fill:var(--navy-black)}
.ldg-info{flex-basis:100%;max-width:860px;padding-left:22px;border-left:2px solid var(--accent)}
.ldg-info[hidden]{display:none}
@media (min-width:1360px){.ldg-info{order:2}}
.ldg-info-label{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ldg-info-body{margin-top:8px;font-size:17px;line-height:1.5;color:rgba(255,255,255,.88);text-wrap:pretty}
/* From 1540 px up the ledger joins the 1300 px measure (round 5 review, second pass): at 1920 the record ledger on Home
opened at 260 under a head at 310, while Governance set the same ledger at 310. The gates figure takes the same rule in
v2.css, after its own width rule below. */
@media (min-width:1540px){.ldg{width:min(1300px,calc(100% - 2*var(--gutter)))}}
/* ---- Stills behind chapters ------------------------------------------------------ */
.ch-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch-shade{position:absolute;inset:0}
.ch-over{position:relative;z-index:1}
/* ---- Statements, facts --------------------------------------------------------- */
.t-big{font-size:clamp(44px,5vw,72px);font-weight:900;line-height:1;letter-spacing:-.04em}
.t-light{font-weight:300}
.fact-row{display:flex;flex-wrap:wrap;gap:40px 96px;align-items:baseline}
.fact{display:flex;flex-direction:column;gap:10px}
.fact b{font-size:clamp(56px,6vw,88px);font-weight:900;line-height:.95;letter-spacing:-.045em}
.fact span{font-size:18px;font-weight:500;color:rgba(255,255,255,.8)}
.ch-white .fact span{color:#475569}
/* ---- Footer: the two marks ------------------------------------------------------- */
.footer-wordmark{height:30px}
.footer-marks{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
.footer-marks .ks{height:22px;width:auto;opacity:.9}
/* ---- Tablet -------------------------------------------------------------------- */
@media (max-width:1180px){
.stk-apps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
.stk-platform{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);column-gap:24px}
.stk-conn li span{font-size:17px}
}
/* ---- Phone --------------------------------------------------------------------- */
@media (max-width:767px){
.btn{height:52px;padding:0 22px;font-size:15px}
.ch-head .t-deck{margin-top:18px}
.ch-after{margin-top:40px}
.marks-xl{gap:26px 30px;margin-top:40px}
.marks-xl li img{height:calc(var(--h,56px)*.5)}
.marks-xl li span{font-size:19px}
.marks-md{gap:18px 26px}
.marks-md li img{height:calc(var(--h,40px)*.62)}
.marks-md li span{font-size:15px}
.stk{margin-top:40px}
.stk-tier{font-size:12px;margin-bottom:12px}
.stk-apps{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 var(--gutter) 6px;margin:0 calc(-1*var(--gutter));scrollbar-width:none}
.stk-apps::-webkit-scrollbar{display:none}
.stk-app{flex:0 0 72%;scroll-snap-align:start;opacity:1;transform:none;transition:none}
.stk-app figcaption{font-size:15px;text-align:left}
.stk-platform{display:flex;flex-direction:column;gap:22px;margin-top:28px}
.stk-wires{display:none}
.stk-conn{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px 18px;width:100%}
.stk-conn li{opacity:1;transform:none}
.stk-conn li img{height:calc(var(--h,36px)*.6)}
.stk-conn li span{font-size:14px}
.stk-conn-l{order:2}.stk-conn-r{order:3}
.stk-slab{order:1;width:100%;padding:24px 20px 22px;opacity:1;transform:none}
.stk-slab .ks{width:min(300px,86%)}
.stk-controls{gap:4px 16px;margin-top:16px}
.stk-controls li{font-size:13px;padding-top:10px}
.stk-models{margin-top:32px;opacity:1;transform:none}
.rl-gallery{--rl-pad:var(--gutter);--rl-gap:14px;--rl-w:86vw;margin-top:40px}
.rl-nav{margin-bottom:14px;justify-content:flex-start}
.rl-count{margin-right:0;font-size:14px}
.rl-arrow{display:none}
.rl-screens{padding:2px var(--rl-pad) 8px}
/* The peeking next card fades at the screen edge (round 5 review, second pass), so its caption never shows cut mid-letter. */
.rl-screens{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--rl-pad)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--rl-pad)),transparent)}
.rl-shot img{border-radius:6px}
.rl-slide figcaption{margin-top:14px;gap:4px 12px;padding:0}
.rl-cap-name{font-size:20px}
.rl-cap-line{font-size:15px;flex-basis:100%}
.ldg{margin-top:36px}
.ldg-status{font-size:18px}
/* 14 px on the phone (round 5 review, second pass): at 16 the ring rose 1.6 px above the 18 px status line's cap height. */
.ldg-info-btn,.ldg-info-glyph{width:14px;height:14px}
.ldg-info-btn{margin-left:8px;vertical-align:0}
.ldg-info-btn::before{inset:-15px}
.ldg-info{padding-left:16px;max-width:none}
.ldg-info-body{font-size:17px}
.ldg-actions{flex:1 1 100%;flex-direction:column;align-items:stretch}
.ldg-actions .btn{justify-content:center}
.ldg-strip{grid-template-columns:1fr}
.ldg-rec{margin-right:0;padding:22px 0}
.ldg-rec+.ldg-rec::before{left:14px;top:-2px;width:2px;height:22px;transform:translateY(-100%)}
.ldg-id{font-size:22px}
.footer-marks .ks{height:18px}
.t-big{font-size:36px}
.fact-row{gap:24px 40px}
.fact b{font-size:48px}
.fact span{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
.stk-app,.stk-conn li,.stk-slab,.stk-models{opacity:1;transform:none;transition:none}
.stk-wires path{opacity:1}
}
/* ---- The governed route: six gates on one line, the model cycling ------------------- */
.gov-pin{position:relative}
.gov-figure{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));margin:72px auto 0}
.gov-models{display:flex;justify-content:center;align-items:center;gap:0 22px;flex-wrap:wrap}
.gov-models button{display:flex;align-items:center;gap:10px;opacity:.74;padding:12px 4px 16px;position:relative;transition:opacity .4s var(--ease),transform .4s var(--ease);outline:none}
.gov-models button img{height:var(--h,34px);width:auto}
.gov-models button span{font-size:20px;font-weight:500;color:#fff;white-space:nowrap}
.gov-models button::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:3px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.gov-models button[aria-selected="true"],.gov-models button:hover,.gov-models button:focus-visible{opacity:1}
.gov-models button[aria-selected="true"]{transform:scale(1.08)}
.gov-models button[aria-selected="true"]::after,.gov-models button:focus-visible::after{transform:scaleX(1)}
.gov-track{position:relative;height:330px;margin-top:56px}
/* The six gates sit inside the figure (round 5 review, second pass): the words were spread across the full viewport, so at 1920
Identity began 208 px left of the chapter head. The control line stays full-bleed; the first word now starts on the figure's
left edge and the last ends on its right, with the gaps shared equally. */
.gov-gates{position:absolute;left:0;width:100%;top:0;display:flex;justify-content:space-between;padding:0}
.gov-gate{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;text-align:center}
/* Resting gate words at 44% white (round 5 review): 3.5:1 on navy, above the 3:1 floor for 30 px bold text (32% measured 2.8:1). */
.gate-word{font-size:clamp(30px,3vw,44px);font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.44);transition:color .35s var(--ease)}
.gate-sub{font-size:19px;font-weight:300;color:rgba(255,255,255,.55);margin-top:8px;transition:color .35s var(--ease)}
.gov-gate::after{content:"";display:block;width:2px;height:54px;margin-top:22px;background:rgba(255,255,255,.18);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.gov-gate.is-lit .gate-word,.gov-gate.is-lit .gate-sub{color:#fff}
.gov-gate.is-lit::after{background:#fff;box-shadow:0 0 18px rgba(255,255,255,.8),0 0 60px rgba(37,99,235,.5)}
.gov-line{position:absolute;left:calc(50% - 50vw);width:100vw;top:188px;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow),0 0 48px rgba(37,99,235,.35)}
.gov-request{position:absolute;top:183px;left:0;width:48px;height:12px;border-radius:1px;background:#fff;box-shadow:0 0 22px rgba(255,255,255,.85),0 0 60px rgba(37,99,235,.6);transform:translateX(-24px);will-change:transform}
.gov-note{position:absolute;left:0;right:0;top:230px;text-align:center;font-size:24px;font-weight:300;color:#fff;min-height:1.4em}
.gov-record{margin-top:56px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr) minmax(0,.9fr) auto;column-gap:40px;align-items:baseline;padding:28px 0 0;border-top:2px solid rgba(255,255,255,.2)}
.gov-record span{font-size:26px;font-weight:400;color:#fff;opacity:0;transition:opacity .35s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gov-record.is-on span{opacity:1}
.gov-record.is-on span:nth-child(2){transition-delay:.1s}
.gov-record.is-on span:nth-child(3){transition-delay:.2s}
.gov-record.is-on span:nth-child(4){transition-delay:.3s}
.gov-record.is-on span:nth-child(5){transition-delay:.4s}
.gov-record.is-on span:nth-child(6){transition-delay:.6s}
.gov-record-id{font-weight:900;letter-spacing:-.02em}
.gov-record-hash{grid-column:1/-1;font-size:15px;color:rgba(255,255,255,.66);letter-spacing:.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.gov-figure[data-autoplay] .gov-track{margin-top:48px}
@media (max-width:767px){
.gov-models{gap:0 20px}
.gov-figure{margin-top:40px}
.gov-models{gap:0 14px;justify-content:flex-start}
.gov-models button img{height:calc(var(--h,34px)*.6)}
.gov-models button span{font-size:15px}
.gov-track{height:auto;margin-top:36px;padding-left:22px}
.gov-gates{position:static;flex-direction:column;gap:0}
.gov-gate{width:auto;flex-direction:row;align-items:center;text-align:left;height:84px;gap:14px}
.gov-gate::after{display:none}
.gate-word{font-size:34px}
.gate-sub{margin-top:0;font-size:16px}
.gov-line{left:0;width:2px;top:0;bottom:0;height:auto}
.gov-request{left:-5px;top:0;width:12px;height:36px;transform:translateY(-18px)}
/* Two lines reserved (round 5 review): the longest note wraps to two on a 360 px screen, and the figure's height must
not change while the request runs, or everything below it moves 26 px on every run. */
.gov-note{position:static;text-align:left;font-size:17px;line-height:1.5;margin-top:8px;min-height:3em}
.gov-record{grid-template-columns:1fr 1fr;row-gap:8px;column-gap:16px;margin-top:36px;padding-top:20px}
.gov-record span{font-size:17px;white-space:normal}
.gov-record-hash{font-size:12px}
.gov-gate .gate-word,.gov-gate .gate-sub{color:#fff}
.gov-record span{opacity:1}
}
/* ---- Interior openers and the line of steps ------------------------------------------ */
.ih{padding:calc(72px + 112px) 0 112px;overflow:hidden}
.ih .t-h1{max-width:1200px}
.ih .t-h1>span{display:block}
.ih .t-deck{margin-top:32px;max-width:900px}
.ih .actions{margin-top:44px}
.ih-shade{position:absolute;inset:0}
.lsteps{position:relative;margin-top:80px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
.lsteps::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.lstep{position:relative;padding-top:40px}
.lstep::before{content:"";position:absolute;left:0;top:0;width:3px;height:30px;background:var(--accent)}
.lstep b{display:block;font-size:clamp(40px,4.2vw,60px);font-weight:900;letter-spacing:-.04em;line-height:1}
.lstep span{display:block;margin-top:18px;font-size:18px;line-height:1.5;color:#334155}
.ch-black .lstep span,.ch-navy .lstep span,.ch-blue .lstep span{color:rgba(255,255,255,.86)}
.ch-blue .lsteps::before,.ch-blue .lstep::before{background:#fff}
.still-band{position:relative;height:72vh;min-height:480px;overflow:hidden}
.still-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
.ih{padding:calc(60px + 56px) 0 64px}
.ih .t-deck{margin-top:18px}
.ih .actions{margin-top:28px}
.lsteps{grid-template-columns:1fr;row-gap:36px;margin-top:40px}
.lstep{padding-top:24px}
/* The tick is 16 px on the phone (integration, November 3): at 30 px it ran into the first line wherever a page sets
less than 30 px above it (Government and Teaming, Advisory, Governance, Knowledge Spaces, Delivery, three landing
pages). Pages that already set 16 px locally (long-form, landing grids, Home phases, Resources, Capabilities) match. */
.lstep::before{height:16px}
.lstep b{font-size:40px}
.lstep span{font-size:16px;margin-top:10px}
.still-band{height:56vw;min-height:0}
}
/* ============================================================================
Sprinklenet Design V2: the home page, fourth cut
----------------------------------------------------------------------------
Loads after site.css and r4.css. Nine chapters, three grounds:
1 .hero The film, lit: title on the first frame, product on the screens.
2 .models Electric blue. Every model at full white, display scale.
3 .platform White. The stack: applications, Knowledge Spaces, models.
4 .rl Navy black. The showreel, one application per screen.
5 .governed Navy. Six gates, the model cycling, the record chain.
6 .evd The briefing room at sunrise. Dashboards with evidence.
7 .delta White. A demo against a production system, a line to drag.
8 .people Navy over the morning atrium. The senior team.
9 .end The facade in the morning. One button.
============================================================================ */
.page-home .t-head{max-width:1100px}
/* ---- 1. The film --------------------------------------------------------------- */
/* The title at clamp(96px, 8.9vw, 156px) (decision 3, option A, applied November 3, round 4b): 128 px at 1440 against
the type scale's 156, so the title clears the lit R07 monitor at 1280, 1366, and 1440 (the reviewer's renders in
renders/round4/hero-film/h1-option-a/). It reaches 156 from 1753 px up; the phone keeps its own size (site.css,
v2.css). One line reverts: delete this rule. */
@media (min-width:768px){.page-home .t-hero{font-size:clamp(96px,8.9vw,156px)}}
.page-home .hero h1 b{font-weight:900;letter-spacing:-.045em}
.page-home .hero-claim{font-size:24px;font-weight:400;line-height:1.42;max-width:700px;color:#fff;text-shadow:0 1px 14px rgba(10,14,26,.5)}
.page-home .hero .vignette{background:
linear-gradient(90deg,rgba(10,14,26,.62) 0%,rgba(10,14,26,.34) 30%,rgba(10,14,26,.04) 56%,rgba(10,14,26,0) 100%),
linear-gradient(to top,rgba(10,14,26,.74) 0%,rgba(10,14,26,.22) 34%,rgba(10,14,26,0) 58%)}
.page-home .hero .grain{opacity:.07}
.page-home .hero h1{text-shadow:0 2px 24px rgba(10,14,26,.35)}
/* ---- 2. Every model ------------------------------------------------------------- */
.page-home .models{padding:calc(var(--beat) - 24px) 0 var(--beat)}
.page-home .models .marks-xl{margin-top:88px;gap:60px 84px;width:min(1380px,calc(100% - 2*var(--gutter)));margin-inline:auto}
.page-home .models-foot{margin-top:88px;font-size:20px;line-height:1.5;color:rgba(255,255,255,.92);max-width:900px}
.page-home .models-foot .text-link{color:#fff;margin-left:6px;font-size:inherit}
/* ---- 3. The stack --------------------------------------------------------------- */
.page-home .platform .ch-after .text-link{font-size:20px}
/* ---- 4. The showreel ------------------------------------------------------------ */
.page-home .rl .ch-head{margin-bottom:40px}
/* ---- 5. Governed (route rules live in r4.css) ------------------------------------- */
.page-home .governed{overflow:hidden}
.page-home .ldg-head{margin-top:150px}
.page-home .ldg-head .t-display{font-weight:900;letter-spacing:-.03em;font-size:clamp(34px,3.4vw,48px)}
.page-home .ldg-head .t-body{margin-top:22px;max-width:900px;color:rgba(255,255,255,.9)}
/* ---- 6. Dashboards with the evidence attached ----------------------------------- */
.page-home .evd{overflow:hidden}
.page-home .evd-still{object-position:center 40%}
.page-home .evd-shade{background:linear-gradient(180deg,rgba(10,14,26,.5) 0%,rgba(10,14,26,.66) 40%,rgba(10,14,26,.94) 100%),linear-gradient(90deg,rgba(10,14,26,.72),rgba(10,14,26,.1) 55%)}
.page-home .evd .t-deck{color:#fff}
/* The sources column is 216 px (integration, November 3): at 200 px "Document libraries" (211 px at 24 px) ran past the
column and its wire began 3 px after the last letter; home.js starts every wire 14 px right of the column. */
.page-home .evd-figure{width:min(1400px,calc(100% - 2*var(--gutter)));margin:72px auto 0;display:grid;grid-template-columns:216px minmax(0,1fr) 380px;column-gap:36px;align-items:stretch}
.page-home .evd-sources{display:flex;flex-direction:column;justify-content:center;gap:26px;position:relative;z-index:2}
.page-home .evd-sources li{font-size:24px;font-weight:400;line-height:1.15;color:rgba(255,255,255,.5);transition:color .5s var(--ease);white-space:nowrap;text-shadow:0 1px 10px rgba(10,14,26,.6)}
.page-home .evd-sources li.is-lit{color:#fff}
.page-home .evd-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.page-home .evd-wires path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:.9}
.page-home .evd-board{position:relative;z-index:2;background:rgba(11,39,64,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:8px;padding:28px 30px 28px;box-shadow:0 40px 80px -24px rgba(0,0,0,.8);outline:1px solid rgba(255,255,255,.14)}
.page-home .evd-board-top{display:flex;justify-content:space-between;align-items:baseline}
.page-home .evd-title{font-size:20px;font-weight:600;color:#fff}
.page-home .evd-sample{font-size:15px;color:rgba(255,255,255,.66)}
.page-home .evd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;margin-top:28px}
.page-home .evd-kpis button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:14px 0 16px;position:relative;opacity:.66;transition:opacity .35s var(--ease);outline:none}
.page-home .evd-kpis button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.page-home .evd-kpis button[aria-selected="true"],.page-home .evd-kpis button:hover,.page-home .evd-kpis button:focus-visible{opacity:1}
.page-home .evd-kpis button[aria-selected="true"]::after,.page-home .evd-kpis button:focus-visible::after{transform:scaleX(1)}
.page-home .evd-n{font-size:clamp(30px,2.7vw,40px);font-weight:900;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.page-home .evd-n i{font-style:normal;font-size:.5em;font-weight:500;letter-spacing:0;opacity:.72;margin-left:2px}
.page-home .evd-l{margin-top:10px;font-size:16px;font-weight:500;color:rgba(255,255,255,.9)}
.page-home .evd-src{margin-top:4px;font-size:14px;color:rgba(255,255,255,.8)}
.page-home .evd-spark{display:block;width:100%;height:120px;margin-top:30px}
.page-home .evd-spark path{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.page-home .evd-records{position:relative;z-index:2;background:rgba(10,14,26,.9);border-radius:8px;padding:30px 32px;display:flex;flex-direction:column;outline:1px solid rgba(255,255,255,.12)}
.page-home .evd-records-title{font-size:19px;font-weight:600;color:#fff;line-height:1.3}
.page-home .evd-record-list{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.page-home .evd-rec{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.page-home .evd-rec.is-in{opacity:1;transform:none}
.page-home .evd-rec-id{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.page-home .evd-rec-src{font-weight:600;color:#fff}
.page-home .evd-rec-hash{grid-column:1/-1;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.page-home .evd-brief{margin-top:auto;padding-top:26px;font-size:17px;line-height:1.5;color:#fff}
.page-home .evd-brief b{display:block;font-weight:600;color:rgba(255,255,255,.66);font-size:14px;margin-bottom:6px}
/* ---- 7. The delta, on white ------------------------------------------------------ */
.page-home .delta{overflow:hidden}
.page-home .wipe{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));height:680px;margin:72px auto 0;border-radius:8px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;box-shadow:0 40px 80px -30px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.08);--x:60%}
.page-home .wipe-demo,.page-home .wipe-prod{position:absolute;inset:0}
.page-home .wipe-demo{background:#eef1f6}
.page-home .wipe-prod{background:radial-gradient(70% 70% at 70% 30%,rgba(37,99,235,.35) 0%,rgba(37,99,235,0) 70%),var(--navy);clip-path:inset(0 0 0 var(--x))}
.page-home .wipe-cap{position:absolute;left:40px;top:34px;font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1}
.page-home .wipe-demo .wipe-cap{color:#0F172A}
.page-home .wipe-prod .wipe-cap{color:#fff}
.page-home .mock{position:absolute;top:96px;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.page-home .mock-demo{left:40px;width:560px;background:#fff;color:#0F172A}
.page-home .mock-prod{left:40px;width:calc(100% - 420px);max-width:960px;background:#0a0e1a;color:#fff;outline:1px solid rgba(255,255,255,.12)}
.page-home .mock-bar{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:rgba(0,0,0,.06)}
.page-home .mock-prod .mock-bar{background:rgba(255,255,255,.06)}
.page-home .mock-bar span{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.18)}
.page-home .mock-prod .mock-bar span{background:rgba(255,255,255,.22)}
.page-home .mock-bar em{font-style:normal;font-size:14px;margin-left:10px;opacity:.75}
.page-home .mock-body{padding:26px 28px 24px}
.page-home .mock-h{font-size:22px;font-weight:600;letter-spacing:-.01em}
.page-home .mock-input{margin-top:16px;padding:14px 16px;border-radius:4px;background:rgba(0,0,0,.05);font-size:16px}
.page-home .mock-prod .mock-input{background:rgba(255,255,255,.07)}
.page-home .mock-note{margin-top:12px;font-size:14px;opacity:.6}
.page-home .mock-answer{margin-top:18px;font-size:16px;line-height:1.5}
.page-home .mock-cite{display:block;margin-top:8px;font-size:14px;color:rgba(255,255,255,.72)}
.page-home .mock-foot{margin-top:18px;font-size:13px;opacity:.6}
.page-home .mock-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:32px}
.page-home .mock-audit{padding-left:32px;border-left:1px solid rgba(255,255,255,.12)}
.page-home .mock-audit p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.86);font-variant-numeric:tabular-nums}
.page-home .mock-k{font-weight:600;color:rgba(255,255,255,.55)!important;margin-top:16px;font-size:13px!important}
.page-home .mock-k:first-child{margin-top:0}
.page-home .mock-marks{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:10px}
.page-home .mock-marks img{height:20px;width:auto}
.page-home .wipe-handle{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:var(--accent);box-shadow:0 0 14px rgba(37,99,235,.6);cursor:ew-resize;z-index:5;outline:none;touch-action:none}
.page-home .wipe-handle span{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(15,23,42,.35)}
.page-home .wipe-handle span::before,.page-home .wipe-handle span::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-top:2px solid #fff;border-left:2px solid #fff}
.page-home .wipe-handle span::before{left:17px;transform:translateY(-50%) rotate(-45deg)}
.page-home .wipe-handle span::after{right:17px;transform:translateY(-50%) rotate(135deg)}
.page-home .wipe-handle:focus-visible span{box-shadow:0 0 0 4px var(--navy)}
.page-home .wipe-nouns{position:absolute;right:40px;top:96px;bottom:40px;width:300px;display:flex;flex-direction:column;justify-content:space-between;z-index:4;pointer-events:none}
.page-home .wipe-nouns li{opacity:.22;transform:translateX(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.page-home .wipe-nouns li.is-on{opacity:1;transform:none}
.page-home .wipe-nouns b{display:block;font-size:34px;font-weight:900;letter-spacing:-.035em;line-height:1;color:#fff}
.page-home .wipe-nouns span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.84)}
.page-home .delta-after{margin-top:88px}
.page-home .delta-after .t-statement{max-width:1100px;font-weight:300;color:var(--ink)}
.page-home .delta-after-line{margin-top:28px;max-width:900px;color:var(--ink)}
/* ---- 8. The people -------------------------------------------------------------- */
.page-home .people{overflow:hidden;min-height:100vh;display:flex;align-items:center}
.page-home .people-still{object-position:center 45%}
.page-home .people-shade{background:linear-gradient(90deg,rgba(11,39,64,.95) 0%,rgba(11,39,64,.88) 58%,rgba(11,39,64,.3) 100%),linear-gradient(to top,rgba(11,39,64,.96),rgba(11,39,64,0) 35%)}
.page-home .people .t-statement{margin-top:40px;max-width:1080px}
.page-home .people-leader{margin-top:88px;display:grid;grid-template-columns:5fr 7fr;column-gap:64px;align-items:start}
.page-home .people-name{font-size:48px;font-weight:900;letter-spacing:-.035em;line-height:1}
.page-home .people-role{font-size:20px;line-height:1.55;color:rgba(255,255,255,.92);max-width:640px}
/* The bench as a ruled register (round 5 review, second pass): Company's treatment on navy. At 64 px display type the
longest line wrapped one word alone at 1440, and on the phone the four lines ran together as one bold block. Each line
lights with its accent tick as the list enters (home.js). */
.page-home .people-bench{margin-top:64px;display:flex;flex-direction:column;max-width:760px}
.page-home .people-bench li{position:relative;padding:18px 0 18px 24px;border-top:1px solid rgba(255,255,255,.22);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#fff;opacity:.6;transition:opacity .55s var(--ease)}
.page-home .people-bench li::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.page-home .people-bench li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.page-home .people-bench li.is-lit{opacity:1}
.page-home .people-bench li.is-lit::before{transform:scaleY(1)}
.page-home .people-links{margin-top:64px;display:flex;gap:40px;flex-wrap:wrap}
/* ---- 9. The close --------------------------------------------------------------- */
.page-home .end{overflow:hidden;min-height:820px;display:flex;align-items:center}
.page-home .end-still{object-position:center 35%}
.page-home .end-shade{background:linear-gradient(180deg,rgba(10,14,26,.2) 0%,rgba(10,14,26,.62) 55%,rgba(10,14,26,.98) 100%),linear-gradient(90deg,rgba(10,14,26,.7),rgba(10,14,26,.05) 60%)}
.page-home .end-copy .t-deck{margin-top:28px;max-width:820px;color:#fff}
.page-home .end-copy .btn{margin-top:44px}
.page-home .end-public{margin-top:88px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.8);max-width:900px}
.page-home .end-public a{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1.5px}
/* ---- Tablet ---------------------------------------------------------------------- */
@media (max-width:1180px){
.page-home .evd-figure{grid-template-columns:216px minmax(0,1fr);row-gap:32px}
.page-home .evd-records{grid-column:1/-1}
.page-home .wipe-nouns{display:none}
}
/* ---- Phone ----------------------------------------------------------------------- */
@media (max-width:767px){
.page-home .only-wide{display:none}
.page-home .hero .vignette{background:linear-gradient(to top,rgba(10,14,26,.94) 0%,rgba(10,14,26,.7) 34%,rgba(10,14,26,.25) 60%,rgba(10,14,26,.05) 100%)}
.page-home .hero-claim{font-size:17px;max-width:360px}
.page-home .models{padding:var(--beat) 0}
.page-home .models .marks-xl{margin-top:40px;gap:24px 28px;width:100%;padding:0 var(--gutter)}
.page-home .models-foot{margin-top:40px;font-size:16px}
.page-home .ldg-head{margin-top:72px}
.page-home .evd-figure{grid-template-columns:1fr;margin-top:36px;row-gap:22px}
.page-home .evd-sources{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.page-home .evd-sources li{font-size:16px;color:#fff}
.page-home .evd-wires{display:none}
.page-home .evd-board{padding:20px}
.page-home .evd-kpis{grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:18px}
.page-home .evd-n{font-size:38px}
.page-home .evd-l{font-size:14px;margin-top:6px}
.page-home .evd-src{font-size:13px}
.page-home .evd-spark{height:72px;margin-top:18px}
.page-home .evd-records{padding:20px}
.page-home .evd-rec{font-size:14px}
.page-home .wipe{height:auto;margin-top:36px;border-radius:6px;display:flex;flex-direction:column;touch-action:auto}
.page-home .wipe-demo,.page-home .wipe-prod{position:relative;inset:auto;clip-path:none;padding:18px 18px 22px}
.page-home .wipe-cap{position:static;font-size:20px}
.page-home .mock{position:static;width:100%;max-width:none;margin-top:14px}
.page-home .wipe-handle{display:none}
.page-home .wipe-nouns{position:static;width:auto;display:flex;flex-direction:column;gap:18px;padding:24px 18px 26px;background:var(--navy-black)}
.page-home .wipe-nouns li{opacity:1;transform:none}
.page-home .wipe-nouns b{font-size:26px}
.page-home .mock-body{padding:16px}
.page-home .mock-h{font-size:17px}
.page-home .mock-input,.page-home .mock-answer{font-size:14px}
.page-home .mock-cols{grid-template-columns:1fr;row-gap:18px}
.page-home .mock-audit{padding-left:0;border-left:0}
.page-home .mock-marks img{height:16px}
.page-home .delta-after{margin-top:44px}
.page-home .people{min-height:0}
.page-home .people-still{opacity:.5}
.page-home .people .t-statement{margin-top:22px}
.page-home .people-leader{grid-template-columns:1fr;row-gap:14px;margin-top:48px}
.page-home .people-name{font-size:32px}
.page-home .people-role{font-size:17px}
.page-home .people-bench{margin-top:36px}
.page-home .people-bench li{padding:13px 0 13px 18px;font-size:19px}
.page-home .people-bench li::before{top:14px;bottom:14px}
.page-home .people-links{margin-top:40px;gap:24px}
.page-home .end{min-height:0}
.page-home .end-copy .btn{margin-top:28px;width:100%;justify-content:center}
.page-home .end-public{margin-top:48px;font-size:15px}
}
/* ---- Reduced motion: every figure in its finished state ---------------------------- */
@media (prefers-reduced-motion:reduce){
.page-home .evd-sources li{color:#fff}
.page-home .evd-rec{opacity:1;transform:none}
.page-home .people-bench li{opacity:1;transition:none}
.page-home .people-bench li::before{transform:scaleY(1);transition:none}
.page-home .wipe-nouns li{opacity:1;transform:none}
}
/* ============================================================================
Sprinklenet V2 on private staging: the layer after site.css, r4.css, home.css.
Eight nav items with two buttons, the showreel film at the head of chapter 4,
the chooser as words, the ownership and deployment chapters, the engineers
block, the close with its proof line, quote, and four calls to action.
============================================================================ */
/* ---- Navigation: eight items ------------------------------------------------------ */
.nav{gap:22px;padding:0 36px}
.nav .wordmark{height:25px}
.nav a:not(.btn){font-size:14px}
.nav .nav-contact{white-space:nowrap}
.nav .nav-pilot{margin-left:4px}
@media (min-width:1600px){
.nav{gap:30px;padding:0 40px}
.nav .wordmark{height:27px}
.nav a:not(.btn){font-size:15px}
.nav .nav-contact{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:3px;font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:box-shadow .3s var(--ease)}
.nav .nav-contact::after{display:none}
.nav .nav-contact:hover,.nav .nav-contact:focus-visible{box-shadow:inset 0 0 0 1.5px #fff}
}
@media (max-width:1439px){
.nav .nav-contact{display:none}
.nav .menu{margin-left:0}
}
/* The wordmark never gives way (integration, November 3). On the two pages whose button reads Request a Capability
Briefing (Government and Teaming, Capabilities; 44 px wider than Scope a Six-Week Pilot), the row ran 8 px over at
1440 and 42 px over at 1600, and the brand link, the one item free to shrink, squeezed the wordmark to 151 x 25 and
130 x 27 (159 x 25 and 172 x 27 everywhere else). The brand keeps its size, and on those pages the gaps close a
little where the row is full (part-nav.php sets nav-long-cta). */
.nav .brand{flex-shrink:0}
.nav .wordmark{max-width:none}
@media (min-width:1440px) and (max-width:1599px){.nav.nav-long-cta{gap:20px}}
@media (min-width:1600px) and (max-width:1759px){.nav.nav-long-cta{gap:25px}}
.nav-panel .panel-contact{margin-top:18px;font-size:22px;font-weight:500}
/* ---- Hero: the title, the claim, and the buttons are at rest from the first paint (no load animation);
the film script still takes them out before the lockup and brings them back on the loop ---------- */
.page-home .hero h1 b{transform:none}
.page-home .hero-claim,.page-home .hero-cta{opacity:1;transform:none}
.page-home .hero-copy.is-off .hero-claim,.page-home .hero-copy.is-off .hero-cta{opacity:0}
@media (max-width:767px){
.t-hero{font-size:min(60px,13.8vw)}
.page-home .hero-more{display:inline-block;font-size:15px}
}
/* ---- Model marks: the Amazon Bedrock wordmark, then the link -------------------------- */
.page-home .models-after{margin-top:88px}
.page-home .models-after .text-link{color:#fff;font-size:20px}
/* ---- The stack: foundation models as words only, set as a labeled tier line ------------------- */
.stk-models-words{margin-top:40px;display:flex;align-items:center;gap:28px;opacity:1;transform:none}
.stk-models-words::before,.stk-models-words::after{content:"";flex:1;height:2px;background:var(--navy);opacity:.14}
.stk-models-words .stk-tier{margin:0;font-size:15px;letter-spacing:.08em;color:var(--navy);white-space:nowrap}
/* ---- The showreel film at the head of chapter 4 (muted, looping, no control; round 5) ------------ */
.reelfilm{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0}
.reelfilm-frame{position:relative;aspect-ratio:16/9;background:var(--navy-black);border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8),0 0 140px rgba(37,99,235,.16)}
.reelfilm-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--navy-black)}
/* The poster stands over the film until the first frame plays (v2.js adds is-playing on the playing event), so a slow
connection never shows a bare frame; under reduced motion it stands for good. */
.reelfilm-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s var(--ease);pointer-events:none}
.reelfilm.is-playing .reelfilm-poster{opacity:0}
/* ---- Anchors land below the fixed bar ------------------------------------------------- */
#record-chain{scroll-margin-top:104px}
#models{scroll-margin-top:72px}
/* ---- The chooser as words ------------------------------------------------------------ */
.gov-models-words{gap:0 36px}
.gov-models-words button{padding:12px 6px 16px}
.gov-models-words button span{font-size:22px;font-weight:500;letter-spacing:-.01em}
.gov-models-words button[aria-selected="true"]{transform:none}
.gov-models-words button[aria-selected="true"] span{font-weight:600}
.page-home .ldg-note{margin-top:28px}
/* ---- Ownership: type alone on white -------------------------------------------------- */
.own .t-statement{margin-top:36px;max-width:1120px}
.own-terms{margin-top:36px;font-size:15px;line-height:1.55;color:#475569;max-width:900px}
.own .text-link{margin-top:40px;font-size:20px}
/* ---- The clouds band: the official full-color marks on a white full-bleed band (Home chapter 9, the Deployment hero foot) ---- */
.cloud-band{position:relative;z-index:1;background:#fff;color:var(--ink);padding:44px 0}
.cloud-band ul{width:min(1400px,calc(100% - 2*var(--gutter)));margin:0 auto;display:flex;align-items:center;justify-content:center;gap:28px 112px;flex-wrap:wrap}
.cloud-band li{display:flex;align-items:center;gap:14px;min-height:54px}
.cloud-band li img{height:var(--h,44px);width:auto;display:block}
.cloud-band li span{font-size:27px;font-weight:500;letter-spacing:-.015em;line-height:1;color:var(--ink);white-space:nowrap}
.cloud-band li.words{font-size:27px;font-weight:500;letter-spacing:-.015em;line-height:1;color:var(--ink);white-space:nowrap;padding-left:20px;border-left:3px solid var(--accent)}
.dep .cloud-band{margin-top:72px}
@media (max-width:1100px){.cloud-band ul{gap:28px 64px}}
@media (max-width:767px){
.cloud-band{padding:22px 0;overflow:hidden}
/* One row the visitor slides. A stacked column of four marks left a tall white band with no relationship between them. */
.cloud-band ul{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:40px;width:100%;max-width:none;margin:0;padding:4px var(--gutter) 4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.cloud-band ul.is-drifting{scroll-snap-type:none}
.cloud-band ul::-webkit-scrollbar{display:none}
.cloud-band li{flex:0 0 auto;scroll-snap-align:start;min-height:48px}
.cloud-band li img{height:calc(var(--h,44px)*.9)}
.cloud-band li span,.cloud-band li.words{font-size:20px}
.cloud-band li.words{padding-left:16px}
.dep .cloud-band{margin-top:40px}
}
/* ---- Deployment: the clouds as type, then the phases ------------------------------------ */
.clouds{position:relative;width:min(1400px,calc(100% - 2*var(--gutter)));margin:72px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:40px}
.clouds::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.clouds li{position:relative;padding-top:30px;font-size:clamp(28px,2.7vw,40px);font-weight:900;letter-spacing:-.035em;line-height:1.05;color:#fff}
.clouds li::before{content:"";position:absolute;left:0;top:0;width:3px;height:24px;background:var(--accent)}
.clouds li span{display:block;margin-top:12px;font-size:17px;font-weight:400;letter-spacing:0;line-height:1.4;color:rgba(255,255,255,.78)}
.dep .dep-after{margin-top:56px}
.dep .dep-after .text-link{font-size:20px}
/* The chapter's route sits in its copy, above the band, so the band closes the chapter (round three). */
.dep .dep-route{margin-top:40px}
.dep .dep-route .text-link{font-size:20px}
.dep-phases{margin-top:140px}
.dep-phases .t-display{font-weight:900;letter-spacing:-.03em;font-size:clamp(34px,3.4vw,48px)}
.dep-phases .t-body{margin-top:22px;max-width:900px;color:rgba(255,255,255,.9)}
.dep-steps{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0}
.dep-steps .lstep{padding-top:40px}
.dep-steps .lstep::before{height:24px}
.dep-steps .lstep b{font-size:clamp(24px,2.1vw,30px);letter-spacing:-.025em;line-height:1.1}
/* ---- The senior team: the engineers block ----------------------------------------------- */
.people-fde{margin-top:88px;max-width:920px}
.people-fde h3{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.people-fde p{margin-top:18px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.92);text-wrap:pretty}
/* ---- The close ------------------------------------------------------------------------- */
.page-home .end{min-height:100vh;padding:calc(var(--beat) + 40px) 0}
.page-home .end-public{margin-top:56px;font-size:18px;line-height:1.6}
.page-home .end-public b{font-weight:600;color:#fff}
.end-quote{margin-top:56px;max-width:1000px}
.end-quote p{font-size:clamp(24px,2.2vw,32px);font-weight:300;line-height:1.35;letter-spacing:-.01em;color:#fff}
.end-quote footer{margin-top:20px;font-size:16px;font-weight:500;color:rgba(255,255,255,.8)}
.end-ctas{margin-top:56px;display:flex;align-items:center;gap:20px 40px;flex-wrap:wrap}
.end-ctas .btn{margin-top:0}
.end-ctas .text-link{font-size:18px;color:#fff}
/* ---- Holding pages ------------------------------------------------------------------- */
.page-holding main{min-height:calc(100vh - 220px);display:flex;align-items:center}
.page-holding .holding{width:100%;padding:calc(72px + var(--beat)) 0 var(--beat)}
.page-holding .holding-link{margin-top:40px}
.page-holding .holding-link .text-link{font-size:20px}
/* ---- Tablet ------------------------------------------------------------------------------ */
@media (max-width:1180px){
.clouds{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
.clouds li:nth-child(n+3)::after{content:"";position:absolute;left:0;right:0;top:-18px;height:3px;background:var(--accent)}
}
/* ---- Phone -------------------------------------------------------------------------------- */
@media (max-width:767px){
.nav{padding:0 20px;gap:20px}
.nav .wordmark{height:21px}
.nav .nav-contact,.nav .nav-pilot{display:none}
.nav-panel .panel-contact{font-size:28px;margin-top:10px}
.page-home .models-after{margin-top:40px}
.page-home .models-after .text-link{font-size:17px}
.reelfilm{width:calc(100% - 2*var(--gutter));margin-top:32px}
.reelfilm-frame{border-radius:6px}
.gov-gates{width:auto}
.stk-models-words{margin-top:28px;gap:16px}
.stk-models-words .stk-tier{font-size:12px}
.gov-models-words{gap:0 18px;justify-content:flex-start}
.gov-models-words button span{font-size:16px}
.own .t-statement{margin-top:22px;font-size:27px;line-height:1.22}
.own-terms{margin-top:24px;font-size:14px}
.own .text-link{margin-top:28px;font-size:17px}
.clouds{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:28px;margin-top:40px}
.clouds li{font-size:26px;padding-top:30px}
.clouds li::before{height:16px}
.clouds li span{font-size:14px;margin-top:8px}
.clouds li:nth-child(n+3)::after{top:-14px}
.dep .dep-after{margin-top:36px}
.dep .dep-after .text-link{font-size:17px}
.dep .dep-route{margin-top:28px}
.dep .dep-route .text-link{font-size:17px}
.dep-phases{margin-top:72px}
.dep-steps{margin-top:36px}
.dep-steps .lstep{padding-top:30px}
.dep-steps .lstep::before{height:16px}
.dep-steps .lstep b{font-size:22px}
.people-fde{margin-top:48px}
.people-fde h3{font-size:24px}
.people-fde p{font-size:17px;margin-top:12px}
.page-home .end{min-height:0;padding:var(--beat) 0}
.page-home .end-public{margin-top:40px;font-size:15px}
.end-quote{margin-top:40px}
.end-quote p{font-size:21px}
.end-quote footer{font-size:14px;margin-top:14px}
.end-ctas{margin-top:36px;gap:14px 24px}
.end-ctas .btn{width:100%;justify-content:center}
.end-ctas .text-link{font-size:16px}
.page-holding .holding{padding:calc(60px + 56px) 0 64px}
}
/* ============================================================================
Review round two (November 2, evening): the punch list from the five review passes.
============================================================================ */
/* ---- Text links read as routes at rest: the underline stays, an arrow trails ------------------- */
.text-link{padding-right:26px}
.text-link::after{left:0;right:26px;width:auto;height:1.5px;box-shadow:none;transition:none}
.ch-white .text-link::after,.own .text-link::after{height:2px}
/* Public Sans carries no arrow glyph, so the arrow is drawn: a masked shape in the link's own color. */
.text-link::before{content:"";position:absolute;right:0;top:calc(50% - 3px);width:15px;height:15px;transform:translateY(-50%);background:currentColor;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .35s var(--ease)}
.text-link:hover::before,.text-link:focus-visible::before{transform:translate(5px,-50%)}
.ch-after,.page-home .rl-after,.dep .dep-after{margin-top:40px}
.page-home .models-after{margin-top:56px}
.page-home .people-links{margin-top:48px}
.ch-link-end{padding-bottom:calc(var(--beat) - 48px)}
/* ---- Navigation: a darker bar; the open menu covers the page fully --------------------------------- */
.nav{background:rgba(10,14,26,.6)}
.nav-panel{background:var(--navy-black)}
/* The bar's button is one rule on every page (Jamie, November 3): in the bar from 768 px up on every page, Contact,
the Careers family, and every chromed document included (site.css shows .nav .btn there and hides it on the phone),
and the first item of the phone menu, where it is the same filled button (site.css .panel-cta). From 768 up the bar
already carries the button, so the panel keeps no second copy. Round two's fade (the site.js observer and its class)
and the Contact and Careers hides are deleted at their source (review round four b), so nothing here overrides them. */
@media (min-width:768px){
.nav-panel .panel-cta{display:none}
}
/* ---- Headlines break in balance --------------------------------------------------------------- */
.t-head{text-wrap:balance}
/* ---- Model wall: three rows of four, six rows of two on a phone ---------------------------------- */
.page-home .models .marks-xl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;align-items:center;column-gap:84px;row-gap:60px}
.page-home .models .marks-xl li{max-width:none}
/* A mark wider than its cell (the Amazon Bedrock wordmark is 10:1) keeps its own ratio instead of stretching. */
.page-home .models .marks-xl li img{max-width:100%;object-fit:contain}
/* The Meta Llama lockup holds two marks (round 5 review): between 768 and about 900 px their widths summed past the
cell (the wall overflowed by 43 to 57 px and the bar stretched with it). The lockup keeps to its cell, and each mark
keeps its ratio inside half of it. */
.page-home .models .marks-xl li.lockup{max-width:100%;min-width:0}
.page-home .models .marks-xl li.lockup img{max-width:calc(50% - 10px)}
/* ---- Identifiers that must not break at their hyphen (SP 800-53, M-25-21, Six-Week) --------------- */
.nowrap{white-space:nowrap}
@media (max-width:1299px) and (min-width:768px){.page-home .models .marks-xl{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:60px}}
/* ---- The stack: both tier labels set the same way, each as a labeled line with a hairline on either side, so the
Foundation Models label beneath the platform carries the tier it names instead of standing alone (round three) ---- */
.stk>.stk-tier:first-child,.stk-models-words{display:flex;align-items:center;gap:28px;margin:0 0 18px;text-align:center;white-space:nowrap}
.stk-models-words{margin:44px 0 0;opacity:1;transform:none}
.stk>.stk-tier:first-child::before,.stk>.stk-tier:first-child::after,.stk-models-words::before,.stk-models-words::after{content:"";display:block;flex:1;height:1.5px;background:#E2E8F0;opacity:1}
.stk-models-words .stk-tier{font-size:15px;letter-spacing:.06em;color:#64748B;margin:0}
/* The tier's one line (round 5 review): the label alone read as an unfinished tier, so the models tier carries the
chooser's three words beneath its labeled line, in type, still with no marks (the deck's Stack visual). */
.stk-models-line{margin:14px auto 0;text-align:center;font-size:17px;line-height:1.4;color:#475569;max-width:640px;text-wrap:balance}
/* ---- The record chain: cards share row lines, the link reads as a link -------------------------- */
.ldg-rec{display:flex;flex-direction:column;margin-right:44px}
.ldg-field{align-items:start}
.ldg-field:nth-child(2){min-height:calc(2 * 1.45em + 2px)}
.ldg-hashes{margin-top:auto;padding-top:18px}
.ldg-rec+.ldg-rec::before{left:-34px;top:47px;width:24px;height:1.5px;box-shadow:none}
/* ---- The delta: mocks centered, captions in the top corners, the knob and its hint at the foot ---- */
.page-home .mock{top:50%;transform:translateY(-50%)}
.page-home .wipe-prod .wipe-cap{left:auto;right:40px;width:300px}
.page-home .wipe-handle span{top:auto;bottom:48px;transform:translateX(-50%)}
.page-home .wipe-hint{position:absolute;left:50%;bottom:77px;margin-left:43px;transform:translateY(50%);font-style:normal;font-size:14px;font-weight:500;letter-spacing:.01em;color:#fff;white-space:nowrap;transition:opacity .4s var(--ease)}
.page-home .wipe.is-dragged .wipe-hint{opacity:0}
/* The list starts 120 px down (round 5 review): at 96 the panel title sat about 10 px above "Integration" while the
list runs on a 35 px rhythm; the title now has the list's own spacing beneath it. */
.page-home .wipe-nouns{top:120px;bottom:40px}
.page-home .mock-marks{gap:8px 14px}
.page-home .mock-marks img{height:16px}
/* ---- Delta into Ownership: one hairline between two white chapters; ownership as two columns ------ */
.page-home .delta{padding-bottom:120px}
.page-home .own{padding-top:0}
.page-home .own::before{content:"";display:block;width:min(1180px,calc(100% - 2*var(--gutter)));height:1px;margin:0 auto 120px;background:#E2E8F0}
.own-side{margin-top:36px}
.own-side .own-terms{margin-top:0}
.own-side .text-link{display:inline-block;margin-top:28px}
@media (min-width:1024px){
.own-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}
.own-grid .t-head{grid-column:1/-1}
.own-grid .t-statement,.own-grid .own-body{grid-column:1/8;max-width:none}
.own-side{grid-column:9/13;align-self:start;padding:30px 0 0 32px;border-left:1px solid #E2E8F0}
.own-side .own-terms{font-size:17px;line-height:1.55;color:#475569}
.own-side .text-link{font-size:18px}
}
/* ---- The close: four calls to action on one baseline ------------------------------------------- */
.end-ctas{align-items:baseline}
/* ---- Phone ------------------------------------------------------------------------------------- */
@media (max-width:767px){
/* The desktop pause between the two white chapters is 120 px of padding plus a 120 px rule.
On a phone that stack is about 240 px of empty white above Own Your Intelligence. */
.page-home .delta{padding-bottom:44px}
.page-home .own::before{margin-bottom:36px}
.ch-link-end{padding-bottom:calc(var(--beat) - 32px)}
.page-home .models-after{margin-top:40px}
.stk-models-words{margin-top:28px}
.stk-models-words .stk-tier{font-size:12px}
.ldg-rec{margin-right:0}
.ldg-field:nth-child(2){min-height:0}
.ldg-rec+.ldg-rec::before{left:14px;top:-2px;width:2px;height:22px}
.page-home .models .marks-xl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:28px}
.page-home .models .marks-xl li img{height:calc(var(--h,56px)*.46)}
.stk-apps{scroll-padding-inline-start:var(--gutter)}
.page-home .people .t-statement{font-size:24px;line-height:1.3;font-weight:300;max-width:100%}
.page-home .wipe-demo,.page-home .wipe-prod{display:flex;flex-direction:column;padding:22px 18px 32px}
.page-home .wipe-cap,.page-home .wipe-prod .wipe-cap{position:static;order:-1;width:auto;font-size:22px;margin:0 0 16px}
.page-home .mock{position:static;transform:none;margin-top:0}
.page-home .wipe-nouns{margin:22px -18px -32px;padding:24px 18px 26px}
.page-home .wipe-hint{display:none}
.gov-record{grid-template-columns:1fr;row-gap:6px}
.gov-record span[data-l]::before{content:attr(data-l);display:inline-block;min-width:64px;font-size:13px;font-weight:500;color:rgba(255,255,255,.55)}
}
@media (max-width:480px){
.clouds{grid-template-columns:1fr;row-gap:28px}
.clouds li:nth-child(n+2)::after{content:"";position:absolute;left:0;right:0;top:-14px;height:3px;background:var(--accent)}
}
/* ---- Phone: the six gates slide on one line, and the demo comparison slides between its two cards.
Desktop is unchanged. The model names stay one row and slide if the three do not fit. ---- */
@media (max-width:767px){
.gov-models-words{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0 22px;width:calc(100% + 2*var(--gutter));margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:0 var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.gov-models-words::-webkit-scrollbar{display:none}
.gov-models-words button{flex:0 0 auto;height:auto;padding:8px 0 12px;justify-content:flex-start}
.gov-models-words button span{font-size:16px;white-space:nowrap}
.gov-models-words button::after{left:0;right:0;top:auto;bottom:0;width:auto;height:3px;background:#fff;transform:scaleX(0);transform-origin:left}
.gov-models-words button[aria-selected="true"]::after,.gov-models-words button:focus-visible::after{transform:scaleX(1)}
.gov-figure[data-autoplay] .gov-track,.gov-track{height:auto;margin-top:12px;padding-left:0}
.gov-gates{position:relative;display:flex;flex-direction:row;align-items:stretch;box-sizing:border-box;width:calc(100% + 2*var(--gutter));margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100% - 168px) / 2));padding:8px max(var(--gutter),calc((100% - 168px) / 2)) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.gov-gates::-webkit-scrollbar{display:none}
.gov-gate{flex:0 0 168px;width:168px;scroll-snap-align:center;flex-direction:column;align-items:flex-start;text-align:left;height:auto;gap:2px}
.gov-gate .gate-word{font-size:26px;color:rgba(255,255,255,.44)}
.gov-gate .gate-sub{margin-top:2px;font-size:14px;color:rgba(255,255,255,.5)}
.gov-gate.is-lit .gate-word,.gov-gate.is-lit .gate-sub{color:#fff}
.gov-gate::after{display:block;width:28px;height:3px;margin-top:12px;background:rgba(255,255,255,.22)}
.gov-gate.is-lit::after{width:48px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.gov-line,.gov-request{display:none}
.gov-note{position:static;text-align:left;font-size:16px;line-height:1.45;margin:14px 0 0;min-height:3em}
.page-home .wipe{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;width:100%;max-width:none;height:auto;margin:28px 0 0;padding:0 calc(88px - var(--gutter)) 0 var(--gutter);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);border-radius:0;box-shadow:none;background:transparent;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:none}
.page-home .wipe::-webkit-scrollbar{display:none}
.page-home .wipe-demo,.page-home .wipe-prod{position:relative;inset:auto;clip-path:none;flex:0 0 calc(100vw - 72px);width:calc(100vw - 72px);scroll-snap-align:start;display:flex;flex-direction:column;margin:0;padding:16px 16px 18px;border-radius:8px;min-width:0}
.page-home .wipe-demo{margin-right:12px;background:#eef1f6;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
.page-home .wipe-prod{background:var(--navy)}
.page-home .wipe-cap,.page-home .wipe-prod .wipe-cap{position:static;order:-1;width:auto;font-size:22px;margin:0 0 12px}
.page-home .wipe-demo .wipe-cap{color:#0F172A}
.page-home .wipe-prod .wipe-cap{color:#fff}
.page-home .wipe .mock{position:static;width:100%;max-width:none;margin-top:0;transform:none}
.page-home .wipe-nouns{position:static;width:auto;display:flex;flex-direction:column;gap:12px;margin:18px 0 0;padding:16px 0 0;background:transparent;border-top:1px solid rgba(255,255,255,.16)}
.page-home .wipe-nouns b{font-size:22px}
.page-home .wipe-handle{display:none}
.page-home .mock-bar{height:auto;min-height:36px;padding:8px 12px;align-items:flex-start}
.page-home .mock-bar em{font-size:13px;line-height:1.35;white-space:normal;margin-left:6px}
}
/* ---- Reduced motion ------------------------------------------------------------------------ */
/* ============================================================================
The Sprinklenet AI Newsletter band (templates/part-newsletter.php), November 3. One element for the family: the
accent ground, the name as the headline, Jamie's line and signature on the left, the form with its micro line and
the archive route on the right. In every bundle, since Home, Company, Insights, and the posts all print it.
============================================================================ */
.nl-band{padding:112px 0}
#newsletter{scroll-margin-top:72px}
/* The two columns start at the same line, so the form holds its place when the error line appears beneath the field.
Where the band closes the page (nl-close: Insights, the posts) the grid sits on the 1300 px measure, flush with the
footer and the content above it; before a close (Home, Company) it sits on the chapters' head, which is the same
1300 px measure since round 4b (r4.css .ch-head). */
.nl-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:96px;align-items:start}
/* 52 px is the statement size of the type scale (t-statement at its top), set Black here; 40 on the phone as t-head. */
.nl-head{font-size:52px;font-weight:900;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.nl-line{margin-top:24px;max-width:600px;font-size:21px;line-height:1.5;color:rgba(255,255,255,.92);text-wrap:pretty}
.nl-sig{margin-top:18px;font-size:15px;font-weight:500;letter-spacing:.02em;color:#fff}
/* The sign-up row (round 5, November 3): the newsletter avatar, a 56 px disc the height of the field, inside the form
before the field and the button; the error line wraps beneath the row. On the phone the form is a two-column grid:
the avatar (48 px) beside the field, Subscribe full width beneath both, the error line beneath that. */
.nl-form{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.nl-avatar{flex:none;width:56px;height:56px;border-radius:50%;display:block;align-self:flex-start}
/* Focus is a solid white outline, offset from the control (5.2:1 on the accent ground); the shared accent ring would
vanish on this ground, and a half-white ring sat under the 3:1 minimum. */
.nl-form input[type=email]{flex:1 1 220px;min-width:0;height:56px;padding:0 20px;border:0;border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-size:17px;line-height:1;outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s var(--ease);-webkit-appearance:none;appearance:none}
.nl-form input[type=email]::placeholder{color:#64748B}
.nl-form input[type=email]:focus{outline-color:#fff}
.nl-form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.nl-form .btn{flex:none;height:56px;padding:0 28px}
.nl-form .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:none}
.nl-form .btn[disabled]{opacity:.7;cursor:default}
.nl-form .err{flex-basis:100%;font-size:15px;font-weight:500;line-height:1.4;color:#fff}
.nl-form .err:empty{display:none}
.nl-form .done{display:block;font-size:22px;font-weight:500;line-height:1.4;color:#fff;padding:14px 0}
.nl-cta .nl-archive{display:inline-block;margin-top:24px;font-size:17px;color:#fff}
/* A white button on the accent ground (the Government and Teaming and Capabilities heroes, this band) had no visible
hover: r4.css brightens it by 1.14, which does nothing to white. One rule for the family: the white dims a step. */
.ch-blue .btn-white:hover,.ch-blue .btn-accent:hover{filter:brightness(.92)}
/* On a chromed document, chrome.css turns every button's label white on hover, focus, and press (against the theme's
a:hover), which blanked this white button on every post; a button on the blue ground keeps its navy label there. */
.sn-v2-chrome .ch-blue .btn:is(:hover,:focus-visible,:active){color:var(--navy)}
/* Below 1181 px the right column would wrap the button under the field; the form moves beneath the copy instead. */
@media (max-width:1180px){
.nl-band{padding:96px 0}
.nl-grid{grid-template-columns:1fr;row-gap:44px;align-items:start}
.nl-form{max-width:640px}
}
@media (max-width:767px){
.nl-band{padding:72px 0}
#newsletter{scroll-margin-top:60px}
.nl-head{font-size:40px}
.nl-line{margin-top:16px;font-size:18px}
.nl-sig{margin-top:12px;font-size:14px}
.nl-grid{row-gap:32px}
.nl-form{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;align-items:center}
.nl-avatar{width:48px;height:48px;align-self:center}
.nl-form input[type=email]{grid-column:2;height:52px;font-size:16px}
.nl-form .btn{grid-column:1 / -1;width:100%;justify-content:center;height:52px}
.nl-form .err,.nl-form .done{grid-column:1 / -1}
.nl-form .done{font-size:19px}
.nl-cta .nl-archive{margin-top:20px;font-size:16px}
}
/* ============================================================================
Round 5 (November 4): the chrome lane. The newsletter page's sign-up, the phone bar's hit areas and the open
menu's lock, and the two film heroes on the family's measure from 1440 px up.
============================================================================ */
/* ---- /newsletter/: the avatar inside the hero form, as on the band (templates/newsletter.php). resources.css loads
after this file, so the page selector outranks its phone stack (field full width, button full width). -------- */
.page-newsletter .res-form .res-avatar{flex:none;width:58px;height:58px;border-radius:50%;display:block;align-self:flex-start;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
.nl-form .nl-avatar{box-shadow:0 0 0 1.5px rgba(255,255,255,.38)}
@media (max-width:767px){
.page-newsletter .res-form{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;align-items:center}
.page-newsletter .res-form .res-avatar{width:48px;height:48px;align-self:center}
.page-newsletter .res-form input[type=email]{grid-column:2;flex-basis:auto}
.page-newsletter .res-form .btn{grid-column:1 / -1;width:100%;justify-content:center}
.page-newsletter .res-form .err,.page-newsletter .res-form .done{grid-column:1 / -1}
}
/* ---- The phone bar: the brand and Contact links carry 44 px hit areas without moving a pixel (the pseudo-element
extends the target; .contact keeps ::after for its underline). The open menu locks the page behind it
(templates/part-nav.php adds nav-lock to ) and keeps its own scrolling to itself. ---------------------- */
.nav .brand{position:relative}
.nav .brand::before{content:"";position:absolute;inset:-12px -8px}
@media (max-width:767px){
.nav .contact::before{content:"";position:absolute;inset:-12px -10px}
}
html.nav-lock{overflow:hidden}
html.nav-lock body{overflow:hidden}
.nav-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* ---- The film heroes on the measure (STATUS, round four b, open item): from 1440 px up the Home and Company hero
copy and each film's pause control sit on the centered 1300 px measure, where every chapter head and every
other hero already sit (70 px at 1440, 310 px at 1920). co.css loads after this file, so the page selector
carries the Company rule. The Home title is held at 132 px from 1440 up (decision 3 set 128 at 1440 and 156
from 1753): on the measure, a 156 px title ends at 1229 px at 1920 and runs into the lit R07 panel (left bezel
about 1160); at 132 px it ends at about 1090 at 1920 and 927 at 1600, the clearance decision 3 measured at
1440. Past 1920 the title grows again toward 156 as the measure's left edge moves in. ------------------------ */
@media (min-width:1440px){
.hero-copy,.page-co .co-copy{left:max(var(--gutter),calc(50% - var(--measure)/2));right:max(var(--gutter),calc(50% - var(--measure)/2))}
.page-co .co-pause{right:max(var(--gutter),calc(50% - var(--measure)/2))}
.page-home .t-hero{font-size:132px}
}
@media (min-width:1920px){
.page-home .t-hero{font-size:clamp(132px,calc(132px + (100vw - 1920px)*.027),156px)}
}
/* ============================================================================
Round 5 (November 4): the site-wide polish pass. Four motions, applied the same way everywhere and never to the
layout: chapter heads arrive as they enter, buttons lift a step, links draw the family's underline, and focus is
one crisp ring. The accent line keeps its meaning (site.css: "the only rule on the site"); the new hairlines are
neutral. Every motion is opacity, transform, or box-shadow, so nothing shifts; reduced motion turns it all off.
============================================================================ */
/* ---- Chapter heads arrive as they enter (templates/part-footer.php marks them; off under reduced motion, ?static,
and without the script, where nothing is ever hidden) --------------------------------------------------------- */
html.sn-motion .sn-pre{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.sn-motion .sn-pre.is-in{opacity:1;transform:none}
html.sn-motion .sn-pre.is-in+.sn-pre.is-in{transition-delay:.1s}
html.sn-motion .sn-pre.is-in+.sn-pre.is-in+.sn-pre.is-in{transition-delay:.2s}
/* The close band's marks: the block arrives, then its line draws from the center. */
html.sn-motion .close-marks.sn-pre .close-line{transform:scaleX(0);transform-origin:center;transition:transform 1s var(--ease) .3s}
html.sn-motion .close-marks.sn-pre.is-in .close-line{transform:scaleX(1)}
/* ---- Buttons lift a step on hover and settle on press; the shadow takes the button's own color ------------------- */
.btn{transition:filter .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none;transition-duration:.1s}
.btn-accent:hover,.btn-white:hover,.nav .btn-white:hover{box-shadow:0 12px 28px -12px rgba(37,99,235,.7)}
.ch-blue .btn-white:hover,.ch-blue .btn-accent:hover{box-shadow:0 12px 28px -12px rgba(10,14,26,.5)}
.ch-white .btn-white:hover,.ch-white .btn-accent:hover,.btn-navy:hover,.btn-ink:hover{box-shadow:0 12px 28px -12px rgba(11,39,64,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff,0 12px 28px -14px rgba(0,0,0,.6)}
/* ---- The footer: a hairline opens it; every link draws the family's underline on hover and focus ---------------- */
.footer{border-top:1px solid rgba(255,255,255,.08)}
.footer-links a,.footer-social a,.footer-legal a{position:relative}
.footer-links a::after,.footer-social a::after,.footer-legal a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.footer-links a::after{bottom:3px}
.footer-links a:hover::after,.footer-links a:focus-visible::after,.footer-social a:hover::after,.footer-social a:focus-visible::after,.footer-legal a:hover::after,.footer-legal a:focus-visible::after{transform:scaleX(1)}
.footer-social a{transition:color .3s var(--ease)}
.footer-legal a{transition:color .3s var(--ease)}
.footer-label{color:rgba(255,255,255,.56)}
/* ---- The settled bar carries a hairline at its foot ---------------------------------------------------------------- */
.nav.is-settled{box-shadow:0 1px 0 rgba(255,255,255,.07)}
/* ---- Focus: one ring, white on the dark grounds and on the accent band, accent on white ----------------------------- */
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:none}
.ch-white .btn:focus-visible,.g-white .btn:focus-visible,.page-light .btn:focus-visible,.page-light .ch-white .btn:focus-visible{outline-color:var(--accent)}
.ch-black .btn:focus-visible,.ch-navy .btn:focus-visible,.ch-blue .btn:focus-visible,.nav .btn:focus-visible,.hero .btn:focus-visible{outline-color:#fff}
.nav a:focus-visible,.nav .menu:focus-visible,.nav-panel a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.footer a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.text-link:focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px}
.nl-form input[type=email]:focus-visible{outline-color:#fff}
/* ---- Reduced motion: every motion in this block is off -------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
html.sn-motion .sn-pre{opacity:1;transform:none;transition:none}
html.sn-motion .close-marks.sn-pre .close-line{transform:none;transition:none}
.btn,.btn:hover,.btn:active{transform:none;transition:none}
.footer-links a::after,.footer-social a::after,.footer-legal a::after{transition:none}
}
/* ---- The phone menu's items never shrink (round 5, November 4): the panel is a column flexbox with overflow:auto, so
on a 360 px screen, where the list runs past the viewport, the 52 px button was shrinking to its text (24 px)
while the links held. Every item keeps its size and the panel scrolls. ------------------------------------- */
.nav-panel>*{flex-shrink:0}
/* ============================================================================
Round 5 review (November 4): the core lane's shared fixes. Each is one rule, applied where the review measured it.
============================================================================ */
/* ---- Home hero on a phone. The film box is min(100svh, 177.78vw). On a short viewport the bottom-anchored copy
was taller than that box, so overflow hid the first title line and left only "in Production". Measured in
landscape at 750 x 342, and again in DuckDuckGo portrait, where the browser chrome makes svh shorter than
Chrome on the same phone. The copy sits in the flow under the bar. The box stays at least the film frame
and grows when the copy needs it. The film and the poster still fill the box. Tall portrait is the same
frame as before: the copy remains at the bottom of that frame. ------ */
@media (max-width:767px){
.page-home .hero{height:auto;min-height:min(100svh,177.78vw);display:flex;flex-direction:column;justify-content:flex-end;padding-top:92px}
.page-home .hero-copy{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--gutter) 40px}
}
/* ---- The footer's social and legal links carry 44 px hit areas without moving a pixel (WCAG 2.5.8; X measured 10 x 22).
The pseudo-element extends the target 11 px above and below and 6 px to each side, inside the 24 to 28 px gaps,
so neighbors never overlap; ::after stays the underline. ----------------------------------------------------- */
.footer-social a::before,.footer-legal a::before{content:"";position:absolute;inset:-11px -6px}
/* ---- The phone menu fits the screen: on a 664 px tall phone the nine items ran past the fold with nothing to say so.
Under 720 px tall the rows close up (48 px rows, 24 px type) so every item shows; under 480 px tall (phones in
landscape) the items stand in two columns. --------------------------------------------------------------------- */
@media (max-width:767px) and (max-height:720px){
.nav-panel{padding:84px var(--gutter) 24px;gap:0}
.nav-panel a{font-size:24px;line-height:1.25;padding:9px 0}
.nav-panel a::after{bottom:5px}
.nav-panel .panel-cta{height:48px;margin-bottom:14px;font-size:16px}
.nav-panel .panel-contact{margin-top:4px;font-size:24px}
}
@media (max-height:480px){
.nav.is-open+.nav-panel{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:0 40px;padding:76px var(--gutter) 20px}
.nav-panel a{font-size:22px;line-height:1.25;padding:7px 0}
.nav-panel a::after{bottom:4px}
.nav-panel .panel-cta{grid-column:1 / -1;height:44px;margin-bottom:10px;font-size:16px}
.nav-panel .panel-contact{margin-top:0;font-size:22px}
}
/* ---- Narrow phones (under 380 px): Home's two trailing chapter links step down a size so each stays on one line with
its arrow beside the last word ("Every Application, With Its Screens" wrapped at 360 and stranded the arrow). -- */
@media (max-width:379px){
.page-home .ch .ch-after .text-link,.page-home .ch .rl-after .text-link{font-size:15px}
}
/* ---- Print: every chapter head paints (the reveal-on-enter class never hides a line on paper or in a PDF export). ----- */
@media print{
html.sn-motion .sn-pre{opacity:1!important;transform:none!important;transition:none!important}
}
/* ============================================================================
Round 5 review, second pass (November 4; core lane). Each rule names the measurement it answers.
============================================================================ */
/* Headlines break in balance everywhere (card titles, scene names, the wipe captions, the H1s): no large heading ends on
one stranded word (Console, Cadence, Developer, Sprinklenet). text-wrap is inherited, so the H1s' block spans balance too. */
h1,h2,h3,.t-h1,.scene-name,.b-title,.wipe-cap,.sn-post-card-title{text-wrap:balance}
/* From 1540 px up the figures that open with text join the 1300 px measure of the chapter heads (at 1920 the cloud band,
the Knowledge Spaces clouds row, and the dashboards figure opened at 260 under heads at 310). */
@media (min-width:1540px){.cloud-band ul,.clouds,.page-home .evd-figure,.gov-figure{width:min(1300px,calc(100% - 2*var(--gutter)))}}
/* Narrow phones (under 380 px): the H1 steps to 44 px so Government and Teaming, Knowledge Spaces, and Advisory keep
their first call in the first screen, and the phone menu's items step to 26 px so Government and Teaming holds one line. */
@media (max-width:379px){.t-h1{font-size:44px}.nav-panel a{font-size:26px}}
/* The footer's X link is 10 px wide; its hit area alone widens to 44 px (17 px each side, inside the 28 px gaps). */
.footer-social a[href*="x.com"]::before{inset:-11px -17px}
/* ============================================================================
Shared by the interior pages (Knowledge Spaces, Applications, and the pages that follow): the close band on black
with both marks. Loads after site.css, r4.css, home.css, v2.css and before the page's own layer.
============================================================================ */
.close-band{text-align:center;padding:calc(var(--beat) + 40px) 0 var(--beat)}
.close-copy .t-deck{margin:30px auto 0;max-width:860px}
.close-marks{display:flex;flex-direction:column;align-items:center;margin-bottom:64px}
.close-marks .wm{width:340px;height:auto}
.close-marks .ks{width:300px;height:auto;margin-top:26px}
.close-marks .close-line{width:min(100%,520px);height:1.5px;margin-top:22px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.close-ctas{margin-top:48px;display:flex;justify-content:center;align-items:center;gap:20px 32px;flex-wrap:wrap}
.close-ctas .text-link{font-size:18px;color:#fff}
@media (max-width:767px){
.close-band{padding:var(--beat) 0}
.close-marks{margin-bottom:40px}
.close-marks .wm{width:220px}
.close-marks .ks{width:200px;margin-top:16px}
.close-ctas{margin-top:32px;flex-direction:column;align-items:stretch;gap:14px}
.close-ctas .btn{justify-content:center}
.close-ctas .text-link{align-self:center;font-size:16px}
}
/* Round 5 (November 4, chrome lane): the close band stands on a lit floor, the same accent light the film world uses,
rising from the foot of the band behind the marks and the buttons; the marks' line draws on arrival (css/v2.css). */
.ch-black.close-band{background:radial-gradient(70% 58% at 50% 100%,rgba(37,99,235,.22) 0%,rgba(37,99,235,0) 72%),var(--navy-black)}
/* ============================================================================
Applications on private staging: the layer after site.css, r4.css, home.css, v2.css, interior.css.
Six chapters: the title and the showreel (the nine screens from Home) on black; the nine scenes under three labels
on navy, black, and electric blue; bespoke applications on white; agentic workflows on navy; adoption on white;
the close on black with both marks.
============================================================================ */
/* ---- 1. Hero: the copy, then the showreel as the first screen --------------------------------------- */
.apps-hero{padding:calc(72px + 96px) 0 96px}
.apps-hero-copy{width:min(1300px,calc(100% - 2*var(--gutter)))}
.apps-h1{font-size:clamp(52px,6.2vw,92px);max-width:1100px;text-wrap:balance}
.apps-hero .t-deck{color:#fff;max-width:900px}
.apps-hero .actions{margin-top:40px}
.page-apps .rl-pin{margin-top:72px}
/* ---- 2. The scenes ----------------------------------------------------------------------------------- */
/* The group heads and the scenes sit on the 1300 px measure with the chapter heads (round 5 review): on the 1400 px
breakout three H2s and every scene's copy column stood 50 px left of the page's other headings at 1920. */
.grp-head{position:relative;width:min(1300px,calc(100% - 2*var(--gutter)));padding-top:30px}
.grp-head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.grp-head::after{content:"";position:absolute;left:0;top:0;width:3px;height:30px;background:var(--accent)}
.ch-blue .grp-head::before,.ch-blue .grp-head::after{background:#fff}
.grp-label{font-size:clamp(28px,2.5vw,36px);font-weight:900;letter-spacing:-.035em;line-height:1.05;color:#fff}
.scene{width:min(1300px,calc(100% - 2*var(--gutter)));margin:88px auto 0;display:grid;grid-template-columns:380px minmax(0,1fr);column-gap:56px;align-items:start;scroll-margin-top:96px}
.scene+.scene{margin-top:120px;padding-top:120px;border-top:1px solid rgba(255,255,255,.14)}
.ch-blue .scene+.scene{border-top-color:rgba(255,255,255,.4)}
.scene-copy{padding-top:6px}
.scene-name{font-size:clamp(40px,3.8vw,56px);font-weight:900;letter-spacing:-.04em;line-height:.98;color:#fff;text-wrap:balance}
/* The console scene's three-word name (round 5 review, second pass): at 56 px "A Client-Facing" cannot fit the 380 px column,
so with the compound held together the first line was "A" alone; at 46 px the name reads "A Client-Facing" / "Console". */
#console .scene-name{font-size:clamp(36px,3.2vw,46px)}
.scene-body{margin-top:24px;font-size:19px;line-height:1.5;color:rgba(255,255,255,.9)}
.ch-blue .scene-body{color:#fff}
.scene-tabs{margin-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.scene-tabs button{position:relative;text-align:left;font-size:17px;font-weight:500;color:rgba(255,255,255,.6);padding:7px 0 7px 18px;transition:color .3s var(--ease);outline:none;white-space:nowrap}
.scene-tabs button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.ch-blue .scene-tabs button{color:rgba(255,255,255,.9)}
.ch-blue .scene-tabs button::before{background:#fff}
.scene-tabs button[aria-selected="true"],.scene-tabs button:hover,.scene-tabs button:focus-visible{color:#fff}
.scene-tabs button[aria-selected="true"]::before,.scene-tabs button:focus-visible::before{transform:scaleY(1)}
.scene-cta{margin-top:36px}
/* A scene's call to action can run to two lines in the copy column (Request a Knowledge Spaces VRMS Demonstration),
so it is set inline: the underline follows every line and the arrow follows the last word. */
.scene-cta .text-link{display:inline;font-size:18px;color:#fff;padding:0;line-height:1.6;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:8px}
.ch-blue .scene-cta .text-link{text-decoration-color:#fff}
.scene-cta .text-link::before{display:none}
.scene-cta .text-link::after,.scene-cta .text-link:hover::after,.scene-cta .text-link:focus-visible::after{content:"";position:static;display:inline-block;width:15px;height:15px;margin-left:10px;vertical-align:-1px;background:currentColor;box-shadow:none;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:transform .35s var(--ease)}
.scene-cta .text-link:hover::after,.scene-cta .text-link:focus-visible::after{transform:translateX(5px)}
.scene-stage{position:relative;outline:none}
.scene-frame{display:none;margin:0}
.scene-frame.is-active{display:block;animation:scene-in .5s var(--ease) both}
@keyframes scene-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scene-frame img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8)}
.ch-blue .scene-frame img{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 40px 80px -30px rgba(10,14,26,.6)}
.scene-frame figcaption{display:none}
/* ---- 3 and 5. Type beside a screen, on white -------------------------------------------------------- */
.side-grid{width:min(1300px,calc(100% - 2*var(--gutter)));margin:56px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 720px;column-gap:72px;align-items:center}
.side-copy .t-body{font-size:22px;line-height:1.5;max-width:520px}
.side-links{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px 40px}
.side-links .text-link{font-size:20px}
.side-screen{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(15,23,42,.4),0 0 0 1px rgba(15,23,42,.08)}
.side-screen::after{display:none}
.side-screen img{width:100%;height:auto;display:block}
/* ---- 4. Agentic workflows on navy ------------------------------------------------------------------- */
.agents .t-deck{max-width:860px}
.agents-actions{margin-top:40px}
.wide-screen{width:min(1300px,calc(100% - 2*var(--gutter)));margin:72px auto 0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8),0 0 120px rgba(37,99,235,.14)}
.wide-screen::after{display:none}
.wide-screen img{width:100%;height:auto;display:block}
/* ---- Tablet ------------------------------------------------------------------------------------------ */
@media (max-width:1100px){
.scene{grid-template-columns:minmax(0,1fr);row-gap:32px}
.scene-body{max-width:760px}
.scene-tabs{flex-direction:row;flex-wrap:wrap;gap:4px 26px}
.scene-tabs button{padding:6px 0}
.scene-tabs button::before{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0);transform-origin:left}
.scene-tabs button[aria-selected="true"]::before,.scene-tabs button:focus-visible::before{transform:scaleX(1)}
.side-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
.side-copy .t-body{max-width:760px}
}
/* ---- Phone ------------------------------------------------------------------------------------------- */
@media (max-width:767px){
.apps-hero{padding:calc(60px + 56px) 0 48px}
.apps-h1{font-size:46px}
.apps-hero .t-deck{margin-top:20px}
.apps-hero .actions{margin-top:28px;flex-direction:column;align-items:stretch}
.apps-hero .actions .btn{justify-content:center}
.page-apps .rl-pin{margin-top:48px}
.grp-head{padding-top:22px}
.grp-head::after{height:22px}
.grp-label{font-size:26px}
.scene{width:100%;margin-top:48px;display:flex;flex-direction:column;align-items:stretch;scroll-margin-top:80px}
.scene+.scene{margin-top:56px;padding-top:56px;border-top:0}
.scene+.scene::before{content:"";display:block;order:-1;height:1px;margin:-56px var(--gutter) 56px;background:rgba(255,255,255,.14)}
.scene-copy{display:contents}
.scene-name,.scene-body,.scene-cta{padding:0 var(--gutter)}
.scene-name{font-size:36px}
.scene-body{margin-top:14px;font-size:17px}
.scene-tabs{display:none}
/* The screens stand on one line: bottoms and captions align, whatever each screen's height. */
.scene-stage{order:2;display:flex;align-items:flex-end;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);gap:14px;margin-top:24px;padding:0 var(--gutter) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scene-stage::-webkit-scrollbar{display:none}
.scene-frame,.scene-frame.is-active{display:block;flex:0 0 84vw;width:84vw;animation:none;scroll-snap-align:start}
.scene-frame img{border-radius:6px}
.scene-frame figcaption{display:block;margin-top:10px;font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
.ch-blue .scene-frame figcaption{color:#fff}
.scene-cta{order:3;margin-top:22px}
/* A 44 px tap target on the phone (round 5 review; the link measured 20 px): the padding extends the target 11 px
above and below and the negative margin keeps the text where it was. */
.scene-cta .text-link{display:inline-block;font-size:17px;padding:11px 0;margin:-11px 0}
.side-grid{margin-top:32px;row-gap:28px}
.side-copy .t-body{font-size:17px}
.side-links{margin-top:24px;flex-direction:column;align-items:flex-start;gap:14px}
.side-links .text-link{font-size:17px}
.side-screen{border-radius:6px}
.agents-actions{margin-top:28px}
.agents-actions .btn{width:100%;justify-content:center}
.wide-screen{margin-top:36px;border-radius:6px}
}
/* ---- Reduced motion ----------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.scene-frame.is-active{animation:none}
.scene-tabs button,.scene-tabs button::before{transition:none}
}
/* ============================================================================
Governance on private staging: the layer after site.css, r4.css, home.css, v2.css, interior.css, apps.css (the
scene stage and the side grid are shared with Applications). Eight chapters, four grounds: the claim and the record
chain over the operations floor at blue hour; the program on navy; Merlin on black; the controls on black; evaluation
on navy; the audit trail on white; the three sets of controls on navy; the close on black with both marks.
============================================================================ */
/* ---- 1. Hero: the claim, then the ledger ------------------------------------------------------------ */
.gv-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(72px + 96px) 0 104px}
.gv-hero-still{object-position:center 40%}
.gv-hero-shade{background:linear-gradient(180deg,rgba(10,14,26,.7) 0%,rgba(10,14,26,.78) 40%,rgba(10,14,26,.97) 100%),linear-gradient(90deg,rgba(10,14,26,.6),rgba(10,14,26,0) 64%)}
.gv-hero-copy{width:min(1300px,calc(100% - 2*var(--gutter)))}
.gv-h1{max-width:none;text-shadow:0 2px 24px rgba(10,14,26,.35)}
.gv-hero .t-deck{color:#fff;max-width:900px;text-shadow:0 1px 14px rgba(10,14,26,.5)}
.gv-hero .ldg{width:min(1300px,calc(100% - 2*var(--gutter)));margin-top:96px}
/* The four cards are written by r4.js; the strip reserves their height (344 px at 1440 and 1920) so nothing shifts on first paint. */
@media (min-width:768px){.gv-hero .ldg-strip{min-height:344px}}
.gv-hero .ldg-bar{border-bottom-color:rgba(255,255,255,.28)}
.gv-hero .ldg-rec{border-bottom-color:rgba(255,255,255,.28)}
/* ---- 2. The program ------------------------------------------------------------------------------- */
.gv-program .t-head{max-width:1180px;text-wrap:balance}
.gv-program .t-deck{max-width:860px}
.page-gov .ch-after .text-link{font-size:20px;color:#fff}
/* ---- 3. Merlin: the tab stage, the call to action and the eight marks in the copy column --------------- */
.gv-merlin{padding-bottom:120px}
.gv-merlin .t-deck{max-width:860px}
.gv-scene{margin-top:72px}
.gv-scene .scene-copy{padding-top:4px}
.gv-scene .scene-tabs{margin-top:0}
.gv-scene .scene-tabs button{font-size:19px;padding:9px 0 9px 20px}
.gv-scene .scene-cta{margin-top:40px}
.gv-marks{margin-top:56px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;align-items:center}
.gv-marks li{display:flex;align-items:center;gap:10px;min-height:28px}
.gv-marks li img{height:var(--h,26px);width:auto}
.gv-marks li span{font-size:20px;font-weight:500;color:#fff;white-space:nowrap;line-height:1}
/* ---- 4. The controls: policy, trace, control; then the two screens ----------------------------------- */
.gv-controls{padding-top:0}
/* Text blocks sit on the 1300 px measure with the chapter heads (round 5 review, November 4): on the 1400 px breakout
each stood 50 px left of its own heading at 1920. Figures and screens keep the 1400 px breakout. */
.gv-controls::before{content:"";display:block;width:min(1300px,calc(100% - 2*var(--gutter)));height:1px;margin:0 auto 120px;background:rgba(255,255,255,.14)}
.gv-controls .t-deck{max-width:860px}
.policy-figure{width:min(1300px,calc(100% - 2*var(--gutter)));margin:72px auto 0}
.policy-head,.policy-row{display:grid;grid-template-columns:minmax(0,5fr) 120px minmax(0,6fr);column-gap:40px;align-items:center}
.policy-head{padding-bottom:16px}
.policy-head span{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.policy-row{padding:28px 0;border-top:1px solid rgba(255,255,255,.14)}
.policy-row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.policy-text{font-size:24px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#fff}
.policy-trace{position:relative;display:block;height:1.5px;width:100%;background:rgba(255,255,255,.12)}
.policy-trace::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);transition:width .9s var(--ease)}
.policy-row.is-drawn .policy-trace::after{width:100%}
.policy-control{font-size:19px;line-height:1.5;color:rgba(255,255,255,.62);transition:color .5s var(--ease) .5s}
.policy-row.is-drawn .policy-control{color:#fff}
.gv-pair{width:min(1400px,calc(100% - 2*var(--gutter)));margin:88px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-items:start}
.gv-pair .screen{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8),0 0 120px rgba(37,99,235,.14)}
.gv-pair .screen::after{display:none}
.gv-pair .screen img{width:100%;height:auto;display:block}
/* ---- 5. Evaluation: type on navy --------------------------------------------------------------------- */
.gv-eval .t-deck{max-width:860px}
/* ---- 6. The audit trail on white -------------------------------------------------------------------- */
.gv-record{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0;grid-template-columns:1.1fr 1.3fr 1.8fr 1fr .7fr;column-gap:32px;row-gap:0}
.gv-record .record-head span{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);padding-bottom:16px}
.gv-record .record-row span{font-size:22px;line-height:1.3;color:var(--ink);padding:20px 0;border-top:1px solid #E2E8F0}
.gv-record .record-row:last-child span{border-bottom:1px solid #E2E8F0}
.gv-audit-grid{margin-top:96px}
.gv-audit-grid .side-copy .t-body{font-size:22px;max-width:520px}
/* ---- 7. The three sets of controls ---------------------------------------------------------------- */
.gv-who .t-deck{max-width:860px}
.gv-cols{width:min(1300px,calc(100% - 2*var(--gutter)));margin:72px auto 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.gv-cols .lstep b{font-size:clamp(30px,2.8vw,40px);letter-spacing:-.035em;line-height:1.05}
.gv-cols .lstep span{font-size:19px;line-height:1.5;margin-top:16px;color:rgba(255,255,255,.88);max-width:400px}
/* ---- Tablet ------------------------------------------------------------------------------------------ */
@media (max-width:1100px){
.gv-scene .scene-tabs{margin-top:0}
.gv-marks{grid-template-columns:repeat(4,max-content);column-gap:36px}
.policy-head,.policy-row{grid-template-columns:minmax(0,5fr) 72px minmax(0,6fr);column-gap:28px}
.policy-text{font-size:21px}
.policy-control{font-size:17px}
}
@media (max-width:1180px){
.gv-pair{grid-template-columns:1fr;row-gap:40px}
}
/* ---- Phone ------------------------------------------------------------------------------------------- */
@media (max-width:767px){
.gv-hero{min-height:0;padding:calc(60px + 56px) 0 64px}
.gv-hero-still{object-position:62% 50%}
.gv-h1{font-size:46px}
.gv-hero .t-deck{margin-top:20px}
.gv-hero .actions{margin-top:28px;flex-direction:column;align-items:stretch}
.gv-hero .actions .btn{justify-content:center}
.gv-hero .ldg{margin-top:48px}
.page-gov .ch-after .text-link{font-size:17px}
.gv-scene{margin-top:40px}
.gv-scene .scene-cta{margin-top:24px}
.gv-marks{order:4;margin:28px var(--gutter) 0;padding-top:24px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.gv-marks li img{height:calc(var(--h,26px)*.85)}
.gv-marks li span{font-size:17px}
.gv-merlin{padding-bottom:96px}
.gv-controls::before{margin-bottom:96px}
.policy-figure{margin-top:40px}
.policy-head{display:none}
.policy-row{grid-template-columns:1fr;row-gap:12px;padding:22px 0}
.policy-text{font-size:20px}
/* The trace is a left rule on the control line instead of a tick standing between the two lines. */
.policy-trace{display:none}
.policy-control{font-size:17px;padding-left:14px;border-left:2px solid rgba(255,255,255,.14);transition:color .5s var(--ease) .5s,border-color .5s var(--ease)}
.policy-row.is-drawn .policy-control{border-left-color:var(--accent)}
.gv-pair{margin-top:48px;row-gap:28px}
.gv-pair .screen{border-radius:6px}
.gv-record{margin-top:40px;display:flex;flex-direction:column}
.gv-record .record-head{display:none}
.gv-record .record-row{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:4px;padding:16px 0;border-top:1px solid #E2E8F0}
.gv-record .record-row:last-child{border-bottom:1px solid #E2E8F0}
.gv-record .record-row span{font-size:17px;padding:0;border:0!important}
.gv-record .record-row span:nth-child(1){font-weight:500}
.gv-record .record-row span:nth-child(2){grid-column:1}
.gv-record .record-row span:nth-child(3){grid-column:1;color:#475569}
.gv-record .record-row span:nth-child(4){grid-column:2;grid-row:1;text-align:right;color:#475569}
.gv-record .record-row span:nth-child(5){grid-column:2;grid-row:2;text-align:right;color:#475569;font-variant-numeric:tabular-nums}
.gv-audit-grid{margin-top:40px}
.gv-audit-grid .side-copy .t-body{font-size:17px}
.gv-cols{margin-top:40px;row-gap:32px;grid-template-columns:1fr}
.gv-cols .lstep b{font-size:30px}
.gv-cols .lstep span{font-size:17px;margin-top:10px}
}
/* ---- Reduced motion ----------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.policy-trace::after{transition:none}
.policy-control{transition:none}
}