/* ============================================================
   Complyology — shared visual system for complyology.io
   ------------------------------------------------------------
   Tokens mirror src/index.css so the marketing site and the product
   stay one system. Every page links this file; page-specific rules
   stay inline in the page that needs them.

   Cinzel display · Inter body · JetBrains Mono data.
   Severe monochrome; chaos red is the ONLY accent and is spent on
   the word "chaos" and on state markers, nowhere else.
   ============================================================ */

/* ============================================================
   Complyology — complyology.io
   Archon visual system: Cinzel display / Inter body / JetBrains Mono data.
   Editorial, defense-grade, monochrome. One accent: chaos red.
   Tokens mirror src/index.css so the site and the app stay one system.
   ============================================================ */

/* --- Light palette (also the un-stamped default) ----------- */
:root{
  --ink:#0A0A0A; --charcoal:#1A1A1A; --slate:#292929;
  --muted:#666666; --subtle:#666666;
  --border:#E5E5E5; --hair:rgba(10,10,10,.08);
  --surface:#F7F7F5; --card:#FFFFFF; --ground:#FFFFFF;
  --chaos:#CE1C1C; --chaos-h:0 76% 46%; --ok:#3F6D4E;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .04);
  --shadow-md:0 4px 24px rgb(0 0 0 / .06);
  --shadow-lg:0 12px 48px rgb(0 0 0 / .08);
  --radius:6px; --radius-sm:4px; --radius-lg:8px;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}
/* --- Dark palette: system preference, unless light is pinned --- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#F5F5F5; --charcoal:#E0E0E0; --slate:#CCCCCC;
    --muted:#BDBDBD; --subtle:#9E9E9E;
    --border:#333333; --hair:rgba(255,255,255,.10);
    --surface:#0F0F0F; --card:#1A1A1A; --ground:#0A0A0A;
    --chaos:#EE4F4F; --chaos-h:0 82% 62%; --ok:#5E9B72;
    --shadow-sm:0 1px 2px rgb(0 0 0 / .5);
    --shadow-md:0 4px 24px rgb(0 0 0 / .55);
    --shadow-lg:0 12px 48px rgb(0 0 0 / .6);
    color-scheme:dark;
  }
}
/* --- Dark palette: explicit toggle wins both directions ----- */
:root[data-theme="dark"]{
  --ink:#F5F5F5; --charcoal:#E0E0E0; --slate:#CCCCCC;
  --muted:#BDBDBD; --subtle:#9E9E9E;
  --border:#333333; --hair:rgba(255,255,255,.10);
  --surface:#0F0F0F; --card:#1A1A1A; --ground:#0A0A0A;
  --chaos:#EE4F4F; --chaos-h:0 82% 62%; --ok:#5E9B72;
  --shadow-sm:0 1px 2px rgb(0 0 0 / .5);
  --shadow-md:0 4px 24px rgb(0 0 0 / .55);
  --shadow-lg:0 12px 48px rgb(0 0 0 / .6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:Cinzel,Georgia,"Times New Roman",serif;font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.01em;line-height:1.1}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--chaos);outline-offset:3px;border-radius:2px}

/* --- shared primitives ------------------------------------- */
/* NOTE: these sit on the same element as .wrap, which supplies the horizontal
   gutter (24px, 32px >=768). Using the `padding` SHORTHAND here silently reset
   that gutter to 0 and pinned content to the screen edge on every viewport
   narrower than the 1200px max-width. Always set padding-block here, never the
   shorthand. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 32px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
  /* Some eyebrows are real section headings (h2) rather than spans — keep the
     visual identical so the document outline can be correct without the page
     changing shape. */
  font-weight:400;margin:0;
}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--ink);flex:none}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.chaos{color:var(--chaos)}
.dim{color:var(--muted)}
.lede{font-size:18px;line-height:1.65;color:var(--muted);max-width:62ch}
.sec{border-top:1px solid var(--border);padding:96px 0}
.sec--surface{background:var(--surface)}
@media(max-width:640px){.sec{padding:64px 0}}
.h2{font-size:clamp(30px,4.6vw,48px);line-height:1.1;max-width:20ch;margin-top:24px}
.rule{height:1px;background:var(--border);border:0;margin:0}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;font-size:15px;font-weight:500;border-radius:var(--radius);
  border:1px solid var(--ink);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  cursor:pointer;
}
.btn--primary{background:var(--ink);color:var(--ground);}
.btn--primary:hover{background:var(--slate);border-color:var(--slate)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--ground)}
.btn svg{flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(2px)}

/* --- header ------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:19px;letter-spacing:.06em}
.brand__tag{
  font-family:"JetBrains Mono",monospace;font-size:8.5px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);margin-top:2px;white-space:nowrap;
}
/* The nav used to appear at 900px while needing 1040px, so between those
   widths the header genuinely overflowed. It now appears only once there is
   room for it; below that the burger handles navigation. */
