/* cenovel.com, direction A (Platinum), 2026-10-11. The shell and the components every site page is built from.
   Colors, sizes and motion come from tokens.css (the --cv-* names); nothing here sets a color literal except the
   faint white washes inside the always-dark Titanium band. Classes are unique to this file so the documentation's own
   stylesheets, loaded on docs pages, cannot collide with them. */
@font-face{font-family:Schibsted;src:url('/assets/h/sans.4c8b93f431.woff2') format('woff2');font-weight:100 900;font-display:optional}

/* ---------- Base (site pages: body.cv) ---------- */
.cv,.cv *,.cv *::before,.cv *::after{box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:var(--cv-line) transparent}
body.cv{margin:0;background:var(--cv-page);color:var(--cv-ink);font:400 var(--cv-fs-body)/1.6 var(--cv-font);-webkit-font-smoothing:antialiased}
:where(.cv) a{color:inherit;text-decoration:none}
:where(.cv) :is(button,input,textarea){font:inherit;color:inherit}
.cv :focus-visible{outline:2px solid var(--cv-blue);outline-offset:3px;border-radius:4px}
.cv h1,.cv h2,.cv h3,.cv h4{font-weight:500;margin:0;text-wrap:balance;color:var(--cv-ink)}
.cv h1{font-size:var(--cv-fs-display);line-height:1.07;letter-spacing:-.035em}
.cv h2{font-size:var(--cv-fs-section);line-height:1.15;letter-spacing:-.025em}
.cv h3{font-size:var(--cv-fs-card);line-height:1.35;letter-spacing:-.01em}
.cv h4{font-size:var(--cv-fs-small);line-height:1.4}
:where(.cv) p{margin:0}
:where(.cv) :is(strong,b){font-weight:500}
.cv code{font-family:var(--cv-mono);font-size:.875em;background:var(--cv-well);border:1px solid var(--cv-line-soft);border-radius:4px;padding:0 4px}
.cv-wrap{max-width:calc(var(--cv-container) + 2 * var(--cv-gutter));margin:0 auto;padding:0 var(--cv-gutter)}
.cv-skip{position:fixed;top:-100px;left:16px;z-index:30;background:var(--cv-card);color:var(--cv-ink);padding:10px 14px;border-radius:var(--cv-radius-sm);box-shadow:var(--cv-shadow-hover)}
.cv-skip:focus{top:12px}
.cv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cv-muted{color:var(--cv-muted)}
.cv-link{color:var(--cv-blue-text);font-size:14px;font-weight:500;display:inline-flex;gap:6px;align-items:center}
.cv-link:hover{text-decoration:underline;text-underline-offset:4px}
.cv-link span[aria-hidden]{transition:transform var(--cv-dur) var(--cv-ease)}
.cv-link:hover span[aria-hidden]{transform:translateX(2px)}
.cv-eyebrow{display:block;font-size:var(--cv-fs-meta);font-weight:500;color:var(--cv-blue-text);letter-spacing:.01em;margin-bottom:16px}

/* ---------- Desktop scroll box: the scrollbar starts under the bar (as SITESCROLL, 2026-10-06) ---------- */
@media screen and (min-width:801px){
  body.cv{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  body.cv>.cv-bar{flex:none}
  body.cv>.page-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;outline:none;scrollbar-width:thin;scrollbar-color:var(--cv-line) transparent}
  html:has(body.cv){scroll-padding-top:0}
  body.cv .page-scroll{scroll-padding-top:24px}
}
@media screen and (min-width:801px) and (prefers-reduced-motion:no-preference){body.cv>.page-scroll{scroll-behavior:smooth}}
@media print{body.cv{height:auto;display:block;overflow:visible}body.cv>.page-scroll{overflow:visible}}

/* ---------- Buttons ---------- */
.cv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:var(--cv-radius-sm);font-size:14px;font-weight:500;line-height:1.2;
  background:var(--cv-blue);color:var(--cv-on-blue);border:1px solid var(--cv-blue);cursor:pointer;white-space:nowrap;transition:background-color var(--cv-dur) var(--cv-ease),border-color var(--cv-dur) var(--cv-ease)}
.cv-btn:hover{background:var(--cv-blue-hover);border-color:var(--cv-blue-hover)}
.cv-btn.ghost{background:transparent;color:var(--cv-ink);border-color:var(--cv-line)}
.cv-btn.ghost:hover{background:var(--cv-card)}
.cv-btn.sm{min-height:36px;padding:0 14px}
.cv-btn[disabled],.cv-btn[aria-disabled="true"]{opacity:.6;cursor:default}
.cv-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- The Titanium bar ---------- */
.cv-bar{flex:none;position:sticky;top:0;z-index:20;background:linear-gradient(160deg,var(--cv-chrome-1),var(--cv-chrome-2));color:var(--cv-on-chrome);border-bottom:1px solid var(--cv-chrome-line);color-scheme:dark}
.cv-bar::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--cv-lift)}
.cv-bar :focus-visible{outline-color:var(--cv-chrome-focus)}
.cv-bar-inner{position:relative;z-index:1;display:flex;align-items:center;gap:28px;height:var(--cv-bar)}
.cv-brand{display:inline-flex;align-items:center;flex:none}
.cv-brand img{display:block;width:120px;height:24px}
.cv-nav{display:flex;align-items:center;flex:1;gap:20px;min-width:0}
.cv-nav-main{display:flex;gap:4px;font-size:14px;font-weight:500}
.cv-nav-main a{position:relative;padding:8px 12px;border-radius:7px;color:var(--cv-on-chrome)}
.cv-nav-side{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.cv-quiet{color:var(--cv-on-chrome-muted);padding:8px 10px;border-radius:7px;transition:color var(--cv-dur) var(--cv-ease)}
.cv-quiet:hover,.cv-quiet[aria-current]{color:var(--cv-on-chrome)}
/* The header link underline, back from the earlier site (2026-10-03, c4f1921c9 and 3cbfd85e9): a 2px line drawn in
   from the left under the word on hover and keyboard focus (180 ms in, 120 ms out), held under the current page.
   It spans the word, not the padding, and sits 3px under the text so the 36px target is unchanged. Transform only;
   under reduced motion it appears and disappears without the draw. Phone menu: the same line, under the word. */
.cv-nav-main a::after,.cv-bar .cv-quiet::after{content:"";position:absolute;left:12px;right:12px;top:calc(50% + .85em);height:2px;border-radius:1px;
  background:var(--cv-chrome-focus);opacity:.75;transform:scaleX(0);transform-origin:left center;pointer-events:none;transition:transform 120ms var(--cv-ease)}
.cv-bar .cv-quiet{position:relative}
.cv-bar .cv-quiet::after{left:10px;right:10px}
@media (hover:hover){.cv-nav-main a:hover::after,.cv-bar .cv-quiet:hover::after{transform:scaleX(1);transition-duration:180ms}}
.cv-nav-main a:focus-visible::after,.cv-bar .cv-quiet:focus-visible::after{transform:scaleX(1);transition-duration:180ms}
.cv-nav-main a[aria-current]::after,.cv-bar .cv-quiet[aria-current]::after{transform:scaleX(1);opacity:1}
@media (prefers-reduced-motion:reduce){.cv-nav-main a::after,.cv-bar .cv-quiet::after{transition:none}}
.cv-portal{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:7px;border:1px solid var(--cv-chrome-line-strong);color:var(--cv-on-chrome);transition:background-color var(--cv-dur) var(--cv-ease)}
.cv-portal:hover{background:var(--cv-lift)}
.cv-portal svg{flex:none;opacity:.75}
.cv-bar .cv-btn,.cv-band .cv-btn{background:var(--cv-chrome-action);border-color:var(--cv-chrome-action);color:var(--cv-on-chrome-action)}
.cv-bar .cv-btn:hover,.cv-band .cv-btn:hover{background:var(--cv-chrome-action-hover);border-color:var(--cv-chrome-action-hover)}
.cv-menu{display:none;margin-left:auto;min-height:40px;padding:0 14px;border-radius:7px;border:1px solid var(--cv-chrome-line-strong);background:transparent;color:var(--cv-on-chrome);font-size:14px;font-weight:500;cursor:pointer}
@media (max-width:1023px){
  .cv-bar-inner{flex-wrap:wrap;height:auto;min-height:var(--cv-bar);padding-block:12px;gap:12px}
  .cv-menu{display:inline-flex;align-items:center}
  .cv-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:12px;padding:8px 0 4px}
  .cv-nav.open{display:flex}
  .cv-nav-main{flex-direction:column;align-items:flex-start}
  .cv-nav-side{margin-left:0;flex-wrap:wrap}
}

