/* ==================================================================== *
 * Shield360 — marketing design system, v3 (Oct 2026)
 *
 * The site reads like a large enterprise security vendor's: a light,
 * airy page; one full-bleed brand-red slab at the top of every page with
 * a very large condensed headline set in highlight blocks; deep oxblood
 * feature slabs; real product captures framed big; generous whitespace
 * on an 8px scale. Light only: the marketing site does not follow the
 * OS colour scheme (README, "Design system v3").
 *
 * Sections in this file, in order:
 *   1. fonts, tokens, base
 *   2. chrome: utility bar, main bar, mega menu, mobile drawer, footer
 *   3. shared components (kept from v2 for the persona pages)
 *   4. v3 page system: slab hero, subnav, sections, module tabs,
 *      enforcement, deployment, facts, FAQ, closing band
 *   5. product page template (products/*.html)
 * ==================================================================== */

/* Self-hosted fonts (README, "Fonts"). Archivo is font-display:optional:
 * it is preloaded on every page, so the first view almost always gets it,
 * and a slow network keeps the fallback for that view rather than
 * reflowing a 90px condensed headline under the reader. Inter swaps onto a
 * metric-matched Arial, so body text does not move when it arrives. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:optional;src:url(assets/fonts/archivo-latin-wdth-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/inter-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --page:#FFFFFF;           /* the default ground: white, airy */
  --paper:#F4F2F0;          /* alternate light band, carries the grid crosses */
  --surface:#FFFFFF;
  --surface-2:#F7F5F3;
  --ink:#1A1414;
  --ink-2:#433B3B;
  --muted:#675E5E;
  --rule:#E2DDD8;
  --rule-strong:#BDB4AD;
  --grid:rgba(26,20,20,.05);

  /* The logo's red is #ED1C24, kept exact for graphic fills. Anything
     carrying words uses --accent (#C8121A, 5.9:1 on white). */
  --brand:#ED1C24;
  --accent:#C8121A;
  --accent-solid:#C8121A;
  --accent-ink:#9C0D14;
  --accent-wash:rgba(237,28,36,.08);
  --covered:#1B6B58;
  --covered-wash:rgba(27,107,88,.11);
  --licence:#39548A;
  --licence-wash:rgba(57,84,138,.11);
  --unknown:#6D6879;
  --unknown-wash:rgba(109,104,121,.12);

  /* The slab: the brand red at its darkest-safe value, so white text on
     the brightest point is still 5.9:1. */
  --slab:#C8121A;
  --slab-deep:#8F0C13;
  /* The one brand-dark: oxblood ink from the logo red. Never pure black. */
  --night:#1E0A0C;
  --night-2:#2A0F12;

  --lift:0 1px 0 rgba(26,20,20,.04);
  --shadow:0 30px 60px -30px rgba(30,10,12,.35);
  --radius:2px;
  --radius-lg:3px;
  --sans:Inter,"Inter Fallback","Helvetica Neue",Arial,system-ui,sans-serif;
  --display:Archivo,"Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --head-h:72px;            /* main bar height; the subnav sticks under it */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--night);color:#fff;padding:.6rem 1rem;font-weight:600;text-decoration:none}
.skip:focus{top:.5rem}

.wrap{width:min(1240px,100% - 4rem);margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 2rem)}}
.wrap-narrow{width:min(860px,100% - 4rem);margin-inline:auto}
@media (max-width:640px){.wrap-narrow{width:calc(100% - 2rem)}}

h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}
/* Display: Archivo at 72% width, 800, uppercase, for h1 and h2 only. */
h1,h2{font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em}
h1{font-size:clamp(2.25rem,4.4vw,4rem);line-height:.98}
h2{font-size:clamp(1.9rem,3.4vw,3.25rem);line-height:.98}
/* Highlight block: 1-3 words of a display heading on a solid slab. On white
   it is red; on the brand slab and oxblood it is oxblood or red (see .slab). */
.hl{
  background:var(--accent-solid);color:#fff;padding:.02em .16em 0;margin:0 -.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
h3{font-weight:650;font-size:1.0625rem;line-height:1.3;letter-spacing:-.008em}
h4{font-weight:600;font-size:.95rem;line-height:1.3}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.lede{font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.55;color:var(--ink-2);max-width:58ch}
.prose{max-width:60ch;color:var(--ink-2)}
.prose + .prose{margin-top:.85rem}
.prose-wide{max-width:72ch;color:var(--ink-2)}
.fine{font-size:.9rem;color:var(--muted);max-width:62ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.kicker{font-family:var(--sans);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.accent{color:var(--accent)}
.covered-ink{color:var(--covered)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:-.003em;
  padding:.8rem 1.35rem;border-radius:var(--radius);text-decoration:none;
  border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--accent-solid);color:#fff;border-color:var(--accent-solid)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-dark{background:var(--night);color:#fff;border-color:var(--night)}
.btn-dark:hover{background:#000;border-color:#000}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:.5rem 1rem;font-size:.85rem}
.btn-lg{padding:1rem 1.6rem;font-size:.98rem}
.btn-go::after{content:"\2192";transition:transform .15s}
.btn-go:hover::after{transform:translateX(3px)}
.arrow::after{content:"\2192";display:inline-block;margin-left:.4rem;transition:transform .15s}
.btn:hover .arrow::after,.arrow:hover::after{transform:translateX(3px)}

/* ==================================================================== *
 * 2. Chrome
 *
 * One sticky <header class="site-head">: a 36px utility bar that scrolls
 * away (the header sticks at -36px) and the 72px main bar that stays. The
 * main bar's five sections open full-width mega panels (site.js; without
 * script each is a link to its overview page). Below 1120px the sections
 * are an accordion drawer built from native <details>, so it works with
 * no script at all.
 * ==================================================================== */
.site-head{position:sticky;top:-36px;z-index:60}
.utility{height:36px;background:#EFECE9;color:var(--ink-2);font-size:.8rem;border-bottom:1px solid var(--rule)}
.utility-in{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;height:100%}
.utility-links{display:flex;align-items:center;align-self:stretch;gap:1.5rem;margin-left:auto}
.utility-note{margin-right:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.utility-note b{color:var(--ink);font-weight:600}
.utility a{color:var(--ink-2);text-decoration:none;font-weight:500}
.utility a:hover{color:var(--ink);text-decoration:underline}
.utility .utility-cta{
  display:inline-flex;align-items:center;align-self:stretch;padding:0 1rem;
  background:var(--accent-solid);color:#fff;font-weight:700;
}
.utility .utility-cta:hover{background:var(--accent-ink);color:#fff;text-decoration:none}
@media (max-width:900px){.utility-note{display:none}}
@media (max-width:640px){.utility{display:none}.site-head{top:0}}

.topbar{position:relative;background:#fff;border-bottom:1px solid var(--rule);color:var(--ink)}
.topbar-in{display:flex;align-items:center;gap:2rem;height:var(--head-h)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem;text-decoration:none;flex:0 0 auto}
.logo{display:block;height:28px;width:auto}
.logo-dark{display:none}
.brand-tag{font-family:var(--sans);font-size:.68rem;font-weight:500;line-height:1.3;color:var(--muted);text-wrap:balance}
.topbar .brand-tag{display:block;max-width:14rem}
@media (max-width:1240px) and (min-width:1121px){.topbar .brand-tag{display:none}}
@media (max-width:640px){.topbar .brand-tag{display:none}}

/* Main nav: five triggers, each a link until site.js makes it a button. */
.mm{margin-left:auto;align-self:stretch}
.mm-list{display:flex;align-items:stretch;height:100%;margin:0;padding:0;list-style:none;gap:.25rem}
.mm-item{display:flex}
.mm-top{
  display:inline-flex;align-items:center;gap:.4rem;padding:0 .85rem;height:100%;
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
  text-decoration:none;background:none;border:0;cursor:pointer;
  box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s,color .15s;
}
button.mm-top::after{
  content:"";width:.42rem;height:.42rem;border:solid currentColor;border-width:0 1.6px 1.6px 0;
  transform:translateY(-2px) rotate(45deg);opacity:.6;transition:transform .15s;
}
button.mm-top[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.mm-top:hover,.mm-top[aria-expanded="true"]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--brand)}
.mm-item.is-current .mm-top{box-shadow:inset 0 -3px 0 var(--rule-strong)}
.mm-top:focus-visible{outline-offset:-6px}

/* The panel: full width under the bar. Positioned against .topbar, so it
   spans the viewport whichever trigger opened it. */
.mm-panel{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:3px solid var(--brand);border-bottom:1px solid var(--rule);
  box-shadow:0 40px 60px -40px rgba(30,10,12,.45);
  max-height:calc(100vh - var(--head-h));overflow-y:auto;
}
.mm-panel[hidden]{display:none}
.mm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,21rem);gap:2.5rem;padding:2.25rem 0 2.5rem}
.mm-in.mm-in-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,19rem)}
.mm-in > *{min-width:0}
.mm-h{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding-bottom:.7rem;margin-bottom:.4rem;border-bottom:1px solid var(--rule)}
.mm-h a{color:inherit;text-decoration:none}
.mm-h a:hover{color:var(--accent)}
.mm-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mm-links a{display:block;padding:.6rem .75rem .6rem 0;text-decoration:none;color:var(--ink);border-left:3px solid transparent;transition:border-color .12s,padding .12s,background .12s}
.mm-links a:hover,.mm-links a:focus-visible{border-left-color:var(--brand);padding-left:.75rem;background:var(--surface-2)}
.mm-links a[aria-current="page"]{border-left-color:var(--brand);padding-left:.75rem}
.mm-links b{display:block;font-size:.93rem;font-weight:650;line-height:1.3}
.mm-links span{display:block;font-size:.82rem;color:var(--muted);line-height:1.4;margin-top:.12rem}
.mm-links .mm-tag{display:inline-block;margin-left:.4rem;font-family:var(--mono);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid currentColor;padding:0 .3rem;vertical-align:.15em}
.mm-lead{display:block;text-decoration:none;color:var(--ink);padding:0 0 1rem;margin-bottom:.4rem;border-bottom:1px solid var(--rule)}
.mm-lead b{display:block;font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:1.55rem;line-height:1}
.mm-lead span{display:block;font-size:.85rem;color:var(--ink-2);margin-top:.45rem;line-height:1.45}
.mm-lead:hover b{color:var(--accent)}
/* Featured card: oxblood, a cover image, one action. */
.mm-feature{display:flex;flex-direction:column;background:var(--night);color:#fff;text-decoration:none;overflow:hidden}
.mm-feature img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.mm-feature-body{padding:1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.mm-feature small{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:#FF8A83}
.mm-feature b{font-family:var(--display);font-size:1.12rem;line-height:1.25}
.mm-feature span{font-size:.84rem;color:#DCCDCB;line-height:1.45}
.mm-feature em{font-style:normal;font-weight:700;font-size:.86rem;margin-top:.35rem}
.mm-feature em::after{content:" \2192"}
.mm-feature:hover b{text-decoration:underline}
.mm-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;padding-top:1.1rem;border-top:1px solid var(--rule);font-size:.86rem;color:var(--muted)}
.mm-foot a{color:var(--accent);font-weight:650;text-decoration:none}
.mm-foot a:hover{text-decoration:underline}

.topbar-ctas{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.topbar .topbar-review{display:none}

/* Mobile drawer: a native <details>; each section an accordion. */
.menu{display:none;position:static}
.menu > summary{
  list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;
  border:1.5px solid var(--rule-strong);color:var(--ink);border-radius:var(--radius);
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary svg{width:20px;height:20px}
.menu[open] > summary{background:var(--night);border-color:var(--night);color:#fff}
.menu-panel{
  position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--brand);
  box-shadow:0 40px 60px -40px rgba(30,10,12,.45);max-height:calc(100vh - var(--head-h));overflow-y:auto;
  padding:.5rem 1rem 1.5rem;
}
.menu-panel details{border-bottom:1px solid var(--rule)}
.menu-panel summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:1rem 0;font-weight:700;font-size:1.02rem;
}
.menu-panel summary::-webkit-details-marker{display:none}
.menu-panel summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--accent)}
.menu-panel details[open] summary::after{content:"\2212"}
.menu-panel details ul{list-style:none;margin:0 0 1rem;padding:0}
.menu-panel details a{display:block;padding:.55rem 0 .55rem .9rem;border-left:2px solid var(--rule);text-decoration:none;color:var(--ink-2);font-size:.95rem}
.menu-panel details a:hover,.menu-panel details a[aria-current="page"]{border-left-color:var(--brand);color:var(--ink)}
.menu-panel .menu-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.menu-panel .menu-actions a{text-decoration:none;font-weight:600;color:var(--ink)}
.menu-panel .menu-actions .btn{color:#fff}
.menu-panel .menu-actions .btn-ghost{color:var(--ink)}
@media (max-width:1120px){
  .mm,.topbar .topbar-demo{display:none}
  .topbar-ctas{margin-left:auto}
  .menu{display:block}
}
@media (max-width:640px){.topbar .topbar-review{display:inline-flex}}
@media (max-width:420px){.topbar .topbar-review{display:none}}

/* ---- footer --------------------------------------------------------- *
 * Light, like the page: a brand row, five link columns, then the brand
 * line in the display face and the legal row. Each page keeps its own
 * foot-note paragraph. */
footer{background:var(--paper);color:var(--ink);padding:4.5rem 0 2.5rem;border-top:1px solid var(--rule)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--rule-strong)}
.foot-top .foot-logo{height:32px;width:auto;display:block}
.foot-top p{font-size:.95rem;color:var(--ink-2);max-width:44ch}
.foot-top .foot-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.foot-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.75rem;align-items:start}
@media (max-width:1000px){.foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}}
.foot-in > *{min-width:0}
.foot-col{display:flex;flex-direction:column;gap:.55rem;font-size:.88rem;line-height:1.4}
.foot-col a{color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--accent);text-decoration:underline}
.foot-col a[aria-current="page"]{color:var(--ink);font-weight:600}
.foot-h{font-family:var(--sans);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin-bottom:.4rem}
.foot-line{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule-strong);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem}
.foot-line b{font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:1.25rem;letter-spacing:.01em}
.foot-line span{font-size:.8rem;color:var(--muted)}
.foot-line span a{color:var(--muted)}
.foot-note{margin-top:1.25rem;font-size:.8rem;color:var(--muted);max-width:90ch;line-height:1.6}
/* Kept for pages not yet moved to the v3 footer markup. */
.foot-brand{display:flex;flex-direction:column;gap:.7rem}
.foot-logo{height:28px;width:auto}
.foot-plane{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}

/* Night ground for the persona pages (kept from v2). */
/* ---- night ground -------------------------------------------------- *
 * Anything inside .night re-reads the palette as dark, so a component
 * written once for the paper — a chip, a callout, a panel, a button —
 * renders correctly on the night bands without a second set of rules.
 * -------------------------------------------------------------------- */
.night,.close{
  --paper:var(--night);
  --surface:#2A1215;
  --surface-2:#321619;
  --ink:#FBF5F4;
  --ink-2:#DCCDCB;
  --muted:#B8A5A3;
  --rule:rgba(255,255,255,.11);
  --rule-strong:rgba(255,255,255,.24);
  --grid:rgba(255,255,255,.04);
  --accent:#FF6B62;
  --accent-wash:rgba(255,59,66,.14);
  --covered:#43AC8D;
  --covered-wash:rgba(67,172,141,.14);
  --licence:#7FA0DE;
  --unknown:#9A93A8;
  --lift:0 1px 2px rgba(0,0,0,.4), 0 24px 60px -28px rgba(0,0,0,.9);
  background-color:var(--night);color:var(--ink);
}
/* A band that carries an argument gets a faint red glow and a hairline
   grid: enough texture to read as a deliberate surface, not enough to
   compete with the words on it. */
.glow{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(60rem 30rem at 85% -10%,rgba(237,28,36,.28),transparent 60%),
    var(--night);
}
.glow::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);
}