.nav{display:none;gap:26px;font-size:14px;font-weight:500}
@media(min-width:1080px){.nav{display:flex}}
.nav a{position:relative;padding:2px 0;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--chaos);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover{color:var(--chaos)}
.nav a:hover::after{transform:scaleX(1)}
/* Current section. The underline is the same device as hover, held rather
   than triggered, so the header reads as one system instead of two. */
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{transform:scaleX(1);background:var(--ink)}
.nav a[aria-current]:hover{color:var(--chaos)}
.nav a[aria-current]:hover::after{background:var(--chaos)}
/* Header edge: a hairline that firms up once the page has scrolled, so the
   sticky bar separates from content without a shadow shouting about it. */
.hdr{transition:border-color .25s var(--ease),background .25s var(--ease)}
.hdr[data-scrolled="true"]{border-bottom-color:var(--ink)}
.hdr__act{display:flex;align-items:center;gap:10px;flex:none}

/* Mobile menu. The nav simply vanished below 900px before this; a burger
   that toggles a real panel is the minimum for a page with seven sections. */
.burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  color:var(--ink);cursor:pointer;padding:0;transition:border-color .2s var(--ease)}
.burger:hover{border-color:var(--ink)}
@media(min-width:1080px){.burger{display:none}}

/* Touch targets. The 34px box is right visually — it matches the theme
   toggle and sits comfortably in a 60px header — but it is under the 44px
   comfortable-tap guideline. On a coarse pointer the HIT AREA grows to 44px
   without changing what is drawn, so the control still looks correct and is
   still easy to hit. */
@media(pointer:coarse){
  .burger,.tgl{min-width:44px;min-height:44px}
}
.burger span{position:relative;display:block;width:15px;height:9px}
.burger span::before,.burger span::after,.burger span i{
  content:"";position:absolute;left:0;width:15px;height:1.5px;background:var(--ink);
  transition:transform .26s var(--ease),opacity .18s var(--ease)}
.burger span::before{top:0}
.burger span i{top:4px}
.burger span::after{top:8px}
.burger[aria-expanded="true"] span::before{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-4px) rotate(-45deg)}
.burger[aria-expanded="true"] span i{opacity:0}

.mnav{display:none;border-top:1px solid var(--border);background:var(--ground)}
.mnav[data-open="true"]{display:block}
@media(min-width:1080px){.mnav{display:none!important}}
.mnav ul{list-style:none;margin:0;padding:8px 0 16px}
.mnav a{display:block;padding:13px 0;font-size:16px;border-bottom:1px solid var(--border);
  transition:color .2s var(--ease),padding-left .2s var(--ease)}
.mnav a:hover{color:var(--chaos);padding-left:6px}
.mnav li:last-child a{border-bottom:0}
.mnav .mnav__cta{margin-top:14px;width:100%;justify-content:center}
.signin{display:none;font-size:14px;font-weight:500;transition:opacity .2s}
.signin:hover{opacity:.65}
@media(min-width:640px){.signin{display:inline}}
.tgl{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.tgl:hover{border-color:var(--ink)}
.tgl .moon{display:none}
:root[data-theme="dark"] .tgl .sun{display:none}
:root[data-theme="dark"] .tgl .moon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tgl .sun{display:none}
  :root:not([data-theme="light"]) .tgl .moon{display:block}
}
.hdr__cta{padding:9px 15px;font-size:13px}
/* Below 900px the burger appears and the mobile panel carries its own
   "Request access" CTA, so the header button is redundant — and it was the
   cause of 89px of horizontal overflow at 375px (scrollWidth 464 vs 375),
   clipping the hero copy mid-word. Hidden here, not shrunk: two competing
   CTAs in a 375px header is a layout problem either way. */
@media(max-width:1079px){.hdr__cta{display:none}}

/* --- the mark: 14 dots, one per CMMC control family ----------
   Each dot is a <g transform="translate(x,y)"> with its circles drawn at the
   origin, so scale() pivots on the dot's own centre without transform-origin
   — which WebKit resolves against SVG user space, not the element box. */
.mark{flex:none;display:block}
.mark .ghost{fill:var(--ink);opacity:.14;animation:mk-pre 300ms ease-out calc(var(--i) * 72ms - 150ms) both}
.mark .halo,.mark .core{fill:var(--chaos);opacity:0}
.mark .core{animation:mk-ignite 540ms cubic-bezier(.2,.7,.25,1) calc(var(--i) * 72ms) both}
.mark .halo{animation:mk-halo 918ms cubic-bezier(.16,.8,.3,1) calc(var(--i) * 72ms) both}
.mark .beat{fill:none;stroke:var(--chaos);stroke-width:1.4;opacity:0;animation:mk-beat 900ms cubic-bezier(.16,.8,.3,1) 1314ms both}
/* The family lifts a moment before the wavefront reaches it. */
@keyframes mk-pre{0%{opacity:.14}55%{opacity:.30}100%{opacity:.14}}
/* Catches hot, swells, cools into the brand red. Heat is brightness, never a
   second colour — so it reads identically on both grounds. */