/* ---------- Hero ---------- */
.cv-hero,.cv-subhero{background:radial-gradient(800px 380px at 15% 0%,var(--cv-hero-glow),transparent 70%),linear-gradient(180deg,var(--cv-page-low),var(--cv-page))}
.cv-hero{padding:72px 0 56px}
.cv-subhero{padding:56px 0 48px}
.cv-hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.cv-lead{font-size:var(--cv-fs-lead);line-height:1.55;color:var(--cv-muted);margin-top:22px;max-width:34em}
.cv-subhero h1{font-size:var(--cv-fs-title);line-height:1.1;letter-spacing:-.03em}
.cv-subhero .cv-lead{max-width:40em;margin-top:18px}
.cv-hero .cv-actions,.cv-subhero .cv-actions{margin-top:30px}
.cv-fine{font-size:var(--cv-fs-meta);color:var(--cv-faint);margin-top:18px}
.cv-crumb{display:flex;gap:8px;font-size:var(--cv-fs-meta);color:var(--cv-muted);margin-bottom:16px}
.cv-crumb a{color:var(--cv-blue-text)}
.cv-crumb a:hover{text-decoration:underline;text-underline-offset:3px}

/* A product screen in a silver frame. */
.cv-frame{margin:0;position:relative;background:var(--cv-card);border-radius:var(--cv-radius-lg);padding:8px;box-shadow:0 0 0 1px var(--cv-line),var(--cv-shadow)}
.cv-frame::before{content:"";position:absolute;inset:0;border-radius:var(--cv-radius-lg);padding:1px;pointer-events:none;
  background:linear-gradient(160deg,var(--cv-silver-1),var(--cv-silver-2) 40%,var(--cv-silver-3) 60%,var(--cv-silver-4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cv-frame img{display:block;width:100%;height:auto;border-radius:var(--cv-radius-sm)}
.cv-frame figcaption,.cv-tour-cap{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--cv-fs-meta);color:var(--cv-muted);padding:10px 6px 2px}
.cv-frame figcaption a{color:var(--cv-blue-text);font-weight:500;white-space:nowrap}
.cv-frame figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.cv-shot-crop{aspect-ratio:16/10;overflow:hidden;border-radius:var(--cv-radius-sm)}
.cv-shot-crop img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:0}

/* The hero tour: three real screens, crossfaded every 6 s (platinum.js). Without JavaScript or with reduced motion
   it shows the first screen, and the buttons still pick one. */
.cv-tour{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--cv-radius-sm);background:var(--cv-chrome-2)}
.cv-tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:0;opacity:0;transition:opacity var(--cv-dur) var(--cv-ease)}
.cv-tour img.on{opacity:1}
.cv-tour-dots{display:flex;gap:2px;align-items:center}
.cv-tour-dots button{width:22px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.cv-tour-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cv-line);transition:background-color var(--cv-dur) var(--cv-ease)}
.cv-tour-dots button[aria-pressed="true"]::before{background:var(--cv-blue)}
.cv-tour-cap a{color:var(--cv-blue-text);font-weight:500}

/* ---------- Sections and their heads ---------- */
.cv-s{padding:72px 0;border-top:1px solid var(--cv-line)}
.cv-s.flush{border-top:0;padding-top:8px}
.cv-s.tight{padding:56px 0}
.cv-s-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:32px;align-items:end}
.cv-s-head p{color:var(--cv-muted);font-size:17px}
.cv-s-head.solo{grid-template-columns:1fr}
.cv-s-foot{margin-top:24px}
.cv-note{margin-top:20px;font-size:14px;color:var(--cv-muted)}
.cv-g2,.cv-g3,.cv-g4{display:grid;gap:20px}
.cv-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cv-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cv-list{list-style:none;margin:0;padding:0}

/* ---------- Cards: one style site-wide. Head, body, and a link pinned to the bottom so a row lines up. ---------- */
.cv-card{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cv-card p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-card .cv-link{margin-top:auto;padding-top:8px}
.cv-card .cv-k{font-size:var(--cv-fs-meta);color:var(--cv-muted)}
a.cv-card,.cv-card.is-link{transition:transform var(--cv-dur) var(--cv-ease),box-shadow var(--cv-dur) var(--cv-ease),border-color var(--cv-dur) var(--cv-ease)}
a.cv-card:hover,.cv-card.is-link:hover{transform:translateY(-2px);box-shadow:var(--cv-shadow-hover)}
a.cv-card .cv-go{margin-top:auto;padding-top:8px;color:var(--cv-blue-text);font-size:14px;font-weight:500}
.cv-card.soft{background:var(--cv-blue-soft);border-color:transparent}
.cv-card.soft p{color:var(--cv-ink)}
.cv-card ul{margin:4px 0 0;padding-left:18px;color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-card ul li+li{margin-top:4px}
.cv-cap{padding:0;overflow:hidden}
.cv-cap .cv-shot{height:168px;overflow:hidden;border-bottom:1px solid var(--cv-line-soft);background:var(--cv-chrome-2)}
.cv-cap .cv-shot img{display:block;width:100%;height:auto}
.cv-cap .cv-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.cv-cap .cv-body .cv-link{margin-top:auto}
.cv-num{font-size:var(--cv-fs-meta);color:var(--cv-blue-text);font-weight:500}

/* Audience doors under the hero. */
.cv-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cv-door{padding:28px 28px 24px;gap:10px}
.cv-door h3{font-size:var(--cv-fs-subhead);line-height:1.3}
.cv-chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0}
.cv-chips li{font-size:12px;border:1px solid var(--cv-line);border-radius:999px;padding:3px 10px;color:var(--cv-muted)}

/* ---------- The Titanium band (customer band, closing call) ---------- */
.cv-band{background:linear-gradient(160deg,var(--cv-chrome-1),var(--cv-chrome-2));color:var(--cv-on-chrome);border:1px solid var(--cv-chrome-line);border-radius:16px;padding:40px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;color-scheme:dark}
.cv-band h2{color:var(--cv-on-chrome)}
.cv-band p{color:var(--cv-on-chrome-muted);margin-top:12px}
.cv-band .cv-actions{margin-top:22px}
.cv-band .cv-actions.end{justify-content:flex-end;margin-top:0}
.cv-band :focus-visible{outline-color:var(--cv-chrome-focus)}
.cv-band .cv-btn.ghost{background:transparent;border-color:var(--cv-chrome-line-strong);color:var(--cv-on-chrome)}
.cv-band .cv-btn.ghost:hover{background:var(--cv-lift)}
.cv-band-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.cv-band-list li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--cv-radius-sm);padding:12px 14px;font-size:14px;color:var(--cv-on-chrome)}

/* ---------- The two-option switch (Solutions) ---------- */
.cv-seg{display:inline-flex;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:9px;padding:3px;gap:2px}
.cv-seg a{padding:7px 16px;border-radius:7px;font-size:14px;font-weight:500;color:var(--cv-muted);transition:background-color var(--cv-dur) var(--cv-ease),color var(--cv-dur) var(--cv-ease)}
.cv-seg a:hover{color:var(--cv-ink)}
.cv-seg a[aria-current]{background:var(--cv-blue-soft);color:var(--cv-blue-text)}
.cv-subhero .cv-hero-grid{margin-top:32px}