/* ==================================================================== *
 * 3. Shared components, kept from v2 for the persona, platform and
 * comparison pages until their bodies are rebuilt in phase 2. Rules
 * later in the file (sections 4 and 5) take precedence where they meet.
 * ==================================================================== */
/* ---- section scaffolding ------------------------------------------ */
.section{border-top:1px solid var(--rule);padding:clamp(3rem,5vw,4.5rem) 0}
.section-grid{display:grid;grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.section-grid{grid-template-columns:1fr;gap:1.1rem}}
.rail{position:sticky;top:96px}
@media (max-width:900px){.rail{position:static}}
.rail-label{margin-top:.5rem;font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.35}
@media (max-width:900px){.rail-label{display:none}}

.stack{display:flex;flex-direction:column;gap:1.5rem}
.stack-tight{display:flex;flex-direction:column;gap:.85rem}
.stack-wide{display:flex;flex-direction:column;gap:2.25rem}

/* A grid and flex item defaults to min-width:auto, which lets it grow past
   its track to fit its widest unbreakable child — a nowrap mono path, a
   spec table, a long command. At desktop widths there is slack and nothing
   shows; at 390px the whole document gains a horizontal scrollbar and every
   section is dragged off-centre. Resetting it here fixes the cause once
   rather than capping each offender's width in turn. */
.section-grid > *,
.hero-grid > *,
.close-in > *,
.cols-2 > *,
.cols-3 > *,
.personas > *,
.plans > *,
.stack > *,
.stack-tight > *,
.stack-wide > *{min-width:0}

/* ---- hero --------------------------------------------------------- */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.hero h1{margin-top:1rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.9rem}
.hero-resources{display:flex;flex-wrap:wrap;gap:.45rem .7rem;align-items:center}
.hero-resources a{color:var(--accent);font-weight:650}

/* Page header for the interior pages: no statement object, just the
   claim and who the page is written for — on the night ground, so every
   page opens the way the home page does. */
.pagehead{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem)}
.pagehead h1{font-size:clamp(2.2rem,4vw,3.6rem);margin-top:1rem;max-width:26ch}
.pagehead .lede{max-width:62ch}
.pagehead .lede{margin-top:1.2rem}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* ---- the statement object ----------------------------------------- */
.statement{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--lift);overflow:hidden;
}
.statement-head{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.statement-body{padding:1.15rem 1.1rem 1.25rem}
.total-label{font-family:Archivo,sans-serif;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.total-figure{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,4.6vw,2.9rem);font-weight:600;letter-spacing:-.035em;line-height:1.05;
  margin-top:.15rem;
}
.rule-total{height:1px;background:var(--rule-strong);margin:1.05rem 0 .3rem}

.ledger{display:flex;flex-direction:column}
.ledger-row{
  display:grid;grid-template-columns:.7rem minmax(0,1fr) auto;align-items:baseline;gap:.7rem;
  padding:.52rem 0;border-bottom:1px solid var(--rule);
}
.ledger-row:last-child{border-bottom:0}
.swatch{width:.7rem;height:.7rem;border-radius:2px;align-self:center}
.ledger-name{font-family:Archivo,sans-serif;font-size:.9rem;font-weight:500}
.ledger-sub{display:block;font-family:var(--sans);font-size:.8rem;color:var(--muted);font-weight:400;line-height:1.35;margin-top:.1rem}
.ledger-amt{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.95rem;font-weight:500}

.bar{display:flex;height:8px;border-radius:2px;overflow:hidden;margin:.9rem 0 .2rem;background:var(--rule)}
.bar > span{display:block;height:100%}

.statement-foot{
  border-top:1px solid var(--rule);background:var(--surface-2);
  padding:.7rem 1.1rem;font-size:.82rem;color:var(--muted);line-height:1.45;
}

/* ---- generic ledger-style rows used through the pages -------------- */
.rows{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)}
@media (max-width:720px){.row{grid-template-columns:1fr;gap:.35rem}}
.row h3{padding-top:.1rem}
.row p{color:var(--ink-2);max-width:58ch;font-size:.98rem}
.row p + p{margin-top:.5rem}

/* ---- panels ------------------------------------------------------- */
.panel{
  min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--lift);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.55rem .9rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.panel-title{font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:-.005em}
.panel-tag{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.625rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);border:1px solid var(--rule-strong);
  border-radius:2px;padding:.12rem .4rem;
}
.panel-body{padding:.95rem}
.panel-note{border-top:1px solid var(--rule);background:var(--surface-2);padding:.6rem .9rem;font-size:.8rem;color:var(--muted)}

.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.95rem}
@media (max-width:820px){.cols-3{grid-template-columns:1fr}}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.95rem}
@media (max-width:820px){.cols-2{grid-template-columns:1fr}}

.mini-h{font-family:"IBM Plex Mono",monospace;font-size:.625rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:.55rem}
.rank{display:flex;flex-direction:column;gap:.5rem}
.rank-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:baseline}
.rank-name{font-family:Archivo,sans-serif;font-size:.82rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-amt{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--ink-2)}
.rank-bar{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--rule);overflow:hidden;margin-top:-.15rem}
.rank-bar > span{display:block;height:100%;background:var(--brand);opacity:.85}

/* ---- screenshots --------------------------------------------------- *
 * Every image under .shot is a real capture of a real Shield360
 * environment. The caption says which one and says so in words, because
 * a product screenshot with no provenance is indistinguishable from a
 * rendering, and this page's whole argument is that it does not render
 * numbers it did not measure.
 * -------------------------------------------------------------------- */
.shot{margin:0;display:flex;flex-direction:column}
.shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--lift);background:var(--surface);
}
.shot figcaption{
  margin-top:.6rem;font-size:.82rem;line-height:1.5;color:var(--muted);max-width:68ch;
}
.shot figcaption b{font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.shot-frame{
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--lift);background:var(--surface-2);
}
.shot-frame img{border:0;border-radius:0;box-shadow:none}
.shot-bar{
  display:flex;align-items:center;gap:.45rem;min-width:0;
  padding:.5rem .8rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.shot-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--rule-strong)}
.shot-path{
  margin-left:.4rem;font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot-live{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--covered);border:1px solid var(--covered);
  border-radius:2px;padding:.08rem .35rem;flex:0 0 auto;
}

/* ---- data table ---------------------------------------------------- */
.tbl-scroll{overflow-x:auto;max-width:100%}
table.data{width:100%;border-collapse:collapse;font-size:.8rem;min-width:44rem}
table.data th{
  text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding:.4rem .65rem;border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.data td{
  padding:.52rem .65rem;border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink-2);
  white-space:nowrap;
}
table.data tr:last-child td{border-bottom:0}
table.data td.name{color:var(--ink);font-weight:500}
table.data td.wrap-cell{white-space:normal;font-family:var(--sans);font-variant-numeric:normal}

/* A wider, prose-carrying table for specifications and retention
   horizons, where the cell is a sentence rather than a figure. */
table.spec{width:100%;border-collapse:collapse;font-size:.9rem;border-top:1px solid var(--rule)}
table.spec th{
  text-align:left;font-family:"IBM Plex Mono",monospace;font-size:.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  padding:.5rem .7rem .5rem 0;border-bottom:1px solid var(--rule);vertical-align:bottom;
}
table.spec td{
  padding:.7rem .7rem .7rem 0;border-bottom:1px solid var(--rule);
  color:var(--ink-2);vertical-align:top;line-height:1.5;
}
table.spec td:first-child{color:var(--ink);font-family:Archivo,sans-serif;font-size:.875rem;font-weight:600;width:14rem}
table.spec td.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap;width:9rem}
@media (max-width:720px){
  table.spec td:first-child{width:auto}
  table.spec td.num{width:auto}
}

.pill{
  display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.07em;padding:.1rem .38rem;border-radius:2px;
}
.pill-charged{background:var(--accent-wash);color:var(--accent)}
.pill-covered{background:var(--covered-wash);color:var(--covered)}
.pill-licence{background:var(--licence-wash);color:var(--licence)}
.pill-unknown{background:var(--unknown-wash);color:var(--unknown)}

/* ---- finding card -------------------------------------------------- */
.finding{display:flex;flex-direction:column;gap:.7rem}
.finding-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.finding-id{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--accent);font-weight:500}
.finding-loc{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);margin-left:auto}
pre.code{
  margin:0;padding:.7rem .8rem;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:2px;overflow-x:auto;font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  line-height:1.6;color:var(--ink-2);
}
pre.code b{color:var(--accent);font-weight:500}
.kv{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.3rem .7rem;font-size:.85rem}
.kv dt{font-family:"IBM Plex Mono",monospace;font-size:.625rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:.28rem}
.kv dd{margin:0;color:var(--ink-2)}