@keyframes mk-ignite{
  0%{opacity:0;transform:scale(.45);filter:brightness(1.9) drop-shadow(0 0 6px hsl(var(--chaos-h) / .8))}
  38%{opacity:1;transform:scale(1.14);filter:brightness(1.5) drop-shadow(0 0 6px hsl(var(--chaos-h) / .62))}
  100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 2.5px hsl(var(--chaos-h) / .5))}
}
@keyframes mk-halo{from{opacity:.42;transform:scale(1)}to{opacity:0;transform:scale(2.7)}}
@keyframes mk-beat{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(5.2)}}
@media(prefers-reduced-motion:reduce){
  .mark .core,.mark .halo,.mark .beat,.mark .ghost{animation:none}
  .mark .core{opacity:1;transform:none;filter:drop-shadow(0 0 2.5px hsl(var(--chaos-h) / .5))}
  .mark .halo,.mark .beat,.mark .ghost{opacity:0}
}


/* --- hero ---------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--ground)}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,var(--border) 1px,transparent 1px),linear-gradient(to bottom,var(--border) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 26%,rgba(0,0,0,.5),transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 26%,rgba(0,0,0,.5),transparent 70%);
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero__grid{opacity:.22}}
:root[data-theme="dark"] .hero__grid{opacity:.22}
.hero__in{position:relative;padding-top:76px;padding-bottom:60px}
.hero__cite{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.hero__cite .reg{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--subtle)}
.hero__cols{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:1024px){.hero__cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.hero h1{font-size:clamp(44px,7.2vw,76px);line-height:1.04;letter-spacing:-.02em}
.hero .lede{margin-top:26px;font-size:19px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero__alt{
  margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--subtle);
}
.hero__alt a{color:var(--ink);text-underline-offset:4px;transition:color .2s}
.hero__alt a:hover{color:var(--chaos);text-decoration:underline}

/* hero stats */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--border);max-width:760px;
}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats dt{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:32px;font-variant-numeric:tabular-nums;line-height:1}
.stats dd{margin:8px 0 0;font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);line-height:1.5}

/* --- SPRS artifact card (the visual payoff) ------------------
   Deliberately frozen in the light palette in BOTH themes: this is a
   paper artifact of a finished attestation — what a C3PAO receives —
   so it reads as a document laid on the page, not a UI panel. */
/* The card is the payoff; it must survive small screens. Below 1024 it
   stacks under the copy at a reduced scale rather than vanishing. */