/* ---------- Fact rows and questions ---------- */
.cv-facts{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);margin:0}
.cv-facts>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 22px;border-top:1px solid var(--cv-line-soft);font-size:var(--cv-fs-small)}
.cv-facts>div:first-child{border-top:0}
.cv-facts dt{font-weight:500}
.cv-facts dd{margin:0;color:var(--cv-muted)}
.cv-facts a{color:var(--cv-blue-text)}
.cv-facts a:hover{text-decoration:underline;text-underline-offset:3px}
.cv-faq{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius)}
.cv-faq details{border-top:1px solid var(--cv-line-soft);padding:16px 22px}
.cv-faq details:first-child{border-top:0}
.cv-faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.cv-faq summary::-webkit-details-marker{display:none}
.cv-faq summary::after{content:"+";color:var(--cv-muted);font-weight:400;flex:none;transition:transform var(--cv-dur) var(--cv-ease)}
.cv-faq details[open] summary::after{transform:rotate(45deg)}
.cv-faq details p{color:var(--cv-muted);margin-top:8px;max-width:52em}
.cv-faq a{color:var(--cv-blue-text)}
.cv-faq a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Placeholder slot: a visual that waits for the neutral demo world (Opal item 72) ---------- */
.cv-slot{display:grid;place-items:center;text-align:center;aspect-ratio:16/10;border:1px dashed var(--cv-line);border-radius:var(--cv-radius-sm);background:var(--cv-well);color:var(--cv-muted);font-size:14px;padding:24px}

/* ---------- Footer ---------- */
.cv-foot{margin-top:72px;background:linear-gradient(160deg,var(--cv-chrome-1),var(--cv-chrome-2));color:var(--cv-on-chrome-muted);font-size:14px;color-scheme:dark}
.cv-foot :focus-visible{outline-color:var(--cv-chrome-focus)}
.cv-foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-top:48px;padding-bottom:28px}
.cv-foot h2{color:var(--cv-on-chrome);font-weight:500;font-size:14px;letter-spacing:0;margin:0 0 12px}
.cv-foot ul{list-style:none;margin:0;padding:0}
.cv-foot li a{display:inline-block;padding:3px 0;color:var(--cv-on-chrome-muted);transition:color var(--cv-dur) var(--cv-ease)}
.cv-foot li a:hover{color:var(--cv-on-chrome)}
.cv-foot .cv-brand img{width:110px;height:22px}
.cv-foot-about{margin-top:14px;max-width:24em}
.cv-foot-legal{border-top:1px solid var(--cv-chrome-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:28px}
.cv-foot-legal nav{display:flex;flex-wrap:wrap;gap:16px}
.cv-foot-legal a{color:var(--cv-on-chrome-muted)}
.cv-foot-legal a:hover{color:var(--cv-on-chrome)}

/* ---------- Page transitions: one 150 ms crossfade; the bar never moves ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .cv-bar{view-transition-name:cv-bar}
  ::view-transition-group(cv-bar),::view-transition-old(cv-bar),::view-transition-new(cv-bar){animation:none}
  ::view-transition-old(cv-bar){opacity:0}
  ::view-transition-old(root){animation:cv-fade-out var(--cv-dur) var(--cv-ease) both}
  ::view-transition-new(root){animation:cv-fade-in var(--cv-dur) var(--cv-ease) both}
  @keyframes cv-fade-out{to{opacity:0}}
  @keyframes cv-fade-in{from{opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .cv *,.cv *::before,.cv *::after{transition:none!important;animation:none!important}
}

/* ---------- Narrow screens: the site stays readable on a phone ---------- */
@media (max-width:1023px){
  .cv-hero-grid,.cv-s-head,.cv-band{grid-template-columns:1fr;gap:32px}
  .cv-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--cv-gutter:16px;--cv-fs-display:38px;--cv-fs-title:32px;--cv-fs-section:28px}
  .cv-hero{padding:40px 0}
  .cv-doors,.cv-g2,.cv-g3,.cv-g4{grid-template-columns:1fr}
  .cv-facts>div{grid-template-columns:1fr;gap:4px}
  .cv-band{padding:28px}
  .cv-s{padding:48px 0}
  .cv-foot-grid{grid-template-columns:1fr}
}

/* ---------- Page pieces added with the solutions pages ---------- */
.cv-go{display:inline-flex;gap:6px}
.cv-links{display:flex;flex-wrap:wrap;gap:8px 24px}
.cv-split{align-items:start}
.cv-crop{overflow:hidden;border-radius:var(--cv-radius-sm);background:var(--cv-chrome-2)}
.cv-wide img{width:100%}

/* The network diagram (Trust and Enterprise). Colors come from tokens, so it reads in both themes. */
.cv-net{margin:0;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:24px 24px 14px}
.cv-net-svg{display:block;width:100%;height:auto;font-family:var(--cv-font)}
.cv-net-svg .n-zone{fill:var(--cv-well);stroke:var(--cv-line);stroke-dasharray:4 5}
.cv-net-svg .n-zone-label{fill:var(--cv-muted);font-size:13px;font-weight:500}
.cv-net-svg .n-node rect{fill:var(--cv-card);stroke:var(--cv-line);stroke-width:1.2}
.cv-net-svg .n-node text{fill:var(--cv-ink);font-size:14px;font-weight:500}
.cv-net-svg .n-node .n-sub{fill:var(--cv-muted);font-size:12px;font-weight:400}
.cv-net-svg .n-core rect{fill:var(--cv-blue-soft);stroke:var(--cv-blue);stroke-width:1.6}
.cv-net-svg .n-none rect{fill:none;stroke:var(--cv-faint);stroke-dasharray:3 4}
.cv-net-svg .n-none text{fill:var(--cv-muted);font-weight:400}
.cv-net-svg .n-wire{fill:none;stroke:var(--cv-faint);stroke-width:1.4}
.cv-net-svg .n-wire.opt{stroke-dasharray:3 4}
.cv-net-svg .n-arrowhead{fill:var(--cv-faint)}
.cv-net-svg .n-port{fill:var(--cv-muted);font-size:12px}
.cv-net figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--cv-fs-meta);color:var(--cv-muted);border-top:1px solid var(--cv-line-soft);margin-top:16px;padding-top:12px}
.cv-net figcaption a{color:var(--cv-blue-text);font-weight:500}
.cv-net figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.cv-net-acts{display:inline-flex;align-items:center;gap:20px}
.cv-motion-btn{font-size:var(--cv-fs-meta);font-weight:500;color:var(--cv-blue-text);background:none;border:0;padding:0;cursor:pointer;min-width:3.4em;text-align:left}
.cv-motion-btn:hover{text-decoration:underline;text-underline-offset:3px}
/* Motion on the diagram (platinum.js adds the classes; no JavaScript or reduced motion: the still drawing).
   cv-draw: solid connections start undrawn and draw out from where they start (pathLength 1); arrowheads wait until
   cv-wired. Packets travel each solid connection in its direction. */
.cv-net.cv-draw .n-wire[data-flow]{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset var(--cv-dur-draw) var(--cv-ease-enter)}
.cv-net.cv-draw:not(.cv-wired) .n-wire{marker-end:none}
.cv-net.cv-drawn .n-wire[data-flow]{stroke-dashoffset:0}
.cv-net.cv-drawn .n-wire[data-flow]:nth-of-type(2n){transition-delay:120ms}
.cv-net.cv-drawn .n-wire[data-flow]:nth-of-type(3n){transition-delay:240ms}
.cv-net-svg .n-packet{fill:var(--cv-blue)}
.cv-net-svg .n-packet-halo{fill:var(--cv-blue);opacity:.2}

/* Scroll reveals on site pages (platinum.js): blocks that start below the first screen rise 24px into place as they
   arrive, list items a step apart. Translation only: copy is never faded, and nothing on the first screen moves. */
@media (prefers-reduced-motion:no-preference){
  .cv .cv-rise{transform:translateY(24px);transition:transform var(--cv-dur-enter) var(--cv-ease-enter);transition-delay:calc(var(--cv-i,0) * 70ms)}
  .cv .cv-rise.cv-in{transform:none}
}