/* ---- never-do list ------------------------------------------------- */
.never{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.never-item{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.never-mark{flex:0 0 auto;margin-top:.3rem;color:var(--accent)}
.never-text{font-size:.95rem;color:var(--ink-2)}
.never-text b{font-family:Archivo,sans-serif;font-size:.9rem;font-weight:600;color:var(--ink);display:block}

/* ---- install tabs -------------------------------------------------- */
[hidden]{display:none!important}
.tabs{display:flex;gap:.3rem;padding:.5rem .85rem;border-bottom:1px solid var(--rule);background:var(--surface-2);flex-wrap:wrap}
.tab{
  font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:-.005em;
  padding:.32rem .72rem;border-radius:2px;border:1px solid transparent;
  background:none;color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--surface);border-color:var(--rule-strong);color:var(--ink)}
.tabpanel{padding:.9rem}
.cmd-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.cmd-arch{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--muted)}
.copy{
  margin-left:auto;font-family:Archivo,sans-serif;font-size:.72rem;font-weight:600;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:2px;padding:.22rem .58rem;cursor:pointer;transition:color .15s,border-color .15s;
}
.copy:hover{border-color:var(--ink);color:var(--ink)}
pre.cmd{font-size:.72rem;line-height:1.75;white-space:pre;margin:0;overflow-x:auto;font-family:"IBM Plex Mono",monospace;color:var(--ink-2)}
pre.cmd .c{color:var(--muted)}
pre.cmd .k{color:var(--accent)}

/* ---- chips --------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--ink-2);
  border:1px solid var(--rule-strong);border-radius:2px;padding:.25rem .55rem;background:var(--surface);
}
.chip em{font-style:normal;color:var(--muted)}

/* ---- persona cards ------------------------------------------------- *
 * Three buyers, three different first questions. The card states the
 * question rather than the job title, because the job title is not what
 * anybody types into a search box.
 * -------------------------------------------------------------------- */
.personas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:920px){.personas{grid-template-columns:1fr}}
.persona{
  display:flex;flex-direction:column;gap:.75rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.2rem;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.persona:hover{border-color:var(--rule-strong);box-shadow:var(--lift)}
.persona-role{font-family:"IBM Plex Mono",monospace;font-size:.625rem;text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}
.persona h3{font-size:1.18rem;line-height:1.2}
.persona p{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.persona ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.34rem;font-size:.86rem;color:var(--ink-2)}
.persona li{display:flex;gap:.5rem;align-items:flex-start}
.persona li::before{content:"";flex:0 0 auto;width:.35rem;height:.35rem;border-radius:1px;background:var(--rule-strong);margin-top:.52rem}
.persona-go{
  margin-top:auto;padding-top:.4rem;
  font-family:Archivo,sans-serif;font-size:.82rem;font-weight:600;color:var(--accent);
}

/* ---- capability grid ------------------------------------------------ */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
@media (max-width:920px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.caps{grid-template-columns:1fr}}
.cap{
  padding:1.1rem 1.1rem 1.15rem 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.4rem;
}
.cap h3{font-size:.98rem}
.cap p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.cap-where{font-family:"IBM Plex Mono",monospace;font-size:.65rem;color:var(--muted);letter-spacing:.04em}

/* ---- numbered steps -------------------------------------------------- */
.steps{counter-reset:step;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.4rem 1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule);
}
.step::before{
  content:counter(step);
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--accent);
  border:1px solid var(--rule-strong);border-radius:2px;
  width:1.8rem;height:1.8rem;display:grid;place-items:center;
}
.step h3{margin-top:.18rem}
.step p{grid-column:2;font-size:.94rem;color:var(--ink-2);max-width:60ch}

/* ---- callout --------------------------------------------------------- */
.callout{
  border-left:2px solid var(--brand);background:var(--surface);
  padding:.9rem 1.1rem;border-radius:0 var(--radius) var(--radius) 0;
  font-size:.94rem;color:var(--ink-2);line-height:1.55;
}
.callout b{font-family:Archivo,sans-serif;font-weight:600;color:var(--ink)}
.callout-quiet{border-left-color:var(--rule-strong)}

/* ---- plans ----------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:1.15rem;display:flex;flex-direction:column;gap:.8rem}
.plan-featured{border-color:var(--brand);box-shadow:var(--lift)}
.plan h3{font-size:1.05rem}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.42rem;font-size:.9rem;color:var(--ink-2)}
.plan li{display:flex;gap:.5rem;align-items:flex-start}
.plan li::before{content:"";flex:0 0 auto;width:.42rem;height:.42rem;border-radius:1px;background:var(--covered);margin-top:.52rem}
.plan-price{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--muted)}
.plan .btn{margin-top:auto;justify-content:center}

/* ---- FAQ ------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq-item{padding:1.15rem 0;border-bottom:1px solid var(--rule)}
.faq-item h3{margin-bottom:.4rem}
.faq-item p{color:var(--ink-2);max-width:62ch;font-size:.96rem}
.faq-item p + p{margin-top:.5rem}

/* ---- closing + footer ------------------------------------------------ */
.close{padding:clamp(3.5rem,6vw,5rem) 0;background-color:var(--night);color:var(--ink)}
.close .prose{color:var(--ink-2)}
.close-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
@media (max-width:820px){.close-in{grid-template-columns:1fr;gap:1.5rem}}

/* ---- hand-built figures ------------------------------------------- *
 * The captures are real, and they come from a one-machine tenant, so
 * they cannot show what a fleet looks like. These figures can. Every
 * one is inline SVG, drawn from a small table of illustrative numbers
 * that is printed beneath it, and every one carries an Illustrative
 * tag on the object itself — the caveat travels with the picture, not
 * with a footnote three screens away.
 *
 * Colour is the site's own semantic palette, checked with the dataviz
 * validator (see README, "Hand-built figures"): grey beside red and blue
 * beside red pass in both modes; green beside red passes only with the
 * 2px gap and a direct label, which every figure here has; grey is never
 * placed beside green.
 * -------------------------------------------------------------------- */
.chart{
  margin:0;display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--lift);overflow:hidden;
}
.chart-head{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem .95rem;border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.chart-title{font-family:Archivo,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:-.005em}
.chart-sub{font-size:.8rem;color:var(--muted)}
.chart-tag{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);border:1px solid var(--rule-strong);
  border-radius:2px;padding:.08rem .35rem;flex:0 0 auto;
}
.chart-body{padding:.9rem .95rem .4rem;overflow-x:auto}
.chart-body svg{display:block;width:100%;min-width:38rem;height:auto}
.chart-body.diagram svg{min-width:34rem}
.chart svg text{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:12px;fill:var(--ink-2);
}
.chart svg .tm{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart svg .tv{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11.5px;fill:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
.chart svg .tk{fill:var(--ink);font-weight:600}
.chart svg .tq{fill:var(--muted);font-size:11px}
.chart svg .grid{stroke:var(--rule);stroke-width:1}
.chart svg .axis{stroke:var(--rule-strong);stroke-width:1}
.chart svg .note{stroke:var(--ink-2);stroke-width:1}
.chart svg .m{transition:opacity .12s}
.chart svg .m:hover{opacity:.78}
.chart svg .ghost{fill:none;stroke:var(--rule-strong);stroke-width:1}
.chart svg .box{fill:var(--surface-2);stroke:var(--rule-strong);stroke-width:1}
.chart svg .box-soft{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.chart svg .flow{stroke:var(--rule-strong);stroke-width:1.5;fill:none}
.chart svg .flow-strong{stroke:var(--ink-2);stroke-width:1.5;fill:none}
.chart svg .flow-out{stroke:var(--accent);stroke-width:1.5;fill:none}
.chart svg .wash-cov{fill:var(--covered-wash)}
.chart svg .wash-lic{fill:var(--licence-wash)}
.chart svg .wash-acc{fill:var(--accent-wash)}
.chart svg .ink-cov{fill:var(--covered);font-weight:600;font-size:10.5px;letter-spacing:.06em}
.chart svg .ink-lic{fill:var(--licence);font-weight:600;font-size:10.5px;letter-spacing:.06em}
.chart svg .ink-acc{fill:var(--accent);font-weight:600;font-size:10.5px;letter-spacing:.06em}
.chart-legend{
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;padding:.35rem .95rem .75rem;
  font-family:Archivo,sans-serif;font-size:.78rem;color:var(--ink-2);
}
.chart-legend span{display:inline-flex;align-items:center;gap:.4rem}
.key{width:.75rem;height:.75rem;border-radius:2px;flex:0 0 auto}
.key-ghost{background:none;border:1px solid var(--rule-strong)}
.chart-table{border-top:1px solid var(--rule)}
.chart-table summary{
  cursor:pointer;padding:.55rem .95rem;font-family:Archivo,sans-serif;font-size:.78rem;
  font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:.5rem;
}
.chart-table summary::-webkit-details-marker{display:none}
.chart-table summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--accent)}
.chart-table[open] summary::before{content:"\2212"}
.chart-table summary:hover{color:var(--ink)}
.chart-table .tbl-scroll{padding:0 .95rem .8rem}
.chart-table table.spec{font-size:.82rem}
.chart-table table.spec td:first-child{font-size:.8rem;width:auto}
.chart-table table.spec td.num{width:auto}
.chart figcaption{
  border-top:1px solid var(--rule);background:var(--surface-2);
  padding:.65rem .95rem;font-size:.82rem;line-height:1.5;color:var(--muted);
}
.chart figcaption b{font-family:Archivo,sans-serif;font-size:.8rem;font-weight:600;color:var(--ink-2)}

/* ---- assessment ------------------------------------------------------
 * assessment.html only. A self-assessment is declared posture, so the
 * result is drawn as a statement like the hero's, labelled on the object
 * as unverified. Every band carries a word as well as a colour.
 * -------------------------------------------------------------------- */
.meta-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.q{border:0;margin:0;padding:1.15rem 0;border-bottom:1px solid var(--rule);min-width:0}
.q:first-of-type{border-top:1px solid var(--rule)}
.q legend{padding:0;font-family:Archivo,sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1.35;max-width:62ch}
.q-num{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;color:var(--accent);margin-right:.5rem}
.opts{display:flex;flex-direction:column;gap:.35rem;margin-top:.8rem}
.opt{
  display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;
  padding:.55rem .75rem;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);font-size:.93rem;color:var(--ink-2);line-height:1.45;
  transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--rule-strong)}
.opt input{accent-color:var(--accent-solid);margin:.2rem 0 0;flex:0 0 auto;width:1rem;height:1rem}
.opt:has(input:checked){border-color:var(--ink);color:var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.opt-unsure{border-style:dashed;color:var(--muted)}
.q-missing .opts{box-shadow:-2px 0 0 var(--brand);padding-left:.6rem}
.progress{
  position:sticky;bottom:0;z-index:5;border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);
}
.progress-in{display:flex;align-items:center;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.progress-count{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--muted)}
.progress .bar{flex:1 1 8rem;margin:0;min-width:6rem}
.result-figure{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.result-figure small{font-size:.38em;font-weight:600;color:var(--muted);letter-spacing:0}
.score-bar{height:8px;border-radius:2px;background:var(--rule);overflow:hidden;margin-top:.35rem}
.score-bar span{display:block;height:100%;border-radius:0 2px 2px 0}
.gaps{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.gap{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.5rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)}
@media (max-width:720px){.gap{grid-template-columns:1fr;gap:.35rem}}
.gap h3{font-size:1rem}
.gap .kv{grid-template-columns:5.6rem minmax(0,1fr)}
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.95rem}
@media (max-width:820px){.ladder{grid-template-columns:1fr}}
.rung{border:1px solid var(--rule);border-radius:var(--radius);padding:1rem;background:var(--surface);display:flex;flex-direction:column;gap:.45rem}
.rung p{font-size:.9rem;color:var(--ink-2)}
.rung .pill{align-self:flex-start}
.rung-here{border-color:var(--ink)}
.mailform{border:1px solid var(--ink);border-radius:var(--radius);background:var(--surface);padding:1.15rem;display:flex;flex-direction:column;gap:.75rem}
.mailform h3{font-size:1.05rem}
.mailform form{display:flex;flex-direction:column;gap:.75rem;margin:0}
.mailform-row{display:flex;flex-wrap:wrap;gap:.6rem}
.mailform-row input{flex:1 1 14rem;min-width:0;padding:.7rem .8rem;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.95rem;color:var(--ink)}
.mailform-row select{flex:1 1 14rem;min-width:0;padding:.7rem .8rem;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.95rem;color:var(--ink)}
.mailform-row input:focus-visible,.mailform-row select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mailform-row input[aria-invalid="true"]{border-color:var(--brand)}
.mailform-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.mailform .opts{margin-top:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media print{
  .site-head,.subnav,.progress,footer,#questions,.no-print{display:none!important}
  body{background:#fff}
  .section{padding:1.25rem 0;border:0}
  .panel,.rung{box-shadow:none;break-inside:avoid}
  .gap{break-inside:avoid}
}
#result-h:focus{outline:none}

/* ==================================================================== *
 * Home page sections
 *
 * The home page is the one a buyer forwards, so it reads the way the
 * enterprise security category reads: a night hero, a proof strip, centred
 * section heads, and cards a reviewer can scan before reading a sentence.
 * The ledger objects stay — the statement, the retention table — because
 * they are the product's argument, not decoration.
 * ==================================================================== */
.home-hero{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,4rem)}
.home-hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);line-height:.98;margin-top:1rem}
.home-hero .lede{margin-top:1.5rem}
.home-hero h1 em{font-style:normal;color:var(--accent)}
.hero-link{margin-top:1.25rem;font-weight:600}
.hero-link a{text-decoration:none}
.home-hero .lede{color:var(--ink-2)}
.hero-deploy{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.hero-deploy a{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-size:.8rem;font-weight:500;color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:999px;padding:.34rem .8rem;background:rgba(255,255,255,.03);
  transition:border-color .15s,background .15s;
}
.hero-deploy a:hover{border-color:var(--ink);background:rgba(255,255,255,.07)}
.hero-deploy a::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--covered)}
.kicker{font-family:var(--sans);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}