.sprs{display:block;margin-top:44px;max-width:460px}
@media(min-width:1024px){.sprs{margin-top:0;padding-top:22px;max-width:none}}
.sprs__card{
  border:1px solid #D8D6D0;border-radius:var(--radius-lg);background:#FFFFFF;
  box-shadow:var(--shadow-md);overflow:hidden;color:#0A0A0A;
}
.sprs__bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#F7F7F5;border-bottom:1px solid #D8D6D0}
.sprs__live{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#666}
.dot{width:6px;height:6px;border-radius:50%;background:#3F6D4E;flex:none}
.sprs__id{font-family:"JetBrains Mono",monospace;font-size:10px;color:#717171;display:none}
@media(min-width:420px){.sprs__id{display:inline}}
.sprs__body{padding:20px 18px 18px}
@media(min-width:520px){.sprs__body{padding:24px 24px 20px}}
.sprs__label{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#666}
.sprs__score{display:flex;align-items:baseline;gap:12px;margin-top:12px}
.sprs__num{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:clamp(44px,11vw,60px);line-height:1;font-variant-numeric:tabular-nums;color:#0A0A0A}
.sprs__den{font-family:Cinzel,Georgia,serif;font-size:24px;color:#666}
.sprs__meth{font-family:"JetBrains Mono",monospace;font-size:11px;color:#666;margin-top:6px}
.sprs__rows{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.sprs__row{display:flex;align-items:center;gap:12px}
.sprs__dom{font-family:"JetBrains Mono",monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;color:#666;width:118px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:520px){.sprs__dom{font-size:10px;letter-spacing:.06em;width:158px}}
.sprs__track{flex:1;height:4px;background:#F0EFEC;border-radius:99px;overflow:hidden}
.sprs__fill{height:100%;width:100%;background:#0A0A0A;border-radius:99px}
.sprs__pct{font-family:"JetBrains Mono",monospace;font-size:10px;color:#0A0A0A;width:24px;text-align:right;font-variant-numeric:tabular-nums}
.sprs__foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#F7F7F5;border-top:1px solid #D8D6D0}
.sprs__ok{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:#666}
.sprs__ver{font-family:"JetBrains Mono",monospace;font-size:10px;color:#717171}
.sprs__cap{text-align:center;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--subtle)}

/* --- flow spine ---------------------------------------------
   The product's real workflow. Order carries meaning here — this is a
   sequence a firm actually walks, so it is drawn as one, not as decoration. */
.spine{border-top:1px solid var(--border);background:var(--ground)}
.spine__in{padding-top:26px;padding-bottom:26px;overflow-x:auto;scrollbar-width:none}
.spine__in::-webkit-scrollbar{display:none}
.spine__track{display:flex;align-items:center;justify-content:flex-start;gap:11px;min-width:max-content;padding:0 2px}
@media(min-width:1100px){.spine__track{justify-content:center;min-width:0}}
.spine__step{
  font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.22em;color:var(--subtle);white-space:nowrap;
  transition:color .45s var(--ease);
}
.spine__step.lit{color:var(--muted)}
.spine__step.start{color:var(--chaos)}
.spine__step.end{color:var(--ink);font-weight:600}
.spine__step.end.lit{color:var(--ink)}
.spine__sep{color:var(--border);font-size:10px;flex:none;transition:color .45s var(--ease)}
.spine__sep.lit{color:var(--muted)}

/* --- audience ------------------------------------------------ */
.aud{display:grid;grid-template-columns:1fr;gap:24px;margin-top:52px}
@media(min-width:900px){.aud{grid-template-columns:1fr 1fr}}
.card{
  position:relative;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
}
.card__flag{
  position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--radius-sm);
  font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.2em;
}
.card__flag--pri{background:var(--ink);color:var(--ground)}
.card__flag--pri .pip{width:4px;height:4px;border-radius:50%;background:var(--chaos)}
.card__flag--sec{border:1px solid var(--border);color:var(--muted)}
.card__icon{
  width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
}
.card__icon--solid{background:var(--ink);color:var(--ground)}
.card__icon--out{background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.card h3{font-size:23px;margin-top:22px}
.card p.body{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.65}
.steps{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:13px}
.steps li{display:flex;gap:13px;align-items:flex-start}
.steps .n{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;width:22px;flex:none;padding-top:2px;font-variant-numeric:tabular-nums}
.steps--pri .n{color:var(--chaos)}
.steps--sec .n{color:var(--slate)}
.steps .t{font-size:14px;font-weight:500;line-height:1.35}
.steps .d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.55}
.card__foot{margin-top:26px;padding-top:19px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card__price{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.card__link{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.card__link:hover{color:var(--chaos)}
.card__link svg{transition:transform .2s var(--ease)}
.card__link:hover svg{transform:translateX(2px)}

/* --- platform grid ------------------------------------------- */
.feat{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);margin-top:56px}
@media(min-width:700px){.feat{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feat{grid-template-columns:repeat(3,1fr)}}
.feat__cell{position:relative;background:var(--card);padding:30px;transition:background .2s var(--ease)}
.feat__cell:hover{background:var(--surface)}
.feat__cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--chaos);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.feat__cell:hover::before{transform:scaleX(1)}
.feat__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:19px}
.feat__ic{width:40px;height:40px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.feat__cell:hover .feat__ic{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.feat__idx{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--subtle);font-variant-numeric:tabular-nums}
.feat__cell h3{font-size:17.5px;letter-spacing:-.005em}
.feat__cell p{font-size:14px;color:var(--muted);margin-top:11px;line-height:1.65}

/* --- compliance band (locked dark in both themes) ------------
   A deliberate inversion: the page's one always-dark band, used where the
   claim is strongest — the platform holding itself to the controls it audits. */
.band{background:#0A0A0A;color:#F5F5F5;padding:96px 0}
.band .eyebrow{color:#9E9E9E}
.band .eyebrow::before{background:#9E9E9E}
.band h2{color:#fff;font-size:clamp(30px,4.6vw,48px);max-width:20ch;margin-top:24px;line-height:1.14}
.band h2 .q{color:#9E9E9E}
.band .lede{color:#BDBDBD;margin-top:24px}
.band__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:640px;margin:48px 0 0;padding:24px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.band__stats dt{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:31px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.band__stats dd{margin:9px 0 0;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#9E9E9E;line-height:1.5}
.ctrls{display:grid;grid-template-columns:1fr;gap:20px 48px;margin-top:52px}
@media(min-width:820px){.ctrls{grid-template-columns:1fr 1fr}}
.ctrl{display:flex;align-items:baseline;gap:16px;border-left:1px solid rgba(255,255,255,.14);padding-left:16px}
.ctrl__id{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#9E9E9E;width:118px;flex:none}
.ctrl__d{font-size:14.5px;line-height:1.6;color:#E8E8E8}

/* --- deployment ---------------------------------------------- */
.term{
  background:#0A0A0A;border:1px solid #262626;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md);
}
.term__bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#141414;border-bottom:1px solid #262626}
.term__dots{display:flex;gap:6px}
.term__dots i{width:9px;height:9px;border-radius:50%;background:#333;display:block}
.term__t{font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.18em;color:#7A7A7A;margin-left:6px}
.term__b{padding:22px 20px;font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.95;color:#D8D8D8;overflow-x:auto;min-height:232px}
.term__b .c{color:#6E6E6E}
.term__b .p{color:#EE4F4F}
.term__b .g{color:#7FB08E}
.term__b .w{color:#fff}
.caret{display:inline-block;width:8px;height:15px;background:#D8D8D8;vertical-align:-2px;margin-left:2px}
.reqs{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
@media(min-width:768px){.reqs{grid-template-columns:repeat(3,1fr)}}
.req{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:var(--card)}
.req b{display:block;font-size:14px;font-weight:500}
.req span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.ubuntu{margin-top:56px;padding-top:40px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:24px;align-items:flex-start}
@media(min-width:900px){.ubuntu{flex-direction:row;align-items:center;justify-content:space-between}}
.ubuntu__l{display:flex;align-items:center;gap:20px}
.ubuntu__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.ubuntu__n{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.01em}
.ubuntu__s{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--subtle);margin-top:2px}
.ubuntu p{font-size:14.5px;color:var(--muted);max-width:44ch;line-height:1.7}

/* --- guarantee ------------------------------------------------ */
.gtee{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
@media(min-width:1000px){.gtee{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}}
.gtee__card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:32px 32px 32px 40px;box-shadow:var(--shadow-lg);overflow:hidden}
.gtee__rail{position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--chaos)}
.gtee__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:22px}
.gtee__list{list-style:none;padding:0;margin:0}
.gtee__list li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--border)}
.gtee__list li:first-child{border-top:0;padding-top:0}
.gtee__list li:last-child{padding-bottom:0}
.gtee__n{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--chaos);width:22px;flex:none;font-variant-numeric:tabular-nums}
.gtee__t{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.005em;transition:color .2s}
.gtee__list li:hover .gtee__t{color:var(--chaos)}
.gtee__d{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.gtee__foot{margin-top:24px;padding-top:19px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pulse{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--chaos);margin-right:8px;vertical-align:middle}

/* --- CTA + footer --------------------------------------------- */
.cta{text-align:center}
.cta .h2{margin-left:auto;margin-right:auto;max-width:22ch}
.cta .lede{margin:24px auto 0;text-align:center}
.cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.ftr{border-top:1px solid var(--border);background:var(--ground)}
.ftr__in{display:grid;grid-template-columns:1fr;gap:40px;padding-top:60px;padding-bottom:60px}
@media(min-width:820px){.ftr__in{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.ftr__name{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:19px;letter-spacing:.06em}
.ftr__tag{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-top:7px}
.ftr__dom{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--subtle);margin-top:5px}
.rel{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:6px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.rel span{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em}
.ftr__note{font-size:12px;color:var(--subtle);margin-top:14px;max-width:34ch;line-height:1.65}
.ftr__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--subtle);margin-bottom:16px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ftr ul a{font-size:14px;transition:color .2s}
.ftr ul a:hover{color:var(--chaos)}
.ftr__bot{border-top:1px solid var(--border)}
.ftr__bot .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:19px;padding-bottom:19px;flex-wrap:wrap}
.ftr__bot p{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);padding:10px 16px;z-index:100;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* --- reveal on scroll ----------------------------------------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .caret{display:none}
}
/* ── Polish pass ──────────────────────────────────────────────
   Depth without colour. The brand stays monochrome, so "pop" has to come
   from elevation, contrast and edge quality rather than more hue. Each rule
   here is written against the tokens so it resolves in both themes. */

/* Cards lift toward the reader on hover and their edge firms up. */
.card,.req{transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card:hover,.req:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-lg)}

/* On a dark ground a flat card reads as a hole. A one-pixel top highlight
   gives it a lit edge, the way a real surface catches light from above. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .req,
  :root:not([data-theme="light"]) .gtee__card,
  :root:not([data-theme="light"]) .term{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
  :root:not([data-theme="light"]) .feat__cell:hover{background:#141414}
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .req,
:root[data-theme="dark"] .gtee__card,
:root[data-theme="dark"] .term{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
:root[data-theme="dark"] .feat__cell:hover{background:#141414}

/* The one word the whole brand turns on. Give it a faint bloom so it
   separates from the headline on either ground — never a glow, just heat. */
.hero h1 .chaos,.cta .h2 .chaos{
  text-shadow:0 0 26px hsl(0 76% 46% / .18);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero h1 .chaos,
  :root:not([data-theme="light"]) .cta .h2 .chaos{text-shadow:0 0 30px hsl(0 82% 62% / .30)}
}
:root[data-theme="dark"] .hero h1 .chaos,
:root[data-theme="dark"] .cta .h2 .chaos{text-shadow:0 0 30px hsl(0 82% 62% / .30)}

/* The SPRS card is the page's focal artifact — float it properly and let it
   settle a touch when the reader reaches for it. */
.sprs__card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sprs:hover .sprs__card{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* Buttons get a real pressed state, not just hover. */
.btn:active{transform:translateY(1px)}

/* Hairline rules read thin and grey in dark mode; nudge section seams so the
   page still has architecture at night. */
.stats,.band__stats{border-color:var(--border)}

/* Numerals in the stat rows should never reflow as they count. */
.stats dt,.band__stats dt,.count{font-variant-numeric:tabular-nums}

/* Focus rings sit above neighbouring cards. */
a:focus-visible,button:focus-visible{position:relative;z-index:2}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── FAQ ──────────────────────────────────────────────────────
   Native <details>, so it works with JS disabled and is keyboard
   operable for free. The marker is a drawn plus that rotates to a
   minus — a rotating caret would read as navigation, not disclosure. */
.faq{margin-top:52px;border-top:1px solid var(--border)}
.faq__i{border-bottom:1px solid var(--border)}
.faq__i summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:24px;padding:22px 0;
  font-family:Cinzel,Georgia,serif;font-weight:600;font-size:18px;
  letter-spacing:-.005em;line-height:1.35;color:var(--ink);
  transition:color .2s var(--ease);
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--chaos)}
.faq__x{position:relative;flex:none;width:14px;height:14px;margin-top:5px}
.faq__x::before,.faq__x::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;
  background:var(--ink);transition:transform .28s var(--ease),background .2s var(--ease);
}
.faq__x::after{transform:rotate(90deg)}
.faq__i[open] .faq__x::after{transform:rotate(0deg)}
.faq__i[open] .faq__x::before,.faq__i[open] .faq__x::after{background:var(--chaos)}
.faq__a{padding:0 0 24px}
.faq__a p{font-size:15px;line-height:1.75;color:var(--muted);max-width:72ch}
.faq__i summary:focus-visible{outline:2px solid var(--chaos);outline-offset:4px}
@media(prefers-reduced-motion:no-preference){
  .faq__i[open] .faq__a{animation:faq-in .3s var(--ease) both}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

/* ── The deliverable ──────────────────────────────────────────
   A numbered list is honest here: the workbook's tabs are in a fixed
   order and the auditor reads them in it. */
.dl{display:grid;grid-template-columns:1fr;gap:40px;margin-top:52px}
@media(min-width:960px){.dl{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px}}
.dl__l{list-style:none;padding:0;margin:0;border-top:1px solid var(--border)}
.dl__s{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);
  transition:padding-left .24s var(--ease)}
.dl__s:hover{padding-left:8px}
.dl__n{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--chaos);
  flex:none;width:22px;font-variant-numeric:tabular-nums}
.dl__b{display:flex;flex-direction:column;gap:4px}
.dl__t{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.005em;
  transition:color .2s var(--ease)}
.dl__s:hover .dl__t{color:var(--chaos)}
.dl__d{font-size:13.5px;color:var(--muted);line-height:1.6}
.dl__a{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;
  align-self:start}
.dl__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);margin-bottom:18px}
.dl__x{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.dl__x li{font-size:13.5px;color:var(--muted);line-height:1.65;padding-left:16px;position:relative}
.dl__x li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;
  background:var(--chaos);opacity:.85}
.dl__x b{color:var(--ink);font-weight:500}
.dl__f{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);font-size:13px;
  color:var(--subtle);line-height:1.65}
.faq__a em{font-style:normal;color:var(--ink);font-weight:500}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dl__a{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
}
:root[data-theme="dark"] .dl__a{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}

/* ── Why on-premise ───────────────────────────────────────────
   A ledger rather than a table: each row states one question, then
   both answers. The on-premise column carries ink and full contrast;
   the hosted column is muted — not struck out or coloured hostile,
   because the argument is stronger when the other option is stated
   fairly. Named competitors are deliberately absent. */
.wo{margin-top:52px;border-top:1px solid var(--border)}
.wo__h,.wo__r{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){
  .wo__h,.wo__r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:32px}
}
.wo__h{padding:14px 0;border-bottom:1px solid var(--border)}
.wo__h span{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted)}
.wo__h .wo__on span{color:var(--ink)}
@media(max-width:899px){.wo__h{display:none}}
.wo__r{padding:24px 0;border-bottom:1px solid var(--border);transition:background .2s var(--ease)}
.wo__r:hover{background:var(--surface)}
.wo__q{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:16.5px;line-height:1.35;
  letter-spacing:-.005em;padding-bottom:12px}
@media(min-width:900px){.wo__q{padding-bottom:0}}
.wo__on,.wo__off{position:relative;padding-left:16px}
.wo__on::before,.wo__off::before{content:"";position:absolute;left:0;top:6px;bottom:2px;width:2px;border-radius:2px}
.wo__on::before{background:var(--chaos)}
.wo__off::before{background:var(--border)}
.wo__on p{font-size:14px;line-height:1.65;color:var(--ink)}
.wo__off p{font-size:14px;line-height:1.65;color:var(--muted)}
.wo__tag{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--subtle);margin-bottom:6px}
@media(min-width:900px){.wo__tag{display:none}}
.wo__on,.wo__off{margin-bottom:16px}
@media(min-width:900px){.wo__on,.wo__off{margin-bottom:0}}

/* The clause note — the load-bearing claim, given its own weight. */
.wo__note{margin-top:44px;padding:26px 30px;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--chaos);border-radius:var(--radius);max-width:78ch}
.wo__note p{font-size:15px;line-height:1.75;color:var(--muted)}
.wo__note b{color:var(--ink);font-weight:500}

/* The honest tradeoff. Deliberately not styled as a selling point. */
.wo__t{margin-top:44px;padding:30px;border:1px dashed var(--border);border-radius:var(--radius-lg)}
.wo__tk{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);margin-bottom:22px}
.wo__tl{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:820px){.wo__tl{grid-template-columns:1fr 1fr;gap:22px 44px}}
.wo__tl li{display:flex;flex-direction:column;gap:5px}
.wo__tt{font-family:Cinzel,Georgia,serif;font-weight:600;font-size:16px;letter-spacing:-.005em}
.wo__td{font-size:13.5px;line-height:1.65;color:var(--muted)}
.wo__tf{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);font-size:13.5px;
  line-height:1.7;color:var(--subtle);max-width:70ch}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wo__note{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
}
:root[data-theme="dark"] .wo__note{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}


/* ── Utilities ────────────────────────────────────────────────
   These exist so that no element needs a style="" attribute. Inline
   style attributes require 'unsafe-inline' in the CSP (or a
   style-src-attr carve-out), and the point of this site is that it
   can meet the bar it asks customers to meet. Keep the set small —
   this is not a utility framework. */
.u-subtle{color:var(--subtle)}
.u-muted{color:var(--muted)}
.u-ok{color:var(--ok)}
.u-chaos{color:var(--chaos)}
.u-mt14{margin-top:14px}
.u-mt24{margin-top:24px}
.u-mt26{margin-top:26px}
.u-mt44{margin-top:44px}
.u-fs14{font-size:14px}
.u-notop{border-top:0}
.u-notop-pt56{border-top:0;padding-top:56px}
.u-fine{font-size:14px;color:var(--subtle);margin-top:20px;max-width:44ch;line-height:1.7}

/* ── Print ────────────────────────────────────────────────────
   People print terms and privacy policies — to file them, to mark
   them up, to hand to counsel. A screen stylesheet sent straight to
   paper wastes ink on dark bands and drops every URL on the floor.
   Force the light palette, since a dark theme on paper is unusable. */
@media print{
  /* Specificity matters here. The dark-mode rule above is
     :root:not([data-theme="light"]) — (0,2,0). A bare :root is (0,1,0) and
     LOSES to it, so a visitor printing from a dark-mode browser would get a
     black page. Every state is matched at equal-or-greater specificity, and
     this block comes last, so it wins in all three. */
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"],
  :root[data-theme="light"]{
    --ink:#000; --charcoal:#1A1A1A; --slate:#333; --muted:#333; --subtle:#555;
    --border:#BBB; --surface:#FFF; --card:#FFF; --ground:#FFF;
    --chaos:#000; --ok:#000;
    --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  }
  body{background:#fff;color:#000;font-size:11pt;line-height:1.55}
  .hdr,.mnav,.burger,.tgl,.skip,.hero__grid,.cta,.sprs,.spine,.wo__t,.faq__x{display:none!important}
  .sec,.lg{padding:0!important;border:0!important}
  .lg__h{padding:0 0 18pt!important}
  .lg__w{max-width:none}
  h1{font-size:22pt;margin-bottom:6pt}
  h2{font-size:13pt;margin:16pt 0 6pt;page-break-after:avoid}
  p,li{orphans:3;widows:3}
  .lg__tldr,.lg__warn,.wo__note,.pnote{border:1pt solid #999;background:#fff;page-break-inside:avoid}
  /* A printed page has no hyperlinks, so print the destination. */
  .lg a[href^="http"]::after,.lg a[href^="mailto"]::after{
    content:" (" attr(href) ")";font-family:"JetBrains Mono",monospace;font-size:9pt;color:#555;
  }
  .lg a{text-decoration:underline;color:#000}
  /* An unfilled clause must be unmissable on paper too. */
  .lg__todo{border:1pt dashed #000;color:#000;font-weight:700}
  .ftr{border-top:1pt solid #999;padding-top:10pt}
  .ftr__in{display:block;padding:0}
  .ftr div:not(:first-child){display:none}
  details[open] .faq__a,details .faq__a{display:block!important}
  details summary{list-style:none;font-weight:700}
  @page{margin:18mm 16mm}
}


/* ── Static mark ──────────────────────────────────────────────
   The 14 dots ship in the markup so the logo renders before — and
   without — JavaScript. site.js clears these and rebuilds the animated
   version when it runs. */
.mark .static{fill:var(--chaos)}

/* ── Text robustness ──────────────────────────────────────────
   Control identifiers like SC.L2-3.13.11 are unbreakable tokens sitting in a
   fixed-width column. They fit at the shipped size, but a visitor who has
   raised their minimum font size — exactly the visitor most likely to need
   it — would push them out of the cell. Let them break rather than overflow. */
.ctrl__id,.spec .k,.cmp tbody th,.dl__t{overflow-wrap:anywhere}

/* Avoid a single word alone on a paragraph's last line. Progressive: browsers
   without text-wrap:pretty simply wrap as before. */
.lede,.lg p,.faq__a p,.wo__note p,.pnote p,.lg__tldr p{text-wrap:pretty}

/* ── GCC High ─────────────────────────────────────────────────
   A capability section, not an argument one: the left column is how
   the connector works, the right is what it evidences. Both are
   factual — the connector exists and targets graph.microsoft.us. */
.gcc{display:grid;grid-template-columns:1fr;gap:32px;margin-top:52px}
@media(min-width:900px){.gcc{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:52px}}
.gcc__k{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--muted);margin-bottom:20px}
.gcc__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.gcc__list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.gcc__list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--chaos);opacity:.85}
.gcc__list b{color:var(--ink);font-weight:500}
.gcc__list .mono{font-size:13px;background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:1px 5px;color:var(--ink)}
.gcc__r{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;align-self:start}
.gcc__p{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.gcc__p li{font-size:13.5px;color:var(--muted);line-height:1.5}
.gcc__id{display:block;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin-bottom:2px;
  overflow-wrap:anywhere}
.gcc__f{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.65;color:var(--subtle)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gcc__r{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
}
:root[data-theme="dark"] .gcc__r{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-md)}
/* ── GCC High: placement (where it runs vs. where analysts work) ────── */
.plc{margin-top:72px;padding-top:52px;border-top:1px solid var(--border)}
.plc__h{font-size:clamp(21px,2.6vw,27px);line-height:1.25;max-width:26ch;letter-spacing:-.01em}
.plc__lede{margin-top:16px;max-width:64ch;font-size:15px;line-height:1.75;color:var(--muted)}
.plc__lede b{color:var(--ink);font-weight:500}
.plc__grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
@media(min-width:900px){.plc__grid{grid-template-columns:1fr 1fr;gap:28px}}
.plc__c{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:30px 28px;display:flex;flex-direction:column}
.plc__n{font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--chaos);margin-bottom:14px}
.plc__t{font-size:17px;line-height:1.35;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.plc__s{margin-top:8px;font-size:13px;line-height:1.6;color:var(--subtle)}
.plc__ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.plc__ul li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.plc__ul li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--ink);opacity:.4}
.plc__ul b{color:var(--ink);font-weight:500}
.plc__ul .mono{font-size:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}
.plc__note{margin-top:auto;padding-top:20px}
.plc__note p{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);
  font-size:12.5px;line-height:1.65;color:var(--subtle)}
.plc__note b{color:var(--ink);font-weight:500}


/* Caption under the install terminal. The stream is a realistic demo, and a
   live site should not appear to hand out a copy-pasteable download URL for
   licensed software. */
.term__cap{margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--subtle);line-height:1.7;max-width:70ch}

/* <main> carries tabindex="-1" so the skip link actually moves focus, not just
   the viewport — without it Safari and older browsers scroll but leave the
   screen reader cursor where it was. The outline is suppressed because this
   focus is programmatic and never the result of tabbing to it. */
main:focus{outline:none}