/* ---------- Article pages (trust, requirements, legal, what's new): a head, an outline, sections on cards ---------- */
.cv-article{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;padding-top:8px}
.cv-article.no-toc{grid-template-columns:minmax(0,1fr)}
.cv-article.no-toc .cv-prose{max-width:880px}
.cv-toc{position:sticky;top:24px;font-size:14px}
.cv-toc h2{font-size:var(--cv-fs-meta);font-weight:500;color:var(--cv-muted);letter-spacing:.01em;margin:0 0 10px}
.cv-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--cv-line)}
.cv-toc a{display:block;padding:5px 0 5px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--cv-muted);line-height:1.35;transition:color var(--cv-dur) var(--cv-ease),border-color var(--cv-dur) var(--cv-ease)}
.cv-toc a:hover{color:var(--cv-ink)}
.cv-toc a[aria-current]{color:var(--cv-blue-text);border-left-color:var(--cv-blue)}
.cv-prose{display:grid;gap:20px;min-width:0}
.cv-prose>section{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:28px 32px;min-width:0;scroll-margin-top:24px}
.cv-prose h2{font-size:var(--cv-fs-subhead);line-height:1.3;letter-spacing:-.015em;margin:0 0 14px}
.cv-prose h3{font-size:17px;margin:24px 0 8px;scroll-margin-top:24px}
.cv-prose h4{font-size:var(--cv-fs-small);margin:16px 0 6px}
.cv-prose p,.cv-prose ul,.cv-prose ol{margin:0 0 12px;color:var(--cv-ink);font-size:var(--cv-fs-body);line-height:1.65}
.cv-prose>section>:last-child,.cv-prose>section>:last-child>:last-child{margin-bottom:0}
.cv-prose ul,.cv-prose ol{padding-left:22px}
.cv-prose li+li{margin-top:6px}
.cv-prose a{color:var(--cv-blue-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--cv-blue-text) 35%,transparent);text-underline-offset:3px}
.cv-prose a:hover{text-decoration-color:currentColor}
.cv-prose a.cv-btn{color:var(--cv-on-blue);text-decoration:none}
.cv-prose a.cv-btn.ghost{color:var(--cv-ink)}
.cv-prose dl.facts{display:grid;grid-template-columns:200px minmax(0,1fr);margin:4px 0 12px;border-top:1px solid var(--cv-line-soft)}
.cv-prose dl.facts dt,.cv-prose dl.facts dd{padding:12px 0;border-bottom:1px solid var(--cv-line-soft);margin:0}
.cv-prose dl.facts dt{font-weight:500;padding-right:20px}
.cv-prose dl.facts dd{color:var(--cv-muted)}
.cv-prose .table-wrap{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--cv-line);border-radius:var(--cv-radius-sm)}
.cv-prose table{width:100%;border-collapse:collapse;font-size:var(--cv-fs-small)}
.cv-prose th{text-align:left;font-weight:500;color:var(--cv-muted);background:var(--cv-well);white-space:nowrap}
.cv-prose th,.cv-prose td{padding:10px 14px;border-bottom:1px solid var(--cv-line-soft);vertical-align:top}
.cv-prose tr:last-child td{border-bottom:0}
.cv-prose .code-wrap{position:relative;margin:4px 0 14px}
.cv-prose pre{margin:0;overflow-x:auto;background:var(--cv-chrome-2);color:var(--cv-on-chrome);border-radius:var(--cv-radius-sm);padding:14px 16px;font:13px/1.6 var(--cv-mono)}
.cv-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.cv-prose .copy{position:absolute;top:8px;right:8px;min-height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--cv-chrome-line-strong);background:var(--cv-chrome-1);color:var(--cv-on-chrome);font-size:12px;cursor:pointer}
.cv-prose .see-also{font-size:14px;color:var(--cv-muted);border-top:1px solid var(--cv-line-soft);padding-top:12px;margin-top:16px}
.cv-prose .note,.cv-prose .empty-state{background:var(--cv-well);border:1px solid var(--cv-line-soft);border-radius:var(--cv-radius-sm);padding:12px 16px;font-size:var(--cv-fs-small)}
.cv-prose .pending-note{background:var(--cv-warn-soft);border-color:transparent}
.cv-prose .empty-state p{margin:0}
.cv-prose .link-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.cv-prose .advisory{border-top:1px solid var(--cv-line-soft);padding-top:12px}
.cv-prose .try-demo{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;background:var(--cv-blue-soft);border-radius:var(--cv-radius-sm);padding:14px 16px;margin:4px 0 12px}
.cv-prose .try-demo p{margin:0}
.cv-prose .text-link{font-weight:500;text-decoration:none}
.cv-prose .cv-actions{margin-top:8px}
.cv-updated{font-size:var(--cv-fs-meta);color:var(--cv-faint);margin-top:14px}

/* ---------- Product pages: a row per capability, the screen beside its facts ---------- */
.cv-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.cv-row.flip>:first-child{order:2}
.cv-row h3{font-size:var(--cv-fs-subhead);line-height:1.3;margin-bottom:10px}
.cv-row>div>p{color:var(--cv-muted);margin-bottom:14px}
.cv-ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.cv-ticks li{position:relative;padding-left:22px;font-size:var(--cv-fs-small);color:var(--cv-ink)}
.cv-ticks li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--cv-blue);opacity:.8}
.cv-row .cv-links{margin-top:4px}
.cv-rows{display:grid;gap:64px}
.cv-table-wrap{overflow-x:auto;border:1px solid var(--cv-line);border-radius:var(--cv-radius);background:var(--cv-card)}
.cv-table{width:100%;border-collapse:collapse;font-size:var(--cv-fs-small)}
.cv-table th{text-align:left;font-weight:500;color:var(--cv-muted);background:var(--cv-well);white-space:nowrap}
.cv-table th,.cv-table td{padding:12px 16px;border-bottom:1px solid var(--cv-line-soft);vertical-align:top}
.cv-table tr:last-child td{border-bottom:0}
.cv-stat{font-size:var(--cv-fs-section);font-weight:500;letter-spacing:-.02em;line-height:1.1}

/* A short recording of the demo: the poster first; it plays while on screen unless motion is reduced. */
.cv-capture video,.cv-capture img{display:block;width:100%;height:auto;border-radius:var(--cv-radius-sm)}
.cv-capture .cv-cap-stage{position:relative;aspect-ratio:8/5;overflow:hidden;border-radius:var(--cv-radius-sm);background:var(--cv-chrome-2)}
.cv-capture .cv-cap-stage>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv-capture video{opacity:0;transition:opacity var(--cv-dur) var(--cv-ease)}
.cv-capture.playing video{opacity:1}
.cv-capture button{font-size:var(--cv-fs-meta);font-weight:500;color:var(--cv-blue-text);background:none;border:0;padding:0;cursor:pointer}

