/* ============================================================================
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)}
/* ============================================================================
Resources on private staging: the layer after site.css, r4.css, home.css, v2.css, interior.css, shared by
/papers/, /newsletter/, and /insights/ (and, through part-resources.php, the chrome archives and related posts).
Grounds: the claim on white (Papers runs the archive still full bleed beneath it; the newsletter sets the signup
beside the portrait, one screen tall); the papers and the newsletter's three sections as hairline rows and columns
on navy; the feature and the grouped rows on navy; the post index on white; the close on black with both marks.
.sn-post-card is the post card the single-post and archive templates match: a subgrid of five rows so the cards in
a row share lines.
============================================================================ */
/* Round 5 review r2 (November 4): the text containers (papers, columns, the feature, the groups, All Posts head, the rule,
the grid, the pager) sit on the 1300 px measure with the heads from 1540 px up (they were 1400). */
/* ---- Hero: the title and its line on white ------------------------------------------------------------------ */
.res-hero{padding:calc(72px + 96px) 0 96px}
.res-hero-copy{width:min(1300px,calc(100% - 2*var(--gutter)))}
.res-h1{max-width:1180px;text-wrap:balance}
.res-hero .t-deck{max-width:940px}
.page-res .t-deck,.res-paper-body,.res-micro,.res-cols .lstep p,.res-group a,.res-feature-excerpt{text-wrap:pretty}
.sn-post-card-title{text-wrap:balance}
.nw{white-space:nowrap}
/* ---- Papers: the archive still under the hero, full bleed ----------------------------------------------------- */
.res-band{height:78vh;min-height:520px;max-height:900px}
.res-band img{object-position:center 42%}
/* ---- Kickers and section labels ------------------------------------------------------------------------------ */
.res-kicker{font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:22px}
.ch-white .res-kicker{color:#64748B}
/* ---- Papers: each paper as a two-column hairline row ---------------------------------------------------------- */
.res-papers{width:min(1300px,calc(100% - 2*var(--gutter)));margin:72px auto 0;border-top:1px solid rgba(255,255,255,.14)}
.res-paper{display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:72px;padding:60px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.res-paper-side{display:flex;flex-direction:column;gap:14px;padding-top:8px}
/* The tag is two deliberate lines, type then topic, in every row. */
.res-paper-tag{font-size:15px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.4;color:rgba(255,255,255,.62)}
.res-paper-tag span{display:block}
.res-paper-meta{font-size:16px;line-height:1.4;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.res-paper h3{font-size:clamp(34px,3.2vw,46px);font-weight:900;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;max-width:900px}
.res-paper-body{margin-top:24px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.88);max-width:800px}
.res-paper .actions{margin-top:40px;gap:20px 40px}
.res-paper .actions .text-link{color:#fff}
.ch-white .res-papers{border-top-color:#E2E8F0}
.ch-white .res-paper{border-bottom-color:#E2E8F0}
.ch-white .res-paper-tag{color:#64748B}
.ch-white .res-paper-meta{color:#475569}
.ch-white .res-paper-body{color:#1e293b}
.ch-white .res-paper .actions .text-link{color:var(--ink)}
/* ---- Newsletter: the signup beside the portrait, one screen tall ---------------------------------------------- */
.res-nl-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(72px + 80px) 0 80px}
.res-nl-grid{width:min(1300px,calc(100% - 2*var(--gutter)));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:96px;align-items:center}
.res-nl-copy{width:auto;min-width:0}
.res-portrait{margin:0;width:100%;max-width:440px;justify-self:end}
.res-portrait img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 0 0 1px rgba(15,23,42,.1),0 30px 60px -30px rgba(15,23,42,.45)}
.res-form{position:relative;margin-top:44px;display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;max-width:680px}
.res-form input[type=email]{flex:1 1 300px;min-width:0;height:58px;padding:0 20px;border:1.5px solid #CBD5E1;border-radius:3px;background:#fff;color:var(--ink);font:inherit;font-size:18px;line-height:1;outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);-webkit-appearance:none;appearance:none}
.res-form input[type=email]::placeholder{color:#94A3B8}
.res-form input[type=email]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.res-form .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.res-form .btn{flex:none}
.res-form .btn[disabled]{opacity:.7;cursor:default}
.res-form .err{flex-basis:100%;font-size:15px;line-height:1.4;color:#B91C1C}
.res-form .err:empty{display:none}
.res-form .done{display:block;font-size:22px;font-weight:500;line-height:1.4;color:var(--ink);padding:14px 0}
.res-micro{margin-top:16px;font-size:15px;line-height:1.4;color:#64748B}
.res-nl-cols{padding:var(--beat) 0}
.res-cols{width:min(1300px,calc(100% - 2*var(--gutter)));margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px}
.res-cols .lstep{padding-top:36px}
.res-cols .lstep h3,.res-cols .lstep h2{display:block;font-size:clamp(30px,2.6vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#fff}
.res-cols .lstep p{display:block;margin-top:20px;font-size:20px;line-height:1.5;color:rgba(255,255,255,.9);max-width:420px}
/* The one proof figure on the page, run in at display weight (r4's .lstep b would set it as a 60 px block). */
.res-cols .lstep .res-fig{display:inline;font-size:44px;font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;vertical-align:-5px;margin-right:3px}
.res-inline{color:#fff;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px;transition:border-color .3s var(--ease)}
.res-inline:hover,.res-inline:focus-visible{border-bottom-color:#fff;outline:none}
/* ---- The close: the form (Insights) and the way back to the form (Newsletter) ------------------------------- */
.close-copy .res-form{margin:40px auto 0;justify-content:center}
.close-copy .res-form .err{text-align:center}
.close-copy .res-micro{margin-top:14px;color:rgba(255,255,255,.62)}
.ch-black .res-form .err{color:#FCA5A5}
.ch-black .res-form .done{color:#fff}
.page-insights .close-ctas{margin-top:36px}
.page-res .close-ctas .text-link{color:#fff}
/* ---- Insights: the feature and the promoted posts in two columns of grouped rows on navy --------------------- */
.res-feature{width:min(1300px,calc(100% - 2*var(--gutter)));margin:72px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;align-items:center}
.res-feature-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.8);outline:none}
.res-feature-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.res-feature:hover .res-feature-media img{transform:scale(1.03)}
.res-feature-group,.res-group-name{font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:rgba(255,255,255,.62)}
.res-feature-title{margin-top:18px;font-size:clamp(34px,3.2vw,46px);font-weight:900;letter-spacing:-.035em;line-height:1.05;text-wrap:balance;color:#fff}
.res-feature-title a{color:inherit;text-decoration:none;outline:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:3px}
.res-feature:hover .res-feature-title a,.res-feature-title a:focus-visible{background-size:100% 2px}
.res-feature-date{display:block;margin-top:18px;font-size:15px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.res-feature-excerpt{margin-top:20px;font-size:20px;line-height:1.55;color:rgba(255,255,255,.88);max-width:600px}
.res-groups{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;align-items:start}
.res-groups-col{display:flex;flex-direction:column;min-width:0}
.res-group{padding:28px 0 36px;border-top:1px solid rgba(255,255,255,.14)}
.res-group ul{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.res-groups.is-ready .res-group li{opacity:.4;transition:opacity .5s var(--ease)}
.res-groups.is-ready .res-group li.is-lit{opacity:1}
.res-group a{display:inline-block;padding:8px 0;color:#fff;text-decoration:none;font-size:24px;font-weight:400;line-height:1.35;letter-spacing:-.01em;outline:none}
.res-group a span{position:relative;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:3px}
.res-group a:hover span,.res-group a:focus-visible span{background-size:100% 1.5px}
/* ---- Insights: the index head with the category filters, on the grid's measure ------------------------------- */
.res-all .res-all-head{width:min(1300px,calc(100% - 2*var(--gutter)));display:flex;align-items:baseline;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
/* A post's Related Reading head carries the route up to its cluster's pillar page at the right (part-clusters.php).
The route wraps as inline text on a narrow phone (More on Government and Teaming at 360 px): the underline sits on
the label's own lines (the .res-group a span pattern) and the arrow follows the last word, so neither runs under
empty space when the label takes two lines. The text-link's absolute arrow and full-width rule are set aside here. */
.post-related .post-up{flex:0 1 auto;min-width:0;max-width:100%;color:var(--ink);padding-right:0;padding-bottom:0;line-height:1.5;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-skip-ink:none}
.post-related .post-up::before,.post-related .post-up::after{display:none}
/* The last word and the arrow never part: the arrow is the last word's own trailing box, and the pair never breaks.
The arrow is an atomic inline, so the underline runs under the words only. */
.post-related .post-up .post-up-end{white-space:nowrap}
.post-related .post-up .post-up-end::after{content:"";display:inline-block;width:15px;height:15px;margin-left:11px;vertical-align:-1px;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)}
.post-related .post-up:hover .post-up-end::after,.post-related .post-up:focus-visible .post-up-end::after{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.post-related .post-up .post-up-end::after{transition:none}}
/* Insights: the Selected Reading head shares the hero's and All Posts' left edge (one measure for every heading on the index). */
.res-promoted .res-sel-head{width:min(1300px,calc(100% - 2*var(--gutter)))}
/* Insights: the first screen at 1440 x 900 ends with the feature's title whole, not cut by the fold (review round four b):
the hero's foot, the chapter's head, and the feature's gap each tightened, so the navy chapter enters at about 440 px. */
@media (min-width:768px){
.page-insights .res-hero{padding-bottom:64px}
.page-insights .res-promoted{padding-top:88px}
.page-insights .res-feature{margin-top:48px}
}
/* Pages after the first have no Selected Reading chapter between the hero and the index: one hairline inside the measure. */
.res-all-after-hero{padding-top:0}
.res-all-after-hero::before{content:"";display:block;width:min(1300px,calc(100% - 2*var(--gutter)));height:1px;margin:0 auto 120px;background:#E2E8F0}
.res-filters{display:flex;gap:0 32px;flex-wrap:wrap}
.res-filters a{position:relative;font-size:18px;font-weight:500;color:#64748B;text-decoration:none;padding:8px 0;transition:color .3s var(--ease);outline:none}
.res-filters a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.res-filters a:hover,.res-filters a:focus-visible,.res-filters a[aria-current="page"]{color:var(--ink)}
.res-filters a:hover::after,.res-filters a:focus-visible::after,.res-filters a[aria-current="page"]::after{transform:scaleX(1)}
/* ---- The post card and the grid: each card a subgrid of five rows, so a row of cards shares its lines ---------- */
.res-grid{width:min(1300px,calc(100% - 2*var(--gutter)));margin:64px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;row-gap:0;grid-auto-rows:auto}
.sn-post-card{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;min-width:0;padding-bottom:64px}
.sn-post-card-body{display:contents}
.sn-post-card-media{grid-row:1;display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;margin-bottom:22px;background:#E2E8F0;box-shadow:0 0 0 1px rgba(15,23,42,.08);outline:none}
.sn-post-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.sn-post-card:hover .sn-post-card-media img{transform:scale(1.03)}
.sn-post-card-cat{grid-row:2;position:relative;justify-self:start;margin-bottom:12px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:#64748B;text-decoration:none;transition:color .3s var(--ease)}
.sn-post-card-cat:hover,.sn-post-card-cat:focus-visible{color:var(--accent);outline:none}
/* 44 px hit areas (WCAG 2.5.8) on the smallest links, as an inset pseudo-element so the visual rhythm stays: the card
category (20 px tall), the Insights filters and the page numbers (42 px tall, the numbers 14 px wide). */
.sn-post-card-cat::before{content:"";position:absolute;inset:-12px -8px}
.res-filters a::before,.res-pages .res-nums a::before{content:"";position:absolute;inset:-1px -11px}
.sn-post-card-title{grid-row:3;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.sn-post-card-title a{color:inherit;text-decoration:none;outline:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:2px}
.sn-post-card:hover .sn-post-card-title a,.sn-post-card-title a:focus-visible{background-size:100% 2px}
.sn-post-card-date{grid-row:4;margin-top:10px;font-size:15px;line-height:1.4;color:#64748B;font-variant-numeric:tabular-nums}
/* Four lines hold a 24-word excerpt at the card's width, so the clamp's own ellipsis rarely cuts a sentence the server
already closed (review round four b; it was three). */
.sn-post-card-excerpt{grid-row:5;margin-top:14px;font-size:16px;line-height:1.55;color:#475569;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* ---- Insights: the pages (first, the current page and two each way, last; Previous and Next as routes) ------ */
.res-pages{width:min(1300px,calc(100% - 2*var(--gutter)));margin:24px auto 0;padding-top:28px;border-top:1px solid #E2E8F0;display:flex;align-items:baseline;gap:4px 22px;flex-wrap:wrap}
.res-nums{display:flex;align-items:baseline;gap:4px 22px;flex-wrap:wrap}
.res-pages a{position:relative;font-size:17px;font-weight:500;color:#64748B;text-decoration:none;padding:8px 0;font-variant-numeric:tabular-nums;transition:color .3s var(--ease);outline:none;min-width:14px;text-align:center}
.res-gap{font-size:17px;font-weight:500;color:#94A3B8;padding:8px 0;min-width:14px;text-align:center}
.res-count{display:none}
.res-pages a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.res-pages a:hover,.res-pages a:focus-visible,.res-pages a[aria-current="page"]{color:var(--ink)}
.res-pages a:hover::after,.res-pages a:focus-visible::after,.res-pages a[aria-current="page"]::after{transform:scaleX(1)}
/* Previous as a route with a leading arrow (the chrome archives' plain .res-prev keeps its own treatment until they adopt the text-link). */
.res-pages .res-prev,.res-pages .res-next{font-size:18px;color:var(--ink);min-width:0;text-align:left}
.res-pages .res-prev{margin-right:18px}
.res-pages .text-link.res-prev{padding:0 0 6px 26px}
.res-pages .res-next{margin-left:auto;padding:0 26px 6px 0}
.res-pages .text-link.res-prev::after,.res-pages .res-next::after{bottom:0;height:2px;transform:none;transition:none;box-shadow:none}
.res-pages .res-next::after{left:0;right:26px}
.res-pages .text-link.res-prev::after{left:26px;right:0}
.res-pages .text-link.res-prev::before{right:auto;left:0;transform:translateY(-50%) scaleX(-1)}
.res-pages .text-link.res-prev:hover::before,.res-pages .text-link.res-prev:focus-visible::before{transform:translate(-5px,-50%) scaleX(-1)}
/* ---- Tablet --------------------------------------------------------------------------------------------------- */
@media (max-width:1099px){
.res-paper{grid-template-columns:1fr;row-gap:20px;padding:48px 0}
.res-paper-side{padding-top:0;gap:8px}
.res-nl-grid{grid-template-columns:minmax(0,1fr) 320px;column-gap:56px}
.res-nl-copy .res-h1{font-size:clamp(56px,7.2vw,112px)}
.res-portrait{max-width:320px}
.res-feature{grid-template-columns:1fr;row-gap:32px}
.res-feature-excerpt{max-width:760px}
.res-groups{grid-template-columns:1fr;column-gap:0}
.res-groups-col{display:contents}
.res-group a{font-size:22px}
.res-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.sn-post-card{padding-bottom:56px}
.res-pages{margin-top:32px}
/* One column: each section after the first draws its own rule, and the tick is short of the head (the dep-steps pattern). */
.res-cols{grid-template-columns:1fr;row-gap:40px}
.res-cols .lstep{padding-top:30px}
.res-cols .lstep::before{height:16px}
.res-cols .lstep:nth-child(n+2)::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
.res-cols .lstep p{max-width:760px}
}
/* ---- Phone ---------------------------------------------------------------------------------------------------- */
@media (max-width:767px){
.res-hero{padding:calc(60px + 56px) 0 64px}
.res-h1{font-size:46px}
.res-hero .t-deck{margin-top:20px}
.res-band{height:64vw;min-height:0}
.res-band img{object-position:60% 50%}
.res-kicker{font-size:12px;margin-bottom:14px}
.res-papers{margin-top:40px}
.res-paper{grid-template-columns:1fr;row-gap:18px;padding:36px 0}
.res-paper-side{padding-top:0;gap:8px}
.res-paper-tag{font-size:12px}
.res-paper-meta{font-size:14px}
.res-paper h3{font-size:30px}
.res-paper-body{margin-top:16px;font-size:17px}
.res-paper .actions{margin-top:28px;flex-direction:column;align-items:stretch;gap:18px}
.res-paper .actions .btn{justify-content:center}
.res-paper .actions .text-link{align-self:flex-start;font-size:17px}
.res-nl-hero{min-height:0;padding:calc(60px + 56px) 0 64px;display:block}
.res-nl-copy .res-h1{font-size:46px}
.res-nl-grid{grid-template-columns:1fr;row-gap:40px}
.res-portrait{max-width:none;justify-self:stretch}
.res-form{margin-top:28px;gap:12px}
.res-form input[type=email]{flex-basis:100%;height:52px;font-size:17px}
.res-form .btn{width:100%;justify-content:center}
.res-form .done{font-size:19px}
.res-micro{margin-top:12px;font-size:14px}
.close-copy .res-form{margin-top:32px}
.res-cols{row-gap:32px}
.res-cols .lstep h3,.res-cols .lstep h2{font-size:28px}
.res-cols .lstep p{margin-top:12px;font-size:17px}
.res-cols .lstep .res-fig{font-size:36px;vertical-align:-4px}
.res-feature{margin-top:40px;row-gap:24px}
.res-feature-group,.res-group-name{font-size:14px}
.res-feature-title{font-size:30px}
.res-feature-excerpt{font-size:17px;margin-top:16px}
.res-groups{margin-top:40px}
.res-group{padding:22px 0 26px}
.res-group ul{margin-top:10px;gap:2px}
.res-group a{font-size:19px;padding:7px 0}
.res-all .res-all-head{gap:16px 0}
.res-filters{gap:0 24px}
.res-filters a{font-size:16px}
.res-grid{grid-template-columns:1fr;margin-top:36px}
.sn-post-card{padding-bottom:44px}
.sn-post-card-media{margin-bottom:16px}
.sn-post-card-title{font-size:21px}
.sn-post-card-excerpt{font-size:15px}
/* Insights: Previous, Page N of M, and Next on one row, each route at least 44 px tall; the numbers are desktop only.
Scoped to the index: the chrome archives share .res-pages but print no .res-count yet. */
.page-insights .res-pages{margin-top:12px;padding-top:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 12px}
.page-insights .res-nums{display:none}
.page-insights .res-count{display:block;grid-column:2;grid-row:1;font-size:15px;font-weight:500;color:#64748B;font-variant-numeric:tabular-nums;text-align:center;padding:12px 0}
.page-insights .res-pages .res-prev,.page-insights .res-pages .res-next{grid-row:1;margin:0;font-size:17px}
.page-insights .res-pages .text-link.res-prev{grid-column:1;justify-self:start;padding:12px 0 12px 24px}
.page-insights .res-pages .res-next{grid-column:3;justify-self:end;padding:12px 24px 12px 0}
.page-insights .res-pages .text-link.res-prev::after,.page-insights .res-pages .res-next::after{bottom:7px}
.page-insights .res-pages .text-link.res-prev::before,.page-insights .res-pages .res-next::before{top:50%}
/* The chrome archives' pager, until they adopt the index's: the numbers wrap in their own row, Previous and Next beneath. */
.res-pages{margin-top:12px;flex-wrap:wrap;gap:14px 0;padding-top:22px}
.res-nums{flex-basis:100%;order:0;gap:2px 16px}
.res-pages a{font-size:16px}
.res-pages .res-prev{order:1;margin-right:auto}
.res-pages .res-next{order:2;font-size:17px}
.res-all-after-hero::before{margin-bottom:64px}
}
/* ---- Reduced motion ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.sn-post-card-media img,.sn-post-card-title a,.res-group a span,.res-feature-media img,.res-feature-title a,.res-filters a::after,.res-pages a::after{transition:none}
.sn-post-card:hover .sn-post-card-media img,.res-feature:hover .res-feature-media img{transform:none}
}
/* Read Past Editions under the hero form (Jamie, November 4): a plain text link on white, its own style (res-inline is set for the dark close band). */
.res-nl-cta .res-past{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:17px;font-weight:600;color:var(--accent,#2563EB);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;background:none}
.res-nl-cta .res-past:hover,.res-nl-cta .res-past:focus-visible{color:var(--navy,#0B2740)}
/* ============================================================================
Global chrome and the blog on private staging: the layer after site.css, r4.css, home.css, v2.css, interior.css,
resources.css, loaded on every WordPress-rendered document that no V2 template serves (inc/chrome.php). Three jobs:
1. .sn-legacy A Keep As Is page: Elementor content on the dark ground it was built on, with the document
defaults that site.css resets restored under it, and the V2 type layer (Public Sans, the
heading weights, links, buttons, the 1,300 px measure) applied over the Elementor kit without
changing a layout. .sn-legacy-plain (the two quiz pages) takes the navigation and footer only.
2. .sn-prose A post: the reading measure on white, and every inline style the posts carry (.sp-*, written
for the old dark template) brought to the V2 system: no pills, no gradient circles, no teal.
3. The post hero, the archive hero, the search form, the 404.
The resets in site.css (margins to 0, lists without bullets, img as block) sit at (0,0,1); the restorations here are
written at (0,0,1) too and win by order, so any Elementor or theme rule with a class still wins over them.
Type: inc/chrome.php takes the three IBM Plex Sans sources off a chromed document (the Brand Typography snippet,
the design-standards style, Elementor's font sheets); the layer below still sets Public Sans with !important on
every text element of the whole document at (0,5,3), above the design-standards rule at (0,2,2) should it ever
print again, above any widget rule, and above the inline font-family two posts carry. The Customizer's a:hover
(#5b8cff) and the theme's button reset (#c36 border and fill) reach the V2 bar, footer, and buttons through wp_head
on every chromed document, so those colors are pinned here too. The stylesheet is printed after wp_head().
============================================================================ */
/* ---- Documents with wp_head(): Yoast owns the head; the site's dark ground; the bar as on a page-light V2 page --- */
.sn-v2-chrome{background:var(--navy-black)}
.sn-v2-chrome.page-light{background:#fff;color:var(--ink)}
.sn-v2-chrome .nav{background:rgba(10,14,26,.92)}
.sn-v2-chrome .skip-link{position:absolute;left:-9999px}
/* The type layer over the whole document: Public Sans on every text element (icon fonts, code, and SVG excepted),
the weights left to the V2 classes. */
html body.sn-v2-chrome :is(h1,h2,h3,h4,h5,h6,p,li,a,span,div,section,article,nav,header,footer,main,dd,dt,td,th,blockquote,figcaption,figure,label,input,textarea,select,button,strong,em,b,small,cite,time,summary,details):not(i):not([class*="fa-"]):not([class*="eicon"]):not([class*="icon"]):not(pre):not(code):not(kbd):not(samp):not(.sn-legacy-plain *){font-family:var(--font)!important}
html body.sn-v2-chrome :is(.nav a:not(.btn):not(.nav-contact),.nav-panel a:not(.panel-contact),.footer-links a,.footer-social a){font-weight:500}
html body.sn-v2-chrome .nav-panel a:not(.panel-contact):not(.panel-cta){font-weight:400}
/* The theme's button reset (border and fill in #c36) never reaches a V2 control. */
html body.sn-v2-chrome .nav .menu,html body.sn-v2-chrome .nav .menu:is(:hover,:focus,:focus-visible,:active){border:0;border-radius:0;padding:0;background:none;color:#fff;box-shadow:none}
html body.sn-v2-chrome .arc-search .btn,html body.sn-v2-chrome .arc-search .btn:is(:hover,:focus,:focus-visible,:active){border:0;border-radius:3px;padding:0 30px;background:var(--navy);color:#fff;box-shadow:none}
/* The Customizer's a:hover and a:active never recolor a V2 component. */
.sn-v2-chrome :is(.btn,.nav-pilot,.panel-cta):is(:hover,:focus-visible,:active){color:#fff}
.sn-v2-chrome .nav a:not(.btn):is(:hover,:focus-visible,:active),.sn-v2-chrome .nav-panel a:is(:hover,:focus-visible,:active){color:#fff}
.sn-v2-chrome :is(.footer-links a,.footer-social a,.footer-legal a,.close-ctas .text-link):is(:hover,:focus-visible,:active){color:#fff}
.sn-v2-chrome .ch-white .text-link:is(:hover,:focus-visible,:active),.sn-v2-chrome .nf-actions .text-link:is(:hover,:focus-visible,:active),.sn-v2-chrome .arc-empty .text-link:is(:hover,:focus-visible,:active){color:var(--ink)}
.sn-v2-chrome .sn-post-card-title a:is(:hover,:focus-visible,:active){color:inherit}
.sn-v2-chrome .sn-post-card-cat:is(:hover,:focus-visible,:active),.sn-v2-chrome .post-cat:is(:hover,:focus-visible,:active){color:var(--accent)}
.sn-v2-chrome :is(.res-filters a,.res-pages a):is(:hover,:focus-visible,:active){color:var(--ink)}
.sn-v2-chrome .post-author:is(:hover,:focus-visible,:active){color:var(--ink)}
.sn-v2-chrome .res-pages .res-prev:is(:hover,:focus-visible,:active),.sn-v2-chrome .res-pages .res-next:is(:hover,:focus-visible,:active){color:var(--ink)}
/* ---- 1. The legacy wrapper: document defaults restored under the fixed bar ------------------------------------ */
.sn-legacy{position:relative;padding-top:72px;min-height:60vh;color:#fff}
:where(.sn-legacy) :is(h1,h2,h3,h4,h5,h6){margin-block:.5rem 1rem}
:where(.sn-legacy) p{margin-block:0 .9rem}
:where(.sn-legacy) :is(ul,ol){margin-block:1em;padding-inline-start:40px}
:where(.sn-legacy) ul{list-style:disc}
:where(.sn-legacy) ol{list-style:decimal}
:where(.sn-legacy) :is(dl,dd,figure){margin-block:1em}
:where(.sn-legacy) dd{margin-inline-start:40px}
:where(.sn-legacy) :is(img,svg,video){display:inline-block}
:where(.sn-legacy) button{cursor:pointer}
:where(.sn-legacy) a{color:inherit}
/* The type layer on a Keep As Is page: the kit's four global families become Public Sans (the document layer above
sets the family on every element); h1 and h2 take the V2 Black cut, the smaller headings SemiBold. */
.sn-v2-chrome.elementor-kit-1751{--e-global-typography-primary-font-family:'Public Sans';--e-global-typography-secondary-font-family:'Public Sans';--e-global-typography-text-font-family:'Public Sans';--e-global-typography-accent-font-family:'Public Sans'}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) :is(h1,h2,.elementor-widget-heading h1,.elementor-widget-heading h2):not(.sn-x){font-weight:900!important;letter-spacing:-.035em!important;line-height:1.04!important}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) :is(h3,h4,h5,h6):not(.sn-x){font-weight:600!important;letter-spacing:-.015em!important}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) :is(p,li,dd,td):not(.sn-x){font-weight:400}
/* Links in copy read as routes: the accent line under white, as the chapter links on dark pages. */
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) :is(.elementor-widget-text-editor,.elementor-widget-html) a:not(.elementor-button):not(.btn):not([class*="button"]){color:#fff!important;text-decoration:none!important;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;transition:color .3s var(--ease)}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) :is(.elementor-widget-text-editor,.elementor-widget-html) a:not(.elementor-button):not(.btn):not([class*="button"]):hover{color:#fff!important;background-size:100% 2px}
/* Buttons take the V2 button: accent fill, white type, the 4 px corner, SemiBold 16. */
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) .elementor-button{background:var(--accent)!important;color:#fff!important;border:0!important;border-radius:4px!important;font-size:16px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;transition:filter .3s var(--ease)}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) .elementor-button:hover{filter:brightness(1.12)}
html body.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) .elementor-button-text{font-family:var(--font)!important}
/* The measure: the kit's 1,200 px boxed container widens to the V2 1,300. */
.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) .e-con{--container-max-width:1300px}
.sn-v2-chrome .sn-legacy:not(.sn-legacy-plain) .elementor-section.elementor-section-boxed>.elementor-container{max-width:1300px}
/* A canvas page (the quiz pages, the partner pages) painted its own ground to the edge; the bar sits over the top 72 px. */
.sn-legacy-plain{padding-top:0}
.sn-legacy-plain>*:first-child{padding-top:72px}
/* TimeBridge (9018, unlisted): its own back link and its own copyright line sat against the V2 bar and footer; both
are hidden. The Download PDF button and the rest of the page stay. */
.page-id-9018 .sn-legacy :is(.tb-topbar .tb-back-link,.tb-footer){display:none!important}
/* ---- 1b. Privacy Policy (3) and Terms and Conditions (464): the post's reading layout, words and Elementor data
untouched. One HTML widget holds each document; its inline sizes (2rem, 1.5rem, 1rem) and the Arial stack give way
to the V2 scale on white at the 760 px measure, starting at the chapter head's edge. ---------------------------- */
.sn-v2-chrome:is(.page-id-3,.page-id-464){background:#fff;color:#1e293b}
:is(.page-id-3,.page-id-464) .sn-legacy{color:#1e293b;padding:calc(72px + 88px) 0 var(--beat);min-height:0}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .e-con{--container-max-width:1180px;--padding-top:0;--padding-bottom:0;--padding-left:var(--gutter);--padding-right:var(--gutter)}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html .elementor-widget-container>div{max-width:760px!important;margin:0!important;padding:0!important;color:#1e293b!important;font-size:19px!important;line-height:1.6!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h1{font-size:clamp(40px,4.7vw,60px)!important;font-weight:900!important;letter-spacing:-.035em!important;line-height:1.04!important;color:var(--ink)!important;margin:0 0 22px!important;text-wrap:balance}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h1+p{font-size:16px!important;line-height:1.4!important;color:var(--slate)!important;margin:0 0 56px!important;padding:0 0 24px!important;border-bottom:1px solid #E2E8F0}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h1+p strong{font-weight:500!important;color:var(--slate)!important}
/* The h2 selector carries :not(.sn-x) so it sits at (0,5,3) with the Black-cut rule above and wins by order: SemiBold 600. */
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h2:not(.sn-x){font-size:27px!important;font-weight:600!important;letter-spacing:-.015em!important;line-height:1.25!important;color:var(--ink)!important;margin:52px 0 14px!important;text-wrap:balance}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h3{font-size:21px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.3!important;color:var(--ink)!important;margin:36px 0 10px!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html :is(p,li){font-size:19px!important;line-height:1.6!important;color:#1e293b!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html p{margin:0 0 22px!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html :is(ul,ol){margin:0 0 24px!important;padding-left:1.35em!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html li{margin:0 0 8px!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html li::marker{color:var(--slate)}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html strong{font-weight:600!important;color:var(--ink)!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html .elementor-widget-container div a:not(.btn):not(.sn-x):not(.sn-y){color:var(--ink)!important;text-decoration:none!important;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html .elementor-widget-container div a:not(.btn):not(.sn-x):not(.sn-y):is(:hover,:focus-visible,:active){color:var(--accent)!important}
/* ---- 2. The post: hero on white ----------------------------------------------------------------------------- */
.post-hero{padding:calc(72px + 88px) 0 0;overflow:visible}
.post-head{position:relative}
.post-cat{display:inline-block;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:var(--slate);text-decoration:none;padding-bottom:4px;transition:color .3s var(--ease);outline:none}
.post-cat:hover,.post-cat:focus-visible{color:var(--accent)}
/* Round 5 review r2 (November 4): the category and author links in the post head are 22 to 24 px tall; an inset pseudo gives
each a 44 px hit area without moving the type (the pattern the card category links took in round 5). The figure images
in the posts are 1536 x 1024, so the reserved box is 3:2 (was 1200/630, which still let the text jump 44 px on iOS). */
.post-cat,.post-author{position:relative}
.post-cat::after,.post-author::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
.post-h1{margin-top:22px;max-width:1040px;font-size:clamp(40px,4.7vw,66px);font-weight:900;line-height:1.02;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.post-byline{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 0;margin-top:30px;font-size:17px;line-height:1.4;color:var(--slate);font-variant-numeric:tabular-nums}
.post-author{color:var(--ink);font-weight:500;text-decoration:none;position:relative;outline:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size .4s var(--ease)}
.post-author:hover,.post-author:focus-visible{background-size:100% 1.5px}
.post-byline>*+*::before{content:"";display:inline-block;width:1px;height:14px;background:#CBD5E1;margin:0 16px;vertical-align:-1px}
.post-byline .post-updated time{color:inherit}
.post-byline>.row-start::before{display:none}
/* The cover is capped so the lead paragraph starts near the fold at 1440 x 900; the figure keeps its full width, on the
measure the hero and the article share (.ch-head, 1300 px since the round 4b grid fix in r4.css). */
.post-cover{width:min(1300px,calc(100% - 2*var(--gutter)));margin:56px auto 0}
.post-cover img{width:100%;height:auto;max-height:460px;object-fit:cover;display:block;border-radius:6px;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
/* ---- 2. The post: the article at the reading measure ------------------------------------------------------------ */
.post-article{padding:72px 0 var(--beat)}
.post-hero+.post-article{padding-top:56px}
.sn-v2-chrome .sn-prose{max-width:760px;font-size:20px;line-height:1.6;color:#1e293b;overflow-wrap:break-word}
.sn-v2-chrome .sn-prose p{margin:0 0 28px}
.sn-v2-chrome .sn-prose>p:first-of-type,.sn-v2-chrome .sn-prose .sp-article>p:first-of-type{font-size:23px;line-height:1.5;color:var(--ink)}
.sn-v2-chrome .sn-prose :is(h2,h3,h4,h5,h6){color:var(--ink);text-wrap:balance}
.sn-v2-chrome .sn-prose h2{font-size:clamp(30px,2.6vw,36px);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:64px 0 22px;padding:0;border:0}
.sn-v2-chrome .sn-prose h3{font-size:24px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:44px 0 16px;padding:0;border:0}
.sn-v2-chrome .sn-prose :is(h4,h5,h6){font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:36px 0 12px;padding:0;border:0}
.sn-v2-chrome .sn-prose :is(ul,ol){margin:0 0 28px;padding-left:1.35em}
.sn-v2-chrome .sn-prose ul{list-style:disc}
.sn-v2-chrome .sn-prose ol{list-style:decimal}
.sn-v2-chrome .sn-prose li{margin:0 0 10px;line-height:1.55}
.sn-v2-chrome .sn-prose li::marker{color:var(--slate)}
.sn-v2-chrome .sn-prose :is(li,ul,ol) :is(ul,ol){margin:10px 0 0}
.sn-v2-chrome .sn-prose strong,.sn-v2-chrome .sn-prose b{font-weight:600;color:var(--ink)}
.sn-v2-chrome .sn-prose a{color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px;transition:color .3s var(--ease);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sn-v2-chrome .sn-prose a:hover,.sn-v2-chrome .sn-prose a:focus-visible{color:var(--accent);outline:none}
.sn-v2-chrome .sn-prose blockquote{margin:44px 0;padding:4px 0 4px 28px;border-left:2px solid var(--accent);font-size:26px;font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.sn-v2-chrome .sn-prose blockquote p{margin:0 0 16px;font-size:inherit;line-height:inherit;color:inherit}
.sn-v2-chrome .sn-prose blockquote p:last-child{margin-bottom:0}
.sn-v2-chrome .sn-prose cite{font-style:normal;font-size:16px;color:var(--slate)}
.sn-v2-chrome .sn-prose hr{border:0;height:1px;background:#E2E8F0;margin:48px 0}
.sn-v2-chrome .sn-prose img{max-width:100%;height:auto;display:block;border-radius:6px}
/* A stored caption figure carries its own inline width (one 2025 post set 1920 px, so the whole post scrolled sideways;
round 5 review): the figure and its image never exceed the column, and the caption wraps. */
.sn-v2-chrome .sn-prose .wp-caption{width:auto!important;max-width:100%}
.sn-v2-chrome .sn-prose .wp-caption img{max-width:100%;height:auto}
.sn-v2-chrome .sn-prose p>img:only-child{margin:0 auto}
.sn-v2-chrome .sn-prose figure{margin:40px 0}
.sn-v2-chrome .sn-prose figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--slate);font-style:normal}
.sn-v2-chrome .sn-prose table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5;margin:32px 0;border:0}
.sn-v2-chrome .sn-prose :is(th,td){text-align:left;padding:14px 20px 14px 0;border:0;border-bottom:1px solid #E2E8F0;vertical-align:top;background:none;color:#1e293b}
.sn-v2-chrome .sn-prose th{font-size:14px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);border-bottom-color:var(--ink)}
.sn-v2-chrome .sn-prose tr:last-child td{border-bottom-color:var(--ink)}
.sn-v2-chrome .sn-prose :is(thead,tbody,tfoot,tr){border:0}
/* A block table (figure.wp-block-table, the table inside a scroll wrapper from inc/chrome.php): the heading stays with
its table, and at the desktop the figure breaks out of the 760 px measure to the chapter head's 1,180 px. */
.sn-v2-chrome .sn-prose .wp-block-table{margin:28px 0 44px;position:relative;overflow:visible}
.sn-v2-chrome .sn-prose :is(h2,h3,h4)+.wp-block-table{margin-top:18px}
.sn-v2-chrome .sn-prose .wp-block-table table{margin:0}
.sn-v2-chrome .sn-prose .wp-block-table figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--slate);text-align:left}
.sn-v2-chrome .sn-prose .sn-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
@media (min-width:1100px){
.sn-v2-chrome .sn-prose .wp-block-table{width:calc(100% + 420px);max-width:calc(100vw - 2*var(--gutter) - 18px)}
}
.sn-v2-chrome .sn-prose pre{background:var(--navy);color:#fff;padding:22px 26px;border-radius:6px;overflow:auto;font-size:15px;line-height:1.55;margin:32px 0;white-space:pre}
.sn-v2-chrome .sn-prose code,.sn-v2-chrome .sn-prose kbd,.sn-v2-chrome .sn-prose samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.sn-v2-chrome .sn-prose :not(pre)>code{background:#F1F5F9;color:var(--ink);padding:.1em .4em;border-radius:3px}
.sn-v2-chrome .sn-prose iframe{display:block;max-width:100%;border:0;margin:32px 0;border-radius:6px}
.sn-v2-chrome .sn-prose iframe[src*="youtube"],.sn-v2-chrome .sn-prose iframe[src*="youtu.be"],.sn-v2-chrome .sn-prose iframe[src*="vimeo"]{width:100%;aspect-ratio:16/9;height:auto}
.sn-v2-chrome .sn-prose .wp-block-spacer{max-height:40px}
.sn-v2-chrome .sn-prose .wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;height:56px;padding:0 28px;border-radius:4px;background:var(--navy);color:#fff;font-size:16px;font-weight:600;text-decoration:none;background-image:none}
.sn-v2-chrome .sn-prose .wp-element-caption{font-size:15px;color:var(--slate)}
/* The posts' own inline styles (.sp-*), written for the dark template, brought to the white page. Everything sits at
(0,3,x) or more so it beats the in-content rules at (0,1,x) and (0,2,x) whatever the print order. */
html .sn-v2-chrome .sn-prose .sp-article{max-width:none;margin:0;font-size:inherit;line-height:inherit;color:inherit}
html .sn-v2-chrome .sn-prose :is(.sp-article,.sp-article p,.sp-article li,.sp-article div,.sp-article span,.sp-article strong,.sp-article em,.sp-article figcaption,.sp-article td,.sp-article th,.sp-article dd,.sp-article dt,.sp-article small,.sp-article cite,.sp-article blockquote){color:inherit}
html .sn-v2-chrome .sn-prose :is(.sp-article strong,.sp-article b,.sp-article>p:first-of-type){color:var(--ink)}
html .sn-v2-chrome .sn-prose :is(h2,h3,h4,.sp-article h2,.sp-article h3,.sp-article h4,.sp-card h3,.sp-step h3,.sp-author-heading){color:var(--ink);border:0;padding:0}
html .sn-v2-chrome .sn-prose :is(.sp-article h2,.sp-references h2){font-size:clamp(30px,2.6vw,36px);font-weight:900;margin:64px 0 22px}
html .sn-v2-chrome .sn-prose .sp-article h3{font-size:24px;font-weight:600;margin:44px 0 16px}
/* A heading inside a panel is the panel's title, not a chapter head. */
html .sn-v2-chrome .sn-prose :is(.sp-callout h2,.sp-callout h3,.sp-summary h2,.sp-summary h3,.sp-example h2,.sp-example h3,.sp-related h3,.sp-cta h3){font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:0 0 12px}
html .sn-v2-chrome .sn-prose .sp-references h2{margin-top:0}
html .sn-v2-chrome .sn-prose :is(.sp-article a,.sp-author a,.sp-byline a,.sp-nav a,.sp-related a,.sp-references a,.sp-callout a,.sp-summary a){color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px}
html .sn-v2-chrome .sn-prose :is(.sp-article a,.sp-author a,.sp-byline a,.sp-nav a,.sp-related a,.sp-references a,.sp-callout a,.sp-summary a):hover{color:var(--accent);background-color:transparent;border-color:transparent}
/* The boxed blocks: one light panel, a hairline edge, the accent rule where the post drew a teal one. */
html .sn-v2-chrome .sn-prose :is(.sp-summary,.sp-callout,.sp-card,.sp-step,.sp-nav,.sp-example,.sp-related,.sp-cta){background:#F8FAFC;border:1px solid #E2E8F0;border-radius:6px;box-shadow:none;color:#1e293b;padding:24px 28px;margin:40px 0}
html .sn-v2-chrome .sn-prose :is(.sp-summary,.sp-callout,.sp-example){border-left:3px solid var(--accent)}
html .sn-v2-chrome .sn-prose :is(.sp-summary .sp-summary-lead,.sp-summary-lead){font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 14px}
html .sn-v2-chrome .sn-prose :is(.sp-summary ul,.sp-summary ol,.sp-callout ul,.sp-callout ol){margin:0;padding-left:1.2em}
html .sn-v2-chrome .sn-prose :is(.sp-summary li,.sp-callout li,.sp-card p,.sp-step p,.sp-nav,.sp-example p,.sp-related p,.sp-related li,.sp-references p,.sp-references li){color:#1e293b}
html .sn-v2-chrome .sn-prose :is(.sp-summary p:last-child,.sp-callout p:last-child,.sp-callout ul:last-child,.sp-summary ul:last-child,.sp-card p:last-child,.sp-step p:last-child,.sp-example p:last-child,.sp-related ul:last-child,.sp-related p:last-child){margin-bottom:0}
html .sn-v2-chrome .sn-prose .sp-kicker{display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin:0 0 12px}
/* In-post card grids sit two across at the reading measure (2 x 2 for four cards, 2 x 3 for six): no orphan card, and
the copy keeps a readable width. */
html .sn-v2-chrome .sn-prose .sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 40px}
html .sn-v2-chrome .sn-prose .sp-grid .sp-card{margin:0;padding:22px 24px}
/* An odd last card (five in a two-column grid) spans the row rather than sitting alone beside an empty cell. */
html .sn-v2-chrome .sn-prose :is(.sp-grid,[style*="grid"])>:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}
html .sn-v2-chrome .sn-prose .sp-card h3{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 8px}
html .sn-v2-chrome .sn-prose .sp-card p{font-size:16px;line-height:1.55;margin:0}
html .sn-v2-chrome .sn-prose .sp-steps{display:flex;flex-direction:column;gap:0;margin:32px 0 40px;border-top:1px solid #E2E8F0}
html .sn-v2-chrome .sn-prose .sp-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 16px;padding:22px 0;margin:0;border:0;border-bottom:1px solid #E2E8F0;border-radius:0;background:none;align-items:start}
html .sn-v2-chrome .sn-prose .sp-step-num{width:auto;height:auto;display:block;border-radius:0;background:none;color:var(--accent);font-size:24px;font-weight:900;letter-spacing:-.03em;line-height:1.2;padding-top:2px;box-shadow:none;font-variant-numeric:tabular-nums}
html .sn-v2-chrome .sn-prose .sp-step h3{font-size:20px;font-weight:600;line-height:1.3;margin:2px 0 8px}
html .sn-v2-chrome .sn-prose .sp-step p{font-size:17px;line-height:1.55;margin:0}
html .sn-v2-chrome .sn-prose .sp-pullquote{margin:44px 0;padding:4px 0 4px 28px;border:0;border-left:2px solid var(--accent);background:none;font-size:26px;font-weight:300;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
html .sn-v2-chrome .sn-prose .sp-figure{margin:40px 0;padding:0;border:0;border-radius:6px;background:none;overflow:hidden}
html .sn-v2-chrome .sn-prose .sp-figure img{display:block;width:100%;height:auto;margin:0;border-radius:6px;aspect-ratio:auto 3/2}
html .sn-v2-chrome .sn-prose .sp-figure figcaption{padding:12px 0 0;border:0;font-size:15px;line-height:1.45;color:var(--slate);font-style:normal}
/* The in-post contents line: text links on one row, no pills. */
html .sn-v2-chrome .sn-prose .sp-nav{display:block;font-size:16px;line-height:1.6;padding:20px 24px}
html .sn-v2-chrome .sn-prose .sp-nav strong{display:block;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin:0 0 10px}
html .sn-v2-chrome .sn-prose .sp-nav a{display:inline-block;margin:0 22px 6px 0;padding:0 0 1px;border:0;border-radius:0;background-color:transparent;color:var(--ink);font-weight:500}
html .sn-v2-chrome .sn-prose .sp-nav a:hover{background-color:transparent;border-color:transparent;color:var(--accent)}
/* The in-post byline (63 posts) is carried into the hero byline by the template (author, date, Updated, read time),
so the words print once; the in-content line is hidden, its markup untouched. */
html .sn-v2-chrome .sn-prose .sp-byline{display:none}
/* The components whose color the inherit rule above would flatten: the step numeral (accent), the in-post kicker
(slate), and the pullquote (ink, Light). Written at (0,4,1), above the inherit rule's (0,3,2). */
html .sn-v2-chrome .sn-prose.sn-prose .sp-step-num{color:var(--accent)}
html .sn-v2-chrome .sn-prose.sn-prose .sp-kicker{color:var(--slate)}
html .sn-v2-chrome .sn-prose.sn-prose .sp-pullquote,html .sn-v2-chrome .sn-prose.sn-prose .sp-pullquote p{color:var(--ink);font-weight:300}
/* Inline styles five posts carry (dark cards, gradient boxes, light-on-dark text, an accent button), brought to the
white page: one light panel with a hairline edge, text in the reading colors, the button as a V2 button. */
html .sn-v2-chrome .sn-prose :is([style*="#1e293b"],[style*="gradient"],[style*="#f5f7fb"]){background:#F8FAFC!important;background-image:none!important;border:1px solid #E2E8F0!important;border-left:3px solid var(--accent)!important;border-radius:6px!important;box-shadow:none!important;color:#1e293b!important;padding:22px 26px!important}
html .sn-v2-chrome .sn-prose [style*="grid"] :is([style*="#1e293b"],[style*="gradient"]){border-left:1px solid #E2E8F0!important;padding:20px 22px!important}
html .sn-v2-chrome .sn-prose :is([style*="#f1f5f9"],[style*="#94b8d4"],[style*="#cbd5e1"],[style*="color: #fff"],[style*="color:#fff"],[style*="color: #000"],[style*="color:#000"],[style*="color: #333"],[style*="color:#333"]){color:inherit!important}
html .sn-v2-chrome .sn-prose :is([style*="#60a5fa"],[style*="color: #2e7dff"],[style*="color:#2e7dff"]){color:var(--accent)!important}
html .sn-v2-chrome .sn-prose :is([style*="background: #2e7dff"],[style*="background:#2e7dff"],[style*="background-color: #2e7dff"],[style*="background-color:#2e7dff"]){background:var(--navy)!important;color:#fff!important;border:0!important;border-radius:4px!important;background-image:none!important;font-weight:600!important}
html .sn-v2-chrome .sn-prose [style*="border"]:not([style*="#1e293b"]):not([style*="gradient"]):not([style*="#2e7dff"]){border-color:#E2E8F0!important}
html .sn-v2-chrome .sn-prose [style*="font-family"]{font-family:var(--font)!important}
html .sn-v2-chrome .sn-prose :is([style*="#1e293b"],[style*="gradient"]) :is(h2,h3,h4){color:var(--ink)!important;font-size:20px!important;font-weight:600!important;line-height:1.3!important;margin:0 0 8px!important}
html .sn-v2-chrome .sn-prose :is([style*="#1e293b"],[style*="gradient"]) p{font-size:17px!important;line-height:1.55!important;margin:0 0 10px!important}
html .sn-v2-chrome .sn-prose :is([style*="#1e293b"],[style*="gradient"]) p:last-child{margin-bottom:0!important}
/* The author note at the foot: a hairline, the portrait, the name and the role. */
html .sn-v2-chrome .sn-prose .sp-author{margin:64px 0 0;padding:32px 0 0;border:0;border-top:1px solid #E2E8F0;border-radius:0;background:none;color:#1e293b;font-size:17px;line-height:1.6}
html .sn-v2-chrome .sn-prose .sp-author-inner{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:start}
html .sn-v2-chrome .sn-prose .sp-author-no-avatar .sp-author-inner{grid-template-columns:1fr}
html .sn-v2-chrome .sn-prose .sp-author-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:0;box-shadow:0 0 0 1px rgba(15,23,42,.08);background:#E2E8F0;margin:0}
html .sn-v2-chrome .sn-prose .sp-author-heading{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:0 0 2px}
html .sn-v2-chrome .sn-prose .sp-author .sp-author-role{font-size:15px;line-height:1.4;color:var(--slate);margin:0 0 12px}
html .sn-v2-chrome .sn-prose .sp-author p{margin:0 0 10px;font-size:17px;line-height:1.6;color:#1e293b}
html .sn-v2-chrome .sn-prose .sp-author p:last-child{margin-bottom:0}
/* References and the in-post related list. */
html .sn-v2-chrome .sn-prose .sp-references{margin:56px 0 0;padding:28px 0 0;border:0;border-top:1px solid #E2E8F0;border-radius:0;background:none}
html .sn-v2-chrome .sn-prose :is(.sp-article .sp-references p,.sp-article .sp-related,.sp-references li,.sp-related li){font-size:16px;line-height:1.6}
html .sn-v2-chrome .sn-prose .sp-references h2{font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin:0 0 14px}
/* The in-content Related reading line (29 posts) feeds the template's Related Reading cards (inc/chrome.php), so the
line itself is hidden and the label prints once. */
html .sn-v2-chrome .sn-prose .sp-related{display:none}
html .sn-v2-chrome .sn-prose .sp-example{padding:22px 26px}
/* The closing offer block one post carries: its links as text links on one row, no pills. */
html .sn-v2-chrome .sn-prose .sp-cta h3{font-size:20px;font-weight:600;margin:0 0 8px}
html .sn-v2-chrome .sn-prose .sp-cta p{margin:0 0 14px;color:#1e293b}
html .sn-v2-chrome .sn-prose .sp-cta-links{display:flex;flex-wrap:wrap;gap:6px 24px}
html .sn-v2-chrome .sn-prose .sp-cta-links a{display:inline-block;padding:0 0 1px;border:0;border-radius:0;background-color:transparent;color:var(--ink);font-size:17px;font-weight:500;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%}
html .sn-v2-chrome .sn-prose .sp-cta-links a:hover{background-color:transparent;border-color:transparent;color:var(--accent)}
html .sn-v2-chrome .sn-prose .sp-cta-links br{display:none}
/* Disclosure blocks (the FAQ on the enterprise platform post sets details and summary dark): white, a hairline edge,
ink SemiBold summaries with a drawn chevron, the answer at the reading size. */
html .sn-v2-chrome .sn-prose.sn-prose details{margin:0 0 10px;padding:0;border:1px solid #E2E8F0;border-radius:6px;background:#fff;box-shadow:none;overflow:hidden;color:#1e293b}
html .sn-v2-chrome .sn-prose.sn-prose summary{cursor:pointer;margin:0;padding:16px 20px;border:0;border-radius:0;background:none;color:var(--ink);font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.005em;list-style:none;display:flex;align-items:center;gap:14px;text-shadow:none}
html .sn-v2-chrome .sn-prose.sn-prose summary::-webkit-details-marker{display:none}
html .sn-v2-chrome .sn-prose.sn-prose summary::before{content:"";flex:none;width:8px;height:8px;margin-top:-3px;border-right:1.5px solid var(--slate);border-bottom:1.5px solid var(--slate);transform:rotate(-45deg);transition:transform .3s var(--ease)}
html .sn-v2-chrome .sn-prose.sn-prose summary::after{display:none}
html .sn-v2-chrome .sn-prose.sn-prose details[open]>summary{border-bottom:1px solid #E2E8F0}
html .sn-v2-chrome .sn-prose.sn-prose details[open]>summary::before{transform:rotate(45deg);margin-top:-6px}
html .sn-v2-chrome .sn-prose.sn-prose summary:is(:hover,:focus-visible){color:var(--accent);background:none;outline:none}
html .sn-v2-chrome .sn-prose.sn-prose details>:not(summary){padding-left:20px;padding-right:20px}
html .sn-v2-chrome .sn-prose.sn-prose details>:not(summary):first-of-type{padding-top:16px}
html .sn-v2-chrome .sn-prose.sn-prose details :is(p,li){font-size:17px;line-height:1.6;color:#1e293b}
html .sn-v2-chrome .sn-prose.sn-prose details p{margin:0 0 16px}
/* The one Elementor-built post: its containers sit flush on the measure, at the measure's width. */
.sn-v2-chrome .sn-prose .e-con{--padding-left:0;--padding-right:0;--padding-top:0;--padding-bottom:0;--container-max-width:100%;--content-width:100%}
.sn-v2-chrome .sn-prose .e-con-boxed>.e-con-inner{max-width:100%}
.sn-v2-chrome .sn-prose .elementor-widget:not(:last-child){margin-block-end:0}
.sn-v2-chrome .sn-prose .elementor-widget-text-editor p:last-child{margin-bottom:28px}
/* ---- 2b. The post: the contents rail beside the article from 1280 px up (review round four b: the 760 px column ran
with 550 px of white to its right on every post). The reading column keeps its measure and its left edge; the rail
sits on the measure's right edge (the edge the hero, the cover, and the footer share), sticky under the bar, in the
long-form rail's register (a label, a hairline list, the current section in ink with the accent rule), then the
author and the route to the page's newsletter band. Below 1280 the rail is not shown (the measure there leaves the
rail under 300 px beside the column). --------------------------------------------------------------------------- */
.post-grid{display:block}
.post-rail{display:none}
@media (min-width:1280px){
.post-grid{display:grid;grid-template-columns:760px minmax(0,1fr);column-gap:64px;align-items:start}
.post-rail{display:block;position:sticky;top:104px;width:100%;max-width:320px;margin-left:auto}
.post-rail-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#64748B;margin:0 0 16px}
.post-rail-nav ol{list-style:none;margin:0;padding:0;border-left:1px solid #E2E8F0}
.post-rail-nav li{margin:0}
.post-rail-nav a{display:block;margin-left:-1px;padding:8px 0 8px 20px;border-left:2px solid transparent;font-size:15px;line-height:1.35;color:#64748B;text-decoration:none;transition:color .25s var(--ease),border-color .25s var(--ease)}
.post-rail-nav a:hover,.post-rail-nav a:focus-visible{color:var(--ink);outline:none}
.post-rail-nav a.is-on{border-left-color:var(--accent);color:var(--ink);font-weight:600}
.post-rail-author{margin-top:40px;padding-top:28px;border-top:1px solid #E2E8F0}
.post-rail-nav+.post-rail-author{margin-top:40px}
.post-rail-author .post-rail-name{display:inline-block;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:2px;transition:background-size .4s var(--ease)}
.post-rail-author .post-rail-name:hover,.post-rail-author .post-rail-name:focus-visible{background-size:100% 1.5px;outline:none}
.post-rail-author .post-rail-role{margin:4px 0 0;font-size:15px;line-height:1.4;color:var(--slate)}
.post-rail-nl{margin-top:28px}
.post-rail-nl .text-link{font-size:15px;color:var(--ink)}
.post-rail-nl .text-link::after{box-shadow:none;height:2px}
/* The block tables' desktop breakout (420 px past the column) would run under the rail: at the column's width here. */
.sn-v2-chrome .post-grid .sn-prose .wp-block-table{width:100%;max-width:100%}
.sn-v2-chrome .sn-prose [id]{scroll-margin-top:104px}
}
@media (prefers-reduced-motion:reduce){.post-rail-nav a,.post-rail-author .post-rail-name{transition:none}}
/* ---- 2. The post: related reading (the head one step under the post's own H1, not the index head) ----------------- */
.post-related{padding-bottom:var(--beat)}
.post-related .res-all-head{margin-bottom:0}
.post-related .post-related-head{font-size:clamp(34px,3.3vw,46px);line-height:1.04;letter-spacing:-.03em}
.post-related .res-grid{margin-top:44px}
/* ---- 3. The archives: hero kicker, the filters under the line, the search form, the grid under the hairline -------- */
.arc-hero{padding:calc(72px + 84px) 0 36px}
.arc-hero .res-kicker{margin-bottom:16px}
.arc-hero .t-deck{color:#1e293b}
.arc-hero .arc-filters{margin-top:28px}
.arc-list.res-all-after-hero::before{margin-bottom:40px}
/* A page result on search: the page's still where a post shows its image (the card rules in resources.css apply);
the label is not a link. */
.sn-page-card .sn-post-card-cat{cursor:default}
.arc-search{margin-top:40px;display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;max-width:680px}
.arc-search input[type=search]{flex:1 1 300px;min-width:0;height:58px;padding:0 20px;border:1.5px solid #CBD5E1;border-radius:3px;background:#fff;color:var(--ink);font:inherit;font-size:18px;line-height:1;outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);-webkit-appearance:none;appearance:none}
.arc-search input[type=search]::placeholder{color:#94A3B8}
.arc-search input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.arc-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.arc-search .btn{flex:none}
.arc-grid-first{margin-top:0}
.arc-empty .t-deck{color:#1e293b}
.arc-empty .text-link{color:var(--ink);font-size:inherit;margin-left:6px}
/* ---- 3. The 404: the first screen, the footer at its foot --------------------------------------------------------- */
.nf-hero{min-height:calc(100svh - 236px);display:flex;flex-direction:column;justify-content:center;padding:calc(72px + 80px) 0 96px}
.nf-copy .res-kicker{margin-bottom:18px}
.nf-h1{max-width:1000px}
.nf-hero .t-deck{max-width:760px}
.nf-actions{margin-top:44px;align-items:baseline;gap:20px 40px}
.nf-actions .text-link{color:var(--ink)}
/* ---- Phone -------------------------------------------------------------------------------------------------------- */
@media (max-width:767px){
.sn-legacy{padding-top:60px}
.sn-legacy-plain>*:first-child{padding-top:60px}
:is(.page-id-3,.page-id-464) .sn-legacy{padding:calc(60px + 48px) 0 var(--beat)}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h1{font-size:36px!important;line-height:1.06!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html h2{font-size:23px!important;margin:40px 0 12px!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html :is(p,li){font-size:18px!important}
html body.sn-v2-chrome:is(.page-id-3,.page-id-464) .sn-legacy .elementor-widget-html .elementor-widget-container>div{font-size:18px!important}
.post-hero{padding:calc(60px + 56px) 0 0}
.post-cat{font-size:12px}
.post-h1{margin-top:16px;font-size:36px;line-height:1.06}
.post-byline{margin-top:22px;font-size:15px;gap:4px 0}
.post-byline>*+*::before{margin:0 10px;height:12px}
.post-cover{margin-top:36px;width:calc(100% - 2*var(--gutter))}
.post-cover img{border-radius:4px;max-height:none}
.post-article{padding:0 0 var(--beat)}
.post-hero+.post-article{padding-top:40px}
.sn-v2-chrome .sn-prose{font-size:18px;line-height:1.6}
.sn-v2-chrome .sn-prose p{margin-bottom:22px}
.sn-v2-chrome .sn-prose>p:first-of-type,.sn-v2-chrome .sn-prose .sp-article>p:first-of-type{font-size:20px}
.sn-v2-chrome .sn-prose h2,html .sn-v2-chrome .sn-prose .sp-article h2{font-size:27px;margin:48px 0 16px}
.sn-v2-chrome .sn-prose h3,html .sn-v2-chrome .sn-prose .sp-article h3{font-size:21px;margin:36px 0 12px}
/* Panel titles, card titles, step titles, and the references label keep their own size and sit at the top of their block. */
html .sn-v2-chrome .sn-prose :is(.sp-callout h2,.sp-callout h3,.sp-summary h2,.sp-summary h3,.sp-example h2,.sp-example h3,.sp-cta h3){font-size:20px;margin:0 0 10px}
html .sn-v2-chrome .sn-prose .sp-card h3{font-size:17px;margin:0 0 8px}
html .sn-v2-chrome .sn-prose .sp-step h3{font-size:19px;margin:2px 0 8px}
html .sn-v2-chrome .sn-prose .sp-references h2{font-size:14px;margin:0 0 14px}
.sn-v2-chrome .sn-prose blockquote,html .sn-v2-chrome .sn-prose .sp-pullquote{font-size:22px;padding-left:18px;margin:32px 0}
.sn-v2-chrome .sn-prose table{font-size:15px}
.sn-v2-chrome .sn-prose :is(th,td){padding:10px 12px 10px 0}
/* A wide table scrolls inside its figure: the first column holds, the right edge fades until the last column is in view. */
.sn-v2-chrome .sn-prose .wp-block-table{margin:20px 0 36px}
.sn-v2-chrome .sn-prose .sn-tscroll table{min-width:0;width:max-content;max-width:none}
.sn-v2-chrome .sn-prose .sn-tscroll :is(th,td):first-child{width:138px;min-width:138px;max-width:138px}
.sn-v2-chrome .sn-prose .sn-tscroll :is(th,td):not(:first-child){width:196px;min-width:196px;max-width:196px}
.sn-v2-chrome .sn-prose .sn-tscroll :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#fff;padding-right:14px;box-shadow:inset -1px 0 0 #E2E8F0}
.sn-v2-chrome .sn-prose .sn-tscroll :is(th,td):not(:first-child){padding-left:14px}
.sn-v2-chrome .sn-prose .wp-block-table.is-scroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;background:linear-gradient(to right,rgba(255,255,255,0),#fff 75%);pointer-events:none;transition:opacity .3s var(--ease)}
.sn-v2-chrome .sn-prose .wp-block-table.is-end::after{opacity:0}
html .sn-v2-chrome .sn-prose :is([style*="#1e293b"],[style*="gradient"],[style*="#f5f7fb"]){padding:18px 20px!important}
html .sn-v2-chrome .sn-prose :is(.sp-summary,.sp-callout,.sp-card,.sp-step,.sp-nav,.sp-example,.sp-related,.sp-cta){padding:18px 20px;margin:28px 0}
html .sn-v2-chrome .sn-prose .sp-grid{grid-template-columns:1fr;gap:12px}
html .sn-v2-chrome .sn-prose .sp-step{grid-template-columns:40px minmax(0,1fr);padding:18px 0}
html .sn-v2-chrome .sn-prose .sp-step-num{font-size:20px}
html .sn-v2-chrome .sn-prose .sp-author{margin-top:48px;padding-top:24px}
html .sn-v2-chrome .sn-prose .sp-author-inner{grid-template-columns:56px minmax(0,1fr);gap:16px}
html .sn-v2-chrome .sn-prose .sp-author-avatar{width:56px;height:56px}
.post-related .post-related-head{font-size:30px}
.post-related .res-grid{margin-top:32px}
.arc-hero{padding-bottom:36px}
.arc-hero .arc-filters{margin-top:24px}
.arc-list.res-all-after-hero::before{margin-bottom:32px}
.arc-search{margin-top:28px;gap:12px}
.arc-search input[type=search]{flex-basis:100%;height:52px;font-size:17px}
.arc-search .btn{width:100%;justify-content:center}
.nf-hero{min-height:0;padding:calc(60px + 56px) 0 64px}
.nf-h1{font-size:46px}
.nf-actions{margin-top:32px;flex-direction:column;align-items:stretch;gap:18px}
.nf-actions .btn{justify-content:center}
.nf-actions .text-link{align-self:flex-start;font-size:17px}
}
/* ---- Reduced motion ------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
.post-author,.post-cat,.sn-v2-chrome .sn-prose a{transition:none}
}
/* ============================================================================
Round 4b (November 3): each Keep As Is page read fully in the V2 system, by page id. Words and Elementor data are
untouched; every rule is presentation. The selectors sit on html body.sn-v2-chrome.page-id-N (0,3,x and up), above
the Elementor page CSS at (0,3,0) and the pages' own inline sheets.
============================================================================ */
/* ---- 1c. Business Process Consulting (37): the Elementor hero container becomes the V2 hero (full bleed, the page's
own photograph behind a shade, the title at the family scale on the 1,300 px measure, the bar translucent over it),
the boxed chapters widen to the measure and read left, the three cards and the consultation block lose their glows,
and the button is the V2 button. ----------------------------------------------------------------------------- */
.page-id-37 .sn-legacy{padding-top:0}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-450f095{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--content-width:100%;--margin-top:0px;--margin-bottom:0px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-450f095>.e-con-inner{max-width:100%;width:100%;padding:0}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-11a7600{--min-height:74vh;min-height:74svh;--justify-content:flex-end;--align-items:center;--border-radius:0;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;border:0!important;border-radius:0!important;padding:calc(72px + 104px) var(--gutter) 112px!important;background-position:center 40%!important;isolation:isolate;overflow:hidden}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-11a7600::before{--overlay-opacity:1;opacity:1!important;background:linear-gradient(90deg,rgba(10,14,26,.9) 0%,rgba(10,14,26,.78) 40%,rgba(10,14,26,.32) 100%),linear-gradient(180deg,rgba(10,14,26,.26) 0%,rgba(10,14,26,.58) 100%)!important;border-radius:0!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-33e754c{width:min(1300px,100%)!important;max-width:100%!important;margin:0 auto!important;text-align:left!important;position:relative;z-index:1}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-33e754c .elementor-heading-title{font-size:clamp(72px,7.8vw,112px)!important;font-weight:900!important;line-height:.96!important;letter-spacing:-.045em!important;color:#fff!important;max-width:1100px;text-wrap:balance}
/* The chapters: the kit's 1,200 px boxed width becomes the V2 1,300 px measure; headings and copy read from the left. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .e-con-boxed:not(.elementor-element-450f095){--content-width:1300px}
html body.sn-v2-chrome.page-id-37 .sn-legacy :is(.elementor-element-69caffd,.elementor-element-ed4be59,.elementor-element-b337bad){--padding-left:var(--gutter);--padding-right:var(--gutter)}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-69caffd{--padding-top:112px;--padding-bottom:112px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-ed4be59{--padding-top:0px;--padding-bottom:112px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-b337bad{--padding-top:0px;--padding-bottom:0px}
html body.sn-v2-chrome.page-id-37 .sn-legacy :is(.elementor-widget-heading,.elementor-widget-text-editor){text-align:left!important}
/* The chapter heads on the family's second size (the 48 px step), since each runs to four or five words. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-heading:not(.elementor-element-33e754c) h2{font-size:clamp(36px,3.4vw,48px)!important;line-height:1.04!important;letter-spacing:-.03em!important;color:#fff!important;text-wrap:balance;max-width:820px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-text-editor :is(p,li){font-size:19px!important;line-height:1.6!important;color:rgba(255,255,255,.86)!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-text-editor{max-width:860px!important}
/* The three cards: one dark panel with a hairline edge, no radial glow, no icon (the generic sparkle on the third card
is the family's banned mark; the three are hidden together, markup untouched); the row stretches, so all three end
on the tallest card's line; their titles at the card size. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-7af5a86{--align-items:stretch;align-items:stretch!important;--e-con-grid-template-rows:auto}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg{background:#0d1117!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;box-shadow:none!important;--padding-top:36px;--padding-bottom:36px;--padding-left:32px;--padding-right:32px;--align-self:stretch;align-self:stretch!important;height:auto!important;min-height:100%}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg .elementor-widget-heading h2{font-size:24px!important;font-weight:600!important;letter-spacing:-.015em!important;line-height:1.25!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg .elementor-widget-text-editor :is(p,li){font-size:17px!important;line-height:1.55!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg .elementor-widget-divider .elementor-divider-separator{border-color:rgba(255,255,255,.14)!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg .elementor-widget-image{display:none!important}
/* The roadmap strip's own head and line read from the left at the chapter scale, like the other chapters; the steps
on the card scale (names 20 px, lines 17 px at 80 percent), the connectors stopping 8 px short of the next box. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-sec :is(.snsq-title,.snsq-sub){text-align:left!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-title{font-size:clamp(36px,3.4vw,48px)!important;font-weight:900!important;line-height:1.04!important;letter-spacing:-.03em!important;color:#fff!important;max-width:820px;margin:0 0 18px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-sub{font-size:19px!important;line-height:1.6!important;color:rgba(255,255,255,.86)!important;max-width:860px;margin:0 0 40px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-panel{background:#0d1117!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;padding:40px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stages{column-gap:32px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage{padding:22px 22px 24px!important;border-radius:6px!important;background:rgba(255,255,255,.03)!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage b{font-size:20px!important;line-height:1.25!important;color:#fff!important;letter-spacing:-.01em!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage>span{font-size:17px!important;line-height:1.5!important;color:rgba(255,255,255,.8)!important;margin-top:10px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-j{left:-32px!important;width:19px!important}
/* The consultation block closes the page as the family's close band: full bleed on the page's black under a hairline,
both marks (inc/chrome.php prints them), the headline at the band's size, the V2 accent button; the check row
("Response Within 24 Hours", "No Obligation", "Senior Team Only") is a response-time promise and a badge row and
is not printed (a decision line for Jamie; its words stay in the Elementor data). */
/* The block shares its container (b337bad) with the roadmap strip, so the container keeps the measure and the block
bleeds to the page edge with negative margins; the legacy wrapper clips a scrollbar's width of spill. */
.page-id-37 .sn-legacy{overflow-x:clip}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-section{width:100vw!important;margin:0 0 0 calc(50% - 50vw)!important;background:var(--navy-black)!important;border:0!important;border-top:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;padding:calc(var(--beat) + 40px) var(--gutter) var(--beat)!important;text-align:center}
html body.sn-v2-chrome.page-id-37 .sn-legacy :is(.sn-cta-glow,.sn-cta-grid,.sn-cta-eyebrow,.sn-cta-trust){display:none!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-inner{max-width:1300px;margin:0 auto}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-inner h2{font-size:clamp(56px,6vw,84px)!important;font-weight:900!important;line-height:.98!important;letter-spacing:-.04em!important;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;margin:0!important;text-wrap:balance}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-inner p{font-size:24px!important;line-height:1.45!important;color:#fff!important;max-width:860px;margin:30px auto 0!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-actions{margin:48px 0 0!important;gap:20px 32px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-btn{display:inline-flex!important;align-items:center;height:58px!important;padding:0 30px!important;border:0!important;border-radius:3px!important;background:var(--accent)!important;color:#fff!important;font-size:16px!important;font-weight:600!important;letter-spacing:.005em!important;text-transform:none!important;box-shadow:none!important;transform:none!important;transition:filter .3s var(--ease)!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-btn:hover{filter:brightness(1.14)!important;transform:none!important;box-shadow:none!important}
/* The Elementor entrance animations (fadeInUp on the three cards, staggered) are off under the chrome, so the cards sit on
their grid line from the first frame; the roadmap strip's own type family gives way to the document layer. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-invisible{visibility:visible!important;opacity:1!important;animation:none!important;transform:none!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .animated{animation:none!important}
/* The chapters' containers stack their widgets from the left (the kit centered them), so each heading starts on the measure. */
html body.sn-v2-chrome.page-id-37 .sn-legacy .e-con:not(.elementor-element-11a7600):not(.sn-card-bg){--align-items:flex-start}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-ed4be59>.e-con-inner>.elementor-widget-text-editor{margin-left:0!important}
/* ---- 1d. TimeBridge (9018): the gradient-filled titles read solid white, the letterspaced uppercase buttons take the
V2 button, the table takes the V2 head row. Its own back link and copyright line are hidden above.
Review round four b: the page reads in the V2 system rather than its own: the boxed, rounded card becomes the page
(no border, radius, or shadow; the hero full bleed with the title at the family scale on the 1,300 px measure, the
chapters on the same measure), the hero glow, the card glows, the live-engine dot, and the emoji on Generate Report
go, the green figure reads white, and the consulting firm's section is not printed (a decision line for Jamie; the
close line and its button are reworded in inc/chrome.php). ------------------------------------------------------- */
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-grad-title{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.e-con,.e-con-inner,.elementor-widget-html,.elementor-widget-container){max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;--padding-left:0;--padding-right:0;--padding-top:0;--padding-bottom:0;--content-width:100%;--container-max-width:100%}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-wrap{max-width:none!important;padding:0!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-topbar{position:absolute;top:20px;left:0;right:0;z-index:12;width:min(1300px,calc(100% - 2*var(--gutter)));margin:0 auto;padding:0!important;justify-content:flex-end}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-section-problem,.tb-section-econ){background:transparent!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy{position:relative}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-main-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero{height:auto!important;min-height:74svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(72px + 104px) 0 112px}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-glow{display:none!important}
/* The photograph sits behind the copy (the widget set it in flow at 30 percent under a hue shift), at its own colors. */
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 30%!important;opacity:.85!important;filter:none!important;transform:none!important;z-index:0}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-overlay{position:absolute!important;inset:0!important;z-index:1}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero:hover .tb-hero-img{transform:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-overlay{background:linear-gradient(90deg,rgba(10,14,26,.9) 0%,rgba(10,14,26,.78) 40%,rgba(10,14,26,.32) 100%),linear-gradient(180deg,rgba(10,14,26,.26) 0%,rgba(10,14,26,.58) 100%)!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-content{position:relative!important;inset:auto!important;width:min(1300px,calc(100% - 2*var(--gutter)));margin:0 auto;z-index:10}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-title{font-size:clamp(72px,7.8vw,112px)!important;font-weight:900!important;line-height:.96!important;letter-spacing:-.045em!important;margin:0 0 24px!important;max-width:1100px}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-sub{font-size:24px!important;font-weight:400!important;line-height:1.45!important;color:#fff!important;opacity:1!important;max-width:860px!important;letter-spacing:0!important}
/* The chapters sit on the 1,300 px measure: the section paddings center them, the estimator panel keeps its own inset. */
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-section-problem,.tb-section-econ,.tb-section-cta){padding-left:max(var(--gutter),calc((100% - 1300px)/2))!important;padding-right:max(var(--gutter),calc((100% - 1300px)/2))!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-problem{padding-top:112px!important;padding-bottom:112px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-kzo{display:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-estimator{margin:0 max(var(--gutter),calc((100% - 1300px)/2)) 112px!important;border-radius:6px!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.12)!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-fee-card,.tb-kzo-logo,.tb-result-card,.tb-synthesis-box,.tb-table-wrap){box-shadow:none!important;border-radius:6px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-live-badge{background:none!important;border:0!important;padding:0!important;letter-spacing:.08em!important;font-size:13px!important;font-weight:500!important;color:var(--slate)!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-live-dot{display:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy #tb-report-btn>span+span{display:none!important}
/* Review round four b: the Synthesize Business Case card and its output are not printed until a server-side endpoint
exists (the widget posts from the browser to a model API with no key, so every click failed); the dot before each
eyebrow is the family's banned mark; the Download PDF button sits under the hero's lead line (moved there by
inc/chrome.php), so the top bar is gone. */
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-synthesis-box,#tb-ai-output,.tb-topbar,.tb-eyebrow-dot){display:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-content .tb-btn-ghost{margin-top:40px}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-result-value.tb-ok{color:#fff!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-h2{font-size:clamp(36px,3.4vw,48px)!important;line-height:1.04!important;letter-spacing:-.03em!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-cta{padding-top:0!important;padding-bottom:112px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-btn-primary,.tb-cta-link){display:inline-flex!important;align-items:center;justify-content:center;height:58px!important;padding:0 30px!important;border:0!important;border-radius:3px!important;background:var(--accent)!important;color:#fff!important;font-size:16px!important;font-weight:600!important;letter-spacing:.005em!important;text-transform:none!important;box-shadow:none!important;transform:none!important;transition:filter .3s var(--ease)!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-btn-primary,.tb-cta-link):hover{filter:brightness(1.14)!important;transform:none!important;box-shadow:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-btn-ghost{display:inline-flex!important;align-items:center;height:48px!important;padding:0 20px!important;border:0!important;border-radius:3px!important;background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)!important;color:#fff!important;font-size:15px!important;font-weight:600!important;letter-spacing:.005em!important;text-transform:none!important;transform:none!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff!important;background:transparent!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table-wrap{border-radius:6px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table th{font-size:14px!important;font-weight:500!important;letter-spacing:.04em!important;color:var(--slate)!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table .tb-td-accent{font-style:normal!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-cta-glow,.tb-kzo-glow){display:none!important}
/* ---- 1e. The two quizzes (AI Readiness Assessment 14563, AI Production Risk Scorecard 8938): the bar carries the
wordmark, so the quiz's own centered mark is hidden (markup untouched) and its kicker sits under the bar at the
V2 kicker size; the quiz card, its questions, and its result keep their own layout and scripts. ----------------- */
/* Each quiz page's own sheet hides every header and footer element (written to drop the theme's on its canvas); the V2
bar and footer are shown again by id and class. */
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) #nav{display:flex!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) footer.footer{display:block!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-logo,.sc-logo){display:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-kicker,.sc-kicker){margin-top:0!important;font-size:15px!important;font-weight:500!important;letter-spacing:.06em!important;color:rgba(255,255,255,.62)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-wrap,.sc-wrap){padding-top:40px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(#sn-rd,#sn-sc){min-height:calc(100vh - 72px)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-h1,.sc-h1){font-weight:900!important;letter-spacing:-.035em!important}
/* Review round four b: the quizzes read in the V2 system. The grid-line layer and the two radial glows go (the ground
is the page's black), the h1 is one color, the buttons are the V2 button (SemiBold, flat accent, the 3 px corner, no
sheen or arrow), the card and the option rows take the family's corner, the result's tier label and the four-step
scale are plain uppercase text (no pill borders), the recommended-path line is plain text, and the report form's
inputs are the boxed control on dark (the newsletter band's: white, 56 px, the white focus ring). -------------- */
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(#sn-rd,#sn-sc){background:var(--navy-black)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy #sn-rd::before,html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy #sn-sc::before,html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-grid,.sc-grid){display:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-hot,.sc-hot){color:inherit!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-btn,.sc-btn){font-weight:600!important;font-size:16px!important;letter-spacing:.005em!important;border-radius:3px!important;background:var(--accent)!important;box-shadow:none!important;transform:none!important;transition:filter .3s var(--ease)!important;padding:0 24px!important;height:56px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-btn,.sc-btn):hover{transform:none!important;box-shadow:none!important;filter:brightness(1.14)}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-btn,.sc-btn)::after,html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-arr,.sc-arr){display:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-card,.sc-card){background:#0d1117!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:6px!important;box-shadow:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-card,.sc-card)::before{display:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-opt,.sc-opt,.sc-route-opt){border-radius:4px!important;transform:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-opt,.sc-opt,.sc-route-opt)::before{background:var(--accent)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-tier-tag,.sc-tier-tag){border:0!important;padding:0!important;border-radius:0!important;font-size:13px!important;font-weight:500!important;letter-spacing:.08em!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-scale span{border:0!important;background:none!important;border-radius:0!important;padding:8px 0 0!important;font-size:12px!important;letter-spacing:.06em!important;border-top:2px solid rgba(255,255,255,.14)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-fix-pill{background:none!important;border:0!important;padding:0!important;border-radius:0!important;font-size:15px!important;letter-spacing:0!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-fix,.sc-fix){border-radius:6px!important;background:rgba(255,255,255,.03)!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important;border-left:3px solid var(--accent)!important;box-shadow:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-fix-lbl,.sc-fix-lbl,.rd-dim,.rd-panel-lbl){color:var(--slate)!important;letter-spacing:.08em!important;font-size:12px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-fix-pill{color:#fff!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-fix-pill a{color:#fff!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-field,.sc-field){height:56px!important;padding:0 18px!important;border:0!important;border-radius:3px!important;background:#fff!important;color:var(--ink)!important;font-size:17px!important;margin-bottom:12px!important;outline:2px solid transparent!important;outline-offset:3px!important;transition:outline-color .2s var(--ease)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-field,.sc-field)::placeholder{color:#64748B!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-field,.sc-field):focus{background:#fff!important;outline-color:#fff!important;border:0!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-track,.rd-track i){border-radius:0!important;box-shadow:none!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-err,.rd-sent,.sc-err,.sc-sent){border-radius:4px!important}
/* ---- 1f. The ICF coaching demo (8783): the page's own sheet centers the chat panel on a 100vh flex body, which put the
footer beside it; the body is a block again, the panel sits centered in its chapter under the bar, and nothing runs
past the phone's edge. ------------------------------------------------------------------------------------------- */
html body.sn-v2-chrome.page-id-8783{display:block!important;height:auto!important;min-height:0!important;align-items:stretch!important;justify-content:flex-start!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy{min-height:0;padding:calc(72px + 56px) 0 96px}
html body.sn-v2-chrome.page-id-8783 .sn-legacy :is(.elementor,.e-con,.e-con-inner,.elementor-widget,.elementor-widget-container){max-width:100%!important;min-width:0!important;width:auto!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .e-con{--padding-left:var(--gutter);--padding-right:var(--gutter)}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-container{height:min(760px,calc(100vh - 240px))!important;min-height:520px!important;max-width:600px!important;margin:0 auto!important;border-radius:6px!important;color:#1f2937}
/* The panel is white: its messages and its input read in ink, not the dark page's white (the wrapper's color). */
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-container :is(.chat-messages,.chat-messages *,.chat-input input,.chat-input textarea){color:#1f2937}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-container .chat-input :is(input,textarea)::placeholder{color:#64748B}
/* Review round four b: the header title wraps to two lines at 15 px rather than cutting mid-word (Public Sans runs
wider than the widget's Roboto); the client's logo and the partner's Powered by strip are not printed (a decision
line for Jamie; the markup is untouched); the attach button, whose own title says coming soon, is not printed, which
gives the input its width; the input and the buttons take the boxed control and the V2 corner. */
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-header{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:15px!important;line-height:1.35!important;padding:14px 20px!important;background:var(--navy)!important;letter-spacing:0!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy :is(.header-logo,.chat-footer .footer-section,.attach-btn){display:none!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-footer{justify-content:flex-end!important;background:var(--navy)!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input{padding:14px 16px!important;gap:10px}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input input[type="text"]{flex:1 1 auto!important;min-width:0!important;height:48px!important;margin:0!important;padding:0 16px!important;border:1.5px solid #CBD5E1!important;border-radius:3px!important;background:#fff!important;box-shadow:none!important;font-size:16px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input input[type="text"]:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(37,99,235,.16)!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input button{height:48px!important;padding:0 22px!important;border-radius:3px!important;background:var(--navy)!important;font-size:15px!important;font-weight:600!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .copy-btn{border-radius:3px!important}
@media (max-width:767px){
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-11a7600{--min-height:0;min-height:0;padding:calc(60px + 56px) var(--gutter) 64px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-33e754c .elementor-heading-title{font-size:46px!important;line-height:1!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-69caffd{--padding-top:64px;--padding-bottom:64px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-element-ed4be59{--padding-bottom:64px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-heading:not(.elementor-element-33e754c) h2{font-size:36px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg .elementor-widget-heading h2{font-size:22px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-title{font-size:36px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-sub{font-size:18px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-panel{padding:20px 16px 22px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stages{row-gap:22px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage{padding:16px 18px 18px 20px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage b{font-size:18px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-stage>span{font-size:16px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .snsq-j{left:24px!important;top:-22px!important;width:1px!important;height:10px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-text-editor :is(p,li){font-size:18px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-card-bg{--padding-top:28px;--padding-bottom:28px;--padding-left:24px;--padding-right:24px}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-section{padding:var(--beat) var(--gutter)!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-inner h2{font-size:40px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-inner p{font-size:18px!important;margin-top:20px!important}
html body.sn-v2-chrome.page-id-37 .sn-legacy .sn-cta-actions{margin-top:32px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy{padding:calc(60px + 32px) 0 64px}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-container{height:min(680px,calc(100vh - 200px))!important;min-height:460px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-header{font-size:14px!important;padding:12px 16px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input{padding:12px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input input[type="text"]{padding:0 12px!important;font-size:16px!important}
html body.sn-v2-chrome.page-id-8783 .sn-legacy .chat-input button{padding:0 16px!important}
/* TimeBridge on the phone: the hero shorter, the Download PDF button under the bar, the sections at the gutter, and the
three-column table inside the screen (min-width off, the cells at 12 px) so Break-Even is on screen, no scroller. */
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-topbar{top:16px}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero{min-height:0;padding:calc(60px + 72px) 0 64px}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-title{font-size:46px!important;line-height:1!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-hero-sub{font-size:18px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-problem{padding-top:64px!important;padding-bottom:64px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-estimator{margin-bottom:64px!important;padding:28px 20px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-section-cta{padding-bottom:64px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table{min-width:0!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table :is(th,td){padding:14px 12px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table th{font-size:11px!important;letter-spacing:.06em!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table :is(.tb-td-main,.tb-td-accent){font-size:18px!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table .tb-td-sub{font-size:15px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-wrap,.sc-wrap){padding-top:28px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(#sn-rd,#sn-sc){min-height:calc(100vh - 60px)!important}
}
/* ---- 1g. Round 5 site review (November 4, pages lane): type floors and small fixes on the Keep As Is pages, and one
guard for the chromed posts. Every rule reverts by deleting its line. ------------------------------------------- */
/* The two quizzes: the credit line, the mono labels, the tier scale, and the "or" divider at 12 or 13 px (were 9.5 to
11.5 px); the result screen's 01 to 03 dimension index never prints (the Customizer sheet hides it; stated here too). */
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-cred,.sc-cred){font-size:13px!important;letter-spacing:0!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-dim,.rd-panel-lbl,.rd-fix-lbl,.sc-fix-lbl,.sc-disclaimer,.rd-or,.sc-or,.rd-num small,.sc-num small,.rd-scale span,.rd-idx,.rd-kicker,.sc-kicker){font-size:12px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-kicker,.sc-kicker){font-size:15px!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-idx{display:none!important}
/* The coaching demo: the Copy Conversation button at 13 px (was 0.75 em, 10.8 px). */
html body.sn-v2-chrome.page-id-8783 .sn-legacy .copy-btn{font-size:13px!important}
/* TimeBridge: the estimator's labels, units, and sub-labels at 13 px (were 9 to 11 px). */
html body.sn-v2-chrome.page-id-9018 .sn-legacy :is(.tb-input-label,.tb-input-unit,.tb-fee-label,.tb-fee-sub,.tb-result-card-label,.tb-result-unit,.tb-copy-btn,.tb-live-badge,.tb-table th){font-size:13px!important}
/* The quizzes' sent-state route (Discuss Your Results) takes the V2 button in place of the widget's teal gradient pill. */
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-book,.sc-book){display:inline-flex!important;align-items:center;justify-content:center;height:52px!important;padding:0 24px!important;border-radius:3px!important;background:var(--accent)!important;background-image:none!important;color:#fff!important;font-size:16px!important;font-weight:600!important;letter-spacing:.005em!important;box-shadow:none!important;text-shadow:none!important;transform:none!important;transition:filter .3s var(--ease)!important}
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy :is(.rd-book,.sc-book):hover{filter:brightness(1.14);transform:none!important;box-shadow:none!important}
/* TimeBridge's table: the "Mo" unit beside the monthly fee (an inline 9 px style) at 12 px. */
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-td-sub span{font-size:12px!important}
/* AB Partner Provisioning: the password and captcha inputs at 16 px, so iOS Safari does not zoom the page on focus. */
html body.sn-v2-chrome.page-id-9261 .sn-legacy :is(input[type="password"],input[type="text"],.aiowps-captcha-answer){font-size:16px!important}
/* Chromed posts: a stored inline width on a caption figure (one post carries width: 1920px) never widens the document;
the figure and its image fit the column and the caption wraps. */
html body.sn-v2-chrome .wp-caption{width:auto!important;max-width:100%!important}
html body.sn-v2-chrome .wp-caption img{max-width:100%!important;height:auto!important}
@media (max-width:767px){
html body.sn-v2-chrome:is(.page-id-14563,.page-id-8938) .sn-legacy .rd-scale span{font-size:12px!important;letter-spacing:.04em!important}
html body.sn-v2-chrome.page-id-9018 .sn-legacy .tb-table th{font-size:12px!important}
}
/* ---- Business Process Consulting under 380 px (cutover preparation, November 4) ----------------------------------------
The section heads keep "High-Accountability" on one line (a no-wrap span), and at 36 px that compound is 334 px wide,
22 px past the 312 px column at 360. Under 380 px the size follows the column, so the compound always fits (about
33 px at 360, 29 px at 320; 36 px from 380 px up as before). */
@media (max-width:379px){
html body.sn-v2-chrome.page-id-37 .sn-legacy .elementor-widget-heading:not(.elementor-element-33e754c) h2{font-size:calc((100vw - 48px) / 9.5)!important}
}