/* Proof strip: the category puts customer logos here. There are none to
   show, so the strip carries the structural facts a reviewer checks first. */
.proof{border-top:1px solid var(--rule);background:rgba(20,6,8,.45)}
.proof-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.proof-item{display:flex;gap:.7rem;align-items:flex-start;padding:1.3rem 1.1rem 1.3rem 0}
.proof-item + .proof-item{padding-left:1.1rem;border-left:1px solid var(--rule)}
.proof-item svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent);margin-top:.1rem}
.proof-item b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.3}
.proof-item span{display:block;font-size:.78rem;color:var(--muted);line-height:1.4;margin-top:.15rem}
@media (max-width:1000px){
  .proof-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-item,.proof-item + .proof-item{padding:1rem 0;border-left:0;border-bottom:1px solid var(--rule)}
  .proof-item:nth-child(even){padding-left:1rem}
}
@media (max-width:560px){.proof-in{grid-template-columns:1fr}.proof-item:nth-child(even){padding-left:0}}

.sec{padding:clamp(3.5rem,6vw,5rem) 0}
.sec + .sec:not(.night){border-top:1px solid var(--rule)}
.sec-alt{background:transparent}
.sec-head{max-width:52rem;margin:0 auto 2.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,3.25rem);line-height:.98}
.sec-head p{color:var(--ink-2);font-size:1.075rem;max-width:62ch;text-wrap:balance}
.sec-head .kicker{color:var(--accent);font-size:.78rem}
.sec-head-left{text-align:left;align-items:flex-start;margin-left:0}
.sec-foot{text-align:center;margin-top:2.25rem}
.link-arrow{font-weight:600;color:var(--accent);text-decoration:none}
.link-arrow::after{content:"\2192";display:inline-block;margin-left:.4rem;transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}

/* Icon cards */
.icards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
@media (max-width:960px){.icards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.icards{grid-template-columns:1fr}}
.icards > *{min-width:0}
/* The four products: one card per verb of the brand line. */
.icards.icards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.icards.icards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.icards.icards-4{grid-template-columns:1fr}}
.icard .pillar-value{font-size:.96rem;color:var(--ink);font-weight:500;line-height:1.5}
.icard{
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand);border-radius:var(--radius-lg);
  padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}

a.icard{text-decoration:none;color:inherit}
.icard:hover{border-color:var(--rule-strong);border-top-color:var(--brand)}
a.icard:hover{transform:translateY(-2px)}
.ico{
  width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent);flex:0 0 auto;
}
.ico svg{width:22px;height:22px}
.icard h3{font-size:1.1rem;margin-top:.3rem}
.icard p{font-size:.94rem;color:var(--ink-2);line-height:1.55}
.icard .cap-where{margin-top:auto;padding-top:.4rem}
.icard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem;color:var(--ink-2)}
.icard li,.deploy li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.45}
.icard li::before,.deploy li::before{
  content:"";flex:0 0 auto;width:1rem;height:1rem;margin-top:.12rem;border-radius:50%;
  background:var(--covered-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231B6B58' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.night .icard li::before,.night .deploy li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2343AC8D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.icard-go{margin-top:auto;padding-top:.5rem;font-size:.9rem;font-weight:600;color:var(--accent)}
.role{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}

/* Deployment: two ways to run it, side by side, then how they compare. */
.deploy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:860px){.deploy-grid{grid-template-columns:1fr}}
.deploy-grid > *{min-width:0}
.deploy{
  position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:1rem;box-shadow:var(--lift);
}
.deploy-top{display:flex;align-items:center;gap:.9rem}
.deploy-tag{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.deploy h3{font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.02em;line-height:1.15}
.deploy > p{color:var(--ink-2);font-size:.98rem}
.deploy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.95rem;color:var(--ink-2)}
.deploy-best{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--muted)}
.deploy-best b{color:var(--ink);font-weight:600}
.deploy-bridge{
  margin-top:1.25rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border:1px dashed var(--rule-strong);border-radius:var(--radius-lg);padding:1.1rem 1.4rem;
  font-size:.95rem;color:var(--ink-2);
}
.deploy-bridge b{color:var(--ink)}
.deploy-bridge p{flex:1 1 22rem}
.deploy-bridge .btn{margin-left:auto}
table.compare{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:2rem}
table.compare th,table.compare td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.compare thead th{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
table.compare tbody th{font-weight:600;color:var(--ink);width:26%}
table.compare td{color:var(--ink-2)}

/* Fact band: four structural numbers, not market statistics. */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts > *{min-width:0}
.fact{border-top:2px solid var(--brand);padding-top:1rem}
.fact-n{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(2.2rem,4.4vw,3.2rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.fact-l{margin-top:.55rem;font-size:.92rem;color:var(--ink-2);line-height:1.45}

/* Split: prose on one side, an object on the other. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.split > *{min-width:0}

.never-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:720px){.never-grid{grid-template-columns:1fr}}
.never-grid .never-item{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);padding:1rem 1.1rem}

/* FAQ as disclosures. The answer stays in the DOM, so the FAQPage JSON-LD
   still describes text that is on the page. */
.faq-d{max-width:52rem;margin:0 auto;border-top:1px solid var(--rule)}
.faq-d details{border-bottom:1px solid var(--rule)}
.faq-d summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem 0;
}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary h3{font-size:1.05rem}
.faq-d summary::after{
  content:"+";flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--rule-strong);color:var(--accent);font-size:1.1rem;transition:transform .2s;
}
.faq-d details[open] summary::after{transform:rotate(45deg)}
.faq-d details p{padding:0 3rem 1.3rem 0;color:var(--ink-2);max-width:62ch}
.faq-d details p a{color:var(--accent)}

/* Closing call to action */
.cta-band{padding:clamp(3.5rem,6vw,5rem) 0}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center}
@media (max-width:820px){.cta-in{grid-template-columns:1fr}}
.cta-in > *{min-width:0}
.cta-in h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.cta-in p{margin-top:.9rem;color:var(--ink-2);max-width:52ch}
.cta-in .hero-ctas{margin:0}
.review-outcomes{display:grid;gap:.55rem;margin:1.35rem 0 0;padding:0;list-style:none;color:var(--ink)}
.review-outcomes li{position:relative;padding-left:1.35rem}
.review-outcomes li::before{content:"";position:absolute;left:0;top:.58em;width:.52rem;height:.18rem;background:var(--covered)}
.review-panel{width:min(100%,28rem);padding:1.5rem;border:1px solid var(--rule);border-top:3px solid var(--brand);background:var(--surface)}
.review-label{margin:0 0 .75rem!important;color:var(--ink)!important;font-family:"IBM Plex Mono",monospace;font-size:.74rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.review-tracks{display:grid;gap:.5rem}
.review-tracks a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border:1px solid var(--rule);color:var(--ink);background:var(--surface-2);font-weight:650;text-decoration:none}
.review-tracks a:hover{border-color:var(--accent);color:var(--accent)}
.review-tracks span{color:var(--accent)}
.review-fallback{margin:1rem 0 0!important;font-size:.78rem}
.review-fallback a{color:var(--accent)}

/* Anchored sections clear the sticky bar, and the subnav where there is one. */
section[id]{scroll-margin-top:72px}
body:has(.subnav) section[id]{scroll-margin-top:124px}
body:has(.subnav) .rail{top:140px}

/* ==================================================================== *
 * In-page subnav
 *
 * Sticks under the main bar on the home page and the persona pages:
 * section anchors on the left, the one primary action on the right. It is
 * plain links, so it works without script; site.js only marks the section
 * in view with aria-current. On a phone the links scroll sideways inside
 * the bar, never the page.
 * ==================================================================== */
.subnav{
  position:sticky;top:68px;z-index:35;
  background:rgba(30,10,12,.97);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);color:#FBF5F4;
}
.subnav-in{display:flex;align-items:center;gap:1rem;height:48px}
.subnav-links{
  display:flex;align-items:stretch;align-self:stretch;min-width:0;flex:1 1 auto;
  overflow-x:auto;scrollbar-width:none;
}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{
  display:inline-flex;align-items:center;padding:0 .75rem;white-space:nowrap;
  font-family:var(--sans);font-size:.84rem;font-weight:500;color:#DCCDCB;text-decoration:none;
  box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s;
}
.subnav-links a:first-child{padding-left:0}
.subnav-links a:hover{color:#fff}
.subnav-links a[aria-current="true"]{color:#fff;box-shadow:inset 0 -3px 0 #ED1C24}
.subnav-links a:focus-visible{outline-offset:-4px}
.subnav-cta{flex:0 0 auto}
@media (max-width:640px){
  .subnav-in{height:44px;gap:.6rem}
  .subnav-links a{font-size:.8rem;padding:0 .6rem}
  .subnav-cta{padding:.4rem .75rem;font-size:.8rem}
}

/* ==================================================================== *
 * Challenge selector (index.html #challenges)
 *
 * ARIA tabs when site.js runs; without it, four stacked panels, each with
 * its own heading. The tab list is `hidden` in the markup and shown by the
 * script, so nothing is ever a dead control.
 * ==================================================================== */
.chal{display:flex;flex-direction:column;gap:1.25rem}
.chal.is-tabbed{gap:0}
.chal-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--rule);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  overflow:hidden;background:var(--surface);
}
.chal-tab{
  appearance:none;border:0;border-left:1px solid var(--rule);margin:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;
  padding:1rem 1.15rem;background:transparent;color:var(--ink-2);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-size:.98rem;font-weight:600;line-height:1.25;
  transition:background .15s,color .15s;
}
.chal-tab:first-child{border-left:0}
.chal-tab small{font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.chal-tab:hover{color:var(--ink);background:var(--surface-2)}
.chal-tab[aria-selected="true"]{background:var(--night);color:#FBF5F4;box-shadow:inset 0 3px 0 var(--brand)}
.chal-tab[aria-selected="true"] small{color:#FF8A83}
.chal-tab:focus-visible{outline-offset:-4px}
@media (max-width:760px){
  .chal-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chal-tab:nth-child(3){border-left:0}
  .chal-tab:nth-child(n+3){border-top:1px solid var(--rule)}
  .chal-tab{padding:.85rem .9rem;font-size:.9rem}
}
.chal-panel{border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,3rem)}
.chal.is-tabbed .chal-panel{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.chal-panel:focus-visible{outline-offset:2px}
.chal-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:860px){.chal-top{grid-template-columns:1fr}}
.chal-top > *{min-width:0}
.chal-panel .role{color:var(--accent)}
.chal-panel h3{margin-top:.75rem;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;font-stretch:72%;text-transform:uppercase;color:#FF7A72;font-weight:800}
.chal-panel .chal-lede{margin-top:1rem;color:var(--ink-2);font-size:1rem;max-width:58ch}
.why-h{font-family:Archivo,sans-serif;font-weight:600;color:var(--ink);font-size:1rem}
/* Stat callout: a big structural fact over one short line, on a 3px rule. */
.why{border-left:3px solid var(--brand);padding:.25rem 0 .25rem 1rem;margin-top:1.5rem}
.why b{display:block;font-family:Archivo,sans-serif;font-stretch:72%;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;font-weight:800;color:var(--ink)}
.why span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--ink-2);line-height:1.5;max-width:40ch}
.res-h{margin-top:2.4rem;font-family:Archivo,sans-serif;font-weight:600;color:var(--ink);font-size:1rem}
.res-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.5rem}
@media (max-width:860px){.res-cards{grid-template-columns:1fr}}
.res-cards > *{min-width:0}
/* Resource card: a designed cover (assets/covers/*.webp) over a white body,
   the way a report library looks. Flat, square, one hover state. */