/* ---------- The request form ---------- */
.cv-form-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.cv-form{display:grid;gap:18px}
.cv-form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.cv-form legend,.cv-field>label{font-size:14px;font-weight:500;padding:0;margin-bottom:6px}
.cv-field{display:grid;gap:0}
.cv-field .hint{font-size:var(--cv-fs-meta);color:var(--cv-muted);margin-top:6px}
.cv-form input[type=text],.cv-form input[type=email],.cv-form input[type=number],.cv-form textarea{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--cv-line);border-radius:var(--cv-radius-sm);background:var(--cv-card);color:var(--cv-ink);font-size:var(--cv-fs-small);transition:border-color var(--cv-dur) var(--cv-ease)}
.cv-form textarea{min-height:110px;resize:vertical}
.cv-form input:hover,.cv-form textarea:hover{border-color:var(--cv-faint)}
.cv-form input:focus-visible,.cv-form textarea:focus-visible{outline:2px solid var(--cv-blue);outline-offset:1px;border-color:var(--cv-blue)}
.cv-form [aria-invalid="true"]{border-color:var(--cv-bad)}
.cv-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cv-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cv-choice.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cv-choice label{position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid var(--cv-line);border-radius:var(--cv-radius-sm);padding:10px 12px 10px 36px;cursor:pointer;background:var(--cv-card);font-size:14px;font-weight:500;transition:border-color var(--cv-dur) var(--cv-ease),background-color var(--cv-dur) var(--cv-ease)}
.cv-choice label span{font-size:var(--cv-fs-meta);font-weight:400;color:var(--cv-muted)}
.cv-choice input{position:absolute;left:12px;top:13px;margin:0;accent-color:var(--cv-blue)}
.cv-choice label:has(input:checked){border-color:var(--cv-blue);background:var(--cv-blue-soft)}
.cv-choice label:has(input:focus-visible){outline:2px solid var(--cv-blue);outline-offset:2px}
.cv-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cv-verify:empty{display:none}
.cv-verify-stub{font-size:var(--cv-fs-meta);color:var(--cv-ok);margin:0}
.cv-status{font-size:14px;margin:0;min-height:1.6em}
.cv-status[data-state=error]{color:var(--cv-bad)}
.cv-status[data-state=busy]{color:var(--cv-muted)}
.cv-error-list{background:var(--cv-bad-soft);border-radius:var(--cv-radius-sm);padding:12px 16px;font-size:var(--cv-fs-small)}
.cv-error-list ul{margin:6px 0 0;padding-left:20px}
.cv-done{display:grid;gap:12px}
.cv-done h2{font-size:var(--cv-fs-subhead)}
.cv-steps{counter-reset:step;list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px}
.cv-steps li{counter-increment:step;position:relative;padding-left:36px;font-size:var(--cv-fs-small);color:var(--cv-muted)}
.cv-steps li strong{color:var(--cv-ink);display:block}
.cv-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--cv-blue-soft);color:var(--cv-blue-text);font-size:13px;font-weight:500;display:grid;place-items:center}
.cv-form-grid .cv-card h3{font-size:var(--cv-fs-card)}
[hidden]{display:none!important}

@media (max-width:1023px){
  .cv-article{grid-template-columns:1fr}
  .cv-toc{position:static}
  .cv-row,.cv-form-grid{grid-template-columns:1fr;gap:28px}
  .cv-row.flip>:first-child{order:0}
}
@media (max-width:720px){
  .cv-prose>section{padding:22px 18px}
  .cv-prose dl.facts{grid-template-columns:1fr}
  .cv-prose dl.facts dt{border-bottom:0;padding-bottom:0}
  .cv-two,.cv-choice,.cv-choice.two{grid-template-columns:1fr}
}

/* ---------- Documentation shell: its own bar and a slim footer, the legacy docs colors mapped onto the tokens ---------- */
body.cv-docs{--paper:var(--cv-page);--ink:var(--cv-ink);--muted:var(--cv-muted);--line:var(--cv-line);--blue:var(--cv-blue);--blue-text:var(--cv-blue-text);
  --ice:var(--cv-blue-soft);--night:var(--cv-chrome-2);--header:var(--cv-bar);--cover:var(--cv-bar);background:var(--cv-page);color:var(--cv-ink);font-family:var(--cv-font)}
.cv-docs-bar .cv-bar-inner{gap:20px}
.cv-docs-name{font-size:15px;font-weight:500;color:var(--cv-on-chrome);padding:6px 0 6px 20px;border-left:1px solid var(--cv-chrome-line-strong)}
.cv-docs-name:hover{text-decoration:none;color:var(--cv-on-chrome)}
.cv-docs-search{display:inline-flex;align-items:center;gap:10px;flex:0 1 320px;min-width:0;min-height:38px;margin-left:12px;padding:7px 8px 7px 12px;border-radius:8px;
  border:1px solid var(--cv-chrome-line-strong);background:var(--cv-lift);color:var(--cv-on-chrome-muted);font:inherit;font-size:14px;text-align:left;cursor:pointer;
  transition:color var(--cv-dur) var(--cv-ease),border-color var(--cv-dur) var(--cv-ease)}
.cv-docs-search:hover{color:var(--cv-on-chrome);border-color:var(--cv-on-chrome-muted)}
.cv-docs-search svg{flex:none}
.cv-docs-search span{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.cv-docs-search kbd{font:600 12px/1 var(--cv-mono);padding:4px 7px;border:1px solid var(--cv-chrome-line-strong);border-radius:5px}
.cv-docs-bar .cv-nav-side{margin-left:auto}
.cv-docs-bar a:hover,.cv-docs-foot a:hover{text-decoration:none}
.cv-docs-foot{margin-top:64px}
.cv-docs-foot .cv-foot-legal{border-top:0;padding-block:24px}
@media (max-width:900px){.cv-docs-search span{display:none}.cv-docs-search{flex:none}.cv-docs-bar .cv-quiet{display:none}}
/* The trust summary: the facts and "Who secures what" keep their own heights. */
.cv-trust-glance{align-items:start}

/* =====================================================================================================
   Page shapes and drawings (owner 2026-10-12, D1–D5). Each page has its own layout built from these shapes: the drawn
   hero, the wide row, the bento, the strip, the timeline, the numbered path, the pinned stage, the pillar hub, the
   annotated screen and the facts table. Drawings are inline SVG in tokens only.
   ===================================================================================================== */

/* ---------- Drawn heroes ---------- */
.cv-hero-copy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:end}
.cv-hero-copy .cv-lead{margin-top:0}
.cv-hero-draw .cv-drawing.hero{margin-top:44px}
.cv-subhero .cv-drawing.hero{margin-top:36px}

/* ---------- Drawings ---------- */
.cv-drawing{margin:0;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:22px 24px 12px;min-width:0}
.cv-drawing.bare{background:none;border:0;padding:0}
.cv-drawing>svg{display:block;width:100%;height:auto;overflow:visible}
.cv-drawing figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--cv-fs-meta);color:var(--cv-muted);border-top:1px solid var(--cv-line-soft);margin-top:14px;padding-top:10px}
.cv-drawing figcaption a{color:var(--cv-blue-text);font-weight:500}
.cv-drawing figcaption a:hover{text-decoration:underline;text-underline-offset:3px}
.dw{font-family:var(--cv-font)}
.dw text{fill:var(--cv-ink);font-size:13px}
.dw .t{font-weight:500;font-size:14px}
.dw .sm{font-size:12px}
.dw .t.sm{font-size:12.5px}
.dw .m{fill:var(--cv-muted)}
.dw .bt{fill:var(--cv-blue-text);font-weight:500}
.dw .wt{fill:var(--cv-warn)}
.dw .q{font-size:15px}
.dw .mono{font-family:var(--cv-mono);font-size:11.5px}
.dw .ln{fill:none;stroke:var(--cv-faint);stroke-width:1.4}
.dw .ln.b{stroke:var(--cv-ink);stroke-width:1.6;stroke-linejoin:round}
.dw .ln.dash{stroke:var(--cv-line);stroke-dasharray:4 4}
.dw .ln.dist{stroke:var(--cv-silver-4);stroke-width:1.6;stroke-dasharray:none;fill:var(--cv-well)}
.dw .bx{fill:var(--cv-card);stroke:var(--cv-line);stroke-width:1.2}
.dw .core{fill:var(--cv-blue-soft);stroke:var(--cv-blue);stroke-width:1.6}
.dw .well{fill:var(--cv-well);stroke:var(--cv-line)}
.dw .soft{fill:var(--cv-blue-soft)}
.dw .hl{fill:none;stroke:var(--cv-blue);stroke-width:2}
.dw .wn{stroke:var(--cv-warn);stroke-width:1.6}
.dw .pt{fill:var(--cv-well);stroke:var(--cv-faint);stroke-width:1}
.dw .pt.up{fill:var(--cv-line)}
.dw .unit{fill:var(--cv-well);stroke:var(--cv-faint)}
.dw .pulse{fill:none;stroke:var(--cv-blue);stroke-width:7;stroke-linecap:round;visibility:hidden}
/* Home: port 14 is lit and its card outlined in the still drawing. */
.dw .hz-port{fill:var(--cv-blue);stroke:var(--cv-blue)}
.dw .hz-ring{fill:none;stroke:var(--cv-blue);stroke-width:1.5;opacity:0}
/* Reports */
.dw .rp-cover{fill:var(--cv-card);transform-box:fill-box;transform-origin:right center;transform:scaleX(0)}
.dw .rp-caret{fill:var(--cv-blue);opacity:0}
.dw .bar{fill:var(--cv-blue)}
/* Monitoring */
.dw .mo-rip{fill:none;stroke:var(--cv-warn);stroke-width:1.4;opacity:.3}
.dw .dep{fill:none;stroke:var(--cv-warn);stroke-width:1.6}
/* Inventory */
.dw .grid{stroke:var(--cv-line-soft);stroke-width:1;fill:none}
.dw path.bar{fill:none;stroke:var(--cv-blue);stroke-width:8;stroke-linecap:round}
.dw .wd{fill:var(--cv-card);stroke:var(--cv-blue);stroke-width:2}
.dw .eos{fill:none;stroke:var(--cv-warn);stroke-width:2.4;stroke-linecap:round}
.dw .today{fill:none;stroke:var(--cv-blue);stroke-width:1.6}
/* Network record */
.dw .stop{fill:none;stroke:var(--cv-blue);stroke-width:2}
.dw .dot{fill:var(--cv-blue)}
/* K-12 */
.dw .pin{fill:var(--cv-blue);stroke:var(--cv-card);stroke-width:2}
.dw .chip{fill:var(--cv-card);stroke:var(--cv-line)}
.dw .arc{fill:none;stroke:var(--cv-blue);stroke-width:10;stroke-linecap:round}
.dw .num{fill:var(--cv-card);stroke:var(--cv-blue);stroke-width:1.6}
.dw .nt{font-weight:500;font-size:13px;fill:var(--cv-blue-text)}
.dw-ring{max-width:320px}
/* Enterprise, Trust */
.dw .ok{fill:none;stroke:var(--cv-ok);stroke-width:1.8;opacity:0}
.dw .okc{fill:var(--cv-ok-soft);stroke:var(--cv-ok);stroke-width:1.6}
.dw .tick{fill:none;stroke:var(--cv-ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Annotated screens: numbered pins over a real screen, the notes beside it. */
.cv-annotated{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;align-items:center}
.cv-annot-stage{position:relative}
.cv-pins{position:absolute;inset:0;width:100%;height:100%;font-family:var(--cv-font);pointer-events:none}
.cv-pins circle{fill:var(--cv-blue);stroke:var(--cv-card);stroke-width:4}
.cv-pins text{fill:var(--cv-on-blue);font-size:22px;font-weight:500}
.cv-callouts{counter-reset:co;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.cv-callouts li{counter-increment:co;position:relative;padding-left:40px;font-size:var(--cv-fs-small);color:var(--cv-ink)}
.cv-callouts li::before{content:counter(co);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--cv-blue);color:var(--cv-on-blue);font-size:13px;font-weight:500;display:grid;place-items:center}

/* ---------- The motion: CSS only; platinum.js adds .cv-run while a drawing may move. ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-anim]:not(.cv-run)::before,.js [data-anim]:not(.cv-run) *,.js [data-anim]:not(.cv-run) *::before,.js [data-anim]:not(.cv-run) *::after{animation-play-state:paused!important}
  .js [data-anim] .a-draw{stroke-dasharray:1 1;animation:cv-draw var(--cv-dur-draw) var(--cv-ease-enter) both}
  .js [data-anim] .a-pop{transform-box:fill-box;transform-origin:center;animation:cv-pop 420ms var(--cv-ease-enter) both}
  .js [data-anim] .pulse{visibility:visible;stroke-dasharray:.02 2}
  .js [data-anim] .d1{animation-delay:180ms}.js [data-anim] .d2{animation-delay:360ms}.js [data-anim] .d3{animation-delay:540ms}
  .js [data-anim] .d4{animation-delay:720ms}.js [data-anim] .d5{animation-delay:900ms}.js [data-anim] .d6{animation-delay:1080ms}
  .js [data-anim] .d7{animation-delay:1260ms}.js [data-anim] .d8{animation-delay:1440ms}.js [data-anim] .d9{animation-delay:1620ms}
  .js [data-anim] .d10{animation-delay:1800ms}
  @keyframes cv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes cv-pop{from{transform:scale(0)}}
  @keyframes cv-travel{0%{stroke-dashoffset:.1}50%,100%{stroke-dashoffset:-1.1}}
  /* Home: the pulse leaves the site, reaches port 14 in about 2.2 s, lights it and its card, rests; every 5 s. */
  .js [data-anim] .hz-pulse{animation:cv-travel 5s linear 2.2s infinite both}
  .js [data-anim] .hz-port{animation:cv-hz-port 5s 2.2s infinite both}
  .js [data-anim] .hz-ring{animation:cv-hz-ring 5s 2.2s infinite both}
  .js [data-anim] .hz-card{animation:cv-hz-card 5s 2.2s infinite both}
  @keyframes cv-hz-port{0%,44%{fill:var(--cv-well);stroke:var(--cv-faint)}48%,82%{fill:var(--cv-blue);stroke:var(--cv-blue)}92%,100%{fill:var(--cv-well);stroke:var(--cv-faint)}}
  @keyframes cv-hz-ring{0%,45%{opacity:0;transform:scale(.6)}55%{opacity:1}80%,100%{opacity:0;transform:scale(1.6)}}
  @keyframes cv-hz-card{0%,46%{opacity:0}52%,84%{opacity:1}94%,100%{opacity:0}}
  .js [data-anim] .hz-ring{transform-box:fill-box;transform-origin:center}
  /* Reports: the question types itself (2 s), the bars answer, it holds, then asks again; every 9 s. */
  .js [data-anim] .rp-cover{animation:cv-rp-cover 9s infinite both}
  .js [data-anim] .rp-caret{animation:cv-rp-caret 9s infinite both}
  .js [data-anim] .rp-bar{transform-box:fill-box;transform-origin:left center;animation:cv-rp-bar 9s var(--cv-ease-enter) infinite both}
  @keyframes cv-rp-cover{0%{transform:scaleX(1);animation-timing-function:steps(20,end)}24%{transform:scaleX(.76)}25%,100%{transform:scaleX(0)}}
  @keyframes cv-rp-caret{0%{transform:translateX(0);opacity:1;animation-timing-function:steps(20,end)}24%{transform:translateX(161px);opacity:1}25%,100%{transform:translateX(161px);opacity:0}}
  @keyframes cv-rp-bar{0%,26%{transform:scaleX(0)}36%,100%{transform:scaleX(1)}}
  .js [data-anim].once *{animation-iteration-count:1!important}
  /* Monitoring: reads travel out; the closet switch ripples; its dependents are marked in turn. */
  .js [data-anim] .mo-pulse{animation:cv-travel 4s linear 1.6s infinite both}
  .js [data-anim] .mo-rip{transform-box:fill-box;transform-origin:center;animation:cv-mo-rip 3s var(--cv-ease-enter) 1.6s infinite both}
  .js [data-anim] .mo-dep{animation:cv-mo-dep 6s 1.6s infinite both}
  @keyframes cv-mo-rip{from{transform:scale(.7);opacity:.55}to{transform:scale(2.4);opacity:0}}
  @keyframes cv-mo-dep{0%,8%{opacity:0}16%,80%{opacity:1}92%,100%{opacity:0}}
  /* Closets: the free ports glow, left to right. */
  .js [data-anim] .cl-free{animation:cv-cl-free 4s 1.6s infinite both}
  @keyframes cv-cl-free{0%,10%{fill:var(--cv-well);stroke:var(--cv-faint)}20%,55%{fill:var(--cv-blue);stroke:var(--cv-blue)}70%,100%{fill:var(--cv-well);stroke:var(--cv-faint)}}
  /* Network record: a token runs the record's life; each stop lights as it passes. */
  .js [data-anim] .nr-pulse{animation:cv-travel 8s linear 1s infinite both}
  .js [data-anim] .nr-stop{animation:cv-nr-stop 8s 1s infinite both}
  @keyframes cv-nr-stop{0%,4%{opacity:0}8%,40%{opacity:1}50%,100%{opacity:0}}
  /* K-12: the 2025 tags, then the 2026 tags; a marker travels the funding ring. */
  .js [data-anim] .km-2025{animation:cv-km-a 6s 2s infinite both}
  .js [data-anim] .km-2026{animation:cv-km-a 6s 5s infinite both}
  @keyframes cv-km-a{0%,4%{fill:var(--cv-card);stroke:var(--cv-line)}10%,44%{fill:var(--cv-blue-soft);stroke:var(--cv-blue)}52%,100%{fill:var(--cv-card);stroke:var(--cv-line)}}
  .js [data-anim] .kr-pulse{animation:cv-travel 10s linear 2s infinite both}
  /* Enterprise: a check runs the audit chain and each block verifies in turn. */
  .js [data-anim] .ac-pulse{animation:cv-travel 6s linear 1.2s infinite both}
  .js [data-anim] .ac-ok{animation:cv-ac-ok 6s 1.2s infinite both}
  @keyframes cv-ac-ok{0%{opacity:0}6%,50%{opacity:1}60%,100%{opacity:0}}
  /* Stagger for loops, after the loops so it wins. */
  .js [data-anim] .k1{animation-delay:1.6s}.js [data-anim] .k2{animation-delay:1.9s}.js [data-anim] .k3{animation-delay:2.2s}
  .js [data-anim] .k4{animation-delay:2.5s}.js [data-anim] .k5{animation-delay:2.8s}.js [data-anim] .k6{animation-delay:3.1s}
  .js [data-anim] .mo-rip.k3{animation-delay:3.1s}
  .js [data-anim] .nr-stop.k1{animation-delay:1s}.js [data-anim] .nr-stop.k2{animation-delay:2.33s}.js [data-anim] .nr-stop.k3{animation-delay:3.67s}
  .js [data-anim] .nr-stop.k4{animation-delay:5s}.js [data-anim] .nr-stop.k5{animation-delay:6.33s}.js [data-anim] .nr-stop.k6{animation-delay:7.67s}
  .js [data-anim] .ac-ok.k1{animation-delay:1.3s}.js [data-anim] .ac-ok.k2{animation-delay:2.7s}.js [data-anim] .ac-ok.k3{animation-delay:4.1s}.js [data-anim] .ac-ok.k4{animation-delay:5.5s}
}

/* ---------- The wide row: a narrow column of text beside a wide visual ---------- */
.cv-wide-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:56px;align-items:center}
.cv-wide-row.flip>:first-child{order:2}
.cv-wide-text{display:grid;gap:14px;align-content:start}
.cv-wide-text>p{color:var(--cv-muted);font-size:17px}
.cv-wide-text .cv-ticks{margin:4px 0 6px}