.res-card{
  display:flex;flex-direction:column;text-decoration:none;color:#1A1414;
  background:#FFFFFF;border-radius:var(--radius);overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.res-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(0,0,0,.8)}
.res-cover{display:block;width:100%;height:auto;aspect-ratio:16 / 9}
.res-body{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.25rem 1.25rem;flex:1 1 auto}
.res-type{font-family:"IBM Plex Mono",monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#C8121A}
.res-card b{font-family:Archivo,sans-serif;font-size:1.05rem;font-weight:700;color:#1A1414;line-height:1.25}
.res-card span.res-d{font-size:.87rem;color:#433B3B;line-height:1.5}
.res-go{margin-top:auto;padding-top:.5rem;font-size:.86rem;font-weight:700;color:#C8121A}
.chal-foot{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.chal-foot .fine a{color:var(--accent)}

/* ==================================================================== *
 * Enforcement points (index.html #enforce)
 *
 * Five routes AI takes, and the component that applies the one policy on
 * each. Every card is a shipping component; README lists the sources.
 * ==================================================================== */
.enforce{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0;counter-reset:ep}
@media (max-width:1100px){.enforce{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.enforce{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.enforce{grid-template-columns:1fr}}
.enforce > *{min-width:0}
.ep{
  counter-increment:ep;display:flex;flex-direction:column;gap:.55rem;
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--brand);
  border-radius:var(--radius);padding:1.2rem 1.15rem 1.25rem;
}
.sec-alt .ep{background:var(--paper)}
.ep::before{content:counter(ep,decimal-leading-zero);font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--accent)}
.ep-route{font-family:"IBM Plex Mono",monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:1.4}
.ep h3{font-size:1.05rem}
.ep p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.ep .ep-does{color:var(--ink)}
.edge{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem;margin-top:1.5rem}
@media (max-width:860px){.edge{grid-template-columns:1fr}}
.edge > *{min-width:0}
.sec-alt .callout{background:var(--paper)}

/* ==================================================================== *
 * Closing conversion band (index.html #contact)
 *
 * Headline and three numbered reasons on the left; on the right a card of
 * booking links, the assessment and the enterprise brief. Deliberately not
 * a form: there is no backend to post to, and a form would be a new
 * privacy-policy purpose.
 * ==================================================================== */
.close2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.close2{grid-template-columns:1fr}}
.close2 > *{min-width:0}
.close2 h2{margin-top:1rem;font-size:clamp(2.1rem,4vw,3.25rem);line-height:1}
.close2 h2 em{font-style:normal;color:var(--accent)}
.close2 .close-lede{margin-top:1.1rem;color:var(--ink-2);max-width:52ch;font-size:1.05rem}
.vprops{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.3rem;counter-reset:vp}
.vprops li{counter-increment:vp;border-left:3px solid var(--brand);padding-left:1.1rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.vprops b{display:block;font-family:Archivo,sans-serif;font-size:1.08rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.vprops b::before{content:counter(vp,decimal-leading-zero) ".";color:#FF8A83;margin-right:.5rem;font-family:"IBM Plex Mono",monospace;font-size:.92rem}
.close2 .review-panel{width:100%;padding:1.5rem;border-radius:var(--radius)}
.review-panel h3{font-size:1.3rem;letter-spacing:-.015em}
.review-panel .review-intro{margin:.45rem 0 1.1rem;color:var(--ink-2);font-size:.92rem}
.review-panel .btn-block{display:flex;width:100%}
.review-panel .review-label{margin-top:1.4rem!important}
.review-links{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--rule);font-size:.88rem}
.review-links a{color:var(--accent);font-weight:600;text-decoration:none}
.review-links a:hover{text-decoration:underline}

/* ==================================================================== *
 * Platform map
 *
 * The architecture as one picture: what Shield360 does on top, the
 * control plane and the OpenTelemetry pipeline in the middle, and what it
 * reads from underneath. Built from HTML rather than an image so it
 * reflows at phone width, stays sharp, and is text to a crawler. Every
 * module and source in it is a working screen or component; the README
 * lists where each is checked.
 * ==================================================================== */
.pmap{
  position:relative;border:1px solid var(--rule);border-radius:calc(var(--radius-lg) + 4px);
  padding:clamp(1.25rem,3vw,2.5rem);
  background:
    radial-gradient(50rem 22rem at 50% 45%,rgba(237,28,36,.16),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.pmap-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.75rem}
.pmap-row > *{min-width:0}
.pmod,.psrc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem}
.pmod-ico{
  width:64px;height:64px;display:grid;place-items:center;color:#FF8A83;
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  background:linear-gradient(160deg,rgba(255,59,66,.55),rgba(255,59,66,.12));
  position:relative;
}
.pmod-ico::before{
  content:"";position:absolute;inset:1.5px;clip-path:inherit;background:#12161E;z-index:0;
}
.pmod-ico svg{position:relative;z-index:1;width:26px;height:26px}
.pmod b,.psrc b{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.25}
.pmod span,.psrc span{font-size:.72rem;color:var(--muted);line-height:1.35}
.psrc-ico{width:34px;height:34px;color:#8FB0EE}
.psrc-ico svg{width:34px;height:34px}

/* The wires: a dotted column under each module, with a pulse travelling
   up it — data flows from the sources into the platform and out as
   answers. Decorative, hidden from assistive tech and from reduced motion. */
.pmap-wires{height:56px}
.pmap-wires > i{
  display:block;position:relative;height:100%;
  background:radial-gradient(circle,rgba(255,255,255,.28) 1px,transparent 1.6px) center/6px 8px repeat-y;
  width:6px;margin:0 auto;
}
.pmap-wires > i::after{
  content:"";position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:#FF6B62;box-shadow:0 0 10px 2px rgba(255,59,66,.7);
  animation:pm-rise 2.8s linear infinite;
}
.pmap-wires.down > i::after{background:#8FB0EE;box-shadow:0 0 10px 2px rgba(127,160,222,.7)}
.pmap-wires > i:nth-child(2n)::after{animation-delay:-1.1s}
.pmap-wires > i:nth-child(3n)::after{animation-delay:-2s}
.pmap-wires > i:nth-child(5n)::after{animation-delay:-.5s}
@keyframes pm-rise{from{top:100%;opacity:0}15%{opacity:1}85%{opacity:1}to{top:0;opacity:0}}

.pband{
  border-radius:10px;text-align:center;font-family:var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.pband-plane{
  position:relative;margin-top:.5rem;
  background:linear-gradient(180deg,#2A0F13,#1A0B0E);border:1px solid rgba(255,59,66,.55);
  box-shadow:0 0 0 1px rgba(255,59,66,.1),0 18px 50px -20px rgba(237,28,36,.6);
  padding:1.35rem 1rem 1.1rem;
}
.pband-plane::before{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:2px;
  background:linear-gradient(90deg,transparent,#FF3B42,transparent);
}
.pband-title{font-size:clamp(.95rem,1.8vw,1.35rem);font-weight:600}
.pband-parts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem;margin-top:.85rem;
  font-size:.68rem;letter-spacing:.14em;color:#E3B9BB;
}
.pband-parts span::before{content:"\00B7\00B7\00B7";margin-right:.6rem;color:rgba(255,255,255,.3);letter-spacing:.1em}
.pband-parts span:first-child::before{content:none}
.pband-also{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1rem;
  letter-spacing:0;text-transform:none;
}
.pband-also em{font-style:normal;font-size:.72rem;color:#8C96A4;margin-right:.2rem;align-self:center}
.pband-also span{
  font-size:.72rem;color:#D5DAE1;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.18rem .6rem;
  background:rgba(255,255,255,.03);
}
.pband-pipe{
  margin-top:.6rem;padding:.7rem 1rem;font-size:.74rem;font-weight:600;color:#0B1220;
  background:linear-gradient(90deg,#9DB7EA,#DCE6FA 50%,#9DB7EA);
}
.pband-deploy{
  margin-top:1.4rem;padding:.75rem 1rem;font-size:.7rem;color:#B9C1CC;
  border:1px dashed rgba(255,255,255,.2);letter-spacing:.14em;
}
.pband-deploy b{color:#fff;font-weight:600}
.pmap-cap{margin-top:1rem;text-align:center;font-size:.82rem;color:var(--muted)}

@media (max-width:980px){
  .pmap-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:1.4rem}
  .pmap-wires{display:none}
  .pband-plane{margin:1.6rem 0 0}
  .pmap-sources{margin-top:1.6rem}
}
@media (max-width:520px){
  .pmap-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pband{letter-spacing:.12em}
}
@media (prefers-reduced-motion: reduce){.pmap-wires > i::after{display:none}}

/* Capability groups: every working area, grouped by who asks. */
.capg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:1100px){.capg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.capg{grid-template-columns:1fr}}
.capg > *{min-width:0}
.capg-col{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:1.4rem;display:flex;flex-direction:column;gap:1rem}
.capg-head{display:flex;align-items:center;gap:.75rem}
.capg-head h3{font-size:1.05rem}
.capg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.capg-list li{padding:.7rem 0;border-top:1px solid var(--rule)}
.capg-list b{display:block;font-size:.92rem;font-weight:600;color:var(--ink)}
.capg-list span{display:block;font-size:.85rem;color:var(--ink-2);line-height:1.45;margin-top:.15rem}

/* ---- comparison matrix (compare.html) --------------------------------
 * Thirteen tools by seventeen questions does not fit any screen, so the
 * table scrolls sideways inside its frame and the tool name stays pinned
 * on the left. The pinned cell needs an opaque ground, or the cells
 * scrolling underneath show through it. */
.matrix-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch}
.matrix-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table.matrix{border-collapse:separate;border-spacing:0;font-size:.8rem;line-height:1.45;min-width:118rem}
table.matrix th,table.matrix td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);color:var(--ink-2)}
table.matrix tr:last-child th,table.matrix tr:last-child td{border-bottom:0}
table.matrix thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);background:var(--surface-2);vertical-align:bottom;min-width:7.5rem;
}
table.matrix thead th.diff{color:var(--accent)}
table.matrix tbody th{font-family:Archivo,sans-serif;font-size:.84rem;font-weight:600;color:var(--ink);min-width:10.5rem}
table.matrix th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--rule-strong)}
table.matrix thead th:first-child{background:var(--surface-2);z-index:2}
table.matrix tr.is-us th,table.matrix tr.is-us td{background:var(--surface-2)}
table.matrix tr.is-us th:first-child{box-shadow:inset 3px 0 0 var(--brand),1px 0 0 var(--rule-strong)}
@media (max-width:640px){table.matrix tbody th{min-width:8rem;font-size:.8rem}}
/* The vendor pages under compare/ set one question per row against two to
 * five tools, so the frame only has to scroll on a phone. */
table.matrix.matrix-compact{min-width:46rem;width:100%;font-size:.84rem}
table.matrix.matrix-compact tbody th{min-width:11rem;max-width:15rem;font-size:.84rem}
table.matrix.matrix-compact thead th{min-width:9rem}
table.matrix.matrix-compact th.is-us-col,table.matrix.matrix-compact td.is-us-col{background:var(--surface-2)}
.mk{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600;white-space:nowrap}
.mk-yes{color:var(--covered)}
.mk-part{color:var(--licence)}
.mk-ns{color:var(--muted);font-weight:500}
.mk-no{color:var(--muted)}
.mk-note{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem}
.legend-row{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.85rem;color:var(--ink-2)}
.sources{display:flex;flex-direction:column;gap:1.1rem;font-size:.88rem;color:var(--ink-2)}
.sources h3{font-size:.95rem;margin-bottom:.3rem}
.sources ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.25rem}

/* The stat grid on the home page reuses the stat callout. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem 2rem}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stats > *{min-width:0}
.stats .why{margin-top:0}
.sec-foot .sep{margin:0 .75rem;color:var(--muted)}

/* Deployment summary: two flat cards. */
.deploy{box-shadow:none;border-top:3px solid var(--brand);border-radius:var(--radius-lg);gap:.75rem}
.deploy h3{font-stretch:100%}

/* Enforcement note: one line under the cards. */
.edge-note{margin-top:1.5rem;max-width:none}
.ep{border-radius:var(--radius)}

/* Challenge panel: cards sit on the oxblood, the why column has a rule. */
.why-col{padding-top:.25rem}
.chal-foot{border-top-color:rgba(255,255,255,.14)}
.chal-panel .role{color:#FF8A83}

/* Cards and figures everywhere: flat, square. */
.shot img,.shot-frame,.statement,.panel,.chart,.persona,.plan,.never-grid .never-item,.capg-col,.rung,.opt,.matrix-scroll{border-radius:var(--radius)}
.persona,.plan{border-top:3px solid var(--brand)}

/* Persona close band is oxblood (see .night,.close above); its ghost button
   is drawn for the dark ground. */
.close .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.close .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.close h2{color:var(--ink)}

.night :focus-visible,.close :focus-visible{outline-color:#fff}

/* ==================================================================== *
 * 4. v3 page system
 * ==================================================================== */

/* ---- the slab -------------------------------------------------------- *
 * The full-bleed brand-red ground for the home hero, every page head and
 * product heroes. Flat red into a deeper red, a 96px hairline grid and a
 * crosshair at each crossing. The brightest point is --slab (#C8121A), so
 * white body text never drops below 5.9:1 anywhere on it. Inside, the
 * palette is re-read for red: kickers and links go white, the primary
 * button goes oxblood, highlight blocks go deep red or oxblood. */
.slab,.brandslab,.pagehead{
  --ink:#FFFFFF;--ink-2:#FFE9E7;--muted:#FFD9D6;
  --rule:rgba(255,255,255,.2);--rule-strong:rgba(255,255,255,.5);
  --accent:#FFFFFF;--accent-wash:rgba(255,255,255,.12);
  --surface:#2A1215;--surface-2:#321619;
  --covered:#5FD0AA;--unknown:#D8CDD9;
  position:relative;isolation:isolate;color:#fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 0h96M0 0v96' stroke='%23fff' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M0 -6v12M-6 0h12' stroke='%23fff' stroke-opacity='.22' stroke-width='1.2' transform='translate(0 0)'/%3E%3Cpath d='M96 90v12M90 96h12' stroke='%23fff' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E") center top/96px 96px,
    linear-gradient(100deg,var(--slab) 0%,#B8101A 45%,var(--slab-deep) 100%);
}
.slab :focus-visible,.brandslab :focus-visible,.pagehead :focus-visible{outline-color:#fff}
.slab .kicker,.brandslab .kicker,.pagehead .kicker{color:#fff}
.slab .lede,.pagehead .lede{color:#FFE9E7}
.slab .btn-primary,.brandslab .btn-primary,.pagehead .btn-primary{background:var(--night);border-color:var(--night);color:#fff}
.slab .btn-primary:hover,.brandslab .btn-primary:hover,.pagehead .btn-primary:hover{background:#000;border-color:#000}
.slab .btn-ghost,.brandslab .btn-ghost,.pagehead .btn-ghost{border-color:#fff;color:#fff}
.slab .btn-ghost:hover,.brandslab .btn-ghost:hover,.pagehead .btn-ghost:hover{background:rgba(255,255,255,.12)}
.slab .hl,.brandslab .hl,.pagehead .hl{background:var(--night)}
.pagehead h1,.slab h1{color:#fff}
.crumb{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.slab .crumb,.pagehead .crumb,.pagehead .crumb a{color:#FFE3E1}

/* Display headline in highlight blocks: each block is one or two lines on
   its own solid ground, the way the category sets a hero. .blk is deep red,
   .blk-night is oxblood; the last block carries corner brackets. */
.display{font-size:clamp(2.35rem,4.6vw,4.5rem);line-height:1;letter-spacing:-.005em}
.display .blk,.display .blk-night{
  padding:.04em .16em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;
}
.display .blk{background:#9C0D14}
.display .blk-night{background:var(--night);position:relative}
.display .brk{position:relative;display:inline-block}
.display .brk::before,.display .brk::after{
  content:"";position:absolute;width:.22em;height:.36em;border:3px solid #fff;pointer-events:none;
}
.display .brk::before{left:-.12em;top:-.1em;border-right:0;border-bottom:0}
.display .brk::after{right:-.12em;bottom:-.06em;border-left:0;border-top:0}

/* ---- home hero -------------------------------------------------------- */
.hero3{padding:clamp(2.5rem,4.5vw,4rem) 0}
.hero3-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:1023px){.hero3-grid{grid-template-columns:1fr}}
.hero3-grid > *{min-width:0}
.hero3 .kicker{display:block;margin-bottom:1rem}
.hero3 .lede{margin-top:1.25rem;font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:46ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.hero-link{margin-top:1.4rem;font-weight:650}
.hero-link a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.hero-link a:hover{border-bottom-color:#fff}

/* Media frame: a dark bezel with a path bar, the honest label on the bar
   itself, and the media below. Used for the hero video and captures. */
.frame{margin:0;display:flex;flex-direction:column;min-width:0}
.frame-box{background:#140608;border:1px solid rgba(0,0,0,.4);box-shadow:var(--shadow);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .85rem;background:#140608;color:#E9D9D7;min-width:0}
.frame-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#4A2A2D;flex:0 0 auto}
.frame-path{margin-left:.35rem;font-family:var(--mono);font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame-tag{margin-left:auto;flex:0 0 auto;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:var(--accent-solid);padding:.12rem .4rem}
.frame-box video,.frame-box img{display:block;width:100%;height:auto;background:#fff}
.frame figcaption{margin-top:.75rem;font-size:.84rem;line-height:1.5;color:var(--muted);max-width:70ch}
.frame figcaption b{color:var(--ink);font-weight:650}
.slab .frame figcaption{color:#FFE3E1}
.slab .frame figcaption b{color:#fff}
.frame-light .frame-box{background:#fff;border-color:var(--rule)}
.frame-light .frame-bar{background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--rule)}
.frame-light .frame-bar i{background:var(--rule-strong)}
.vid-toggle{
  margin-left:.4rem;flex:0 0 auto;display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;padding:0;
}
.vid-toggle svg{width:.8rem;height:.8rem}
.vid-toggle:hover{border-color:#fff}

/* ---- in-page subnav ---------------------------------------------------- *
 * Oxblood bar under the slab: section anchors left, a red CTA block flush
 * right. Plain links; site.js marks the section in view. */
.subnav{position:sticky;top:var(--head-h);z-index:45;background:var(--night);color:#fff;border:0;backdrop-filter:none}
.subnav-in{display:flex;align-items:stretch;gap:1rem;height:52px}
.subnav-links{display:flex;align-items:stretch;min-width:0;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;gap:.25rem}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{
  display:inline-flex;align-items:center;padding:0 .9rem;white-space:nowrap;
  font-size:.9rem;font-weight:650;color:#F1E4E2;text-decoration:none;
  box-shadow:inset 0 -3px 0 transparent;transition:color .15s,box-shadow .15s;
}
.subnav-links a:first-child{padding-left:0}
.subnav-links a:hover{color:#fff}
.subnav-links a[aria-current="true"]{color:#FF8A83;box-shadow:inset 0 -3px 0 var(--brand)}
.subnav-links a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.subnav-cta{
  flex:0 0 auto;display:inline-flex;align-items:center;padding:0 1.4rem;
  background:var(--accent-solid);color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;
}
.subnav-cta:hover{background:var(--accent-ink)}
.subnav-cta:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.subnav .btn{border-radius:0}
@media (max-width:640px){
  .subnav-in{height:46px;gap:.5rem}
  .subnav-links a{font-size:.82rem;padding:0 .6rem}
  .subnav-cta{padding:0 .8rem;font-size:.8rem}
}
section[id]{scroll-margin-top:calc(var(--head-h) + 8px)}
body:has(.subnav) section[id]{scroll-margin-top:calc(var(--head-h) + 60px)}
body:has(.subnav) .rail{top:140px}

/* ---- sections ----------------------------------------------------------- */
.s3{padding:clamp(4rem,7vw,6.5rem) 0}
.s3-paper{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 0h96M0 0v96' stroke='%231A1414' stroke-opacity='.045' fill='none'/%3E%3Cpath d='M0 -6v12M-6 0h12M96 90v12M90 96h12' stroke='%231A1414' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E") center top/96px 96px,
    var(--paper);
}
.s3-tight{padding:clamp(3rem,5vw,4.5rem) 0}
.s3-head{display:flex;flex-direction:column;gap:1.1rem;max-width:56rem;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.s3-head.center{margin-inline:auto;text-align:center;align-items:center}
.s3-head p{font-size:1.08rem;color:var(--ink-2);max-width:56ch}
.s3-head.center p{text-wrap:balance}
.s3-head p.s3-ask{font-weight:700;color:var(--ink)}
.s3-foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:center}
.s3-head.center + * + .s3-foot,.s3-foot.center{justify-content:center}
.link-arrow{font-weight:700;color:var(--accent);text-decoration:none}
.link-arrow::after{content:"\2192";display:inline-block;margin-left:.4rem;transition:transform .15s}
.link-arrow:hover::after{transform:translateX(3px)}

/* Story: a short headline and paragraph beside a composition of captures. */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (max-width:960px){.story{grid-template-columns:1fr}}
.story > *{min-width:0}
.story-text{display:flex;flex-direction:column;gap:1.2rem}
.story-text h2{margin-bottom:.4rem}
.story-text p{color:var(--ink-2);font-size:1.06rem;max-width:52ch}
.story-text p strong{color:var(--ink)}
/* Composition: the main capture, a cropped detail lifted over its corner,
   and a red block behind. Decorative layout only; both images are real. */
.compose{position:relative;isolation:isolate;padding:0 0 3.5rem 2.5rem}
.compose::before{content:"";position:absolute;left:0;top:3rem;width:42%;height:60%;background:var(--brand);z-index:-1}
.compose .frame-main{position:relative}
.compose .detail{
  position:absolute;left:-.5rem;bottom:0;width:48%;margin:0;
  border:6px solid #fff;box-shadow:var(--shadow);background:#fff;
}
.compose .detail img{display:block;width:100%;height:auto}
.compose-cap{margin-top:1rem;font-size:.84rem;color:var(--muted);max-width:66ch}
.compose-cap b{color:var(--ink)}
@media (max-width:640px){.compose{padding:0 0 2.5rem 1rem}.compose .detail{width:58%;border-width:4px}}

/* ---- module tabs (index.html #modules) --------------------------------- *
 * ARIA tabs when site.js runs; without it, four stacked panels each with
 * its own heading, and the tab list stays hidden. */
.mods{display:flex;flex-direction:column;gap:1.25rem}
.mods.is-tabbed{gap:0}
.mods-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface-2);border:1px solid var(--rule);border-bottom:0}
.mods-tab{
  appearance:none;border:0;border-left:1px solid var(--rule);margin:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;
  padding:1.15rem 1.4rem 1.25rem;background:transparent;color:var(--night);
  font-family:var(--display);font-size:1.1rem;font-weight:700;line-height:1.2;transition:background .15s;
}
.mods-tab:first-child{border-left:0}
.mods-tab small{font-family:var(--sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.mods-tab:hover{background:#fff}
.mods-tab[aria-selected="true"]{background:var(--night);color:#fff}
.mods-tab[aria-selected="true"] small{color:#FF8A83}
.mods-tab:focus-visible{outline-offset:-5px}
.mods.is-tabbed .mods-tab[aria-selected="true"]:focus-visible{outline-color:#fff}
@media (max-width:760px){
  .mods-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mods-tab:nth-child(3){border-left:0}
  .mods-tab:nth-child(n+3){border-top:1px solid var(--rule)}
  .mods-tab{padding:.9rem 1rem;font-size:.98rem}
}
.mod-panel{
  --ink:#FBF5F4;--ink-2:#E7D9D7;--muted:#C9B6B4;--rule:rgba(255,255,255,.14);--accent:#FF8A83;
  background:var(--night);color:var(--ink);padding:clamp(1.75rem,5vw,4.5rem);
}
.mod-panel:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.mod-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:900px){.mod-top{grid-template-columns:1fr}}
.mod-top > *{min-width:0}
.mod-panel .role{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#FF8A83}
.mod-panel h3{margin-top:.75rem;font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.08;color:#FF6B62;letter-spacing:-.01em}
.mod-panel .mod-lede{margin-top:1.1rem;color:var(--ink);font-size:1.06rem;max-width:56ch}
.why-h{display:block;font-family:var(--display);font-weight:700;color:#fff;font-size:1.05rem}
/* Stat callout: a structural fact in the display face over one short line,
   on a 3px brand-red rule. Never a market statistic. */
.why{border-left:3px solid var(--brand);padding:.25rem 0 .25rem 1.1rem;margin-top:1.4rem}
.why b{display:block;font-family:var(--display);font-stretch:72%;text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1;font-weight:800;color:var(--ink)}
.why span{display:block;margin-top:.5rem;font-size:.92rem;color:var(--ink-2);line-height:1.5;max-width:42ch}
.res-h{margin-top:3rem;font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.15rem}

/* Resource cards, the report-library layout: one tall card with a picture
   under its text, two wide cards with a picture beside theirs. */
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:1.1rem;margin-top:1.25rem}
@media (max-width:860px){.res-grid{grid-template-columns:1fr}}
.res-grid > *{min-width:0}
.rc{display:flex;text-decoration:none;color:#1A1414;background:#fff;overflow:hidden;transition:transform .15s,box-shadow .15s}
.rc:hover{transform:translateY(-2px);box-shadow:0 22px 40px -26px rgba(0,0,0,.9)}
.rc-body{display:flex;flex-direction:column;gap:.4rem;padding:1.25rem 1.4rem 1.4rem;flex:1 1 auto;min-width:0}
.rc-type{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#C8121A}
.rc b{font-family:var(--display);font-size:1.15rem;font-weight:700;color:#1A1414;line-height:1.25}
.rc .rc-d{font-size:.9rem;color:#433B3B;line-height:1.5}
.rc .rc-go{margin-top:auto;padding-top:.6rem;font-size:.9rem;font-weight:700;color:#C8121A}
.rc .rc-go::after{content:" \2192"}
.rc img{display:block;object-fit:cover;background:#EFECE9}
.rc-tall{grid-row:span 2;flex-direction:column}
.rc-tall img{width:100%;height:auto;aspect-ratio:16/10;margin-top:auto}
.rc-wide{flex-direction:row}
.rc-pic{flex:0 0 40%;display:flex;align-items:center;padding:1rem;background:linear-gradient(135deg,#9C0D14,#4A080C)}
.rc-pic img{width:100%;height:auto;aspect-ratio:16/9;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
@media (max-width:860px){.rc-tall{grid-row:auto}}
@media (max-width:520px){.rc-wide{flex-direction:column}.rc-pic{flex-basis:auto}}
.mod-foot{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2.5rem;text-align:center;font-size:.92rem;color:var(--ink-2)}
.mod-foot a:not(.btn){color:#FF8A83}
.mod-panel .btn-ghost{border-color:#fff;color:#fff}
.mod-panel .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ---- enforcement points --------------------------------------------------- */
.ep-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
@media (max-width:900px){.ep-head{grid-template-columns:1fr}}
.ep-head > *{min-width:0}
.ep-photo{position:relative;margin:0}
.ep-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ep-photo figcaption{position:absolute;left:0;bottom:0;background:var(--night);color:#fff;padding:.7rem 1rem;font-family:var(--display);font-weight:700;font-size:.95rem;max-width:80%}
.ep-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:3px solid var(--night);list-style:none;margin:0;padding:0;counter-reset:ep}
@media (max-width:1100px){.ep-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.ep-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ep-row{grid-template-columns:1fr}}
.ep-row > *{min-width:0}
.ep3{counter-increment:ep;padding:1.5rem 1.4rem 1.6rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.6rem;background:#fff}
.ep3-top{display:flex;align-items:center;justify-content:space-between}
.ep3-top::after{content:counter(ep,decimal-leading-zero);font-family:var(--display);font-stretch:72%;font-weight:800;font-size:2rem;line-height:1;color:#8A7F7F}
.ico3{width:48px;height:48px;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent)}
.ico3 svg{width:24px;height:24px}
.ep3-route{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);line-height:1.4}
.ep3 h3{font-size:1.12rem}
.ep3 p{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.ep3 a{margin-top:auto;padding-top:.4rem;font-size:.86rem;font-weight:700;color:var(--accent);text-decoration:none}
.ep3 a::after{content:" \2192"}
.edge3{margin-top:2rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 1.5rem;align-items:start;padding:1.4rem 1.6rem;background:var(--surface-2);border-left:3px solid var(--brand)}
.edge3 b{font-family:var(--display);font-weight:700;font-size:1.02rem}
.edge3 p{color:var(--ink-2);font-size:.95rem;max-width:90ch}
@media (max-width:700px){.edge3{grid-template-columns:1fr}}

/* ---- deployment: two picture cards ---------------------------------------- */
.dep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media (max-width:860px){.dep{grid-template-columns:1fr}}
.dep > *{min-width:0}
.dep-card{background:#fff;display:flex;flex-direction:column;border:1px solid var(--rule)}
.dep-pic{position:relative;margin:0}
.dep-pic img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.dep-pic span{position:absolute;left:0;bottom:0;background:var(--accent-solid);color:#fff;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.5rem .9rem}
.dep-body{padding:1.75rem 1.9rem 2rem;display:flex;flex-direction:column;gap:1rem}
.dep-body h3{font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.97rem;color:var(--ink-2)}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.45}
.ticks li::before{content:"";flex:0 0 auto;width:.7rem;height:.7rem;margin-top:.38rem;background:var(--brand)}

/* ---- two ways to use Shield360: the .dep cards with a label and a short
   definition list (index.html#ways, builders.html#ways) ------------------- */
.way-k{align-self:flex-start;background:var(--accent-solid);color:#fff;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.5rem .9rem}
.way-dl{margin:0;display:flex;flex-direction:column;gap:.85rem}
.way-dl dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.way-dl dd{margin:.2rem 0 0;color:var(--ink-2);font-size:.97rem;line-height:1.45}
.dep-body .way-go{margin-top:auto;padding-top:.5rem}

/* ---- home hero: the audience row under the two CTAs ---------------------- */
.hero-paths{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.1rem}
.hero-paths-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#FFE3E1;margin-right:.25rem}
@media (max-width:640px){.hero-paths-k{flex-basis:100%}}

/* ---- facts: structural numbers with red rules ------------------------------ */
.facts3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
@media (max-width:960px){.facts3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.facts3{grid-template-columns:1fr}}
.facts3 > *{min-width:0}
.fact3{border-left:3px solid var(--brand);padding:.2rem 0 .2rem 1.25rem}
.fact3 b{display:block;font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,3.6vw,3.25rem);line-height:.95;color:var(--ink)}
.fact3 span{display:block;margin-top:.7rem;font-size:.95rem;color:var(--ink-2);line-height:1.5;max-width:30ch}

/* ---- FAQ: heading beside an accordion ------------------------------------- */
.faq3{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.faq3{grid-template-columns:1fr}}
.faq3 > *{min-width:0}
.faq3-head{position:sticky;top:calc(var(--head-h) + 80px);display:flex;flex-direction:column;gap:1.1rem}
@media (max-width:900px){.faq3-head{position:static}}
.faq3-head p{color:var(--ink-2)}
.faq-d{max-width:none;margin:0;border-top:3px solid var(--night)}
.faq-d details{border-bottom:1px solid var(--rule)}
.faq-d summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.35rem 0}
.faq-d summary::-webkit-details-marker{display:none}
.faq-d summary h3{font-size:1.12rem;font-weight:650}
.faq-d summary::after{
  content:"+";flex:0 0 auto;width:2rem;height:2rem;display:grid;place-items:center;
  background:var(--night);color:#fff;font-size:1.15rem;transition:transform .2s;
}
.faq-d details[open] summary::after{transform:rotate(45deg);background:var(--accent-solid)}
.faq-d summary:hover h3{color:var(--accent)}
.faq-d details p{padding:0 3.25rem 1.4rem 0;color:var(--ink-2);max-width:66ch}
.faq-d details p a{color:var(--accent)}

/* ---- closing band ---------------------------------------------------------- */
.closing{
  --ink:#FBF5F4;--ink-2:#E7D9D7;--muted:#C9B6B4;--rule:rgba(255,255,255,.14);--accent:#FF8A83;
  position:relative;isolation:isolate;color:var(--ink);padding:clamp(4.5rem,8vw,7rem) 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 0h96M0 0v96' stroke='%23fff' stroke-opacity='.06' fill='none'/%3E%3Cpath d='M0 -6v12M-6 0h12M96 90v12M90 96h12' stroke='%23fff' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E") center top/96px 96px,
    radial-gradient(70rem 30rem at 90% 0%,rgba(237,28,36,.22),transparent 60%),
    var(--night);
}
.closing :focus-visible{outline-color:#fff}
.closing-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
@media (max-width:960px){.closing-grid{grid-template-columns:1fr}}
.closing-grid > *{min-width:0}
.closing .kicker{color:#FF8A83}
.closing h2{margin-top:1rem;font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.02}
.closing h2 .hl{background:var(--accent-solid)}
.closing-lede{margin-top:1.4rem;color:var(--ink-2);max-width:52ch;font-size:1.08rem}
.closing-lede strong{color:#fff}
.vprops{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:1.4rem;counter-reset:vp}
.vprops li{counter-increment:vp;border-left:3px solid var(--brand);padding-left:1.15rem;color:var(--ink-2);font-size:.96rem;line-height:1.5}
.vprops b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:700;color:#fff;margin-bottom:.2rem}
.vprops b::before{content:counter(vp,decimal-leading-zero) ".";color:#FF8A83;margin-right:.5rem}
.review-panel{
  --ink:#1A1414;--ink-2:#433B3B;--muted:#675E5E;--rule:#E2DDD8;--accent:#C8121A;--surface-2:#F7F5F3;
  width:100%;padding:2rem;background:#fff;color:var(--ink);border:0;border-top:4px solid var(--brand);
}
.review-panel :focus-visible{outline-color:#C8121A}
.review-panel h3{font-size:1.5rem;font-weight:700;letter-spacing:-.015em}
.review-panel .review-intro{margin:.5rem 0 1.25rem;color:var(--ink-2);font-size:.94rem}
.review-panel .btn-block{display:flex;width:100%}
.review-label{margin:1.5rem 0 .75rem;color:var(--ink);font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.review-tracks{display:grid;gap:.5rem}
.review-tracks a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border:1px solid var(--rule);color:var(--ink);background:var(--surface-2);font-weight:650;text-decoration:none;font-size:.93rem}
.review-tracks a:hover{border-color:var(--accent);color:var(--accent)}
.review-tracks span{color:var(--accent)}
.review-links{display:flex;flex-direction:column;gap:.55rem;margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.9rem}
.review-links a{color:var(--accent);font-weight:650;text-decoration:none}
.review-links a:hover{text-decoration:underline}

/* ==================================================================== *
 * 5. Product page template (products/*.html)
 *
 * Slab hero with the product name and promise beside a real capture; a
 * promo bar; capabilities with icons; how it works; the product in
 * captures; structural facts; FAQ; related resources; the closing band.
 * README, "Product page template".
 * ==================================================================== */
.phero{padding:clamp(2rem,4vw,3rem) 0 clamp(2rem,3.5vw,3rem)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,4rem);align-items:center;margin-top:1.5rem}
@media (max-width:1023px){.phero-grid{grid-template-columns:1fr}}
.phero-grid > *{min-width:0}
.phero .display{font-size:clamp(2.25rem,4.1vw,3.75rem)}
.phero .lede{margin-top:1.5rem}
.promo{background:var(--night);color:#fff}
.slab .promo{padding:1.25rem 1.75rem;margin-bottom:3rem}
.slab .promo .btn-primary{background:var(--accent-solid);border-color:var(--accent-solid)}
.slab .promo .btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.promo-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.4rem 0}
.promo b{font-family:var(--display);font-weight:700;font-size:1.1rem}
.promo span{display:block;color:#E7D9D7;font-size:.92rem;margin-top:.2rem}
.promo .btn{border-radius:0}

.capg3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--night)}
@media (max-width:1100px){.capg3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.capg3{grid-template-columns:1fr}}
.capg3 > *{min-width:0}
.cap3{padding:1.75rem 1.5rem 1.9rem;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.7rem;background:#fff;scroll-margin-top:calc(var(--head-h) + 70px)}
.cap3 h3{font-size:1.15rem;margin-top:.4rem}
.cap3 p{font-size:.93rem;color:var(--ink-2);line-height:1.55}
.cap3 .cap3-where{margin-top:auto;padding-top:.5rem;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cap3 .preview{display:inline-block;font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid currentColor;padding:0 .3rem;margin-left:.35rem;vertical-align:.2em}

/* How it works: four stages on a rule, each with what does it. */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;counter-reset:how;list-style:none;margin:0;padding:0}
@media (max-width:960px){.how{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}}
@media (max-width:560px){.how{grid-template-columns:1fr}}
.how > *{min-width:0}
.how-step{counter-increment:how;position:relative;padding:0 1.5rem 0 0}
.how-step::before{
  content:counter(how,decimal-leading-zero);display:grid;place-items:center;width:3.25rem;height:3.25rem;
  background:var(--night);color:#fff;font-family:var(--display);font-stretch:72%;font-weight:800;font-size:1.4rem;position:relative;z-index:1;
}
.how-step::after{content:"";position:absolute;left:3.25rem;right:0;top:1.6rem;height:3px;background:var(--brand)}
.how-step:last-child::after{display:none}
@media (max-width:960px){.how-step::after{display:none}}
.how-step h3{margin-top:1.1rem;font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1}
.how-step p{margin-top:.6rem;font-size:.94rem;color:var(--ink-2);max-width:32ch}
.how-step ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.how-step li{font-family:var(--mono);font-size:.74rem;color:var(--ink);background:#fff;border:1px solid var(--rule);padding:.35rem .55rem;max-width:20rem}
.how-note{margin-top:2.5rem;font-size:.92rem;color:var(--muted);max-width:80ch}

/* Feature rows: text beside a framed capture, alternating sides. */
.frows{display:flex;flex-direction:column;gap:clamp(4rem,8vw,6.5rem)}
.frow{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:center;scroll-margin-top:calc(var(--head-h) + 70px)}
.frow:nth-child(even) > .frow-text{order:2}
@media (max-width:960px){.frow{grid-template-columns:1fr}.frow:nth-child(even) > .frow-text{order:0}}
.frow > *{min-width:0}
.frow-text{display:flex;flex-direction:column;gap:1rem}
.frow-text h3{font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}
.frow-text p{color:var(--ink-2);font-size:1.02rem;max-width:52ch}

/* Light resource cards for the product page. */
.res3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:900px){.res3{grid-template-columns:1fr}}
.res3 > *{min-width:0}
.res3 .rc{flex-direction:column;border:1px solid var(--rule)}
.res3 .rc img{width:100%;height:auto;aspect-ratio:16/9}

/* ==================================================================== *
 * Platform map band (platform.html #control-plane)
 *
 * The diagram was drawn for a dark ground, so it sits on one: a full-bleed
 * oxblood section with the hairline grid. The capability row and the
 * source row are light text over red-outline hexes; the AI Control Plane
 * band is the centrepiece in brand red; the OTLP bar is neutral; wires are
 * thin lines whose dots glow only when motion is allowed.
 * Contrast: #FBF5F4 and #E7D9D7 on #1E0A0C are 17:1 and 13:1; white on
 * #C8121A is 5.9:1; #F3C9C6 on #A50F18 (darkest band stop) is 5.0:1.
 * ==================================================================== */
.pmap-band{
  --ink:#FBF5F4;--ink-2:#E7D9D7;--muted:#CDBAB8;--rule:rgba(255,255,255,.14);--accent:#FF8A83;
  position:relative;isolation:isolate;color:var(--ink);padding:clamp(4.5rem,8vw,7rem) 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M0 0h96M0 0v96' stroke='%23fff' stroke-opacity='.06' fill='none'/%3E%3Cpath d='M0 -6v12M-6 0h12M96 90v12M90 96h12' stroke='%23fff' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E") center top/96px 96px,
    radial-gradient(60rem 26rem at 50% 52%,rgba(237,28,36,.18),transparent 70%),
    var(--night);
}
.pmap-band :focus-visible{outline-color:#fff}
.pmap-band .kicker{color:#FF8A83}
.pmap-band h2{color:#fff}
.pmap-band .s3-head p{color:var(--ink-2)}
.pmap-band .pmap{margin:0;border:0;padding:0;background:none}
.pmap-band .pmod-ico{color:#fff;background:#ED1C24}
.pmap-band .pmod-ico::before{background:var(--night)}
.pmap-band .pmod-ico svg{color:#fff}
.pmap-band .pmod b,.pmap-band .psrc b{color:#fff;font-size:.9rem}
.pmap-band .pmod span,.pmap-band .psrc span{color:var(--muted);font-size:.76rem}
.pmap-band .psrc-ico{color:#FF8A83}
.pmap-band .pmap-wires > i{width:2px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,138,131,.55),rgba(255,255,255,.08))}
.pmap-band .pmap-wires > i::after{width:6px;height:6px;margin-left:-3px;background:#FF6B62;box-shadow:0 0 8px 1px rgba(255,59,66,.6)}
.pmap-band .pmap-wires.down > i::after{background:#fff;box-shadow:0 0 8px 1px rgba(255,255,255,.5)}
.pmap-band .pband{border-radius:0}
.pmap-band .pband-plane{
  background:linear-gradient(110deg,#C8121A 0%,#B3101A 55%,#A50F18 100%);border:0;
  box-shadow:0 30px 70px -30px rgba(237,28,36,.65);padding:clamp(1.5rem,3vw,2.25rem) 1.25rem;
}
.pmap-band .pband-plane::before{display:none}
.pmap-band .pband-title{font-family:var(--display);font-stretch:72%;font-weight:800;font-size:clamp(1.6rem,3.2vw,2.6rem);letter-spacing:.01em;line-height:1}
.pmap-band .pband-parts{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.12em;color:#fff;margin-top:1rem}
.pmap-band .pband-parts span::before{color:rgba(255,255,255,.55)}
.pmap-band .pband-also em{color:#F3C9C6;font-size:.78rem}
.pmap-band .pband-also span{color:#fff;border-color:rgba(255,255,255,.55);background:transparent;font-size:.76rem}
.pmap-band .pband-pipe{
  margin-top:.75rem;background:#F4F2F0;color:var(--night);font-family:var(--mono);font-weight:600;
  font-size:.72rem;letter-spacing:.14em;padding:.75rem 1rem;
}
.pmap-band .pband-deploy{border:1px solid rgba(255,255,255,.22);color:var(--ink-2);font-size:.72rem}
.pmap-band .pband-deploy b{color:#fff}
.pmap-band .pmap-cap{color:var(--muted);font-size:.86rem;max-width:80ch;margin:1.5rem auto 0}
@media (max-width:980px){.pmap-band .pmap-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.pmap-band .pmap-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .75rem}.pmap-band .pband-also{display:flex}}
@media (prefers-reduced-motion: reduce){.pmap-band .pmap-wires > i::after{display:none}}
.frow:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:960px){.frow:nth-child(even){grid-template-columns:1fr}}

/* demo.html: the teaser beside the form, the unlocked tour below */
.demo-gate{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:start}
.demo-gate .mailform .mailform-row+.mailform-row{margin-top:.6rem}
.demo-teaser,.demo-tour{margin:0}
.demo-locked{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:#000;color:#fff;text-decoration:none}
.demo-locked img{display:block;width:100%;height:auto;opacity:.55}
.demo-locked .demo-play{position:absolute;inset:0;margin:auto;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-size:1.6rem;padding-left:.25rem}
.demo-locked .demo-lock{position:absolute;left:0;right:0;bottom:1rem;text-align:center;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.demo-locked:hover .demo-play,.demo-locked:focus-visible .demo-play{transform:scale(1.06)}
.demo-teaser video,.demo-tour video{display:block;width:100%;height:auto;border-radius:var(--radius);background:#000}
.demo-teaser figcaption,.demo-tour figcaption{margin-top:.5rem}
@media (max-width:860px){.demo-gate{grid-template-columns:minmax(0,1fr)}}

/* ==================================================================== *
 * Pricing (pricing.html) and the Pricing nav item
 *
 * Four tier cards, an add-ons table and a comparison table. Prices sit in
 * <span data-price>, included amounts in <span data-limit>; bake-plans.mjs
 * rewrites both from Base316 at deploy (README, "Published prices").
 * [data-when] elements are the monthly/annual pairs the inline toggle flips;
 * without script the annual ones stay hidden and monthly is shown.
 * ==================================================================== */
.menu-panel .menu-top{display:block;padding:1rem 0;font-weight:700;font-size:1.02rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.menu-panel .menu-top[aria-current="page"]{color:var(--accent)}
.mm-item.mm-pricing .mm-top[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--brand)}
@media (max-width:1240px) and (min-width:1121px){.mm-top{padding:0 .6rem}.topbar-in{gap:1.25rem}}

.phero-one{max-width:46rem;padding-bottom:1rem}
.price-head{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 2rem}
.price-head > div:first-child{display:flex;flex-direction:column;gap:1.1rem;max-width:56rem}
.ptoggle{display:inline-flex;border:1.5px solid var(--night);flex:0 0 auto}
.ptoggle[hidden]{display:none}
.ptoggle button{appearance:none;border:0;margin:0;background:#fff;color:var(--ink);font:700 .9rem var(--sans);padding:.7rem 1.1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.ptoggle button small{font-family:var(--mono);font-size:.62rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.ptoggle button[aria-pressed="true"]{background:var(--night);color:#fff}
.ptoggle button[aria-pressed="true"] small{color:#FF8A83}
.ptoggle button:focus-visible{outline-offset:-4px}

.ptiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;align-items:stretch}
@media (max-width:1100px){.ptiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ptiers{grid-template-columns:1fr}}
.ptiers > *{min-width:0}
.ptier{display:flex;flex-direction:column;gap:.85rem;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--night);padding:1.6rem 1.4rem 1.5rem}
.ptier-feat{border-top-color:var(--brand);box-shadow:var(--shadow)}
.ptier h3{font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:1.9rem;line-height:1}
.ptier-who{font-size:.92rem;color:var(--ink-2);line-height:1.45;min-height:2.7em}
.ptier-price{font-family:var(--display);font-stretch:72%;font-weight:800;font-size:3rem;line-height:1;color:var(--ink);margin-top:.25rem}
.ptier-price small{font-family:var(--sans);font-stretch:100%;font-weight:600;font-size:.9rem;color:var(--muted)}
.ptier-price[hidden],.ptier-bill[hidden]{display:none}
.ptier-talk{text-transform:uppercase;font-size:2.4rem}
.ptier-bill{font-size:.82rem;color:var(--muted);min-height:2.6em}
.ptier-inc{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1rem;padding:.85rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:.88rem}
.ptier-inc dt{color:var(--ink-2)}
.ptier-inc dd{margin:0;font-family:var(--mono);font-weight:600;color:var(--ink);text-align:right}
.ptier-ent .ptier-inc{grid-template-columns:1fr}
.ptier-ent .ptier-inc dd{text-align:left}
.ptier-plus{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.ptier .ticks{font-size:.9rem;gap:.5rem}
.ptier .ticks li::before{width:.55rem;height:.55rem;margin-top:.42rem}
.ptier .btn-block{display:flex;width:100%;margin-top:auto;white-space:normal;text-align:center}

table.price-addons td{vertical-align:top}
table.price-addons td.num{width:10rem}

.pcompare{min-width:46rem;margin-top:0}
.pcompare thead th{text-align:center}
.pcompare thead th:first-child{text-align:left}
.pcompare tbody th[scope="row"]{font-weight:500;width:40%}
.pcompare td{text-align:center;font-family:var(--mono);font-size:.84rem;color:var(--ink)}
.pcompare tr.pgrp th{padding-top:1.6rem;font-family:var(--sans);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border-bottom:2px solid var(--night)}
.pcompare td.yes::before{content:"";display:inline-block;width:.7rem;height:.7rem;background:var(--brand)}
.pcompare td.no::before{content:"\2014";color:var(--rule-strong)}
/* .vh is position:absolute; inside a sideways-scrolling table it must not
   escape the scroller and widen the document. */
.pcompare td,.pcompare th{position:relative}
@media (max-width:640px){table.price-addons td.num{white-space:normal;width:auto}}