/* ---------- The bento: uneven tiles, each one headline and one visual ---------- */
.cv-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.cv-tile{grid-column:span 2;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.cv-tile-text{padding:22px 22px 18px;display:flex;flex-direction:column;gap:8px}
.cv-tile-text p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-tile-text .cv-link{margin-top:auto;padding-top:6px}
.cv-tile-shot{margin:0 0 0 22px;flex:1;min-height:170px;max-height:200px;overflow:hidden;border-top-left-radius:var(--cv-radius-sm);border:1px solid var(--cv-line-soft);border-right:0;border-bottom:0;background:var(--cv-chrome-2)}
.cv-tile-shot img{display:block;width:150%;max-width:none;height:auto}
.cv-tile.wide{grid-column:span 4;flex-direction:row}
.cv-tile.wide .cv-tile-text{flex:0 0 38%;padding:28px 0 28px 28px}
.cv-tile.wide .cv-tile-text h3,.cv-tile.full .cv-tile-text h3{font-size:var(--cv-fs-subhead);line-height:1.3}
.cv-tile.wide .cv-tile-shot{margin:28px 0 0 28px;max-height:none;min-height:0}
.cv-tile.wide .cv-tile-shot img{width:120%}
.cv-tile.full{grid-column:span 6;flex-direction:row;align-items:center;gap:32px;padding:8px 28px 8px 0}
.cv-tile.full .cv-tile-text{flex:0 0 32%;padding:28px 0 28px 28px}
.cv-tile.full .cv-drawing{flex:1}

/* ---------- The strip: facts on one line, hairlines between, no cards ---------- */
.cv-strip{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:2px solid var(--cv-ink)}
.cv-strip li{padding:20px 24px 4px 0;display:grid;gap:8px;align-content:start}
.cv-strip li+li{padding-left:24px;border-left:1px solid var(--cv-line)}
.cv-strip p{color:var(--cv-muted);font-size:var(--cv-fs-small)}

/* ---------- The timeline: stops on a line; it draws once, or fills as it scrolls past (scrub) ---------- */
.cv-tl{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px}
.cv-tl>li{position:relative;padding-top:40px;display:grid;gap:8px;align-content:start}
.cv-tl>li::before{content:"";position:absolute;z-index:1;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--cv-card);border:2px solid var(--cv-blue);box-sizing:border-box}
.cv-tl>li::after{content:"";position:absolute;left:24px;right:-20px;top:13px;height:2px;background:var(--cv-blue);border-radius:1px;transform-origin:left center}
.cv-tl>li:last-child::after{right:0;background:var(--cv-line)}
.cv-tl p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-tl.scrub>li::after{background:var(--cv-blue)}
@media (prefers-reduced-motion:no-preference){
  .js .cv-tl[data-anim]>li::after{animation:cv-grow 600ms var(--cv-ease-enter) both}
  .js .cv-tl[data-anim]>li:nth-child(2)::after{animation-delay:500ms}.js .cv-tl[data-anim]>li:nth-child(3)::after{animation-delay:1000ms}
  .js .cv-tl[data-anim]>li:nth-child(4)::after{animation-delay:1500ms}.js .cv-tl[data-anim]>li:nth-child(5)::after{animation-delay:2000ms}
  @keyframes cv-grow{from{transform:scaleX(0)}}
  @supports (animation-timeline:view()){
    .cv-tl.scrub{view-timeline-name:--cv-tl}
    .cv-tl.scrub>li::after{animation:cv-grow linear both;animation-timeline:--cv-tl}
    .cv-tl.scrub>li:nth-child(1)::after{animation-range:cover 15% cover 30%}
    .cv-tl.scrub>li:nth-child(2)::after{animation-range:cover 30% cover 45%}
    .cv-tl.scrub>li:nth-child(3)::after{animation-range:cover 45% cover 60%}
    .cv-tl.scrub>li:nth-child(4)::after{animation-range:cover 60% cover 70%}
  }
}

/* ---------- The numbered path (Live demo): numbers down a line ---------- */
.cv-path{counter-reset:pa;list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:880px}
.cv-path>li{counter-increment:pa;position:relative;padding:0 0 30px 64px;min-height:72px}
.cv-path>li::before{content:counter(pa);position:absolute;z-index:1;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--cv-card);border:2px solid var(--cv-blue);color:var(--cv-blue-text);font-weight:500;display:grid;place-items:center}
.cv-path>li::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--cv-blue);opacity:.45;transform-origin:center top}
.cv-path>li:last-child::after{display:none}
.cv-path h3{font-size:var(--cv-fs-subhead);line-height:1.3;padding-top:6px}
.cv-path .cv-links{margin-top:10px}
@media (prefers-reduced-motion:no-preference){
  .js .cv-path[data-anim]>li::after{animation:cv-grow-y 500ms var(--cv-ease-enter) both}
  .js .cv-path[data-anim]>li:nth-child(2)::after{animation-delay:300ms}.js .cv-path[data-anim]>li:nth-child(3)::after{animation-delay:600ms}
  .js .cv-path[data-anim]>li:nth-child(4)::after{animation-delay:900ms}.js .cv-path[data-anim]>li:nth-child(5)::after{animation-delay:1200ms}
  @keyframes cv-grow-y{from{transform:scaleY(0)}}
}

/* ---------- The pinned stage (product overview): the screen holds while the steps scroll past ---------- */
.cv-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:56px;align-items:start}
.cv-stage-steps{list-style:none;margin:0;padding:0}
.cv-stage-step{min-height:clamp(320px,52vh,480px);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 0 24px 26px;border-left:2px solid var(--cv-line);transition:border-color var(--cv-dur) var(--cv-ease)}
.cv-stage-step.on{border-left-color:var(--cv-blue)}
.cv-stage-step h3{font-size:var(--cv-fs-subhead);line-height:1.3}
.cv-stage-step p{color:var(--cv-muted)}
.cv-stage-step .cv-k{font-size:var(--cv-fs-meta);color:var(--cv-blue-text);font-weight:500}
.cv-stage-view{position:sticky;top:48px}
.cv-stage-view .cv-tour img.on,.cv-stage-view .cv-tour img[data-shot].on{opacity:1}
.cv-stage-map{display:block;width:100%;height:auto;margin-bottom:16px}
.cv-stage-map .node{fill:var(--cv-card);stroke:var(--cv-faint);stroke-width:1.6;transition:fill var(--cv-dur) var(--cv-ease),stroke var(--cv-dur) var(--cv-ease)}
.cv-stage-map .node.on{fill:var(--cv-blue);stroke:var(--cv-blue)}

/* ---------- The pillar hub (Trust): six pillars around the appliance, spokes drawn in ---------- */
.cv-hub{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:0;align-items:stretch}
.cv-hub::before{content:"";position:absolute;left:50%;top:calc((100% - 32px) / 6);bottom:calc((100% - 32px) / 6);width:2px;margin-left:-1px;background:var(--cv-blue);opacity:.5;transform-origin:center}
.cv-hub-side{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-auto-rows:1fr}
.cv-hub-side>li{display:grid}
.cv-pillar{position:relative;background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius);padding:18px 20px;display:grid;gap:6px;transition:transform var(--cv-dur) var(--cv-ease),box-shadow var(--cv-dur) var(--cv-ease)}
.cv-pillar:hover{transform:translateY(-2px);box-shadow:var(--cv-shadow-hover)}
.cv-pillar h3 a::after{content:"";position:absolute;inset:0}
.cv-pillar p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-pillar::before{content:"";position:absolute;top:50%;width:131px;height:2px;background:var(--cv-blue);opacity:.5}
.cv-hub-side.left .cv-pillar::before{left:100%;transform-origin:left center}
.cv-hub-side.right .cv-pillar::before{right:100%;transform-origin:right center}
.cv-hub-core{position:relative;z-index:1;align-self:center;justify-self:center;width:180px;height:180px;border-radius:50%;display:grid;place-content:center;text-align:center;gap:6px;padding:24px;background:var(--cv-blue-soft);border:2px solid var(--cv-blue);box-shadow:0 0 0 10px var(--cv-page),0 0 0 11px var(--cv-line)}
.cv-hub-core strong{font-size:var(--cv-fs-card);font-weight:500;line-height:1.3}
.cv-hub-core span{font-size:var(--cv-fs-meta);color:var(--cv-muted)}
@media (prefers-reduced-motion:no-preference){
  .js .cv-hub[data-anim] .cv-pillar::before{animation:cv-grow 500ms var(--cv-ease-enter) both}
  .js .cv-hub[data-anim]::before{animation:cv-grow-y 600ms var(--cv-ease-enter) 500ms both}
  .js .cv-hub[data-anim] li:nth-child(2) .cv-pillar::before{animation-delay:200ms}.js .cv-hub[data-anim] li:nth-child(3) .cv-pillar::before{animation-delay:400ms}
}

/* ---------- The facts table that closes a capability page ---------- */
.cv-ftable{background:var(--cv-card);border:1px solid var(--cv-line);border-radius:var(--cv-radius)}
.cv-frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:40px;padding:26px 28px}
.cv-frow+.cv-frow{border-top:1px solid var(--cv-line-soft)}
.cv-fhead{display:grid;gap:6px;align-content:start}
.cv-fhead p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
.cv-frow .cv-ticks{margin-bottom:10px}
.cv-guides{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px}

/* ---------- Routes as the hero (How to buy) and the ring row (K-12) ---------- */
.cv-routes{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--cv-ink)}
.cv-routes>li{padding:22px 28px 6px 0;display:grid;gap:10px;align-content:start;scroll-margin-top:24px}
.cv-routes>li+li{padding-left:28px;border-left:1px solid var(--cv-line)}
.cv-routes h2{font-size:var(--cv-fs-subhead);line-height:1.3}
.cv-routes .cv-k{font-size:var(--cv-fs-meta);color:var(--cv-blue-text);font-weight:500}
.cv-routes ul{margin:0;padding-left:18px;color:var(--cv-muted);font-size:var(--cv-fs-small);display:grid;gap:6px}
.cv-ring-row{display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:center}
.cv-ring-row .cv-drawing{padding:20px}
.cv-phases{counter-reset:ph;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cv-phases li{counter-increment:ph;position:relative;padding-left:44px;display:grid;gap:2px}
.cv-phases li::before{content:counter(ph);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1.6px solid var(--cv-blue);color:var(--cv-blue-text);font-size:13px;font-weight:500;display:grid;place-items:center;box-sizing:border-box}
.cv-phases p{color:var(--cv-muted);font-size:var(--cv-fs-small)}
/* Live demo: the demo is the hero. */
.cv-demo-stage{position:relative;margin-top:36px}
.cv-demo-stage .cv-frame img{max-height:none}
.cv-demo-go{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);box-shadow:var(--cv-shadow);min-height:52px;padding:0 26px;font-size:16px}
.cv-hero-center{text-align:center;display:grid;justify-items:center}
.cv-hero-center .cv-lead{margin-inline:auto}
.cv-quiet-list{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:20px;font-size:14px;color:var(--cv-muted)}

@media (max-width:1023px){
  .cv-hero-copy,.cv-wide-row,.cv-annotated,.cv-stage,.cv-frow,.cv-ring-row{grid-template-columns:1fr;gap:28px}
  .cv-wide-row.flip>:first-child{order:0}
  .cv-stage-view{position:static;order:-1}
  .cv-stage-step{min-height:0}
  .cv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-tile,.cv-tile.wide,.cv-tile.full{grid-column:span 2;flex-direction:column;padding:0}
  .cv-tile.wide .cv-tile-text,.cv-tile.full .cv-tile-text{flex:none;padding:22px}
  .cv-tile.full .cv-drawing{padding:0 22px 22px}
  .cv-hub{grid-template-columns:1fr;gap:16px}
  .cv-hub-side{grid-auto-rows:auto}
  .cv-hub-core{order:-1}
  .cv-pillar::before,.cv-hub::before{display:none}
  .cv-strip,.cv-tl{grid-auto-flow:row}
  .cv-strip li+li{padding-left:0;border-left:0;border-top:1px solid var(--cv-line)}
  .cv-tl>li::after{display:none}
  .cv-routes{grid-template-columns:1fr}
  .cv-routes>li+li{padding-left:0;border-left:0;border-top:1px solid var(--cv-line)}
}
@media (max-width:720px){
  .cv-bento{grid-template-columns:1fr}
  .cv-tile,.cv-tile.wide,.cv-tile.full{grid-column:auto}
  .cv-demo-go{position:static;transform:none;margin-top:16px}
}
.cv-strip .cv-link{display:flex;width:max-content;margin-top:10px}
.cv-trust-net{margin-top:36px;scroll-margin-top:24px}
.cv-quiet-list .cv-link{font-size:14px}
.cv-pair{margin-top:28px;align-items:start}
.cv-narrow{max-width:900px}
.cv-narrow .cv-annotated{grid-template-columns:1fr}
.cv-demo-shot{display:block}
.cv-demo-shot .cv-frame{transition:box-shadow var(--cv-dur) var(--cv-ease)}
.cv-demo-stage .cv-btn.cv-demo-go{bottom:72px}
.cv-hero-center.cv-fine{display:flex;justify-content:center;align-items:center;gap:8px}
/* A Pause button keeps its place before it shows, so revealing it never moves the caption. */
.cv-motion-btn[hidden]{display:inline-block!important;visibility:hidden}