/* Fallback fonts sized to match Fira Sans and Rubik, so text barely moves when the web fonts load (measured: layout shift 0.09 to 0.00 on the Data page). */
@font-face { font-family: "Rubik Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Fira Sans Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 93.5%; descent-override: 26.5%; line-gap-override: 0%; }
:root {
  --ink: #222222;
  --muted: #4d4d4d;
  --cloud: #f4f2f0;
  --line: rgba(27, 28, 28, .12);
  --orange: #f2811d;
  /* Sampled from the homepage hero panel gradient's true middle stop
     (.hero-panel: #f2811d -> #ef7a14 -> #e26f0c), so every emphasized/
     highlighted word across the site reads as the same orange as the
     homepage hero background, not the brighter generic UI accent. */
  --orange-highlight: #ef7a14;
  /* Bright orange is reserved for non-text accents. Text uses a deep blue-charcoal so it stays WCAG AA on white. */
  --orange-accessible: #263238;
  --amber: #f2a341;
  --peach: #f2b680;
  --emerald: #1f9d63;
  --slate-blue: #537397;
  /* The three service-card highlights, shared as the site's accent set. rgb triplets so each
     can be used opaque or at any alpha via rgb(var(--accent-x) / a). */
  --accent-warm: 242 129 29;
  --accent-amber: 242 163 65;
  --accent-ember: 194 59 31;
  /* Page-hero ramp. Every sub-page hero is the same near-black panel and differs
     only by which step of this ramp it uses, so the set reads as one family
     instead of one page per colour. Deliberately all orange: the earlier mix put
     a red on the data page and a yellow-brown on automation, and side by side
     they read as three different brands. Steps are ordered dark to light, and
     each tool sits one step from the service page it belongs to. */
  --hero-orange-deep: 224 106 12;
  --hero-orange: 242 163 65;
  --hero-orange-mid: 245 147 49;
  --hero-orange-amber: 242 129 29;
  --hero-orange-gold: 247 189 110;
  --hero-orange-cream: 250 208 150;

  /* Section-background rhythm, modelled on Aona's purple system but in orange.
     Their palette coheres because nothing is neutral: the darks carry the brand
     hue rather than being black, and the lights come in three tiers rather than
     one flat white. Measured off their live site:
       darks  #0b0118 / #11021d / #140323 / #26073e
       lights #ffffff / #fbf8fd / #f2e8fa   ink #24122f
     These are the orange counterparts. Alternate them down a page: a long run of
     light tiers punctuated by a dark band, never two of the same tier touching.
     Currently piloted on the Data & Dashboards page only. */
  --tint-0: #ffffff;
  --tint-1: #fffaf4;
  --tint-2: #fdeeda;
  --noir-warm: #140b06;
  --noir-warm-2: #24140a;
  --noir-warm-3: #3a2211;
  /* Hero motifs, reused down the page so panels read as one system. */
  --panel-radius: clamp(18px, 2vw, 30px);
  /* One radius scale for the whole site: panels (heroes, big bands), cards,
     items inside a card, and small chips or inputs. Nested corners follow
     outer = inner + padding, so a card holding items uses --r-card over --r-inner. */
  --r-panel: var(--panel-radius);
  --r-card: 20px;
  --r-inner: 12px;
  --r-small: 8px;
  /* One shadow pair: soft and flat at rest, deeper on hover or focus. */
  --shadow-card: 0 1px 2px rgba(60, 40, 20, .06), 0 10px 30px -12px rgba(79, 55, 32, .18);
  --shadow-card-hover: 0 2px 4px rgba(60, 40, 20, .06), 0 22px 48px -16px rgba(79, 55, 32, .28);
  /* Shared card padding, two tiers: compact for dense grids/chips, spacious for feature cards. */
  --card-pad-compact: 1.2rem;
  --card-pad-spacious: clamp(1.5rem, 3vw, 2rem);
  --dots: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  --dots-size: 6px 6px;
  --red: #c23b1f;
  --glass: rgba(255, 255, 255, .84);
  --noir-bg: #0b0d10;
  --noir-surface: #111317;
  --noir-border: rgba(242, 129, 29, .22);
  --radius: 1.5rem;
  --shell: min(1180px, calc(100% - 48px));
  --shell-half: min(590px, calc(50vw - 24px));
  --header-h: 84px;
  --display: "Fira Sans", "Fira Sans Fallback", Arial, Helvetica, sans-serif;
  --body: "Rubik", "Rubik Fallback", Arial, Helvetica, sans-serif;
  --mono: "JetBrains Mono", "Courier New", monospace;
}

@font-face {
  font-family: "Shlop";
  src: url("assets/fonts/shlop.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* The optional page mosaic is defined in brand-background.css. */
body {
  margin: 0; color: var(--ink); font-family: var(--body); line-height: 1.55; overflow-x: hidden;
  background: #fff;
}
main { display: flex; flex-direction: column; }
/* Section order is the document's own order now, so reading, tab and visual order agree. */
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
/* Sections do NOT paint their own background. The page owns one gradient
   (.brand-mosaic in brand-background.css) that runs top to bottom, and every
   section is transparent over it. There used to be ~20 slightly different
   section washes stacked on top of that gradient, which hid it completely and
   made every page read as a series of mismatched bands.
   The single deliberate exception is .shadow (Shadow AI), which is dark on
   purpose — it is the one section meant to interrupt the page. */
.section { padding: clamp(1.3rem, 2.38vw, 2.38rem) 0; background: transparent; }
.icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; z-index: 60; top: .75rem; left: .75rem; transform: translateY(-170%); padding: .75rem 1rem; background: var(--ink); color: #fff; border-radius: var(--r-small); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(242,129,29,.16); display: inline-block; flex: 0 0 auto; }
body[data-motion="full"] .status-dot::after { content: ""; }

/* ---------- header ---------- */
/* No backdrop-filter: a fixed element with one forces the browser to re-blur the strip
   behind it on every scroll frame, and at .92 alpha almost none of that blur was visible.
   .96 alpha reads the same and costs nothing. */
.site-header { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: var(--header-h); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.site-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.brand-logo { display: block; width: 252px; height: auto; }

/* ---------- primary nav dropdowns ---------- */
.desktop-nav { display: flex; align-items: center; gap: .3rem; font-family: var(--display); font-size: .85rem; font-weight: 400; flex-shrink: 0; }
.nav-item { position: relative; }
.nav-trigger, .nav-plain { display: inline-flex; align-items: center; gap: .32rem; min-height: 40px; padding: .5rem .7rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease; }
.nav-trigger:hover, .nav-plain:hover, .nav-trigger[aria-expanded="true"] { color: var(--orange-accessible); background: rgba(242,129,29,.09); }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: .55rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; font: inherit; text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.nav-cta:hover, .nav-cta:focus-visible { border-color: var(--orange-accessible); background: var(--orange-accessible); color: #fff; }
.nav-caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-home { padding: .5rem .6rem; }
.nav-home-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav-panel { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; padding: 1.1rem; border: 1px solid rgba(255,255,255,.75); border-radius: var(--r-card); background: rgba(255,255,255,.975); box-shadow: 0 26px 60px rgba(60,32,8,.2), inset 0 1px rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* The widest panel would overflow the viewport if it opened from its trigger's left edge. */
.nav-panel-wide { left: 50%; transform: translateX(-50%); }
.nav-panel[hidden] { display: none; }
.nav-cols { display: flex; gap: 1.6rem; }
.nav-col { display: grid; align-content: start; gap: .15rem; min-width: 232px; }
.nav-col-title { margin: 0 0 .45rem; font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav-col a { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: var(--r-small); text-decoration: none; transition: background .18s ease; }
.nav-col a:hover, .nav-col a:focus-visible { background: rgba(242,129,29,.1); }
.nav-col a strong { font-size: .84rem; font-weight: 700; color: var(--ink); }
.nav-col a span { font-size: .74rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.nav-panel-foot { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; padding: .7rem .6rem 0; border-top: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--orange-accessible); text-decoration: none; }
.nav-panel-foot:hover { color: var(--orange); }

.mobile-nav-title { margin: 1.4rem 0 .2rem; font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mobile-nav-title:first-child { margin-top: 0; }
.mobile-nav nav a { font-size: 1rem; padding: .8rem 0; }
.footer-links-more { align-items: center; }
.footer-links-label { font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }

.mobile-nav-toggle { display: none; cursor: pointer; width: 44px; height: 44px; border-radius: var(--r-small); border: 1px solid rgba(27,28,28,.18); background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; }
.mobile-nav-bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .25s ease; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bar:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav { position: fixed; z-index: 55; inset: var(--header-h) 0 0; background: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 1.5rem 2rem; overflow-y: auto; }
.mobile-nav[hidden] { display: none; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.mobile-nav nav .mobile-nav-cta { justify-content: center; margin-top: 1rem; padding: .85rem 1rem; border: 0; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; }
.mobile-nav-foot { display: flex; flex-direction: column; gap: .9rem; padding-top: 1.5rem; }
.mobile-nav-foot .header-phone { display: inline-flex; font-size: .95rem; }
.mobile-nav-foot .button { width: 100%; }

@media (max-width: 1050px) { .mobile-nav-toggle { display: flex; } .header-actions .button-compact, .header-actions .motion-toggle { display: none; } }
.nav-live { display: inline-flex; align-items: center; gap: .4rem; }
.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header-actions .button, .header-actions .motion-toggle { white-space: nowrap; }
.header-phone { display: none; align-items: center; min-height: 44px; gap: .5rem; color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.header-phone:hover { color: var(--orange-accessible); }
.button-compact { min-height: 40px; padding: .6rem .85rem; font-size: .78rem; }
.motion-toggle { cursor: pointer; min-height: 44px; border: 1.5px solid rgba(27,28,28,.35); background: #fff; color: var(--ink); border-radius: 999px; padding: .3rem .8rem .3rem .5rem; display: flex; gap: .55rem; align-items: center; transition: background .25s ease, border-color .25s ease; }
.motion-toggle:hover { background: var(--cloud); }
.motion-toggle[aria-pressed="true"] { background: rgba(242,129,29,.1); border-color: var(--orange); }
.motion-switch { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: rgba(27,28,28,.28); border: 1.5px solid rgba(27,28,28,.4); transition: background .25s ease, border-color .25s ease; }
.motion-switch-knob { position: absolute; top: 50%; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transform: translateY(-50%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.motion-toggle[aria-pressed="true"] .motion-switch { background: var(--orange); border-color: var(--orange); }
.motion-toggle[aria-pressed="true"] .motion-switch-knob { transform: translateY(-50%) translateX(16px); }
.motion-toggle-label { display: inline-block; width: 5.8rem; font-size: .74rem; font-weight: 700; text-align: left; white-space: nowrap; }
.motion-toggle[aria-pressed="true"] .motion-toggle-label { color: var(--orange-accessible); }
@media (prefers-reduced-motion: reduce) { .motion-switch-knob { transition-duration: .01s; } }

/* ---------- buttons ---------- */
/* Same frosted-glass recipe as .glass-panel (translucent fill,
   backdrop blur+saturate, inset top highlight), applied to every button so the
   hero's glass texture reads as one material across the whole site. Variants
   below only change the tint; the sheen itself lives here. */
.button { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.3rem; border: 1px solid transparent; border-radius: 999px; font-size: .89rem; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 14px 32px rgba(36,30,26,.18), inset 0 1px rgba(255,255,255,.7), inset 0 -8px 14px rgba(0,0,0,.05); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); } .button:focus-visible, a:focus-visible, .motion-toggle:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .way:focus-visible, .q-pill:focus-visible { outline: 3px solid var(--orange-accessible); outline-offset: 2px; }
/* The gloss band (a light-to-transparent gradient layered over the tint) is what
   actually reads as "glass" at button size — at this scale, backdrop-filter's blur
   is nearly invisible on its own, but a highlight catching the top edge isn't.
   The orange fill itself stays near-opaque (.95, not the ~.6-.7 used on white/dark
   fills elsewhere): at lower alpha the backdrop blur pulls in whatever's behind the
   button and the brand orange visibly drifts pale/pink depending on the page, which
   broke the one color that has to read as identical everywhere. */
.button-primary { color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 42%), rgb(242 129 29 / .95); border-color: rgba(255,255,255,.5); transition: background .2s ease, transform .2s ease, border-color .2s ease; } .button-primary:hover, .button-primary:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%), rgb(34 34 34 / .95); color: #fff; border-color: rgba(255,255,255,.28); }
.button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.42); border-color: rgba(27,28,28,.2); color: var(--ink); } .button-quiet:hover { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%), rgba(244,242,240,.6); }

/* ---------- eyebrow / headings ---------- */
.eyebrow { display: block; margin: 0 0 .85rem; color: var(--orange-accessible); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow.on-dark { color: var(--peach); }
.kicker { display: block; margin: 0 0 1.25rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.kicker span { padding-inline: .5rem; color: #fff; opacity: .5; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--display); }
/* Same outlined pill as the hero kicker, so every section opens on the hero's note. */
.section-index { display: inline-flex; align-items: center; margin-bottom: .95rem; padding: .42rem .85rem; border: 1px solid rgba(242,129,29,.4); border-radius: 999px; background: rgba(242,129,29,.07); color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; }
.shadow .section-index { border-color: rgb(255 255 255 / .34); background: rgb(255 255 255 / .1); }
.section-heading-center { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-heading-center .section-lede { margin-inline: auto; text-wrap: pretty; }
.section-lede em { font-style: normal; font-weight: 700; color: var(--orange-accessible); }
.section-heading-center .eyebrow { text-align: center; }
.section-heading-left { max-width: 760px; margin: 0 0 2.5rem; text-align: left; }
.section-heading-center h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-bottom: .75rem; text-wrap: balance; }
/* Left-aligned section headings previously had no type rule at all, so they fell back to the
   UA default (24px / normal tracking) while the one centered section rendered at ~46px. They
   now sit one step below the centered feature heading instead of four steps below it. */
.section-heading-left h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.14; margin-bottom: .75rem; }
.section-lede { margin: 0; color: var(--muted); font-size: 1.02rem; }
.shadow .section-lede { color: rgba(255,255,255,.68); max-width: 520px; margin-inline: auto; }

/* ---------- ghost widget ---------- */
.ghost-widget { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 55; transition: opacity .25s ease, transform .25s ease, visibility .25s; }
/* Set by app.js while the closing CTA is on screen, so the widget never covers the phone
   number or the primary "Schedule a conversation" button. */
.ghost-widget.is-yielded { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ghost-widget { transition: none; } }
.ghost-widget-dismiss { position: absolute; z-index: 2; top: -.7rem; right: -.6rem; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: #111317; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.ghost-widget-dismiss:hover, .ghost-widget-dismiss:focus-visible { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.ghost-pill { all: unset; cursor: pointer; display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.ghost-ribbon { display: none; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 999px; background: rgba(17,19,23,.95); border: 1px solid var(--noir-border); color: #f1d9c4; font-size: .7rem; font-weight: 600; font-family: var(--mono); white-space: nowrap; }
.ghost-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.ghost-avatar { position: relative; width: 58px; height: 68px; border-radius: var(--r-card); display: grid; place-items: center; background: linear-gradient(180deg, #232a34, #10141a); border: 1px solid var(--noir-border); box-shadow: 0 8px 30px rgba(242,129,29,.18); }
.ghost-figure { width: 60%; height: 60%; }
.ghost-figure path:first-child { fill: #171b21; stroke: var(--orange); stroke-width: 1.4; }
.ghost-figure .ember { fill: var(--orange); }
.ghost-figure .ghost-mouth { fill: #0b0d10; stroke: var(--orange); stroke-opacity: .5; }
/* The fixed alert used to bob for the entire visit. Keeping it still is easier to read and avoids
   a permanent compositor animation that offered no interaction feedback. */
@keyframes ghost-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ghost-card { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, 88vw); border-radius: var(--r-card); overflow: hidden; background: linear-gradient(180deg, #1b2027, #0e1116); border: 1px solid var(--noir-border); box-shadow: 0 24px 60px rgba(0,0,0,.4); color: #fff; }
.ghost-card-top { height: 4px; background: linear-gradient(90deg, transparent, var(--orange), var(--amber)); }
.ghost-close { position: absolute; top: .75rem; right: .75rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.ghost-card-body { padding: 1.4rem 1.35rem 1.2rem; display: grid; gap: .9rem; }
.ghost-card-head { display: flex; gap: .7rem; align-items: flex-start; }
.ghost-icon { width: 34px; height: 34px; border-radius: var(--r-small); display: grid; place-items: center; background: linear-gradient(135deg, var(--orange-accessible), var(--orange)); flex: 0 0 auto; }
.ghost-icon .icon { width: 18px; height: 18px; color: #fff; }
.ghost-tag { margin: 0 0 .2rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--peach); font-family: var(--mono); }
.ghost-card-head h2 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.ghost-copy { margin: 0; font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.78); }
.ghost-vectors { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.ghost-vectors li { padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .7rem; font-weight: 600; color: #f1d9c4; }
.ghost-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ghost-actions .button { min-height: 42px; font-size: .78rem; padding: .6rem .9rem; }
.ghost-foot { display: flex; justify-content: space-between; font-size: .7rem; color: rgba(255,255,255,.5); font-family: var(--mono); padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.08); }
.ghost-foot span { display: inline-flex; align-items: center; gap: .35rem; }

@media (min-width: 640px) { .ghost-ribbon { display: flex; } }

/* ---------- hero ---------- */
/* ---------- hero: inset orange panel, centred stack, circuit + halo behind ---------- */
.hero { padding: calc(var(--header-h) + 14px) 14px clamp(3rem, 5.5vw, 5.5rem); position: relative; isolation: isolate; color: #fff; background: #fff; overflow: visible; }
/* The marquee sits flush under the hero with zero gap, so its own bottom padding is dropped here. */
.hero:has(+ .sectors-marquee) { padding-bottom: 0; }
/* Squares off the panel's bottom corners so the marquee band (which picks up
   this same gradient and rounds only its own bottom corners) reads as one
   continuous panel rather than two stacked shapes. */
.hero:has(+ .sectors-marquee) .hero-panel { border-radius: clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px) 0 0; padding-bottom: 0; }
.hero::after { content: none; }
/* A small glass trapezoid tab that sits flush on the marquee's top edge, so
   the "Who we serve" label reads as a tag growing out of the marquee itself.
   Same frosted-glass material as .glass-panel: translucent white over a
   backdrop blur. The clip-path references an objectBoundingBox <clipPath> so
   the rounded-corner trapezoid scales with the label's own fit-content box. */
.hero-serve-tab { position: relative; z-index: 2; width: fit-content; margin: clamp(1rem, 2.2vw, 1.5rem) auto 0; }
.hero-serve-tab-label {
  display: block; padding: .37rem 1.16rem .31rem; color: var(--orange-accessible);
  background: var(--glass); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  clip-path: url(#hero-serve-tab-clip);
  filter: drop-shadow(0 6px 14px rgba(154,67,0,.2));
}
.hero-grid { display: none; }
/* Brand orange, matching the Cloudflare treatment. White copy on #f2811d measures ~2.2-2.5:1,
   under the 4.5:1 AA threshold for body text. .hero-deck/.hero-badges/.hero .kicker use
   var(--ink), which restores ~6.5-7.5:1 without changing the panel. Measured by
   scripts/hero-contrast.mjs and a targeted probe of these three selectors. */
.hero-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-panel);
  padding: clamp(3.15rem, 7.2vw, 5.85rem) 0 clamp(4.05rem, 7.2vw, 6.3rem);
  background: linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
}
.hero-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 6px 6px; opacity: .55; }
/* The glow rises from the bottom centre and carries the bright brand orange. */
.hero-halo { position: absolute; z-index: 0; left: 50%; bottom: -14%; width: min(1320px, 124%); height: 58%; transform: translateX(-50%); pointer-events: none; filter: blur(4px);
  background: radial-gradient(ellipse 58% 100% at 50% 100%, #fff 0%, rgba(255,246,228,.98) 20%, rgba(255,214,150,.82) 40%, rgba(255,181,96,.45) 60%, rgba(242,163,65,0) 82%); }
body[data-motion="full"] .hero-halo { animation: hero-halo-breathe 9s ease-in-out infinite; }
@keyframes hero-halo-breathe { 0%, 100% { opacity: .85; transform: translateX(-50%) scaleY(1); } 50% { opacity: 1; transform: translateX(-50%) scaleY(1.09); } }

.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: center; text-align: left; gap: clamp(2rem, 4vw, 4.5rem); }
.hero-content { position: relative; z-index: 2; display: grid; justify-items: start; max-width: 62rem; }
/* The kicker becomes Cloudflare's outlined announcement pill. */
/* White copy measured ~2.2:1 against the orange panel (WCAG 1.4.3 needs 4.5:1
   for this size/weight) — var(--ink) restores ~7:1 without changing the pill. */
.hero .kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 clamp(1.26rem, 2.7vw, 1.98rem); padding: .5rem 1rem; border: 1px solid rgb(255 255 255 / .38); border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--ink); font-size: .74rem; }
.hero .kicker span { color: rgb(34 34 34 / .65); }
/* Narrow screens wrap the pill, which leaves the "/" separator stranded mid-line. */
@media (max-width: 560px) {
  .hero .kicker { flex-direction: column; gap: .12rem; padding: .55rem 1rem; line-height: 1.35; }
  .hero .kicker span { display: none; }
}
.hero-title { margin: 0 0 1.08rem; max-width: none; font-size: clamp(2.3rem, 5.4vw, 4.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.hero-line { display: block; overflow: hidden; white-space: nowrap; }
.hero-line span { display: inline-block; will-change: transform; }
.hero-line:nth-child(3), .hero-line:nth-child(3) span { background: linear-gradient(92deg, #ffe8c8, #fff 45%, #ffd08f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-deck { max-width: 62ch; margin: 0 0 1.71rem; text-wrap: pretty; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.55; color: var(--ink); }
@media (max-width: 700px) {
  .hero-line { white-space: normal; text-wrap: balance; }
  /* Each line should stay one row on phones. The longest, "Automate the
     busywork.", is ~10.6em wide and the title box is the viewport minus 60px
     (14px hero inset + 16px shell padding, each side), so size the type to
     that box with a little room to spare, never larger than the usual 2.3rem. */
  .hero-title { font-size: min(2.3rem, calc((100vw - 60px) / 10.9)); }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: flex-start; margin: 0 0 clamp(1.8rem, 3.6vw, 2.7rem); }
.hero-actions .button { border-radius: 999px; padding: .85rem 1.5rem; }
.hero .button-primary { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.58); color: var(--ink); border-color: rgba(255,255,255,.75); }
.hero .button-primary:hover, .hero .button-primary:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 60%), rgb(34 34 34 / .85); color: #fff; border-color: var(--ink); }
/* On the bright orange panel a white-tinted fill leaves white text at 2.5:1 —
   the label is technically there and practically unreadable, and it sits right
   next to the solid white primary, which makes it look like the broken one. The
   secondary needs something DARK to sit on here, not something lighter.
   (The same class over the sub-pages' near-black heroes is already ~11:1 and is
   left alone.) Measured by scripts/hero-contrast.mjs. */
.hero .button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), rgb(27 28 28 / .74); border-color: rgb(255 255 255 / .55); color: #fff; }
.hero .button-quiet:hover, .hero .button-quiet:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 60%), rgb(27 28 28 / .88); border-color: #fff; }
.hero .button:focus-visible { outline-color: #fff; }
/* Wayfinder: the two "where do I go next" routes out of the hero.
   These were two stacked lines of dark-navy link text on the orange panel, which
   read as a to-do list and fought the hero's own white-on-orange palette. They
   are now a pair of icon chips in the same translucent-white language as the
   kicker pill and the badge row below them, so they read as one graphic element
   rather than leftover copy. */
/* The chips are navigation, so they sit close under the buttons and leave a
   clear gap before the trust badges, which are a different kind of statement.
   Without this they landed a few pixels off the badge row and the two read as
   one crowded block. */
.hero-actions:has(+ .hero-wayfinder) { margin-bottom: clamp(.99rem, 1.98vw, 1.44rem); }
.hero-wayfinder { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem; margin: 0 0 clamp(1.8rem, 3.6vw, 2.61rem); }
.hero-way {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .5rem .95rem .5rem .55rem;
  border: 1px solid rgb(255 255 255 / .42); border-radius: 999px;
  /* Dark fill for the same reason as .hero .button-quiet above: on orange, a
     white tint gave the chip labels 2.1:1. .4 opacity still measured under
     4.5:1 on the second chip, where the panel gradient is more saturated;
     .55 clears AA with margin on both chips. */
  background: rgb(27 28 28 / .55); color: #fff; text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-way:hover, .hero-way:focus-visible { background: rgb(27 28 28 / .72); border-color: #fff; }
.hero-way:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-way-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; flex: 0 0 auto;
  border-radius: 50%; background: rgb(255 255 255 / .18); font-size: .95rem;
}
.hero-way-text { display: grid; text-align: left; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.hero-way-text em { font-style: normal; font-weight: 500; font-size: .74rem; color: rgb(255 255 255 / .82); }
.hero-way-cue { display: inline-block; font-size: .95rem; transition: transform .25s ease; }
.hero-way:hover .hero-way-cue { transform: translateX(2px); }
.hero-way:first-child:hover .hero-way-cue { transform: translateY(2px); }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .7rem 1.6rem; font-size: .78rem; font-weight: 600; color: var(--ink); }
.hero-badges span { display: inline-flex; align-items: center; gap: .45rem; } .hero-badges .icon { color: var(--ink); }
.hero-content > .kicker, .hero-content > .hero-deck, .hero-content > .hero-actions, .hero-content > .hero-badges, .hero-content > .hero-offer-note { justify-self: start; }
/* Names the handbook the hero's primary button hands out. */
@media (max-width: 1120px) { .hero-actions:has(+ .hero-offer-note) { margin-bottom: .85rem; } }
.hero-offer-note { display: none; margin: 0 0 clamp(1.8rem, 3.6vw, 2.7rem); font-size: .86rem; line-height: 1.45; color: var(--ink); }
.hero-offer-note strong { font-weight: 600; }

/* A small product screenshot gives the headline a visual counterweight. It reuses the
   site's own card language (glass-panel whites, the policy register's approved/restricted
   rows, the Data & Dashboards card's sparkline) rather than inventing a new visual style,
   so the hero reads as one system with the rest of the homepage instead of a bolted-on
   illustration. */
/* The figures are made up; the label says so and doesn't pretend to be a live feed. */
@media (max-width: 1120px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-handbook { display: none; }
  .hero-offer-note { display: block; }
}

/* Circuit board sits inside the panel, so its greys become translucent white. */
.hero-circuit { position: absolute; z-index: 1; inset: 0; overflow: hidden; opacity: .42; pointer-events: none; }
.circuit-board { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.circuit-board path { fill: none; }
.circuit-board path[data-circuit-path] { stroke: rgb(255 255 255 / .5); stroke-width: 1.4; }
.circuit-field-line { stroke: rgb(255 255 255 / .34); stroke-width: 1; opacity: .65; }
.circuit-field-via { fill: rgb(255 255 255 / .34); opacity: .55; }
.circuit-field-node { fill: rgb(255 255 255 / .8); stroke: rgb(255 255 255 / .5); stroke-width: 1.3; }
.circuit-pulse-field { stroke-width: 1.3; }
.circuit-board .circuit-node { fill: #fff; stroke: #ffd9a3; stroke-width: 3; }
.circuit-board .circuit-via { fill: rgb(255 255 255 / .45); opacity: .7; }
.circuit-board .circuit-chip rect { fill: rgb(255 255 255 / .16); stroke: rgb(255 255 255 / .5); stroke-width: 1.4; }
.circuit-board .circuit-chip path { stroke: rgb(255 255 255 / .5); stroke-width: 1.4; }
/* No drop-shadow here on purpose. stroke-dashoffset is a paint property, so these paths
   re-rasterise every frame; an SVG filter on top of that meant a blur pass per path per
   frame (23 paths x 60fps). The wider stroke carries the same glow read at the .42 opacity
   the parent already applies. */
.circuit-board .circuit-pulse { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 210; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
body[data-motion="full"] .circuit-pulse { opacity: .72; }
.circuit-board .circuit-energy {
  --energy-cycle: -523;
  fill: none;
  stroke: #fff8df;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 3 520;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.circuit-board .circuit-energy--amber { --energy-cycle: -615; stroke: #ffd08f; stroke-dasharray: 5 610; }
body[data-motion="full"] .circuit-energy { opacity: 1; animation-name: circuit-energy-flow; animation-play-state: running; }
@keyframes circuit-flow { to { stroke-dashoffset: -856; } }
@keyframes circuit-energy-flow { to { stroke-dashoffset: var(--energy-cycle); } }

/* CSS animations keep ticking while their element is scrolled out of view, so the pulses and
   the halo were costing a style recalc + paint every frame with nothing on screen. app.js adds
   .is-idle to the hero once it leaves the viewport. Specificity (0,3,0) beats the
   body[data-motion="full"] rules above, so no !important is needed. */
.hero.is-idle .circuit-pulse,
.hero.is-idle .circuit-energy,
.hero.is-idle .hero-halo { animation-play-state: paused; }

/* app.js applies these only to off-screen scenes (and to the whole page in a background tab).
   Pausing preserves each animation's position instead of restarting it when it becomes visible. */
.motion-paused *,
.document-motion-paused,
.document-motion-paused * { animation-play-state: paused !important; }

/* ---------- hero widget card ---------- */
.hero-widget { position: relative; z-index: 1; }
.widget-card {
  position: relative; padding: 1.7rem 1.6rem 1.6rem; border-radius: var(--r-card); color: var(--ink); display: grid; gap: 1.1rem; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.82), rgba(255,255,255,.52) 65%, rgba(255,242,232,.5));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 60px -14px rgba(27,28,28,.22), inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(242,129,29,.07);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.widget-card::before { content: ""; position: absolute; top: 1rem; left: 1.5rem; width: 2.25rem; height: 2px; background: var(--orange); opacity: .9; }
.widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.widget-head-id { display: flex; align-items: center; gap: .65rem; }
.widget-mark { width: 34px; height: 34px; border-radius: var(--r-small); background: linear-gradient(155deg, var(--orange), var(--orange-accessible)); box-shadow: 0 6px 14px -4px rgba(179,79,0,.5), inset 0 1px 0 rgba(255,255,255,.3); display: grid; place-items: center; flex: 0 0 auto; }
.widget-mark .icon { width: 17px; height: 17px; color: #fff; }
.widget-head h2 { font-size: .82rem; font-weight: 700; margin: 0; }
.widget-head p { margin: .1rem 0 0; font-size: .7rem; color: var(--muted); }
.widget-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem .3rem .55rem; border-radius: 999px; background: linear-gradient(135deg, rgba(242,129,29,.14), rgba(242,163,65,.05)); border: 1px solid rgba(242,129,29,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); color: var(--orange-accessible); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.widget-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2.5px rgba(242,129,29,.22); }
.widget-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.widget-checklist li { display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border-radius: var(--r-small); background: var(--cloud); font-size: .78rem; font-weight: 600; }
.widget-checklist .icon { color: var(--orange-accessible); }
.widget-foot { display: block; text-align: center; padding-top: .3rem; font-size: .78rem; font-weight: 700; color: var(--orange-accessible); text-decoration: none; }
.widget-foot:hover { text-decoration: underline; }

/* ---------- glass ---------- */
.glass-panel { border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius); background: var(--glass); box-shadow: 0 18px 55px rgba(36,30,26,.08), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }

/* Homepage material system -------------------------------------------------
   Glass is used as a structural layer, not as decoration on every object.
   Content-heavy cards get a thick, near-opaque material; compact navigation
   can remain clearer. Every surface keeps a visible edge without blur support. */
body[data-page="home"] {
  --home-glass: rgba(255,255,255,.72);
  --home-glass-strong: rgba(255,255,255,.86);
  --home-glass-edge: rgba(255,255,255,.88);
  --home-glass-line: rgba(111,77,48,.13);
  --home-glass-shadow: 0 22px 54px rgba(104,48,7,.12), inset 0 1px 0 rgba(255,255,255,.92);
}
body[data-page="home"] .way,
body[data-page="home"] .tool-card,
body[data-page="home"] .roadmap-panel,
body[data-page="home"] .roadmap-tabs [role="tab"],
body[data-page="home"] .learn-banner {
  border-color: var(--home-glass-edge);
  background-color: var(--home-glass-strong);
  box-shadow: var(--home-glass-shadow);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
body[data-page="home"] .way,
body[data-page="home"] .tool-card,
body[data-page="home"] .roadmap-panel,
body[data-page="home"] .learn-banner { isolation: isolate; }
body[data-page="home"] .way::before,
body[data-page="home"] .tool-card::before,
body[data-page="home"] .roadmap-panel::before,
body[data-page="home"] .learn-banner::before {
  content: ""; position: absolute; z-index: -1; inset: 1px; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 34%, rgba(242,129,29,.045) 78%, rgba(255,255,255,.2));
}

/* Free tools: thick glass for reading, a soft spectral glow for depth, and a
   compact icon tile that matches the homepage's existing glass icon language. */
body[data-page="home"] .tools { position: relative; isolation: isolate; }
body[data-page="home"] .tools::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 14% 26%, rgba(242,163,65,.14), transparent 30rem), radial-gradient(circle at 88% 68%, rgba(242,129,29,.1), transparent 28rem);
  /* Tapers the whole overlay to nothing well inside the section's own edges, so
     it reads as one continuous glow drifting through the page instead of a
     rectangle that switches on at a hard line where the old 8% inset began. */
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
body[data-page="home"] .tool-card {
  border: 1px solid var(--home-glass-edge); background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,247,240,.68));
  box-shadow: var(--home-glass-shadow); transition: transform .3s cubic-bezier(.2,.75,.2,1), border-color .3s ease, box-shadow .3s ease;
}
body[data-page="home"] .tool-card:hover,
body[data-page="home"] .tool-card:focus-within {
  transform: translateY(-5px); border-color: rgba(242,129,29,.48);
  box-shadow: 0 28px 66px rgba(104,48,7,.17), 0 0 0 1px rgba(242,129,29,.08), inset 0 1px 0 rgba(255,255,255,.96);
}
body[data-page="home"] .tool-accent { height: 3px; opacity: .88; }
body[data-page="home"] .tool-icon {
  width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.86); border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgb(var(--tool-accent) / .12));
  box-shadow: 0 10px 24px rgb(var(--tool-accent) / .16), inset 0 1px 0 #fff;
}
body[data-page="home"] .tool-list li { padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.68); border-radius: var(--r-inner); background: rgba(255,255,255,.42); }

/* Roadmap: tabs are the controls, panel is the reading surface. The selected
   tab stays opaque so state never depends on translucency or color alone. */
body[data-page="home"] .governance-roadmap { overflow: hidden; }
body[data-page="home"] .roadmap-tabs [role="tab"] { background: rgba(255,255,255,.68); }
body[data-page="home"] .roadmap-tabs [role="tab"][aria-selected="true"] { border-color: var(--orange); background: var(--orange); box-shadow: 0 14px 30px rgba(179,79,0,.2); }
body[data-page="home"] .roadmap-panel { position: relative; overflow: hidden; border-color: var(--home-glass-edge); background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,247,240,.72)); }
body[data-page="home"] .roadmap-panel-art { border: 1px solid rgba(255,255,255,.7); box-shadow: 0 20px 42px rgba(154,67,0,.2), inset 0 1px 0 rgba(255,255,255,.5); }

body[data-page="home"] .learn-banner { position: relative; overflow: hidden; border: 1px solid var(--home-glass-edge); background: linear-gradient(135deg, rgba(255,255,255,.83), rgba(255,244,235,.66)); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-page="home"] .way,
  body[data-page="home"] .tool-card,
  body[data-page="home"] .roadmap-panel,
  body[data-page="home"] .roadmap-tabs [role="tab"],
  body[data-page="home"] .learn-banner { background-color: #fffaf6; }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-page="home"] .way,
  body[data-page="home"] .tool-card,
  body[data-page="home"] .roadmap-panel,
  body[data-page="home"] .roadmap-tabs [role="tab"],
  body[data-page="home"] .learn-banner { background-color: #fffaf6; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* This is a long single-page experience. Let the browser skip layout and paint work for sections
   that are several screens away while retaining a stable scrollbar and anchor positions. */
main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 550px; }

/* Compact devices are the most sensitive to large live blur surfaces. These cards already use
   near-opaque backgrounds, so removing backdrop sampling changes little visually and avoids an
   expensive compositing pass while scrolling. */
@media (max-width: 850px) {
  .glass-panel, .way, .way-icon-chip, .way-body, .way-tab, .bento-cell,
  .shadow-ring-card, .board-chip, .resource-skills, .resource-form, .widget-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- automation checker ---------- */
.automation-checker-section { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 1rem); }
.automation-checker-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 52% 32% at 100% 20%, rgba(242,129,29,.1), transparent 72%), repeating-linear-gradient(180deg, transparent 0, transparent 72px, rgba(242,129,29,.08) 73px, transparent 74px); opacity: .62; }
.automation-checker-section > .automation-checker-shell { position: relative; z-index: 1; }
/* Text column first, gears beside it: the copy keeps the page's left gutter and
   the cluster sits directly to its right rather than out in the far margin. */
.automation-checker-shell { display: grid; grid-template-columns: minmax(0, 760px) clamp(130px, 14vw, 200px); justify-content: start; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.automation-checker-copy { min-width: 0; }
.automation-checker-copy .section-heading-left { margin-bottom: 0; }

/* Gear cluster: three meshed gears in the section's top-left gutter. Same
   line-art vocabulary as the hero circuit board (thin slate strokes, orange
   accents, white bodies). Tooth counts share one module so the teeth really
   interlock; periods are proportional to tooth count so the mesh holds. */
.automation-gears { width: 100%; pointer-events: none; }
.gear-cluster { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 22px rgba(36,30,26,.07)); }
.gear-axis { fill: none; stroke: none; }
.gear-body { fill: rgba(255,255,255,.92); stroke-linejoin: round; }
.gear-body--primary { stroke: var(--orange); stroke-width: 1.6; }
.gear-body--slate { stroke: #b7bfc9; stroke-width: 1.5; }
.gear-body--amber { stroke: var(--amber); stroke-width: 1.6; }
.gear-pitch { fill: none; stroke: #cdd2d8; stroke-width: .9; stroke-dasharray: 5 6; opacity: .8; }
.gear-hub { fill: #fff; stroke-width: 1.4; }
.gear-hub--primary { stroke: var(--orange); }
.gear-hub--slate { stroke: #b7bfc9; }
.gear-hub--amber { stroke: var(--amber); }
.gear-bore { fill: rgba(242,129,29,.18); stroke: none; }
.gear-hole { fill: none; stroke: #cdd2d8; stroke-width: 1; }
/* fill-box + the centred .gear-axis circle keeps each spin on its true axis. */
.gear-spin { transform-box: fill-box; transform-origin: center; }
body[data-motion="full"] .gear-spin--cw { animation: gear-turn-cw var(--gear-period) linear infinite; }
body[data-motion="full"] .gear-spin--ccw { animation: gear-turn-ccw var(--gear-period) linear infinite; }
.gear-spin--a { --gear-period: 60s; }
.gear-spin--b { --gear-period: 39s; }
.gear-spin--c { --gear-period: 27s; }
@keyframes gear-turn-cw { to { transform: rotate(360deg); } }
@keyframes gear-turn-ccw { to { transform: rotate(-360deg); } }
/* Below this width the copy needs the full row, so the cluster steps out. */
@media (max-width: 900px) {
  .automation-checker-shell { grid-template-columns: minmax(0, 1fr); }
  .automation-gears { display: none; }
}
.automation-form, .automation-results { padding: clamp(1.25rem, 3vw, 2.25rem); }
.automation-form textarea { width: 100%; min-height: 110px; resize: vertical; padding: .8rem; border: 1px solid rgba(27,28,28,.28); border-radius: var(--r-small); background: #fff; color: var(--ink); }
.automation-task-label { display: block; margin-bottom: .45rem; font-weight: 700; }
.automation-questions { display: grid; gap: 1rem; margin: 1.4rem 0; }
.automation-question { margin: 0; padding: var(--card-pad-compact); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.72); }
.automation-question legend { padding: 0 .25rem; font-weight: 700; }
.automation-helper { max-width: 57ch; margin: .25rem 0 .8rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.automation-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.automation-options-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.automation-options .choice { min-height: 48px; margin: 0; }
.automation-calculate { width: 100%; }
.automation-results { margin-top: 1.25rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.automation-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.automation-result-heading h3 { margin: 0; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1; }
.automation-result-heading h3 small { color: var(--muted); font-size: .3em; }
.automation-category { max-width: 300px; padding: .55rem .8rem; border: 1px solid rgba(179,79,0,.35); border-radius: 999px; background: rgba(242,129,29,.1); color: var(--orange-accessible); text-align: center; }
.automation-score-track { height: 12px; margin: 1.25rem 0; overflow: hidden; border-radius: 999px; background: #d8d4d1; }
.automation-score-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--orange); transition: width .45s ease; }
.automation-explanation { color: var(--muted); }
.automation-task-summary, .automation-opportunity-list { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: var(--r-inner); background: var(--cloud); }
.automation-task-summary p { margin: .3rem 0 0; color: var(--muted); }
.automation-opportunity-list h4 { margin: 0 0 .5rem; }
.automation-opportunity-list ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.automation-disclaimer { margin: 1rem 0; color: var(--muted); font-size: .75rem; }
.automation-contact-cta { margin-top: 1.5rem; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--r-card); background: linear-gradient(125deg, rgba(255,238,225,.9), #fff); border: 1px solid rgba(179,79,0,.22); }
.automation-contact-cta h4, .automation-contact-panel h4 { margin: 0 0 .4rem; font: 700 1.25rem/1.2 var(--display); }
.automation-contact-cta p { color: var(--muted); }
.automation-contact-panel { margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.automation-contact-panel input { width: 100%; padding: .68rem .75rem; border: 1px solid rgba(27,28,28,.28); border-radius: var(--r-small); }
.field-error { min-height: 1.2rem; color: var(--red); font-size: .82rem; font-weight: 700; }

/* ---------- assessment ---------- */
.assessment-section { color: var(--ink); position: relative; isolation: isolate; overflow: hidden; }
.assessment-section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 66% 46% at 50% 42%, rgba(242,129,29,.2), transparent 76%), radial-gradient(ellipse 48% 34% at 88% 86%, rgba(242,163,65,.14), transparent 72%); }
.assessment-section > .shell { position: relative; z-index: 1; }
.assessment-form { color: var(--ink); padding: clamp(1.25rem, 3vw, 2rem); }

/* ---------- policy builder launcher ---------- */
/* The section itself is only the doorway now; the builder runs in the dialog below. */
.policy-launch { max-width: 760px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.6rem); text-align: center; color: var(--ink); }
.policy-launch-meta { margin: 0 0 .9rem; font: 700 .7rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-accessible); }
.policy-launch-title { margin: 0 0 .7rem; font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.18; text-wrap: balance; }
.policy-launch-copy { max-width: 58ch; margin: 0 auto 1.5rem; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.policy-launch-note { margin: 1rem 0 0; font-size: .76rem; color: var(--muted); }

/* ---------- policy builder modal ---------- */
/* The AI Risk Indicator is pinned in the dialog header; only the questions scroll under it. */
body.is-tool-modal-open { overflow: hidden; }
/* The Shadow AI pill sits bottom-right, exactly where the builder's answer
   cards land. It has to go while the builder is open, not just dim. */
body.is-tool-modal-open .ghost-widget { display: none; }
.tool-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: clamp(.5rem, 3vw, 2rem); }
.tool-modal[hidden] { display: none; }
.tool-modal-scrim { position: absolute; inset: 0; background: rgba(27,28,28,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: tool-modal-fade .2s ease; }
.tool-modal-dialog { position: relative; display: flex; flex-direction: column; width: min(780px, 100%); max-height: 100%; overflow: hidden; border-radius: var(--r-card); border: 1px solid rgba(255,255,255,.7); background: #fffdfb; color: var(--ink); box-shadow: 0 30px 80px rgba(36,30,26,.32); animation: tool-modal-rise .24s cubic-bezier(.2,.75,.2,1); }
@keyframes tool-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tool-modal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tool-modal-head { flex: 0 0 auto; display: grid; gap: .85rem; padding: clamp(1rem, 2.6vw, 1.35rem) clamp(1rem, 3vw, 1.9rem) .9rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fffdfb, #fff7ee); }
.tool-modal-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tool-modal-eyebrow { margin: 0 0 .2rem; font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-accessible); }
.tool-modal-title { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 700; letter-spacing: -.015em; }
.tool-modal-title:focus-visible { outline: 2px solid var(--orange-accessible); outline-offset: 4px; }
.tool-modal-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(27,28,28,.18); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.tool-modal-close:hover, .tool-modal-close:focus-visible { background: rgba(27,28,28,.07); border-color: rgba(27,28,28,.35); }
.tool-modal-risk { display: grid; gap: .5rem; }
.tool-modal-risk .risk-card { padding: .85rem 1rem .8rem; border-radius: var(--r-inner); box-shadow: 0 10px 26px rgba(194,90,10,.22); }
.tool-modal-risk .risk-card-head { margin-bottom: .5rem; }
.tool-modal-risk .risk-level { margin-bottom: .7rem; }
.tool-modal-risk .risk-level strong { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
.tool-modal-risk .risk-bands { margin-top: .7rem; padding-top: .6rem; }
.tool-modal-risk .exposure-note-label { font-size: .72rem; font-weight: 600; color: var(--muted); }
.tool-modal-progress { display: grid; gap: .4rem; }
.tool-modal-progress .form-step-label { margin: 0; }
.tool-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(.9rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 2rem); }
.tool-modal .assessment-form { padding: 0; }
/* The automation checker shares the shell. Inside it the dialog is the surface,
   so the tool's own glass panels flatten and sit flush in the scrolling body. */
.tool-modal-dialog--wide { width: min(880px, 100%); }
.tool-modal-lede { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--muted); }
.tool-modal .automation-form, .tool-modal .automation-results { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tool-modal .automation-results { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
/* The launch panel that replaced the inline checker on the page behind the dialog. */
.automation-launch { display: grid; gap: .55rem; justify-items: start; margin-top: clamp(1.2rem, 3vw, 1.8rem); }
.automation-launch-note { margin: 0; font-size: .8rem; font-weight: 600; color: var(--muted); }
/* No dead row above the question while there is nothing to report. */
.tool-modal .form-error:empty { min-height: 0; }
/* ---------------------------------------------------------------------------
   "Take Control of Your AI" download dialog (partials/handbook-modal.html).
   One job: trade a work email for the handbook. Two panels: the real cover on
   warm noir, so the offer reads as a finished document, and an offer column
   with one field and one button. Nothing else on the page competes with it.
   --------------------------------------------------------------------------- */
.handbook-modal-scrim { background: rgba(20, 11, 6, .64); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.handbook-modal .handbook-modal-dialog { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); width: min(900px, 100%); max-height: 100%; overflow: hidden; border: 0; border-radius: var(--r-card); background: #fffdfb; box-shadow: 0 40px 120px rgba(20, 11, 6, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.handbook-modal-close { position: absolute; top: .85rem; right: .85rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.handbook-modal-close:hover, .handbook-modal-close:focus-visible { background: rgba(27, 28, 28, .07); color: var(--ink); }
.handbook-modal-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Left: the cover as a physical object. */
.handbook-modal-art { position: relative; display: grid; align-content: center; justify-items: center; gap: 1.8rem; padding: 2.6rem 1.8rem 2rem; overflow: hidden; color: #fff; background:
  radial-gradient(120% 70% at 15% 0%, rgb(var(--accent-warm) / .5), transparent 60%),
  radial-gradient(90% 55% at 100% 100%, rgb(var(--accent-amber) / .28), transparent 65%),
  var(--noir-warm); }
.handbook-modal-art::before { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: var(--dots-size); opacity: .35; mask-image: linear-gradient(180deg, #000, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); }
.handbook-book { position: relative; width: min(13.5rem, 100%); perspective: 1100px; }
.handbook-book-cover { display: block; width: 100%; height: auto; aspect-ratio: 490 / 634; border-radius: 3px 9px 9px 3px; background: #091a21; transform: rotateY(-16deg) rotateX(3deg); transform-origin: left center;
  /* Page edges stacked behind the cover, then the cast shadow. */
  box-shadow: 5px 1px 0 -1px #f3eee8, 9px 2px 0 -2px #e4dcd2, 13px 3px 0 -3px #d8cfc4, 22px 26px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
/* Spine crease and a soft sheen across the cover. */
.handbook-book::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 7%; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .12) 60%, transparent); transform: rotateY(-16deg) rotateX(3deg); transform-origin: left center; pointer-events: none; }
.handbook-book::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 3px 9px 9px 3px; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%); background-size: 250% 100%; background-position: 100% 0; transform: rotateY(-16deg) rotateX(3deg); transform-origin: left center; pointer-events: none; }
.handbook-modal-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .14); }
.handbook-modal-stats li { display: grid; gap: .2rem; justify-items: center; padding-top: 1rem; }
.handbook-modal-stats li + li { border-left: 1px solid rgba(255, 255, 255, .1); }
.handbook-modal-stats strong { font: 700 1.5rem/1 var(--display); letter-spacing: -.02em; color: #fff; }
.handbook-modal-stats span { font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }

/* Right: the offer. */
.handbook-modal-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 2.6rem) clamp(1.3rem, 3vw, 1.8rem); }
.handbook-modal-offer { display: grid; gap: 1rem; }
.handbook-modal-offer[hidden], .handbook-gate-done[hidden] { display: none; }
.handbook-modal-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 700 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-accessible); }
.handbook-modal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgb(var(--accent-warm) / .18); }
.handbook-modal-title { margin: 0; padding-right: 2rem; font: 700 clamp(1.85rem, 4vw, 2.5rem)/1.02 var(--display); letter-spacing: -.03em; color: var(--ink); }
.handbook-modal-title em { font-style: normal; background: linear-gradient(transparent 60%, rgb(var(--accent-warm) / .38) 60%, rgb(var(--accent-warm) / .38) 92%, transparent 92%); }
.handbook-modal-deck { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.handbook-modal-points { display: grid; gap: .55rem; margin: .1rem 0 .4rem; padding: 0; list-style: none; }
.handbook-modal-points li { position: relative; padding-left: 1.85rem; font-size: .93rem; line-height: 1.45; color: var(--ink); }
.handbook-modal-points li::before { content: ""; position: absolute; left: 0; top: .08rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgb(var(--accent-warm) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35a0c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .72rem no-repeat; }

.handbook-gate-form { display: grid; gap: .6rem; }
.handbook-field { display: flex; align-items: center; gap: .65rem; height: 3.5rem; padding: 0 1rem; border: 1.5px solid rgba(27, 28, 28, .16); border-radius: var(--r-inner); background: #fff; color: var(--muted); cursor: text; transition: border-color .2s ease, box-shadow .2s ease; }
.handbook-field .icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.handbook-field input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 1rem var(--body); }
.handbook-field input::placeholder { color: #9a9a9a; }
.handbook-field:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--accent-warm) / .18); color: var(--ink); }
.handbook-gate-form.has-error .handbook-field { border-color: var(--red); box-shadow: 0 0 0 4px rgb(var(--accent-ember) / .12); }
.handbook-submit { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.5rem; padding: 0 1.4rem; border: 0; border-radius: var(--r-inner); background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 50%), var(--orange); color: var(--ink); font: 700 1rem var(--display); letter-spacing: -.005em; cursor: pointer; box-shadow: 0 12px 28px rgb(var(--accent-warm) / .35), inset 0 -2px 0 rgba(0, 0, 0, .08); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.handbook-submit .icon { width: 1.1rem; height: 1.1rem; transition: transform .2s ease; }
.handbook-submit:focus-visible { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(34, 34, 34, .3); }
.handbook-submit:focus-visible .icon { transform: translateX(3px); }
/* Hover only where hovering exists; on touch screens it sticks after a tap. */
@media (hover: hover) {
  .handbook-submit:hover { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(34, 34, 34, .3); }
  .handbook-submit:hover .icon { transform: translateX(3px); }
}
.handbook-submit:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.handbook-submit:disabled { cursor: progress; opacity: .85; }
.handbook-submit.is-busy .icon { animation: handbook-busy 1s ease-in-out infinite; }
.handbook-field-error { margin: 0; color: var(--red); font-size: .84rem; font-weight: 600; line-height: 1.4; }
.handbook-field-error:empty { display: none; }
.handbook-gate-note { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted); }
.handbook-gate-note a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 2px; }
.handbook-gate-note .icon { flex: 0 0 auto; width: .85rem; height: .85rem; margin-top: .12rem; }
.handbook-modal-byline { margin: .4rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--muted); }

/* After submit: the offer column becomes the confirmation. */
.handbook-gate-done { display: grid; gap: .7rem; align-content: center; min-height: 100%; }
.handbook-gate-done:focus { outline: none; }
.handbook-done-check { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: .3rem; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 8px rgba(31, 157, 99, .14); }
.handbook-done-check svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.handbook-done-title { font: 700 clamp(1.6rem, 3.4vw, 2rem)/1.08 var(--display); letter-spacing: -.025em; color: var(--ink); }
.handbook-gate-done p { margin: 0; color: var(--muted); line-height: 1.55; }
.handbook-gate-done a:not(.button) { color: var(--ink); font-weight: 600; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.handbook-done-next { display: grid; gap: .6rem; justify-items: start; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.handbook-done-next p { color: var(--ink); font-weight: 500; }

/* Motion, only when the visitor has it on (see app.js setMotion). */
body[data-motion="full"] .handbook-modal:not([hidden]) .handbook-book { animation: handbook-book-in .7s cubic-bezier(.2, .8, .2, 1) both .05s; }
body[data-motion="full"] .handbook-modal:not([hidden]) .handbook-book::after { animation: handbook-sheen 1.4s ease .55s both; }
body[data-motion="full"] .handbook-modal:not([hidden]) .handbook-modal-offer > * { animation: handbook-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
body[data-motion="full"] .handbook-modal-offer > :nth-child(2) { animation-delay: .04s; }
body[data-motion="full"] .handbook-modal-offer > :nth-child(3) { animation-delay: .08s; }
body[data-motion="full"] .handbook-modal-offer > :nth-child(4) { animation-delay: .12s; }
body[data-motion="full"] .handbook-modal-offer > :nth-child(5) { animation-delay: .16s; }
body[data-motion="full"] .handbook-modal-offer > :nth-child(6) { animation-delay: .2s; }
body[data-motion="full"] .handbook-modal:not([hidden]) .handbook-modal-dot { animation: handbook-dot 2.4s ease-in-out infinite; }
body[data-motion="full"] .handbook-gate-form.has-error .handbook-field { animation: handbook-shake .36s ease; }
body[data-motion="full"] .handbook-gate-done:not([hidden]) .handbook-done-check { animation: handbook-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
body[data-motion="full"] .handbook-gate-done:not([hidden]) .handbook-done-check svg { animation: handbook-draw .45s ease .25s both; }
@keyframes handbook-book-in { from { opacity: 0; transform: translateY(22px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes handbook-sheen { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@keyframes handbook-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes handbook-dot { 0%, 100% { box-shadow: 0 0 0 4px rgb(var(--accent-warm) / .18); } 50% { box-shadow: 0 0 0 7px rgb(var(--accent-warm) / .06); } }
@keyframes handbook-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes handbook-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes handbook-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes handbook-busy { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Phones: the cover shrinks into a header band beside the numbers, so the
   field and button sit in the first screen without scrolling. */
@media (max-width: 720px) {
  /* A floating card, not the full-screen sheet the other tool dialogs use here. */
  .tool-modal.handbook-modal { padding: .75rem; }
  .handbook-modal .handbook-modal-dialog { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; max-height: 100%; border-radius: 1.2rem; }
  .handbook-modal-art { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 1.2rem; padding: 1.3rem 3.4rem 1.3rem 1.3rem; }
  .handbook-book { width: 5.4rem; }
  .handbook-book-cover { box-shadow: 3px 1px 0 -1px #f3eee8, 6px 2px 0 -2px #e4dcd2, 10px 14px 24px rgba(0, 0, 0, .5); }
  .handbook-modal-stats { grid-template-columns: 1fr; gap: .55rem; border-top: 0; }
  .handbook-modal-stats li { grid-template-columns: 2.4rem auto; align-items: baseline; justify-items: start; padding-top: 0; }
  .handbook-modal-stats li + li { border-left: 0; }
  .handbook-modal-stats strong { font-size: 1.2rem; }
  .handbook-modal-close { color: rgba(255, 255, 255, .8); }
  .handbook-modal-close:hover, .handbook-modal-close:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
  .handbook-modal-title { padding-right: 0; }
  .handbook-modal-deck { font-size: .94rem; }
  .handbook-modal-points li { font-size: .88rem; }
}
.exposure-snapshot { display: grid; gap: .7rem; }
.form-actions-end { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .tool-modal-scrim, .tool-modal-dialog { animation: none; } }
/* On a short or narrow viewport the pinned header has to give way, so the band legend
   (the least load-bearing part of the card) is the first thing dropped. */
@media (max-height: 680px) { .tool-modal-risk .risk-bands, .tool-modal-lede { display: none; } }
@media (max-width: 640px) {
  .tool-modal { padding: 0; }
  .tool-modal-dialog { width: 100%; height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .tool-modal-risk .risk-bands { display: none; }
}
.form-progress { height: 3px; overflow: hidden; background: rgba(27,28,28,.13); border-radius: 3px; } .form-progress span { display: block; width: 33.333%; height: 100%; background: var(--orange); transition: width .3s ease; }
.form-step-label { margin: 1.2rem 0 .4rem; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); }
.form-step { border: 0; padding: 0; margin: 0; } .form-step legend { width: 100%; margin-bottom: 1.2rem; padding: 0; font: 700 clamp(1.1rem, 1.8vw, 1.4rem)/1.2 var(--display); letter-spacing: -.01em; }
.form-step > label, .contact-fields label { display: grid; gap: .4rem; margin-bottom: .9rem; font-size: .82rem; font-weight: 700; }
.form-step select, .form-step input[type="text"], .form-step input[type="email"], .form-step textarea { width: 100%; border: 1px solid rgba(27,28,28,.22); border-radius: var(--r-small); background: #fff; color: var(--ink); padding: .68rem .75rem; }
.form-step select:focus, .form-step input:focus, .form-step textarea:focus { border-color: var(--orange-accessible); box-shadow: 0 0 0 3px rgba(242,129,29,.18); }
.form-step textarea { resize: vertical; }
.choice-group { border: 0; padding: 0; margin: 1rem 0 1.3rem; }
.choice-group legend { margin-bottom: .6rem; font: 700 .82rem/1.35 var(--body); letter-spacing: 0; }
.choice-group:has(input[type="radio"]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.choice { position: relative; display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: center; text-align: center; padding: .65rem .7rem; margin-bottom: 0; border-radius: var(--r-small); border: 1px solid rgba(27,28,28,.16); background: var(--cloud); cursor: pointer; font-size: .82rem; font-weight: 600; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.choice-group:not(:has(input[type="radio"])) .choice { justify-content: flex-start; text-align: left; margin-bottom: .4rem; }
.choice:hover { border-color: rgba(242,129,29,.5); }
.choice:has(input:checked) { border-color: var(--orange-accessible); background: rgba(242,129,29,.12); color: var(--orange-accessible); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(.choice-recommended) { flex-direction: column; }
.choice-recommended { display: inline-flex; align-items: center; gap: .2rem; margin-left: 0; padding: .12rem .45rem; border-radius: 999px; background: rgba(242,129,29,.14); border: 1px solid rgba(242,129,29,.35); color: var(--orange-accessible); font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.form-step > label.consent { display: flex; grid-template-columns: none; align-items: flex-start; gap: .6rem; margin: .6rem 0 1.2rem; font-size: .8rem; font-weight: 400; }
.consent input { position: static; opacity: 1; width: auto; height: auto; accent-color: var(--orange-accessible); margin-top: .2rem; }
.consent-copy { flex: 1 1 auto; min-width: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; }
.assessment-form .button-quiet { border-color: rgba(27,28,28,.28); color: var(--ink); } .assessment-form .button-quiet:hover { background: rgba(27,28,28,.06); }
.form-result { padding: .85rem .95rem; margin: 1rem 0; border-left: 3px solid var(--orange); background: rgba(242,129,29,.08); } .form-result p { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; }
/* ---------- contact + lead capture fields ---------- */
/* Grouped inside one hairline panel so the pairs read as a block instead of floating in the page. */
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; padding: .95rem 1rem .3rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: rgba(255,255,255,.7); }
/* Flex row so an "Optional" hint sits beside the label rather than reading as a second field. */
.contact-fields label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .45rem; margin-bottom: .75rem; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: color .2s ease; }
.contact-fields label > input { flex: 1 1 100%; }
.contact-fields .optional { font: 500 .7rem/1 var(--body); letter-spacing: 0; text-transform: lowercase; }
.contact-fields label:focus-within { color: var(--orange-accessible); }
.contact-fields input, .automation-contact-panel input { width: 100%; padding: .6rem .7rem; border: 1px solid rgba(27,28,28,.2); border-radius: var(--r-small); background: #fff; color: var(--ink); font-family: var(--body); font-size: .88rem; font-weight: 500; letter-spacing: normal; text-transform: none; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-fields input:focus, .automation-contact-panel input:focus { border-color: rgba(242,129,29,.9); box-shadow: 0 0 0 1px rgba(242,129,29,.5), 0 0 16px rgba(242,129,29,.3); }
.consent { padding: .62rem .8rem; margin: .6rem 0 .5rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: rgba(255,255,255,.55); transition: border-color .2s ease; }
.consent:focus-within { border-color: rgba(242,129,29,.6); }
.form-actions { margin-top: .9rem; }
.optional { color: var(--muted); font-weight: 400; }
.form-error { min-height: 1.2rem; color: var(--red); font-size: .82rem; font-weight: 700; }
.form-success { padding: 2rem 0 .3rem; } .form-success strong { font: 700 1.8rem/1 var(--display); letter-spacing: -.015em; } .form-success p { color: var(--muted); }
.honeypot { position: absolute; left: -9999px; }

.exposure-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.exposure-label { font: 700 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.exposure-note-label { margin: 0; font-size: .76rem; font-weight: 700; color: var(--ink); }
.exposure-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.exposure-flags li { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; border-radius: var(--r-small); background: #fff; border: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.exposure-flags .icon { color: var(--amber); flex: 0 0 auto; margin-top: .1rem; }
.exposure-foot { display: flex; align-items: flex-start; gap: .55rem; padding: .8rem .9rem; border-radius: var(--r-inner); background: rgba(242,129,29,.08); border: 1px solid rgba(242,129,29,.2); font-size: .78rem; color: var(--ink); }
.exposure-foot .icon { color: var(--orange-accessible); margin-top: .1rem; }
.widget-pill.is-low { background: linear-gradient(135deg, rgba(242,163,65,.1), rgba(242,163,65,.03)); border-color: rgba(242,163,65,.28); color: var(--muted); }
.widget-pill.is-low::before { background: var(--amber); box-shadow: 0 0 0 2.5px rgba(242,163,65,.2); }
.widget-pill.is-attention { background: linear-gradient(135deg, rgba(194,59,31,.16), rgba(194,59,31,.05)); border-color: rgba(194,59,31,.35); color: var(--red); }
.widget-pill.is-attention::before { background: var(--red); box-shadow: 0 0 0 2.5px rgba(194,59,31,.2); }
.exposure-more { justify-content: center; text-align: center; font-size: .72rem !important; background: transparent !important; border-style: dashed !important; }
.exposure-next-steps { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: var(--r-inner); background: var(--cloud); }
.exposure-next-steps-label { margin: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-accessible); }
.exposure-next-steps p { margin: 0; font-size: .78rem; color: var(--muted); }
.exposure-next-steps .button { justify-self: start; }

/* ---------- policy generator ---------- */
.policy-intro-copy { max-width: 62ch; color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0 0 1.2rem; }
.policy-notice { padding: 1rem 1.1rem; border-radius: var(--r-inner); background: var(--cloud); border: 1px solid var(--line); margin-bottom: 1.4rem; }
.policy-notice strong { display: block; margin-bottom: .35rem; font-size: .82rem; }
.policy-notice p { max-width: 60ch; margin: 0 0 .9rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }
/* nowrap matters: .choice wraps its flex line, which would otherwise push a long label
   onto a second line and leave the tick box sitting above the text instead of beside it.
   The text wraps inside its own span, with the box centred against the whole block. */
.policy-notice-check { background: #fff; justify-content: flex-start; align-items: center; flex-wrap: nowrap; text-align: left; line-height: 1.4; }
.policy-notice-check-text { flex: 1 1 auto; min-width: 0; }
.policy-notice-check::before { content: ''; flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--r-small); border: 1.5px solid rgba(27,28,28,.3); background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 700; transition: background .2s ease, border-color .2s ease; }
.policy-notice-check:has(input:checked)::before { content: '\2713'; background: var(--orange); border-color: var(--orange); }
.policy-step-hint { margin: -.6rem 0 1rem; font-size: .82rem; color: var(--muted); }
.policy-tier-legend { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-accessible); margin-bottom: .5rem; }
.tool-account { margin: -.05rem 0 .8rem 1rem; padding: .65rem .75rem; border: 1px solid rgba(27,28,28,.12); border-left: 3px solid rgba(27,28,28,.22); border-radius: 0 .7rem .7rem 0; background: rgba(255,255,255,.72); transition: border-color .2s ease, background .2s ease; }
.tool-account-label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); gap: .75rem; align-items: center; color: var(--muted); font-size: .74rem; font-weight: 700; line-height: 1.35; }
.form-step .tool-account select { width: 100%; min-height: 40px; padding: .5rem 2.1rem .5rem .65rem; border-radius: var(--r-small); font-size: .8rem; }
.tool-account[data-account="personal"] { border-color: rgba(194,59,31,.35); border-left-color: var(--red); background: rgba(194,59,31,.045); }
.tool-account[data-account="team"], .tool-account[data-account="unknown"] { border-left-color: var(--orange); background: rgba(242,129,29,.045); }
.tool-account[data-account="enterprise"] { border-left-color: var(--emerald); background: rgba(31,157,99,.045); }
@media (max-width: 600px) {
  .tool-account { margin-left: .45rem; padding: .65rem; }
  .tool-account-label { grid-template-columns: 1fr; gap: .45rem; }
}
.policy-form fieldset.choice-group:has([data-tier]) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
[data-incident-fields], [data-action-ai-followup], [data-connections-followup] { margin-bottom: 1rem; }
.policy-helper-card { padding: .9rem 1rem; border-radius: var(--r-inner); background: rgba(242,129,29,.06); border: 1px solid rgba(242,129,29,.18); margin-bottom: 1.1rem; }
.policy-helper-card strong { display: block; margin-bottom: .3rem; font-size: .78rem; color: var(--orange-accessible); text-transform: uppercase; letter-spacing: .04em; }
.policy-helper-card p { margin: 0 0 .4rem; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.policy-helper-card p:last-child { margin-bottom: 0; }
.policy-helper-warn { font-weight: 700; color: var(--ink) !important; }
.policy-warning-card { padding: .9rem 1rem; border-radius: var(--r-inner); background: rgba(194,59,31,.06); border: 1px solid rgba(194,59,31,.28); margin: .9rem 0 1.1rem; }
.policy-warning-card strong { display: block; margin-bottom: .3rem; font-size: .78rem; color: var(--red); text-transform: uppercase; letter-spacing: .04em; }
.policy-warning-card p { margin: 0; font-size: .82rem; color: var(--ink); line-height: 1.55; }
.policy-results-block h4 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.policy-results-block-lede { margin: 0 0 .8rem; font-size: .82rem; color: var(--muted); }
.policy-flag.is-regulatory { background: rgba(179,79,0,.05); border-color: rgba(179,79,0,.22); }

.policy-results { display: grid; gap: 1.25rem; }
.policy-results[hidden] { display: none; }
.policy-results-head h3 { margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; }
.policy-results-head p { margin: 0; color: var(--muted); font-size: .88rem; }
.policy-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.policy-flag { padding: .85rem .95rem; border-radius: var(--r-inner); background: rgba(242,129,29,.06); border: 1px solid rgba(242,129,29,.2); }
.policy-flag strong { display: block; font-size: .8rem; margin-bottom: .25rem; }
.policy-flag p { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.policy-preview-doc { max-height: 420px; overflow-y: auto; padding: 1.5rem 1.6rem; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line); font-size: .86rem; line-height: 1.6; }
.policy-preview-doc h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.policy-preview-doc h3 { font-size: .95rem; margin: 1.3rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.policy-preview-doc .policy-doc-head + h3 { margin-top: .8rem; padding-top: 0; border-top: 0; }
.policy-preview-doc p, .policy-preview-doc li { color: var(--muted); }
.policy-preview-doc ul { padding-left: 1.1rem; margin: .4rem 0; }
.policy-preview-doc .policy-doc-check-list { padding-left: 0; }
.policy-doc-callout { margin: .7rem 0 0; padding: 1rem 1.15rem; border-radius: var(--r-inner); border: 1px solid rgba(31,157,99,.25); border-left: 4px solid var(--emerald); background: rgba(31,157,99,.05); }
.policy-doc-callout > p:first-child { margin-top: 0; }
.policy-doc-callout > p:last-child, .policy-doc-callout ul:last-child { margin-bottom: 0; }
.policy-doc-callout-badge { display: inline-block; padding: .2rem .65rem; margin-bottom: .6rem; border-radius: 999px; background: #eafaf2; color: var(--emerald); font-weight: 700; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
.policy-doc-check-list { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .4rem; }
.policy-doc-check-list li { display: flex; align-items: flex-start; gap: .5rem; }
.policy-doc-check-mark { flex: 0 0 auto; line-height: 1.5; }
.policy-doc-tier-grid { display: grid; gap: .6rem; margin: .7rem 0; }
.policy-doc-tier-box { padding: .9rem 1.05rem; border-radius: var(--r-inner); border: 1px solid var(--line); border-left: 4px solid var(--line); background: #fff; }
.policy-doc-tier-box[data-risk="public"] { border-left-color: var(--emerald); background: rgba(31,157,99,.05); }
.policy-doc-tier-box[data-risk="public"] .policy-doc-tier { color: var(--emerald); }
.policy-doc-tier-box[data-risk="internal"] { border-left-color: var(--slate-blue); background: rgba(83,115,151,.06); }
.policy-doc-tier-box[data-risk="internal"] .policy-doc-tier { color: var(--slate-blue); }
.policy-doc-tier-box[data-risk="sensitive"] { border-left-color: var(--orange); background: rgba(242,129,29,.07); }
.policy-doc-tier-box[data-risk="sensitive"] .policy-doc-tier { color: var(--orange-accessible); }
.policy-doc-tier-box[data-risk="restricted"] { border-left-color: var(--red); background: rgba(194,59,31,.06); }
.policy-doc-tier-box[data-risk="restricted"] .policy-doc-tier { color: var(--red); }
.policy-doc-head { margin-bottom: 1.2rem; position: relative; }
.policy-doc-logo { position: absolute; top: 0; right: 0; width: 112px; height: 28px; }
.policy-doc-eyebrow { margin: 0 0 .3rem; color: var(--orange-accessible); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.policy-doc-title { margin: 0 0 .9rem; font-size: 1.3rem; }
.policy-doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1.2rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); }
.policy-doc-meta div { display: flex; flex-direction: column; gap: .1rem; }
.policy-doc-meta dt { font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.policy-doc-meta dd { margin: 0; font-weight: 600; color: var(--ink); }
.policy-doc-tier { margin: 1rem 0 .3rem; font-size: .85rem; color: var(--orange-accessible); }
.policy-doc-tier-box .policy-doc-tier { margin-top: 0; }
.policy-doc-tier-box p { margin: 0; }
.policy-doc-tier-box .policy-doc-tier-note { margin-top: .4rem; }
.policy-doc-tier-note { font-size: .82rem; }
.policy-doc-rule { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; }
.policy-doc-notice-heading { font-size: .95rem; margin: 0 0 .6rem; padding-top: 0; border-top: 0; }
.policy-doc-notice-box { padding: 1rem 1.1rem; border-radius: var(--r-inner); background: var(--cloud); }
.policy-doc-notice-box p { margin: 0; font-size: .78rem; }
.policy-doc-credit { margin-top: 1.2rem; font-size: .74rem; color: var(--muted); }
.policy-doc-credit a { color: var(--orange-accessible); }
.policy-ack-check { background: var(--cloud); font-size: .85rem; }
.policy-results-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.policy-results-actions .button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.policy-download-hint { margin: .5rem 0 0; font-size: .74rem; color: var(--muted); }
.policy-review-sheet { margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: var(--r-inner); background: var(--cloud); }
.policy-review-sheet strong { display: block; margin-bottom: .3rem; font-size: .88rem; }
.policy-review-sheet > p { margin: 0 0 .8rem; font-size: .8rem; color: var(--muted); }
.policy-review-sheet .policy-results-actions { gap: .6rem; }
.policy-disclaimer-foot { margin: 0; font-size: .72rem; color: var(--muted); line-height: 1.5; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- shadow ai ---------- */
.shadow { position: relative; background: var(--noir-surface); color: #fff; overflow: hidden; }
/* The same inset, rounded panel as the dark page heroes, so the two dark blocks
   read as one family instead of a rounded card butting into a square band. */
body[data-page="governance"] .shadow { margin: 14px 14px 0; border-radius: var(--panel-radius); }
.shadow .section-index { color: #fff; }
/* The figure is absolutely positioned (z-index: 0) across the section's full height,
   so at some viewport widths it sits behind this heading. Without its own stacking
   context a plain in-flow element still paints *below* a positioned z-index: 0
   sibling regardless of DOM order, so the figure showed through no matter how opaque
   this background was. Both fixes are needed: position + z-index to actually stack
   above the figure, and a near-opaque background so nothing shows through once it does. */
.shadow .section-heading-center { position: relative; z-index: 1; padding: 2.5rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(36,20,10,.96), rgba(17,19,23,.96)); border: 1.5px solid rgba(242,129,29,.35); box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.shadow > .shell { position: relative; }
.shadow-layout { display: block; margin-bottom: 2.5rem; }
.shadow-figure { position: absolute; z-index: 0; left: calc((var(--shell) - 100vw) / 2); top: 0; bottom: 0; width: min(50.6vw, 682px); height: 100%; min-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
.shadow-figure img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: left 18%; mix-blend-mode: screen; opacity: .82; filter: saturate(.9) contrast(1.08); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.8) 72%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 54%, rgba(0,0,0,.8) 72%, transparent 100%); }
.shadow-ghost-title { position: absolute; z-index: 2; right: -49.368rem; top: clamp(5.022rem, 10.045vw, 10.045rem); width: clamp(34.5rem, 48.875vw, 48.875rem); font-family: "Shlop", serif; font-weight: 400; font-size: clamp(7.188rem, 11.5vw, 14.375rem); line-height: .72; letter-spacing: .02em; text-align: center; background: linear-gradient(180deg, var(--orange) 0%, rgba(242,129,29,.2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(242,129,29,.28); opacity: .96; rotate: 30deg; transform-origin: top right; pointer-events: none; user-select: none; }
/* Below this width the figure and heading crowd too close together for the decorative title to fit without overlapping. */
@media (max-width: 1050px) { .shadow-ghost-title { right: 1rem; left: auto; top: 1rem; width: 12rem; font-size: clamp(2.2rem, 8vw, 3.5rem); } }
.shadow-carousel { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5rem; width: 100%; min-width: 0; }
.shadow-scene { width: 100%; max-width: 1080px; height: 470px; perspective: 1350px; display: grid; place-items: center; overflow: visible; }
.shadow-ring { position: relative; width: 280px; height: 380px; transform-style: preserve-3d; transform: rotateY(calc(var(--ring-angle, 0) * 1deg)); }
.shadow-ring-card {
  position: absolute; inset: 0; width: 280px; height: 380px; padding: 1.75rem 1.7rem 1.8rem; border-radius: var(--r-card);
  display: flex; flex-direction: column; text-align: left; overflow: hidden;
  background:
    radial-gradient(circle at 15% 0%, rgba(242,163,65,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  background-color: rgba(17,19,23,.55);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 25px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(242,129,29,.08);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * (360deg / var(--count)))) translateZ(285px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.shadow-ring-card > * { position: relative; z-index: 1; transition: opacity .35s ease; }
/* Cards turned away from the viewer are previews. Fading their text keeps them
   from reading as skewed, unreadable copy; the front card is the one to read. */
/* Only in the 3D ring: when motion is reduced, or on small screens, the cards
   become a plain grid and every card must be fully readable. */
@media (min-width: 851px) and (prefers-reduced-motion: no-preference) { body[data-motion="full"] .shadow-ring-card[aria-hidden="true"] > * { opacity: .18; } }
.shadow-ring-card:hover { border-color: rgba(242,163,65,.55); box-shadow: 0 25px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(242,129,29,.16), 0 0 30px rgba(242,129,29,.2); }
.shadow-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.shadow-tag { padding: .28rem .55rem; border-radius: var(--r-small); background: rgba(242,129,29,.16); border: 1px solid rgba(242,129,29,.35); color: var(--peach); font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.shadow-icon-badge { width: 32px; height: 32px; border-radius: var(--r-small); display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); flex: 0 0 auto; }
.shadow-icon { width: 17px; height: 17px; color: var(--peach); }
.shadow-ring-card h3 { margin: 0 0 .65rem; font-family: var(--display); font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.shadow-ring-card p { margin: 0 0 .8rem; color: rgba(255,255,255,.78); font-size: .85rem; line-height: 1.5; }
.shadow-risk { margin: auto 0 0; font-size: .74rem; color: var(--peach); font-weight: 600; }
.shadow-carousel-controls { display: flex; align-items: center; gap: 1rem; }
.shadow-carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--noir-border); background: rgba(255,255,255,.05); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.shadow-carousel-btn:hover { background: rgba(242,129,29,.16); border-color: rgba(242,129,29,.5); }
.shadow-carousel-btn .icon { width: 18px; height: 18px; }
/* The dot stays 8px visually, but the button itself is a 24x24 target so the control meets
   WCAG 2.5.8 Target Size (Minimum) on its own rather than relying on the spacing exception --
   at 8px wide and 16px apart the old dots failed both halves of it. */
.shadow-carousel-dots { display: flex; gap: 0; align-items: center; }
.shadow-carousel-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.shadow-carousel-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s ease; }
.shadow-carousel-dots button.is-active::after { background: var(--orange); }
.shadow-banner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 20px; max-width: fit-content; margin-inline: auto; border-radius: var(--r-card); background: rgba(255,255,255,.04); border: 1px solid var(--noir-border); }
.shadow-banner p { margin: 0; font-weight: 700; font-size: 1rem; }

/* No 3D rotation on mobile or reduced motion: fall back to a static stacked list. */
@media (max-width: 850px), (prefers-reduced-motion: reduce) {
  .shadow-layout { display: block; }
  .shadow-figure { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 300px; min-height: 0; margin-bottom: .75rem; }
  .shadow-figure img { height: 100%; min-height: 0; object-position: left top; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.78) 62%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, rgba(0,0,0,.78) 62%, transparent 100%); }
  .shadow-scene { height: auto; perspective: none; }
  .shadow-ring { display: grid; gap: 1rem; width: 100%; max-width: 420px; height: auto; transform: none !important; transition: none; }
  .shadow-ring-card { position: relative; inset: auto; width: 100%; height: auto; transform: none !important; }
  .shadow-carousel-controls { display: none; }
  .shadow-ghost-title { display: none; }
}
body[data-motion="reduced"] .shadow-scene { height: auto; perspective: none; }
body[data-motion="reduced"] .shadow-ring { display: grid; gap: 1rem; width: 100%; max-width: 420px; height: auto; transform: none !important; transition: none; }
body[data-motion="reduced"] .shadow-ring-card { position: relative; inset: auto; width: 100%; height: auto; transform: none !important; }
body[data-motion="reduced"] .shadow-carousel-controls { display: none; }
/* Above the mobile breakpoint, lay reduced-motion cards out two-up instead of one long column. */
@media (min-width: 851px) {
  body[data-motion="reduced"] .shadow-ring { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}

/* ---------- use cases ---------- */
.use-cases { position: relative; isolation: isolate; overflow: hidden; }
.use-cases::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(242,129,29,.24) 1px, transparent 1px), radial-gradient(rgba(242,163,65,.16) 1px, transparent 1px); background-position: 0 0, 13px 13px; background-size: 26px 26px; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.35) 72%, transparent 100%); opacity: .5; }
.use-cases > .shell { position: relative; z-index: 1; }
/* Bento mosaic: one feature cell, two stacked cells, a wide cell, and a full-height workflow rail.
   The rail absorbs what used to be a separate horizontal workflow strip above the grid. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: .8rem; padding: .8rem; border: 1px solid rgba(255,255,255,.6); border-radius: var(--panel-radius); background: rgba(255,255,255,.4); }
/* The four use cases carry equal copy, so they sit as a balanced 2x2; only the rail spans,
   and it stretches its beats to fill rather than leaving the column half empty. */
.bento-a { grid-column: 1 / 5;  grid-row: 1; }
.bento-b { grid-column: 5 / 9;  grid-row: 1; }
.bento-c { grid-column: 1 / 5;  grid-row: 2; }
.bento-d { grid-column: 5 / 9;  grid-row: 2; }
.bento-e { grid-column: 9 / 13; grid-row: 1 / 3; }

.bento-cell { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: var(--card-pad-compact); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-card); background: rgba(255,255,255,.72); box-shadow: 0 10px 26px rgba(154,67,0,.08), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.bento-cell:hover { transform: translateY(-3px); border-color: rgba(242,129,29,.45); box-shadow: 0 18px 38px rgba(154,67,0,.16), inset 0 1px rgba(255,255,255,.85); }
.use-case-head { display: flex; flex-direction: column; gap: .55rem; }
.use-case-top { display: flex; align-items: center; gap: .6rem; }
.use-case-icon { width: 34px; height: 34px; border-radius: var(--r-small); background: rgba(242,129,29,.1); border: 1px solid rgba(242,129,29,.22); display: grid; place-items: center; color: var(--orange-accessible); flex: 0 0 auto; }
.use-case-tag { display: inline-flex; align-items: center; padding: .26rem .58rem; border-radius: 999px; background: rgba(242,129,29,.08); border: 1px solid rgba(242,129,29,.22); color: var(--orange); font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bento-cell h3 { margin: 0; font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; }
.bento-a h3 { font-size: 1.32rem; }
.bento-cell p { max-width: 58ch; margin: 0; color: var(--muted); font-size: .84rem; }
.use-case-workflow { padding: .7rem .8rem; border-radius: var(--r-inner); background: var(--cloud); font-size: .8rem; color: var(--muted); }
.use-case-workflow span { display: block; margin-bottom: .2rem; font-weight: 700; color: var(--ink); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.use-case-systems { margin-top: auto; padding-top: .2rem; font-family: var(--mono); font-size: .7rem; color: var(--muted); font-weight: 600; }

/* Workflow rail: vertical beats joined by a single hairline, spread to fill the spanned column. */
.bento-e { background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,244,233,.7)); }
.workflow-strip { list-style: none; position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; margin: .2rem 0 0; padding: 0 0 0 1.55rem; }
.workflow-strip::before { content: ""; position: absolute; left: .42rem; top: .9rem; bottom: .9rem; width: 1px; background: linear-gradient(180deg, rgba(242,129,29,.15), rgba(242,129,29,.5), rgba(242,129,29,.15)); }
.workflow-node { position: relative; padding: .6rem .75rem; border: 1px solid transparent; border-radius: var(--r-inner); background: var(--cloud); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.bento-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; margin-top: .9rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; color: var(--ink); font-weight: 700; font-size: .82rem; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.bento-cta:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.bento-cta span { transition: transform .25s ease; }
.bento-cta:hover span { transform: translateX(3px); }
.workflow-node::before { content: ""; position: absolute; left: -1.44rem; top: 1rem; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--orange); }
.workflow-node:hover { background: rgba(242,129,29,.1); border-color: rgba(242,129,29,.4); transform: translateX(2px); }
.workflow-index { display: block; margin-bottom: .3rem; color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); }
.workflow-node strong { display: block; font-size: .95rem; font-weight: 700; }
.workflow-node small { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* ---------- what's included (AI Governance page) ----------
   The two commercial phases, without prices or delivery tools. Phase 2 uses the
   handbook dialog's warm noir so the ongoing service reads as the heavier,
   continuing commitment; add-ons and boundaries sit quieter underneath. */
.package-phases { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.package-phase { display: grid; align-content: start; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--panel-radius); background: rgba(255, 255, 255, .86); box-shadow: 0 22px 50px rgba(79, 55, 32, .1); }
.package-phase--managed { color: #fff; border-color: transparent; background:
  radial-gradient(110% 60% at 10% 0%, rgb(var(--accent-warm) / .42), transparent 60%),
  radial-gradient(80% 50% at 100% 100%, rgb(var(--accent-amber) / .22), transparent 65%),
  var(--noir-warm); box-shadow: 0 30px 70px rgba(20, 11, 6, .3); }
.package-phase-head { display: grid; gap: .35rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.package-phase--managed .package-phase-head { border-bottom-color: rgba(255, 255, 255, .14); }
.package-phase-step { justify-self: start; padding: .3rem .65rem; border-radius: 999px; background: rgb(var(--accent-warm) / .14); color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.package-phase--managed .package-phase-step { background: rgb(var(--accent-warm) / .22); color: var(--peach); }
.package-phase h3 { margin: 0; font: 700 clamp(1.45rem, 2.6vw, 1.85rem)/1.1 var(--display); letter-spacing: -.02em; }
.package-phase-meta { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 500; }
.package-phase--managed .package-phase-meta { color: rgba(255, 255, 255, .72); }
.package-group { display: grid; gap: .55rem; }
.package-stage { margin: 0; color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.package-phase--managed .package-stage { color: var(--peach); }
.package-group ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.package-group li { position: relative; padding-left: 1.6rem; font-size: .92rem; line-height: 1.45; }
.package-group li::before { content: ""; position: absolute; left: 0; top: .12rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: rgb(var(--accent-warm) / .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b35a0c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .62rem no-repeat; }
.package-phase--managed .package-group li { color: rgba(255, 255, 255, .92); }
.package-phase--managed .package-group li::before { background-color: rgb(var(--accent-warm) / .28); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7bd6e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.package-phase-close { align-self: end; margin: 0; padding: .9rem 1rem; border-radius: var(--r-inner); background: rgb(var(--accent-warm) / .1); font-size: .9rem; line-height: 1.5; }
.package-phase--managed .package-phase-close { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .9); }
.package-phase-close strong { font-weight: 700; }
.package-then { align-self: center; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--orange-accessible); box-shadow: 0 10px 24px rgba(79, 55, 32, .12); }
.package-then .icon { width: 1.1rem; height: 1.1rem; }

.package-addons { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.package-addons h3, .package-boundaries h3 { margin: 0 0 .8rem; font: 700 1.05rem/1.2 var(--display); letter-spacing: -.01em; }
.package-addons ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.package-addons li { display: grid; gap: .35rem; padding: 1rem 1.1rem; border: 1px dashed rgba(27, 28, 28, .2); border-radius: var(--r-inner); background: rgba(255, 255, 255, .6); }
.package-addons strong { font: 700 .95rem/1.3 var(--display); }
.package-addons strong a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.package-addons span { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.package-boundaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: clamp(1.2rem, 2.4vw, 1.6rem); border-top: 1px solid var(--line); }
.package-boundaries p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }

@media (max-width: 900px) {
  .package-phases { grid-template-columns: 1fr; }
  .package-then { justify-self: center; transform: rotate(90deg); }
  .package-addons ul, .package-boundaries { grid-template-columns: 1fr; }
}

/* ---------- governance roadmap ---------- */
.governance-roadmap { position: relative; isolation: isolate; overflow: hidden; }
.governance-roadmap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(27,28,28,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(27,28,28,.045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.65) 28%, rgba(0,0,0,.25) 82%, transparent 100%); opacity: .508; }
.governance-roadmap > .shell { position: relative; z-index: 1; }
/* Stage 01 gets a tab per stage. On the home page's preview, clicking one opens
   that stage's callout in place; on the governance page the same stages are
   already real sections further down, so there `.roadmap-tab-link` is a plain
   anchor that jumps straight to the section instead of duplicating it in a callout. */
.roadmap-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem; margin-bottom: 1.25rem; }
.roadmap-tabs [role="tab"], .roadmap-tabs .roadmap-tab-link { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 44px; padding: .65rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; color: var(--muted); cursor: pointer; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.roadmap-tabs [role="tab"]:hover, .roadmap-tabs .roadmap-tab-link:hover { transform: translateY(-2px); border-color: rgba(242,129,29,.4); }
.roadmap-tabs [role="tab"][aria-selected="true"] { border-color: var(--orange); background: var(--orange); color: var(--ink); box-shadow: 0 12px 26px rgba(179,79,0,.16); }
.roadmap-tabs [role="tab"] strong, .roadmap-tabs .roadmap-tab-link strong { font: 700 1rem/1.1 var(--display); letter-spacing: -.01em; }
.roadmap-tabs .roadmap-number { margin-bottom: 0; }
.roadmap-number { display: block; color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.roadmap-tabs [role="tab"][aria-selected="true"] .roadmap-number { color: var(--ink); opacity: .75; }
/* Panels share a single grid cell so the container holds the tallest one's height;
   swapping tabs then changes nothing about the page's layout. visibility:hidden
   (not display:none) still removes the inactive panel from the a11y tree and tab order. */
.roadmap-panels { display: grid; align-items: start; overflow: hidden; transition: height .35s ease; }
@media (prefers-reduced-motion: reduce) { .roadmap-panels { transition: none; } }
.roadmap-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 42rem) 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(.75rem, 1.5vw, 1.125rem) clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.86); box-shadow: 0 8px 24px rgba(27,28,28,.05); }
.roadmap-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.roadmap-panel-body { min-width: 0; }
.roadmap-panel .roadmap-number { margin-bottom: .9rem; }
.roadmap-panel h3 { margin: 0 0 .9rem; font: 700 1.4rem/1.15 var(--display); letter-spacing: -.01em; }
.roadmap-panel p { max-width: 62ch; margin: 0 0 1rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }
.roadmap-panel-link { display: inline-block; margin-top: .5rem; color: var(--orange-accessible); font-size: .88rem; font-weight: 700; text-decoration: none; }
.roadmap-panel-link:hover { text-decoration: underline; }
/* The stage graphic reuses the service cards' gradient-chip language (`.way-art`)
   so a new illustration style isn't introduced just for the roadmap. */
.roadmap-panel-art { position: relative; display: grid; place-items: center; justify-self: center; width: clamp(198px, 21vw, 276px); aspect-ratio: 1; flex: 0 0 auto; border-radius: 1.35rem; overflow: hidden;
  background:
    radial-gradient(78% 88% at 76% 62%, rgb(var(--stage-glow)) 0%, rgb(var(--stage-glow) / 0) 62%),
    radial-gradient(66% 78% at 100% 2%, #fff 0%, rgb(255 255 255 / 0) 56%),
    radial-gradient(95% 105% at 0% 12%, rgb(var(--stage-soft)) 0%, rgb(var(--stage-soft) / 0) 72%),
    linear-gradient(118deg, rgb(var(--stage-soft)), rgb(var(--stage-mid)) 56%, rgb(var(--stage-glow)));
  box-shadow: 0 16px 34px rgba(154,67,0,.18);
}
.roadmap-panel-art .icon { width: 38%; height: 38%; color: #fff; filter: drop-shadow(0 4px 10px rgba(79,55,32,.3)); }
.roadmap-panel[data-stage="0"] { --stage-soft: 255 217 176; --stage-mid: 242 163 65; --stage-glow: 242 129 29; }
.roadmap-panel[data-stage="1"] { --stage-soft: 247 184 120; --stage-mid: 242 129 29; --stage-glow: 226 96 13; }
.roadmap-panel[data-stage="2"] { --stage-soft: 238 147 81;  --stage-mid: 224 106 12; --stage-glow: 179 74 6; }
.roadmap-panel[data-stage="3"] { --stage-soft: 224 118 59;  --stage-mid: 179 74 6;   --stage-glow: 133 51 3; }
.roadmap-panel-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: left; }
.roadmap-panel-foot p { margin: 0; font-weight: 700; font-size: 1rem; color: var(--ink); }
@media (max-width: 720px) {
  .roadmap-panel { grid-template-columns: 1fr; }
  .roadmap-panel-art { order: -1; width: 126px; justify-self: start; }
}
.roadmap-panel-link span { display: inline-block; transition: transform .25s ease; }
.roadmap-panel-link:hover span { transform: translateX(3px); }
/* Centered with the section heading above it: the roadmap now opens the page, and a
   left-aligned block under a centered heading read as a stray paragraph. */
.roadmap-supporting { max-width: 62ch; margin: 2rem 0 .5rem; text-align: left; color: var(--muted); font-size: 1rem; text-wrap: pretty; }
.roadmap-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding: 1.15rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.7); }
.roadmap-foot[hidden] { display: none; }
.roadmap-foot p { margin: 0; font-weight: 700; font-size: 1rem; }

/* ---------- stage handoffs ---------- */
/* Every stage closes with what it produces and a link into the next one, so the
   page reads as one sequence rather than a stack of unrelated pitches. */
.stage-next { position: relative; max-width: 74ch; margin: 2.5rem 0 0; padding-top: 1.25rem; color: var(--muted); font-size: .95rem; text-align: left; text-wrap: pretty; }
.stage-next::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; max-width: 420px; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.stage-next a { color: var(--orange-accessible); font-weight: 700; text-decoration: none; white-space: normal; }
.stage-next a:hover { text-decoration: underline; }
.stage-next a span { display: inline-block; transition: transform .25s ease; }
.stage-next a:hover span { transform: translateX(3px); }
.stage-next-dark::before { background: linear-gradient(90deg, var(--noir-border), transparent); }
.stage-next-dark { color: rgba(255,255,255,.7); }
.stage-next-dark a { color: var(--amber); }

/* ---------- stage 03: monitoring ---------- */
.monitoring { position: relative; isolation: isolate; overflow: clip; }
/* Sweep lines: a quiet nod to something being watched, kept well under the text. */
.monitoring::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 62% 46% at 50% 42%, rgba(242,129,29,.13), transparent 76%), repeating-linear-gradient(90deg, transparent 0, transparent 118px, rgba(242,129,29,.07) 119px, transparent 120px); }
.monitoring > .shell { position: relative; z-index: 1; }
.watch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.watch-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.65rem 1.5rem 1.9rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.watch-card:hover { transform: translateY(-5px); border-color: rgba(242,129,29,.45); box-shadow: 0 26px 52px rgba(79,55,32,.16); }
.watch-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--orange), var(--amber)); opacity: .55; }
.watch-tag { align-self: flex-start; margin-bottom: .75rem; padding: .3rem .65rem; border: 1px solid rgba(242,129,29,.25); border-radius: 999px; background: rgba(242,129,29,.1); color: var(--orange-accessible); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.watch-card h3 { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 700; letter-spacing: -.015em; }
.watch-card > p { margin: 0 0 1.1rem; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.watch-card ul { list-style: none; margin: auto 0 0; padding: 0; display: grid; font-size: .82rem; }
.watch-card li { display: flex; align-items: center; gap: .55rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.watch-card li .icon { color: var(--orange-accessible); flex: 0 0 auto; }
.watch-flow { margin-top: 1.25rem; padding: var(--card-pad-spacious); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.7); }
.watch-flow-title { margin: 0 0 1.1rem; font-weight: 700; font-size: 1.02rem; }
.watch-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: watch; }
.watch-flow-steps li { position: relative; padding-left: 2.6rem; }
.watch-flow-steps li:not(:last-child)::after { content: '\2192'; position: absolute; right: -.6rem; top: .1rem; color: var(--orange-accessible); font-weight: 700; }
.watch-flow-num { position: absolute; left: 0; top: -.05rem; display: inline-flex; align-items: center; justify-content: center; width: 1.95rem; height: 1.95rem; border: 1px solid rgba(242,129,29,.3); border-radius: 50%; background: rgba(242,129,29,.09); color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); }
.watch-flow-steps strong { display: block; font-size: .98rem; font-weight: 700; }
.watch-flow-steps span:not(.watch-flow-num) { display: block; margin-top: .2rem; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* ---------- stage 04: educate ---------- */
.educate { position: relative; isolation: isolate; overflow: clip; }
.educate::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 64% 46% at 50% 42%, rgba(242,163,65,.16), transparent 76%); }
.educate > .shell { position: relative; z-index: 1; }
/* Stage sections that read as heading-on-the-left, cards stacked on the right. */
.stage-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem 3rem; align-items: start; }
.stage-split > .section-heading { margin-bottom: 0; }
.stage-split > .watch-grid, .stage-split > .learn-grid { grid-template-columns: 1fr; }

.learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.learn-card { position: relative; padding: var(--card-pad-spacious); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.8); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.learn-card:hover { transform: translateY(-5px); border-color: rgba(242,129,29,.4); box-shadow: 0 22px 44px rgba(79,55,32,.14); }
.learn-num { display: block; margin-bottom: .8rem; color: var(--orange-accessible); font: 700 .8rem/1 var(--mono); letter-spacing: .08em; }
.learn-card h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.learn-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
/* Sequential steps read as a timeline, not another grid of cards: a rail across
   the top of each row with the step number sitting on it. */
.learn-grid--timeline { row-gap: 2.6rem; column-gap: 1.8rem; padding-top: 1.1rem; }
.learn-grid--timeline .learn-card { padding: 1.9rem 0 0; border: 0; border-top: 2px solid rgb(var(--accent-warm) / .35); border-radius: 0; background: none; box-shadow: none; }
.learn-grid--timeline .learn-card:hover { transform: none; box-shadow: none; }
.learn-grid--timeline .learn-num { position: absolute; top: -1.1rem; left: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin: 0; border: 2px solid var(--orange); border-radius: 50%; background: #fffdfb; font-size: .74rem; letter-spacing: 0; }
.learn-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 1.35rem 1.65rem; border: 1px solid rgba(242,129,29,.28); border-radius: var(--r-card); background: rgba(255,255,255,.72); }
.learn-banner-title { margin: 0; font-weight: 700; font-size: 1.02rem; }
.learn-banner-copy { margin: .3rem 0 0; color: var(--muted); font-size: .88rem; }
/* Business-type marquee, flush against the hero's bottom edge (no top padding
   of its own, so the section boundary alone separates them). The list is
   duplicated once in markup and the track animates by exactly -50%, so the
   loop is seamless regardless of how wide the content ends up being. The
   "Who we serve" label lives in the hero itself, right above this band. */
.sectors-marquee { padding: 0 0 clamp(.9rem, 1.6vw, 1.6rem); background: transparent; }
.sectors-marquee .shell { padding-top: 8px; }
.sectors-marquee-cta { max-width: 620px; margin-inline: auto; text-align: center; }
.sectors-marquee-cta p { margin: 0 0 1.1rem; color: var(--muted); font-size: .96rem; line-height: 1.6; }
/* Same 14px side inset as .hero, so the band is contained to the hero-panel's
   width instead of running edge-to-edge past the page. */
.marquee-inset { padding: 0 14px; }
/* Same dot-grid texture as .hero-panel::before (radial-gradient dots at the
   same 6px pitch), just on the dark ink base instead of orange, so the band
   still reads as part of the hero's material even though it's a different
   colour underneath it. */
.marquee-band {
  position: relative; overflow: hidden;
  border-radius: 0 0 clamp(18px, 2vw, 30px) clamp(18px, 2vw, 30px);
  background-color: var(--ink);
  background-image: radial-gradient(rgb(255 255 255 / .14) 1px, transparent 1px);
  background-size: 6px 6px;
}
.marquee-band::before, .marquee-band::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: clamp(48px, 9vw, 140px); pointer-events: none; }
.marquee-band::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(34,34,34,0)); }
.marquee-band::after { right: 0; background: linear-gradient(270deg, var(--ink), rgba(34,34,34,0)); }
.marquee-row { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; animation-play-state: paused; }
.marquee-track { display: flex; flex: 0 0 auto; align-items: center; gap: 0; margin: 0; padding: .95rem 0; list-style: none; }
.marquee-track li { display: flex; align-items: center; gap: .6rem; padding: 0 1.9rem; white-space: nowrap; font: 700 1.02rem/1 var(--display); color: rgb(255 255 255 / .92); border-right: 1px solid rgb(255 255 255 / .14); }
.marquee-track li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
body[data-motion="full"] .marquee-row { animation-play-state: running; }
.marquee-band:hover .marquee-row, .marquee-band:focus-within .marquee-row { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }

/* ---------- who we serve ---------- */
.government { position: relative; isolation: isolate; overflow: hidden; }
.government::before { content: ""; position: absolute; width: min(58vw, 760px); aspect-ratio: 1; right: -14vw; top: 50%; transform: translateY(-50%); border: 1px solid rgba(242,129,29,.16); border-radius: 50%; box-shadow: 0 0 0 72px rgba(242,129,29,.04), 0 0 0 144px rgba(242,163,65,.035), 0 0 0 216px rgba(242,129,29,.025); pointer-events: none; }
.government::after { content: ""; position: absolute; width: 8px; height: 8px; right: 18%; top: 38%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(242,129,29,.1), -110px 92px 0 -1px var(--amber), -210px -70px 0 -2px var(--orange); opacity: .62; pointer-events: none; }
.government > .shell { position: relative; z-index: 1; }
/* Tabs start on the section's left text edge rather than centering in the shell, so they line
   up with the eyebrow, heading, and lede above them. */
.government-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem; margin-bottom: 1.25rem; }
.government-tabs [role="tab"] { min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 700; cursor: pointer; }
.government-tabs [role="tab"][aria-selected="true"] { border-color: var(--orange); background: var(--orange); color: var(--ink); }
/* Keep the two recreation-district audiences visible; four secondary industry
   tabs stay one click away so the selector remains scannable. */
.government-tabs-more { min-height: 44px; padding: .7rem 1rem; border: 1px dashed var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; }
.government-tabs-more:hover, .government-tabs-more:focus-visible { border-color: rgba(242,129,29,.5); color: var(--orange-accessible); }
.government-tabs-more[hidden] { display: none; }
.government-panels [data-government-panel] { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-card); background: rgba(255,255,255,.84); }
/* Panels share a single grid cell so the container holds the tallest one's height; swapping
   tabs then changes nothing about the page's layout, which is what caused the jump.
   visibility:hidden (not display:none) still removes the inactive panels from the
   accessibility tree and from the tab order. Selector targets [data-government-panel],
   not the article element: role="tabpanel" is not an allowed ARIA role override for
   <article> (axe aria-allowed-role), so these panels are <div>s now. */
.government-panels { display: grid; }
.government-panels [data-government-panel] { grid-area: 1 / 1; }
.government-panels [data-government-panel][hidden] { display: block; visibility: hidden; pointer-events: none; }
.government-panels h3 { margin: 0 0 1.2rem; font-size: 1.6rem; }
.government-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* The list already has a top rule, so a border under the final row left a divider with
   nothing beneath it. */
.government-grid > div { padding: 1rem; border-radius: var(--r-inner); background: var(--cloud); }
.government-grid h4 { margin: 0 0 .35rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--orange-accessible); }
.government-grid p { max-width: 58ch; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.government-positioning { max-width: 48ch; margin: 1.25rem 0 0; font: 700 1rem/1.4 var(--display); }

/* Audience panels lead with a decision, not a repeated service catalog. */
.serve-panel-head { margin-bottom: 1.4rem; }
.serve-panel-head h3 { margin: 0; }
.serve-opening { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 1rem; align-items: stretch; }
.serve-pressure, .serve-start { padding: clamp(1rem, 2.2vw, 1.4rem); border-radius: var(--r-inner); }
.serve-pressure { border: 1px solid var(--line); background: rgba(255,255,255,.72); }
.serve-start { border: 1px solid rgba(242,129,29,.28); background: linear-gradient(135deg, rgba(242,129,29,.13), rgba(242,163,65,.06)); }
.serve-pressure h4, .serve-opportunities > h4, .serve-care h4, .questions-section summary h4 { margin: 0 0 .55rem; color: var(--orange-accessible); font: 700 .73rem/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.serve-pressure p, .serve-start p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.serve-start > span { display: block; margin-bottom: .35rem; color: var(--orange-accessible); font: 700 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.serve-start h4 { margin: 0 0 .5rem; font-size: 1.05rem; }
.serve-start h4 a { color: var(--ink); text-decoration-color: rgba(242,129,29,.55); text-underline-offset: .2em; }
.serve-start .serve-next { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(242,129,29,.2); color: var(--ink); font-size: .79rem; font-weight: 650; }
.serve-opportunities { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.serve-opportunities > h4 { margin-bottom: .8rem; }
.serve-opportunities ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.serve-opportunities li { position: relative; min-height: 68px; padding: .85rem .85rem .85rem 2rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: rgba(255,255,255,.66); color: var(--ink); font-size: .83rem; font-weight: 650; line-height: 1.42; }
.serve-opportunities li::before { content: ""; position: absolute; left: .8rem; top: 1rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(242,129,29,.1); }
.serve-care { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.6rem; padding: clamp(1rem, 2.2vw, 1.4rem); border-radius: var(--r-inner); background: var(--cloud); }
.serve-care ul { margin: 0; padding-left: 1.1rem; }
.serve-care li { margin-bottom: .45rem; color: var(--muted); font-size: .86rem; line-height: 1.48; }
.serve-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.serve-tags span { padding: .3rem .62rem; border: 1px solid rgba(242,129,29,.2); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--orange-accessible); font-size: .7rem; font-weight: 700; }
.questions-section { align-self: start; border-top: 1px solid var(--line); padding-top: 1rem; }
.questions-section summary { cursor: pointer; list-style-position: outside; }
.questions-section summary h4 { display: inline; }
.questions-section summary:hover h4, .questions-section summary:focus-visible h4 { color: var(--orange); }
.questions-section ul { margin-top: .8rem; }
.serve-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: 1rem 1.15rem; border-top: 2px solid var(--ink); }
.serve-cta p { max-width: 64ch; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.serve-cta p strong { color: var(--ink); }
.serve-cta .button { flex: 0 0 auto; }

/* ---------- approach: chip board ---------- */
.approach { position: relative; isolation: isolate; overflow: hidden; }
.approach::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 64% 46% at 50% 42%, rgba(242,129,29,.12), transparent 76%); }

.board { --trace: clamp(.75rem, 2.5vw, 2.25rem); position: relative; padding: 1rem 0 .5rem; }

/* The bus every branch taps off, with a single pulse riding it. */
.board-spine { position: absolute; z-index: 1; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, rgba(242,129,29,0), rgba(242,129,29,.5) 6%, rgba(242,129,29,.5) 94%, rgba(242,129,29,0)); }
/* Full-height rail carrying a fixed-size glow at its top edge, so the travel is one
   compositor-only transform. Animating `top` re-ran layout every frame, which is what made
   the old version stutter. Linear timing keeps the energy at a constant speed. */
.board-pulse { position: absolute; left: 50%; top: 0; width: 4px; height: 100%; transform: translate(-50%, -40px); opacity: 0; will-change: transform; pointer-events: none; }
.board-pulse::before { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(242,129,29,.9), 0 0 26px 8px rgba(242,129,29,.4); }
/* A short comet tail behind the head, so the pulse reads as direction of travel. */
.board-pulse::after { content: ""; position: absolute; left: 50%; top: -26px; width: 3px; height: 30px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, rgba(242,129,29,0), rgba(242,129,29,.75)); }
body[data-motion="full"] .board-pulse { animation: board-surge 5.4s linear infinite; }
@keyframes board-surge {
  0% { transform: translate(-50%, -40px); opacity: 0; }
  4% { opacity: 1; }
  72% { opacity: 1; }
  80%, 100% { transform: translate(-50%, 100%); opacity: 0; }
}

.board-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.1rem, 2.4vw, 2rem); }
/* Card one side, silkscreen numeral the other, alternating down the bus. */
.board-step { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 4.5rem); }

/* Branch trace from the bus out to the chip, with a pad where they meet. */
.board-step::before { content: ""; position: absolute; z-index: 0; top: 50%; width: var(--trace); height: 2px; background: rgba(242,129,29,.5); transition: background .25s ease, box-shadow .25s ease; }
.board-step:nth-child(odd)::before { right: 50%; }
.board-step:nth-child(even)::before { left: 50%; }
.board-node { position: absolute; z-index: 3; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--orange); box-shadow: 0 0 0 4px rgba(242,129,29,.12), 0 0 12px rgba(242,129,29,.45); }

.board-step-index { justify-self: center; font-family: var(--mono); font-variant-numeric: slashed-zero; font-feature-settings: "zero" 1; font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: rgba(242,129,29,.16); user-select: none; }
/* Even rows keep source order (numeral left, chip right); odd rows swap. */
.board-step:nth-child(odd) .board-step-index { order: 2; }

/* The chip itself: frosted body with a silkscreen ref and a row of pins down one edge. */
.board-chip { position: relative; padding: var(--card-pad-compact); border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-inner); background: rgba(255,255,255,.78); box-shadow: 0 14px 34px rgba(154,67,0,.1), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.board-chip:hover { transform: translateY(-3px); border-color: rgba(242,129,29,.4); box-shadow: 0 20px 44px rgba(154,67,0,.16), inset 0 1px rgba(255,255,255,.85); }
.board-chip-pins { position: absolute; top: 1.1rem; bottom: 1.1rem; width: 5px; background: repeating-linear-gradient(180deg, rgba(242,129,29,.55) 0 7px, transparent 7px 15px); }
.board-step:nth-child(odd) .board-chip-pins { right: -5px; border-radius: 0 3px 3px 0; }
.board-step:nth-child(even) .board-chip-pins { left: -5px; border-radius: 3px 0 0 3px; }
.board-chip h3 { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.board-chip-ref { font: 700 .7rem/1 var(--mono); letter-spacing: .08em; color: var(--orange-accessible); padding: .25rem .45rem; border: 1px solid rgba(242,129,29,.35); border-radius: var(--r-small); background: rgba(242,129,29,.08); }
.board-chip p { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--muted); }

/* Hovering a chip sends a spark down its branch and lifts the whole tap. */
.board-step:has(.board-chip:hover)::before { background: var(--orange); box-shadow: 0 0 10px rgba(242,129,29,.7); }
.board-step:has(.board-chip:hover) .board-node { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 0 6px rgba(242,129,29,.16), 0 0 22px rgba(242,129,29,.85); }
.board-step:has(.board-chip:hover) .board-step-index { color: rgba(242,129,29,.34); }
.board-step:has(.board-chip:hover) .board-chip { transform: translateY(-3px); border-color: rgba(242,129,29,.5); box-shadow: 0 20px 44px rgba(154,67,0,.18), 0 0 0 1px rgba(242,129,29,.28), inset 0 1px rgba(255,255,255,.9); }
.board-step:has(.board-chip:hover) .board-chip-pins { background: repeating-linear-gradient(180deg, var(--orange) 0 7px, transparent 7px 15px); }
.board-step::after { content: ""; position: absolute; z-index: 4; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(242,129,29,.9); opacity: 0; pointer-events: none; }
.board-step:nth-child(odd):has(.board-chip:hover)::after { animation: board-spark-left .62s ease-out infinite; }
.board-step:nth-child(even):has(.board-chip:hover)::after { animation: board-spark-right .62s ease-out infinite; }
@keyframes board-spark-left { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(calc(-1 * var(--trace))); opacity: 0; } }
@keyframes board-spark-right { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(var(--trace)); opacity: 0; } }
.board-step-index { transition: color .25s ease; }
.board-chip-pins { transition: background .25s ease; }

@media (max-width: 760px) {
  .board-spine { left: 13px; }
  .board-step { grid-template-columns: 1fr; gap: .5rem; padding-left: 2.25rem; }
  .board-step:nth-child(even) { direction: ltr; }
  .board-step::before, .board-step:nth-child(odd)::before, .board-step:nth-child(even)::before { left: 13px; right: auto; width: 1.4rem; }
  .board-node { left: 13px; }
  .board-step-index, .board-step:nth-child(odd) .board-step-index { order: -1; justify-self: start; font-size: 1.6rem; }
  .board-chip-pins, .board-step:nth-child(odd) .board-chip-pins, .board-step:nth-child(even) .board-chip-pins { left: -5px; right: auto; border-radius: 3px 0 0 3px; }
}
@media (prefers-reduced-motion: reduce) { .board-pulse, .board-step::after { animation: none !important; opacity: 0; } }
/* ---------- final cta ---------- */
.final-cta { position: relative; isolation: isolate; overflow: hidden; }
.final-cta::before { content: none; }
.final-cta > .shell { position: relative; z-index: 1; }
.final-cta-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: 1.3fr .7fr; gap: 2.5rem; align-items: center; border: 0; border-radius: var(--panel-radius); background: linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%); box-shadow: 0 24px 60px rgba(194,90,10,.25); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); }
.final-cta-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dots); background-size: var(--dots-size); opacity: .55; }
/* Same bloom as the hero, scaled down and tucked behind the card. */
.final-cta-panel::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -30%; width: min(900px, 110%); height: 70%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 58% 100% at 50% 100%, rgba(255,246,228,.9) 0%, rgba(255,214,150,.6) 30%, rgba(242,163,65,0) 72%); }
.final-cta-panel > * { position: relative; z-index: 1; }
/* Ink on orange, not white: white text on this orange is about 2.6:1, below AA. */
.final-cta .eyebrow { color: rgb(34 34 34 / .8); }
.final-cta-copy h2 { max-width: 560px; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.final-cta-copy p { max-width: 640px; color: var(--ink); margin-bottom: 1.25rem; }
.final-cta-badges { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .78rem; font-weight: 700; }
.final-cta-badges { color: var(--ink); }
.final-cta-badges span { display: inline-flex; align-items: center; gap: .4rem; } .final-cta-badges .icon { color: var(--ink); }
.final-cta-box { background: #fff; border-radius: var(--r-card); padding: 1.5rem; border: 0; box-shadow: 0 18px 40px rgba(120,52,0,.28); text-align: center; display: grid; gap: .8rem; align-content: center; }
.final-cta-label { font: 700 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.final-cta-phone { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 1.5rem; font-weight: 700; color: var(--orange-accessible); text-decoration: none; font-family: var(--display); letter-spacing: -.01em; }
.final-cta-phone:hover { text-decoration: underline; }
.final-cta-button { width: 100%; }
.final-cta-note { margin: 0; font-size: .72rem; color: var(--muted); }
/* A lower-commitment next step for visitors who aren't ready to book a call. */
.final-cta-alt { display: block; margin-top: .2rem; padding-top: .85rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .84rem; text-decoration: none; }
.final-cta-alt strong { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.final-cta-alt:hover strong, .final-cta-alt:focus-visible strong { text-decoration-thickness: 2px; }

/* ---------- footer ---------- */
/* Footer.
   Was a single wrapping flex row holding a logo and three label+link groups, so
   every group's label sat inline with its own links and the whole thing reflowed
   into an unreadable three-row jumble. It is a column grid now: one brand block
   and three short link lists, each capped at four links so the footer stops
   competing with the page above it. */
.site-footer { border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) 0 1.75rem; }
.site-footer-top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line);
}
.footer-brand { display: grid; justify-items: start; gap: .9rem; }
.footer-brand .brand-logo { width: 168px; height: auto; }
.footer-blurb { margin: 0; max-width: 34ch; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.footer-phone { font: 700 1.05rem/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.footer-phone:hover { color: var(--orange-accessible); }
.footer-phone-note { margin: .2rem 0 0; font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.footer-cta { margin-top: .2rem; border-radius: 999px; }

.footer-col-title { margin: 0 0 .9rem; font: 700 .7rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-size: .85rem; color: var(--muted); text-decoration: none;
}
.footer-col a:hover { color: var(--orange-accessible); text-decoration: underline; }

.site-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding-top: 1.5rem; font-size: .74rem; color: var(--muted);
}
.site-footer-bottom p { margin: 0; }
.site-footer-bottom .footer-meta { font-family: var(--mono); font-size: .7rem; }
.site-footer-bottom address { font-style: normal; }
.site-footer-bottom a { color: inherit; text-decoration-color: rgba(242,129,29,.6); text-underline-offset: 3px; }
.site-footer-bottom .footer-meta:last-child { margin-left: auto; text-align: right; }

@media (max-width: 900px) {
  .site-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer-top { grid-template-columns: 1fr; }
  .site-footer-bottom .footer-meta:last-child { margin-left: 0; text-align: left; }
}

/* ---------- about the practice ---------- */
body[data-page="about"] .ghost-widget { display: none; }

.about-intro-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.about-intro-copy .section-heading { margin-bottom: 1.5rem; }
.about-intro-body { display: grid; gap: 1rem; max-width: 68ch; }
.about-intro-body p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.about-intro-body .about-principle { margin: .6rem 0 0; padding: 1.1rem 0 0 1.2rem; border-top: 1px solid var(--line); border-left: 3px solid var(--orange); color: var(--ink); font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.4; }
.about-principle strong { color: var(--orange-accessible); }
.about-proof-list { margin: 0; border-top: 2px solid var(--ink); }
.about-proof-list div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.about-proof-list dt { color: var(--orange-accessible); font: 700 .73rem/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.about-proof-list dd { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

.about-case { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--panel-radius); background: rgba(255,255,255,.76); box-shadow: 0 18px 42px rgba(70,34,8,.07); }
.about-case-label { margin: 0 0 .65rem; color: var(--orange-accessible); font: 700 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.about-case-lead h3 { margin: 0 0 1rem; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; }
.about-case-lead > p:last-child { margin: 0; color: var(--muted); line-height: 1.7; }
.about-case-points { border-top: 2px solid var(--ink); }
.about-case-points section { display: grid; grid-template-columns: minmax(8rem, .7fr) 1fr; gap: 1rem; align-items: start; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.about-case-points h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.about-case-points p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.about-teaching { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.about-teaching h3 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.about-teaching p { margin: 0; color: var(--muted); line-height: 1.65; }
.about-teaching ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.about-teaching li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.about-teaching li span { color: var(--orange-accessible); font: 700 .7rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.about-teaching li strong { font-size: .9rem; line-height: 1.5; }

.about-practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-practice-grid > .section-heading { margin-bottom: 0; }
.about-boundary { max-width: 68ch; margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; line-height: 1.6; text-align: left; }

.why-badges { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.5rem 0 0; }
.why-badges span { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .86rem; font-weight: 700; }
.why-badges .icon { width: 18px; height: 18px; flex: none; color: var(--orange-accessible); }

.method-lede { max-width: 70ch; }
.method-foot { margin-top: 2rem; }
@media (max-width: 600px) { .why-badges { gap: .5rem 1rem; } }

.journey { margin: 0; padding: 1.9rem 1.75rem 1.6rem; }
.journey-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.journey-head strong { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.journey-head span { font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-accessible); }
.journey-track { list-style: none; position: relative; margin: 0; padding: 0 0 0 2.15rem; }
.journey-track::before { content: ""; position: absolute; left: .43rem; top: .45rem; bottom: .45rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(var(--accent-warm) / .85), rgb(var(--accent-amber) / .75)); }
.journey-step { position: relative; padding-bottom: 1.35rem; }
.journey-step:last-child { padding-bottom: 0; }
.journey-dot { position: absolute; left: -2.15rem; top: .12rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(242,129,29,.12); }
.journey-step:last-child .journey-dot { background: var(--orange); box-shadow: 0 0 0 4px rgba(242,129,29,.18); }
.journey-step strong { display: block; font-size: .94rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.journey-step > span { display: block; margin-top: .2rem; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.journey-branch { display: flex; align-items: center; gap: .5rem; margin: .7rem 0 0; color: var(--muted); font-size: .74rem; font-style: italic; }
.journey-branch::before { content: ""; flex: 0 0 42px; height: 0; border-top: 1.5px dashed rgba(89,89,89,.42); }
.journey-branch-dot { flex: none; width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid rgba(89,89,89,.42); background: transparent; }
.journey-base { margin: 1.5rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); font: 700 .7rem/1.5 var(--mono); letter-spacing: .04em; }
@media (max-width: 1050px) {

  .journey { padding: 1.6rem 1.35rem 1.35rem; }
}

/* Homepage FAQ: same collapsed-by-default arrow pattern as
   .resource-card-includes, reused here for a full-width accordion instead
   of a card's inline detail list. */
/* Nothing sits beside the accordion, so the column is centred in the shell rather
   than left-anchored with dead space down the right of the section. */
.faq-list { display: grid; gap: .75rem; max-width: 76ch; margin-inline: auto; }
/* Ten questions is too many to scan as one run, so they sit in three labelled groups. */
.faq-group { margin: 1.4rem 0 .1rem; color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.faq-group:first-child { margin-top: 0; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; padding: 0 1.35rem; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; color: var(--ink); font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item summary:focus-visible { outline: 3px solid rgba(242,129,29,.3); outline-offset: 2px; }
.faq-item p { margin: 0 0 1.1rem; color: var(--muted); font-size: .94rem; line-height: 1.65; }

/* Same solid-orange panel recipe as the homepage's final "AI isn't separate
   from your network infrastructure" CTA (.final-cta-panel), so the site's
   closing CTA reads the same wherever it appears. */
.about-reach-panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
  padding: clamp(2rem, 5vw, 4rem); border-radius: var(--panel-radius); color: var(--ink);
  background: linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
  box-shadow: 0 24px 60px rgba(194,90,10,.25);
}
.about-reach-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dots); background-size: var(--dots-size); opacity: .55; }
.about-reach-panel::after { content: ""; position: absolute; z-index: 0; left: 50%; bottom: -30%; width: min(900px, 110%); height: 70%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 58% 100% at 50% 100%, rgba(255,246,228,.55) 0%, rgba(255,214,150,.32) 30%, rgba(242,163,65,0) 72%); }
.about-reach-panel > * { position: relative; z-index: 1; }
/* Same eyebrow/heading/body treatment as .final-cta-panel, so every orange
   banner on the site reads with one consistent typographic voice. */
.about-reach-panel .eyebrow { color: rgb(34 34 34 / .8); }
.about-reach-panel h2 { max-width: 18ch; margin: 0 0 .75rem; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.about-reach-panel p { max-width: 70ch; margin: 0; color: var(--ink); line-height: 1.65; }
/* Same white-on-orange primary button as every other orange banner
   (.hero, .page-hero): white fill/ink text at rest, ink fill/white text on
   hover, white focus ring — one accessible, consistent recipe. */
.about-reach-panel .button-primary { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.58); color: var(--ink); border-color: rgba(255,255,255,.75); }
.about-reach-panel .button-primary:hover, .about-reach-panel .button-primary:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 60%), rgb(34 34 34 / .85); color: #fff; border-color: var(--ink); }
.about-reach-panel .button:focus-visible { outline-color: #fff; }
.approach-summary { margin-bottom: 0; }

/* About: the team, grouped by what each group does on a client project. */
.about-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.about-team-group { padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--panel-radius); background: #fff; box-shadow: 0 18px 42px rgba(70,34,8,.07); }
.about-team-group h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.about-team-group > p { margin: 0 0 1.2rem; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.about-team-group ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.about-team-group li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.about-team-group li strong { font-size: .92rem; }
.about-team-group li span { color: var(--muted); font-size: .82rem; }
.about-practice .about-proof-list { margin-top: 1.75rem; }
/* About hero: you only ever deal with Vince, and the whole team rings him.
   Your line runs through a gap in the ring straight to him. Sits on the
   orange, no card. Lines are white, nodes and labels ink. The ring's colors
   match the key underneath. */
.crew { --ring: 20rem; --dot: 2.65rem; --start: -140deg; --step: 25.45deg; margin: 0; color: var(--ink); }
.crew-map { display: grid; grid-template-columns: auto minmax(5.5rem, 9rem) var(--ring); align-items: center; justify-content: start; }
.crew-you { position: relative; }
.crew-node { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.crew-you .crew-node { border: 2px solid #fff; background: rgb(255 255 255 / .3); }
.crew-you .icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.crew-you > b, .crew-hub > b { position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .86rem; }
.crew-link { position: relative; align-self: center; height: 2px; background: #fff; transform-origin: left; }
.crew-link span { position: absolute; bottom: .55rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; font-weight: 700; }
.crew-ring { position: relative; width: var(--ring); aspect-ratio: 1; }
.crew-ring::before { content: ""; position: absolute; inset: calc(var(--dot) / 2); border: 2px dashed rgb(255 255 255 / .7); border-radius: 50%; background: rgb(255 255 255 / .12); }
.crew-ring::after { content: ""; position: absolute; top: 50%; left: 0; width: 50%; height: 2px; margin-top: -1px; background: #fff; transform-origin: left; }
.crew-team { margin: 0; padding: 0; list-style: none; }
.crew-team li { --a: calc(var(--start) + var(--i) * var(--step)); position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2); border-radius: 50%; font: 700 .7rem/1 var(--body); box-shadow: 0 6px 14px -8px rgb(84 26 0 / .6); transform: rotate(var(--a)) translateX(calc(var(--ring) / 2 - var(--dot) / 2)) rotate(calc(var(--a) * -1)); }
.crew-hub { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); }
.crew-hub .crew-node { width: 5rem; height: 5rem; background: var(--ink); color: #fff; font: 700 1.35rem/1 var(--display); box-shadow: 0 0 0 6px rgb(255 255 255 / .6), 0 20px 34px -14px rgb(84 26 0 / .65); }
.crew-hub > b { top: calc(100% + .9rem); }
.crew-team .is-ai { background: var(--ink); color: #fff; }
.crew-team .is-sys { background: #fff; color: var(--ink); }
.crew-team .is-desk { background: #ffd8b5; color: var(--ink); }
.crew-key { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .86rem; font-weight: 700; }
.crew-key li { display: flex; align-items: center; gap: .45rem; }
.crew-key li::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
.crew-key .is-ai::before { background: var(--ink); }
.crew-key .is-sys::before { background: #fff; }
.crew-key .is-desk::before { background: #ffd8b5; }
.crew-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(34 34 34 / .25); font-size: .9rem; font-weight: 700; }

/* Plays once on load: you, the line to Vince, Vince, then the team fills in around him. */
@keyframes crew-grow-x { from { transform: scaleX(0); } }
@keyframes crew-grow-y { from { transform: scaleY(0); } }
@keyframes crew-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes crew-fade { from { opacity: 0; } }
body[data-motion="full"] .crew-you .crew-node { animation: crew-pop .4s ease-out both; }
body[data-motion="full"] .crew-link { animation: crew-grow-x .4s .3s ease-in both; }
body[data-motion="full"] .crew-ring::after { animation: crew-grow-x .3s .7s ease-out both; }
body[data-motion="full"] .crew-hub .crew-node { animation: crew-pop .45s .95s cubic-bezier(.3,1.4,.5,1) both; }
body[data-motion="full"] .crew-you > b, body[data-motion="full"] .crew-hub > b, body[data-motion="full"] .crew-link span { animation: crew-fade .4s 1.1s ease-out both; }
body[data-motion="full"] .crew-ring::before { animation: crew-fade .6s 1.2s ease-out both; }
body[data-motion="full"] .crew-team li { animation: crew-fade .35s calc(1.35s + var(--i) * .07s) ease-out both; }
body[data-motion="full"] .crew-key, body[data-motion="full"] .crew-facts { animation: crew-fade .5s 2.3s ease-out both; }

/* Phones: you on top, the line runs down into a gap at the top of the ring. */
@media (max-width: 600px) {
  .crew { --ring: 15.5rem; --dot: 2.15rem; --start: -50deg; }
  .crew-map { grid-template-columns: var(--ring); grid-template-rows: auto 3.5rem auto; justify-items: center; justify-content: center; }
  .crew-you > b { top: 50%; left: calc(100% + .6rem); transform: translateY(-50%); }
  .crew-link { align-self: stretch; width: 2px; height: auto; transform-origin: top; }
  .crew-link span { bottom: auto; top: 50%; left: .7rem; transform: translateY(-50%); }
  .crew-ring::after { left: 50%; top: 0; width: 2px; height: 50%; margin: 0 0 0 -1px; transform-origin: top; }
  body[data-motion="full"] .crew-link, body[data-motion="full"] .crew-ring::after { animation-name: crew-grow-y; }
  .crew-key { justify-content: center; }
}

/* Vince's direct contact, under the copy about him. */
.about-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r-card); background: #fff; }
.about-contact strong, .about-contact span { display: block; }
.about-contact strong { font-family: var(--display); font-size: 1.15rem; }
.about-contact span { margin-top: .2rem; color: var(--muted); font-size: .86rem; }
.about-contact ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.about-contact a { color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.about-contact a:hover, .about-contact a:focus-visible { color: var(--orange-accessible); }
/* The talks sit beside the experience copy here, so they stack in one column. */
.about-intro-grid .about-teaching { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1050px) {
  .about-team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .about-intro-grid, .about-case, .about-teaching, .about-practice-grid, .about-reach-panel { grid-template-columns: 1fr; }
  .about-practice-grid { align-items: start; }
}

@media (max-width: 600px) {
  .about-proof-list div, .about-teaching li { grid-template-columns: 1fr; gap: .35rem; }
  .about-case-points section { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---------- automation checker: stepped form ---------- */
.checker-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.checker-progress { margin-bottom: 1.3rem; }
.checker-dots { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 .7rem; padding: 0; }
.checker-dot { display: flex; align-items: baseline; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--muted); opacity: .55; transition: opacity .3s ease, color .3s ease; }
.checker-dot-index { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.checker-dot.is-current { opacity: 1; color: var(--orange-accessible); }
.checker-dot.is-done { opacity: 1; color: var(--muted); }
.checker-dot.is-done .checker-dot-index { color: var(--orange); }
.checker-track { height: 3px; border-radius: 3px; overflow: hidden; background: rgba(27,28,28,.13); }
.checker-fill { display: block; width: 33.333%; height: 100%; border-radius: 3px; background: var(--orange); transition: width .45s cubic-bezier(.2,.75,.2,1); }

.checker-stage { position: relative; }
.checker-step { outline: none; }
.checker-step-index { margin: 0 0 .9rem; font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* The scanline is a CSS bar; the matching pixel warp comes from #checker-scan-warp, driven in JS. */
.checker-scanline { position: absolute; left: -1rem; right: -1rem; top: 0; height: 2px; opacity: 0; pointer-events: none; z-index: 3; background: linear-gradient(90deg, rgba(242,129,29,0), var(--orange) 18%, #fff 50%, var(--orange) 82%, rgba(242,129,29,0)); box-shadow: 0 0 14px 2px rgba(242,129,29,.65), 0 0 46px 10px rgba(242,129,29,.3); }
.automation-form.is-scanning .checker-scanline { opacity: 1; }
.automation-form.is-scanning .checker-step { filter: url(#checker-scan-warp); }

/* Cloudflare-style active-field bloom: the block being answered lifts out of the panel. */
.automation-question { transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.automation-question:focus-within { border-color: rgba(242,129,29,.85); background: #fff; box-shadow: 0 0 0 1px rgba(242,129,29,.5), 0 0 18px rgba(242,129,29,.35), 0 0 46px rgba(242,129,29,.18); }
.automation-form textarea:focus { border-color: rgba(242,129,29,.9); box-shadow: 0 0 0 1px rgba(242,129,29,.5), 0 0 18px rgba(242,129,29,.35), 0 0 46px rgba(242,129,29,.18); }
.automation-question.is-answered { border-color: rgba(242,129,29,.4); }

.checker-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; }
/* .button sets display:inline-flex, which outranks the UA [hidden] rule. */
.button[hidden] { display: none; }
.checker-advance { flex: 1; }
.button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.42); border-color: var(--line); color: var(--ink); }
.button-quiet:hover, .button-quiet:focus-visible { border-color: rgba(242,129,29,.5); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%), rgba(244,242,240,.6); }
/* Keep the homepage hero's dark secondary action after the generic quiet-button
   rule above; white on transparent orange does not meet text contrast. */
body[data-page="home"] .hero .button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%), rgb(27 28 28 / .78); border-color: rgb(255 255 255 / .65); color: #fff; }
body[data-page="home"] .hero .button-quiet:hover,
body[data-page="home"] .hero .button-quiet:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 60%), rgb(27 28 28 / .92); border-color: #fff; }
.automation-calculate { width: auto; }

@media (prefers-reduced-motion: reduce) {
  .checker-fill { transition: none; }
  .automation-form.is-scanning .checker-scanline { opacity: 0; }
  .automation-form.is-scanning .checker-step { filter: none; }
}

/* ---------- AI risk indicator card ---------- */
/* Brand orange, matching the hero. Same contrast caveat as the hero panel: white text on
   #f2811d is ~2.9:1 against the 4.5:1 AA threshold. */
.risk-card { position: relative; overflow: hidden; padding: 1.15rem 1.2rem 1.05rem; border-radius: var(--r-card); background: linear-gradient(155deg, #f2811d, #e06a0c 78%); box-shadow: 0 16px 38px rgba(194,90,10,.3), inset 0 1px rgba(255,255,255,.3); color: #fff; }
.risk-card::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%; pointer-events: none; background: radial-gradient(60% 70% at 78% 30%, rgb(var(--accent-amber) / .5), rgb(var(--accent-amber) / 0) 70%); }
.risk-card > * { position: relative; }
.risk-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.risk-card-label { font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.risk-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .26rem .55rem; border-radius: 999px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); font: 700 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.risk-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px rgb(255 255 255 / .25); }

.risk-level { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.15rem; }
.risk-level strong { font: 700 clamp(1.5rem, 3.4vw, 1.95rem)/1.05 var(--display); letter-spacing: -.02em; color: #fff; }
.risk-level span { font-size: .84rem; color: rgb(255 255 255 / .72); }

/* Emerald through cream to deep charcoal-blue: all three are palette colours and all read
   clearly against the orange, unlike a red-to-green scale would. */
.risk-meter { display: grid; gap: .5rem; }
.risk-track { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #1f9d63, #fdf3e3 50%, #1d2a33); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.risk-track::before { content: ""; position: absolute; inset: -7px -2px; border-radius: 999px; background: inherit; filter: blur(9px); opacity: .55; z-index: -1; }
.risk-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 2px solid rgb(255 255 255 / .9); box-shadow: 0 2px 10px rgba(60,22,0,.5); transform: translateY(-50%); transition: left .45s cubic-bezier(.2,.75,.2,1); }

.risk-bands { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: .95rem 0 0; padding: .85rem 0 0; border-top: 1px solid rgb(255 255 255 / .2); }
.risk-bands li { display: grid; gap: .15rem; padding: 0 .55rem; border-left: 1px solid rgb(255 255 255 / .16); opacity: .5; transition: opacity .3s ease; }
.risk-bands li:first-child { padding-left: 0; border-left: 0; }
.risk-bands li span { font-size: .74rem; font-weight: 700; color: #fff; }
.risk-bands li em { font-style: normal; font: 700 .7rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.risk-card[data-band="low"] li[data-band="low"],
.risk-card[data-band="mid"] li[data-band="mid"],
.risk-card[data-band="high"] li[data-band="high"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .risk-knob { transition: none; } }

/* ---------- resources: skills library + newsletter ---------- */
.resources { position: relative; isolation: isolate; overflow: hidden; }
.resources::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 66% 46% at 50% 42%, rgba(242,129,29,.14), transparent 76%); }
/* Two stacked cards on the left, the newsletter running full height beside them. */
.resource-grid { display: grid; grid-template-columns: 1.25fr .85fr; grid-auto-rows: auto; gap: 1rem; align-items: stretch; }
.resource-skills { grid-column: 1; grid-row: 1; }
.resource-form { grid-column: 1; grid-row: 2; }
.resource-news { grid-column: 2; grid-row: 1 / 3; }
.resource-card { display: flex; flex-direction: column; gap: .9rem; padding: var(--card-pad-spacious); border-radius: var(--panel-radius); }
.resource-skills, .resource-form { border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.78); box-shadow: 0 16px 38px rgba(154,67,0,.1), inset 0 1px rgba(255,255,255,.85); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.resource-head { display: grid; gap: .55rem; }
.resource-label { justify-self: start; display: inline-flex; padding: .38rem .8rem; border: 1px solid rgba(242,129,29,.4); border-radius: 999px; background: rgba(242,129,29,.08); color: var(--orange-accessible); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.resource-card h3 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.resource-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.resource-card code { padding: .1rem .3rem; border-radius: var(--r-small); background: rgba(242,129,29,.12); font-family: var(--mono); font-size: .82em; color: var(--orange-accessible); }
.resource-list { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: 0; font-size: .86rem; }
.resource-list li { display: flex; align-items: center; gap: .55rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.resource-list .icon { color: var(--orange); flex: 0 0 auto; }
.resource-cta { margin-top: auto; justify-self: start; align-self: flex-start; }
.resource-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }
.resource-actions .button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.42); border-color: var(--line); color: var(--ink); }
.resource-actions .button-quiet:hover { border-color: rgba(242,129,29,.5); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%), rgba(244,242,240,.6); }
.resource-pending { margin-top: auto !important; font-size: .82rem !important; }

/* The newsletter card borrows the hero panel's treatment so it reads as a Noventech surface. */
.resource-news { position: relative; overflow: hidden; color: #fff; background: linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%); box-shadow: 0 22px 52px rgba(194,90,10,.26); }
.resource-news::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dots); background-size: var(--dots-size); opacity: .5; }
.resource-news > * { position: relative; z-index: 1; }
.resource-label-light { border-color: rgb(255 255 255 / .42); background: rgb(255 255 255 / .16); color: #fff; }
.resource-news h3 { color: #fff; }
.resource-news p { color: rgb(255 255 255 / .92); }
.news-form { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; }
.news-form input { flex: 1 1 190px; min-width: 0; min-height: 48px; padding: .7rem .9rem; border: 1px solid rgb(255 255 255 / .55); border-radius: 999px; background: rgb(255 255 255 / .96); color: var(--ink); font-size: .9rem; }
.news-form input::placeholder { color: #8a8f96; }
.news-form input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.news-form .button { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), rgb(34 34 34 / .78); color: #fff; border-color: var(--ink); flex: 0 0 auto; }
.news-form .button:hover, .news-form .button:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%), rgba(255,255,255,.85); color: var(--ink); border-color: #fff; }
.news-form .button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.news-form .button:focus-visible { outline-color: #fff; }
.news-note { min-height: 1.1rem; margin: .2rem 0 0 !important; font-size: .8rem !important; font-weight: 600; color: #fff !important; }

@media (max-width: 1050px) {
  .resource-grid { grid-template-columns: 1fr; }
  .resource-skills, .resource-form, .resource-news { grid-column: 1; grid-row: auto; }
}

/* Compact preview of the decision register on the builder's first page: the three
   verdicts a finished policy produces, without the full card treatment. */
/* Breathing room where the register heading follows the "covers" list. */
.exposure-flags + .exposure-note-label { margin-top: 1.1rem; }
.policy-register { list-style: none; margin: .5rem 0 1.1rem; padding: 0; display: grid; gap: .45rem; }
.policy-register li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; padding: .6rem .75rem; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-small); background: #fff; font-size: .82rem; color: var(--muted); }
.policy-register-tag { font: 700 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.policy-register-approved { border-left-color: var(--emerald); }
.policy-register-approved .policy-register-tag { color: var(--emerald); }
.policy-register-restricted { border-left-color: var(--orange); }
.policy-register-restricted .policy-register-tag { color: var(--orange-accessible); }
.policy-register-prohibited { border-left-color: var(--red); }
.policy-register-prohibited .policy-register-tag { color: var(--red); }

/* ---------- gutter rails ---------- */
/* The page's circuit texture comes from .brand-mosaic, which covers the light
   sections. .shadow paints its own opaque dark background and is left plain:
   the figure and the carousel carry that section on their own. */
.section > .shell { position: relative; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.way:nth-child(2), .use-case:nth-child(2), .board-step:nth-child(2) { transition-delay: .08s; }
.way:nth-child(3), .use-case:nth-child(3), .board-step:nth-child(3) { transition-delay: .16s; }
.use-case:nth-child(4), .board-step:nth-child(4) { transition-delay: .24s; }
.board-step:nth-child(5) { transition-delay: .32s; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1fr; } .hero-widget { max-width: 460px; }
}
@media (min-width: 1051px) { .header-phone { display: inline-flex; } }
@media (max-width: 1050px) {
  .desktop-nav { display: none; } .brand-logo { width: 229px; }
  /* Same 14px inset and top gap as .page-hero, so the home panel (and the
     marquee band that continues it) keeps a white edge like every other page. */
  .hero { padding: calc(var(--header-h) + 14px) 14px 63px; } .hero-circuit { opacity: .5; } .hero-text-scrim { left: -20%; width: 130%; }
 
  .roadmap-tabs { justify-content: flex-start; }
  .roadmap-tabs [role="tab"], .roadmap-tabs .roadmap-tab-link { flex: 1 1 calc(50% - .6rem); }
  .watch-grid, .learn-grid { grid-template-columns: 1fr; }
  .stage-split { grid-template-columns: 1fr; gap: 1.75rem; }
  .stage-split > .section-heading { position: static; margin-bottom: 0; }
  .watch-flow-steps { grid-template-columns: 1fr; gap: 1.1rem; }
  .watch-flow-steps li:not(:last-child)::after { content: none; }
  .government-grid, .serve-opening, .serve-care { grid-template-columns: 1fr; }
  .serve-opportunities ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .questions-section { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .serve-cta { align-items: flex-start; flex-direction: column; }
  .bento { grid-template-columns: 1fr; padding: .6rem; gap: .6rem; }
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-e { grid-column: 1 / -1; grid-row: auto; }
  .final-cta-panel { grid-template-columns: 1fr; }
  .approach-illustration { position: relative; z-index: 0; left: auto; top: auto; bottom: auto; height: auto; width: 60%; max-width: 280px; margin: 1.5rem 0 0; transform: none; }
  .approach-illustration img { -webkit-mask-image: none; mask-image: none; }
  .automation-options, .automation-options-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 1.3rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap-tabs [role="tab"]:hover, .roadmap-tabs .roadmap-tab-link:hover { transform: none; }
  .watch-card:hover, .learn-card:hover { transform: none; }
  .roadmap-panel-link span, .stage-next a span { transition: none; }
}
@media (max-width: 540px) {
  :root { --shell: min(100% - 32px, 1180px); --header-h: 64px; }
  .brand-logo { width: 186px; }
  .header-actions { gap: .5rem; }
  .hero-actions .button, .button { width: 100%; }
  .hero-badges { gap: .8rem 1.2rem; }
  .contact-fields { grid-template-columns: 1fr; }
  .government-panels [data-government-panel] { padding: 1rem; }
  .serve-opportunities ul { grid-template-columns: 1fr; }
  .serve-opportunities li { min-height: 0; }
  .automation-options, .automation-options-wide { grid-template-columns: 1fr; }
  .automation-result-heading { align-items: flex-start; flex-direction: column; }
  .form-actions .button { width: auto; }
  .choice-group:has(input[type="radio"]) { grid-template-columns: 1fr; }
  .ghost-widget { right: .6rem; bottom: .8rem; } .ghost-card { width: min(320px, 90vw); }
  .site-footer-top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ghost-avatar { animation: none !important; }
}

/* ===========================================================================
   Pillar & tool page heroes
   ---------------------------------------------------------------------------
   Every page below the home page opens with the same hero shell so the site
   reads as one system. Only the accent triplet and the art slot change per
   page, set with --hero-accent on the .page-hero element itself.
   =========================================================================== */
.page-hero {
  --hero-accent: var(--accent-warm);
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  border-radius: var(--panel-radius);
  margin: calc(var(--header-h) + 14px) 14px 0;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4.5rem, 8vw, 7rem);
  background:
    radial-gradient(120% 140% at 12% 0%, rgb(var(--hero-accent) / .32), transparent 58%),
    radial-gradient(100% 120% at 100% 100%, rgb(var(--hero-accent) / .16), transparent 62%),
    linear-gradient(160deg, #15181d 0%, var(--noir-bg) 55%, #07090b 100%);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--dots); background-size: var(--dots-size); opacity: .4;
}
.page-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.page-hero .section-index {
  border-color: rgb(var(--hero-accent) / .55); background: rgb(var(--hero-accent) / .14);
  color: #fff;
}
.page-hero h1 {
  margin: .6rem 0 1.1rem; max-width: 17ch;
  font-family: var(--display); font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 600;
  line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.page-hero h1 em { font-style: normal; color: var(--orange-highlight); }
.page-hero-lede {
  margin: 0 0 1.75rem; max-width: 52ch; font-size: clamp(1rem, 1.35vw, 1.13rem);
  line-height: 1.6; color: rgb(255 255 255 / .82); text-wrap: pretty;
}
.page-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.page-hero-actions .button { border-radius: 999px; padding: .85rem 1.5rem; }
/* Hover fills with a fixed ink, not the page's own --hero-accent ramp step:
   that ramp varies from a deep to a very light orange per page (see the ramp
   comment in :root), and white button text on the lighter steps drops well
   below accessible contrast. Ink keeps every page's hero button identical
   and reliably readable, matching .hero .button-primary on the homepage. */
/* The primary action on a dark hero is the same solid orange as everywhere else.
   It used to be translucent white glass, which read as a disabled gray button. */
.page-hero .button-primary { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 50%), var(--orange); color: var(--ink); border-color: rgb(var(--accent-amber) / .6); box-shadow: 0 14px 34px rgb(var(--accent-warm) / .32), inset 0 -2px 0 rgba(0,0,0,.08); }
.page-hero .button-primary:hover, .page-hero .button-primary:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }
.page-hero .button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .38); color: #fff; }
.page-hero .button-quiet:hover, .page-hero .button-quiet:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), rgb(255 255 255 / .18); border-color: #fff; }
.page-hero .button:focus-visible { outline-color: #fff; }

/* The proof strip under the hero copy: what this page's work actually produces. */
.page-hero-proof {
  display: flex; flex-wrap: wrap; gap: .55rem .9rem; margin: 1.9rem 0 0; padding: 0; list-style: none;
}
.page-hero-proof li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px;
  background: rgb(255 255 255 / .06);
  font-size: .78rem; font-weight: 600; color: rgb(255 255 255 / .88);
}
.page-hero-proof .icon { color: rgb(var(--hero-accent)); }

/* Art slot: a labelled panel that shows the shape of the work, not a stock image. */
.page-hero-art {
  position: relative; padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid rgb(255 255 255 / .14); border-radius: var(--panel-radius);
  background: linear-gradient(150deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02));
  backdrop-filter: blur(6px);
}
.page-hero-art-label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 1rem; font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgb(255 255 255 / .55);
}
.page-hero-art-label em { font-style: normal; color: rgb(var(--hero-accent)); }

/* A vertical run of steps — used where the page's subject is a sequence. */
.hero-steps { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: hero-step; }
/* Darkened rather than lightened: the accent-coloured step number is 11px mono,
   so it needs 4.5:1, and on a translucent-white card over the hero's own tint it
   measured 3.35:1 on the governance page. Deepening the card lifts every step of
   the ramp clear of AA without diluting the orange itself, which is the thing
   distinguishing one page from another. Verified by scripts/hero-contrast.mjs. */
.hero-steps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: baseline;
  padding: .7rem .85rem; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r-inner);
  background: rgb(0 0 0 / .38);
}
.hero-steps li::before {
  counter-increment: hero-step; content: "0" counter(hero-step);
  font: 700 .72rem/1.5 var(--mono); color: rgb(var(--hero-accent));
}
.hero-steps strong { display: block; font-size: .93rem; color: #fff; }
.hero-steps span { display: block; font-size: .8rem; line-height: 1.45; color: rgb(255 255 255 / .62); }

/* A key/value readout — used where the page's subject is a state of the world. */
.hero-readout { display: grid; gap: .5rem; margin: 0; }
.hero-readout div {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .85rem; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r-inner);
  background: rgb(0 0 0 / .38);
}
.hero-readout dt { font-size: .86rem; color: rgb(255 255 255 / .78); }
.hero-readout dd {
  margin: 0; padding: .2rem .6rem; border-radius: 999px;
  background: rgb(var(--hero-accent) / .18); border: 1px solid rgb(var(--hero-accent) / .4);
  font: 700 .7rem/1.4 var(--mono); letter-spacing: .04em; color: #fff; white-space: nowrap;
}
.hero-readout dd[data-state="clear"] { background: rgb(31 157 99 / .16); border-color: rgb(31 157 99 / .45); }
.page-hero-art-note { margin: 1rem 0 0; font-size: .74rem; line-height: 1.5; color: rgb(255 255 255 / .5); }

/* Breadcrumb: real navigation, and the trail Google renders under the result.
   It lives INSIDE the hero. As its own strip between sections it rendered a thin
   light band wedged between the dark hero and whatever dark section followed,
   which chopped the page in half visually. Inside the hero it is just a line of
   wayfinding above the headline, and there is no band at all. */
.page-hero .crumbs { position: relative; z-index: 2; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .76rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .45rem; }
.crumbs li + li::before { content: "/"; color: rgb(255 255 255 / .28); }
.crumbs a { color: rgb(255 255 255 / .6); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current="page"] { color: rgb(255 255 255 / .92); font-weight: 600; }

/* "You are here" marker on the primary nav. The build stamps .is-current onto
   the nav link that points at the page being rendered, so this stays one rule
   set no matter how many pages or nav keys exist. */
.desktop-nav .is-current, .mobile-nav .is-current { color: var(--orange-accessible); }
.desktop-nav a.nav-plain.is-current { box-shadow: inset 0 -2px 0 var(--orange); }
.nav-panel a.is-current strong::after { content: " \b7"; color: var(--orange); }

@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: 20ch; }
}

/* Free-tool cards on the overview hub. The two tools are the page's highest-intent
   exits, so they get a section of their own rather than a line in a list. */

.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.tool-card {
  --tool-accent: var(--accent-warm);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.15rem); border-radius: var(--panel-radius);
}
.tool-grid > .tool-card:nth-child(2) { --tool-accent: var(--accent-amber); }
.tool-accent { position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, rgb(var(--tool-accent)), rgb(var(--tool-accent) / .25)); }
.tool-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.tool-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-inner); background: rgb(var(--tool-accent) / .12); color: var(--orange-accessible); font-size: 1.15rem;
}
.tool-icon img { width: 1.35rem; height: 1.35rem; }
.tool-meta { font: 700 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tool-card h3 { margin: 0 0 .6rem; font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -.02em; }
.tool-card > p { margin: 0 0 1.1rem; color: var(--muted); font-size: .97rem; line-height: 1.6; }
.tool-list { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .5rem; }
.tool-list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; font-size: .89rem; color: var(--ink); }
.tool-list .icon { margin-top: .22rem; color: var(--orange); }
.tool-cta { margin-top: auto; align-self: start; border-radius: 999px; }
.tool-card .resource-subscribe { display: grid; gap: .6rem; margin-top: auto; }
.tool-card .resource-subscribe label { font-size: .74rem; font-weight: 700; color: var(--ink); }
.tool-card .resource-subscribe > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.tool-card .resource-subscribe input { min-width: 0; min-height: 46px; padding: .68rem .75rem; border: 1px solid rgba(27,28,28,.22); border-radius: var(--r-small); background: #fff; color: var(--ink); }
.tool-card .resource-subscribe .button { min-height: 46px; border-radius: 999px; }
.tool-card .news-note { color: var(--muted) !important; }

.tool-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  margin-bottom: 2rem;
}

.tool-resources-col h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.tool-resources-actions {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.tool-resources-actions .button {
  border-radius: 999px;
}

@media (max-width: 760px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card .resource-subscribe > div { grid-template-columns: 1fr; }
  .tool-card .resource-subscribe .button { width: 100%; }
  .tool-resources { grid-template-columns: 1fr; }
}

.library-panels [role="tabpanel"][hidden] { display: none; }
.library-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
.library-actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* AI Governance Handbook and printable executive checklist */
.checklist-header h1 {
  max-width: 18ch;
  margin: .65rem 0 1rem;
  font-size: clamp(2.45rem, 5vw, 5.35rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.handbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* Handbook page hero art: the real cover and its three numbers, on the dark hero. */
.handbook-page-art { display: grid; justify-items: center; gap: 1.6rem; }
.handbook-page-art .handbook-book { width: min(15rem, 70vw); }
.handbook-page-art .handbook-modal-stats { max-width: 20rem; color: #fff; }

/* "Three ways to use it", as one quiet strip under the hero. */
.handbook-ways.section-tight { padding-top: clamp(1.8rem, 4vw, 2.6rem); }
.handbook-ways-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.handbook-ways-list li { display: grid; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: rgba(255, 255, 255, .7); }
.handbook-ways-list strong { font-family: var(--display); }
.handbook-ways-list span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.handbook-ways-list a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }

@media (max-width: 760px) {
  .handbook-ways-list { grid-template-columns: 1fr; }
}
}

.section-tight {
  padding: 0 0 1.5rem;
}

.handbook-callout {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(217, 104, 45, .28);
  border-left: 4px solid var(--orange-accessible);
  border-radius: var(--r-inner);
  background: rgba(255, 255, 255, .76);
  color: var(--ink);
  line-height: 1.65;
}

.handbook-callout h2 {
  margin: 0 0 .45rem;
  font-size: 1rem;
}

.handbook-callout p { margin: 0; }
.handbook-callout-warning { background: #fff8f2; }

.handbook-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.handbook-nav {
  position: sticky;
  top: 6.5rem;
  display: grid;
  max-height: calc(100vh - 8rem);
  overflow: auto;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 50px rgba(12, 18, 28, .06);
}

.handbook-nav-title {
  margin: 0 0 .7rem;
  color: var(--ink);
  font: 700 .75rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.handbook-nav a {
  padding: .42rem .2rem;
  color: var(--muted);
  font-size: .84rem;
  text-decoration: none;
}

.handbook-nav a:hover,
.handbook-nav a:focus-visible { color: var(--orange-accessible); }

.handbook-content {
  min-width: 0;
  max-width: 58rem;
}

.handbook-intro {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.handbook-intro h2,
.handbook-deep-dive > h2,
.handbook-download-panel h2 {
  margin: .6rem 0 1rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.handbook-status-key {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.25rem;
}

.handbook-status-key span {
  padding: .35rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  font-size: .78rem;
}

.handbook-chapter {
  position: relative;
  padding: 2.75rem 0 2.75rem 4.25rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 7rem;
}

.chapter-number {
  position: absolute;
  top: 3rem;
  left: 0;
  color: var(--orange-accessible);
  font: 700 .9rem/1 var(--mono);
}

.handbook-chapter h2 {
  margin: 0 0 .8rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
}

.handbook-content p,
.handbook-content li {
  font-size: 1rem;
  line-height: 1.72;
}

.handbook-content ul,
.handbook-content ol { padding-left: 1.25rem; }
.handbook-content li + li { margin-top: .4rem; }
.evidence-line { color: var(--muted); }

.handbook-deep-dive {
  padding: 4rem 0 1rem;
  scroll-margin-top: 7rem;
}

.handbook-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: white;
}

.handbook-table-wrap table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
}

.handbook-table-wrap th,
.handbook-table-wrap td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: .9rem;
  line-height: 1.5;
}

.handbook-table-wrap th {
  background: var(--ink);
  color: white;
  font-weight: 700;
}

.regulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1.5rem 0;
}

.regulation-grid article {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  background: rgba(255, 255, 255, .75);
}

.regulation-grid h3 { margin: 0 0 .35rem; font-size: 1rem; }
.regulation-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

.handbook-download-panel {
  margin: 4rem 0 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-card);
  background: var(--ink);
  color: white;
}

.handbook-download-panel .section-index { color: #ffb078; }
.handbook-download-panel p { color: rgba(255, 255, 255, .78); }
/* Was white text left on the base .button-quiet's white background — invisible
   at rest, not just on hover. Same translucent-white-on-dark recipe as
   .page-hero .button-quiet, so every "quiet" button on a dark surface behaves
   the same way. */
.handbook-download-panel .button-quiet { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .38); color: #fff; }
.handbook-download-panel .button-quiet:hover, .handbook-download-panel .button-quiet:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), rgb(255 255 255 / .18); border-color: #fff; }
.handbook-download-panel .button:focus-visible { outline-color: #fff; }

.handbook-sources {
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
}

.handbook-sources h2 { font-size: 1.2rem; }
.handbook-sources a { color: var(--orange-accessible); }
.handbook-sources p { color: var(--muted); font-size: .85rem; }

.resource-governance { grid-column: span 2; }
.resource-governance .resource-actions { margin-top: auto; }

.policy-handbook-next {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(217, 104, 45, .3);
  border-radius: var(--r-inner);
  background: #fff8f2;
}

.policy-handbook-next strong { display: block; margin-bottom: .35rem; }
.policy-handbook-next p { margin: 0 0 .9rem; }

.checklist-page { padding-top: clamp(8rem, 12vw, 10rem); }
.checklist-shell { max-width: 68rem; }

.checklist-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid var(--orange-accessible);
}

.checklist-header h1 { max-width: 19ch; font-size: clamp(2.25rem, 4.8vw, 4.4rem); }
.checklist-header p { max-width: 52rem; color: var(--muted); line-height: 1.6; }

.checklist-meta {
  display: grid;
  grid-template-columns: 1.5fr .7fr 1.2fr;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: .9rem;
}

.checklist-warning {
  padding: .8rem 1rem;
  border: 1px solid rgba(217, 104, 45, .3);
  border-radius: var(--r-small);
  background: #fff8f2;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.executive-checklist {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  counter-reset: exec-check;
  columns: 2;
  column-gap: 1rem;
}

.executive-checklist li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .35rem .65rem;
  margin: 0 0 .65rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: rgba(255, 255, 255, .8);
  counter-increment: exec-check;
}

.executive-checklist li::before {
  grid-row: 1 / span 2;
  content: counter(exec-check, decimal-leading-zero);
  color: var(--orange-accessible);
  font: 700 .72rem/1.6 var(--mono);
}

.executive-checklist li span { font-size: .88rem; line-height: 1.45; }
.executive-checklist li em { color: var(--muted); font-size: .74rem; font-style: normal; letter-spacing: .02em; }

.checklist-actions,
.checklist-footer {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-top: 2px solid var(--ink);
}

.checklist-actions h2 { margin-top: 0; font-size: 1.1rem; }
.checklist-actions p { font-size: .9rem; }

@media (max-width: 850px) {
  .handbook-shell,
  .checklist-header { grid-template-columns: 1fr; }
  .handbook-nav { position: static; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handbook-nav-title { grid-column: 1 / -1; }
  .regulation-grid { grid-template-columns: 1fr; }
  .resource-governance { grid-column: auto; }
  .executive-checklist { columns: 1; }
  .checklist-meta { grid-template-columns: 1fr; }
}

@media print {
  body[data-page="handbook"] .site-header,
  body[data-page="handbook"] .site-footer,
  body[data-page="handbook"] .ghost-widget,
  body[data-page="handbook"] .checklist-print,
  body[data-page="handbook"] .checklist-footer .handbook-actions { display: none !important; }
  body[data-page="handbook"] { background: white !important; color: #111827 !important; }
  .checklist-page { padding: 0; }
  .checklist-shell { max-width: none; }
  .checklist-header { grid-template-columns: 1fr; padding-bottom: .45rem; }
  .checklist-header h1 { margin: .2rem 0 .3rem; font-size: 21pt; }
  .checklist-header p { margin: 0; font-size: 8pt; line-height: 1.35; }
  .checklist-meta { grid-template-columns: 1.4fr .65fr 1.2fr; padding: .45rem 0; font-size: 7.5pt; }
  .checklist-warning { padding: .35rem .5rem; font-size: 6.7pt; }
  .executive-checklist { margin: .55rem 0; column-gap: .35rem; }
  .executive-checklist li { margin-bottom: .22rem; padding: .3rem .35rem; border-radius: 0; }
  .executive-checklist li span { font-size: 7.2pt; line-height: 1.25; }
  .executive-checklist li em { font-size: 6.2pt; }
  .checklist-actions { margin-top: .4rem; padding: .45rem 0 0; }
  .checklist-actions h2 { margin-bottom: .2rem; font-size: 9pt; }
  .checklist-actions p { margin: .25rem 0; font-size: 7pt; }
  .checklist-footer { margin-top: .4rem; padding: .35rem 0 0; font-size: 7pt; }
  @page { size: letter; margin: .38in; }
}

/* ===========================================================================
   Glass card
   ---------------------------------------------------------------------------
   A layered, tilting card for grids that were reading as generic boxes. Ported
   from a React/Tailwind reference by hand: nothing about it needed a framework,
   the original was ordinary CSS wearing utility class names.

   Adapted rather than copied. The reference is a fixed 290x300 dark card that
   tilts 30deg; these hold 3-5 lines of variable copy in a light section, so the
   card sizes to its content, tilts a restrained 11deg, and takes its accent from
   the same orange ramp as everything else.

   Two constraints worth knowing before editing:
   - NO `overflow: hidden` on .glass-card-inner. It forces `transform-style` back
     to `flat` and the whole depth effect silently dies. The decorative orbs are
     positioned to stay inside the card instead of being clipped into it.
   - Every child that should sit above the frosted sheen needs its own
     `translate3d(...Z)`; z-index does not order elements across a 3D context.
   =========================================================================== */
/* Four cards in the inherited three-column grid leave one stranded on its own
   row, which reads as a mistake. Two by two instead. */
.glass-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 760px) { .glass-card-grid { grid-template-columns: 1fr; } }
.glass-card { --card-accent: var(--hero-orange); perspective: 1200px; }
.glass-card-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 1.95rem);
  border: 1px solid rgb(255 255 255 / .75); border-radius: var(--r-panel);
  background: linear-gradient(152deg, #fff 0%, #fffaf4 58%, #ffeeda 100%);
  box-shadow: 0 18px 44px -30px rgb(60 40 22 / .5), 0 2px 6px rgb(60 40 22 / .05);
  transform-style: preserve-3d;
  transition: transform .5s ease, box-shadow .5s ease;
}
.glass-card:hover .glass-card-inner, .glass-card:focus-within .glass-card-inner {
  transform: rotate3d(1, 1, 0, 11deg);
  box-shadow: rgb(60 40 22 / .24) 22px 34px 24px -30px, rgb(60 40 22 / .1) 0 18px 26px 0;
}
/* The frosted inset pane. Sits above the card face but below the copy. */
.glass-card-inner::before {
  content: ""; position: absolute; inset: 7px; border-radius: var(--r-card); pointer-events: none;
  border-bottom: 1px solid rgb(255 255 255 / .9); border-left: 1px solid rgb(255 255 255 / .9);
  background: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(255 255 255 / .3));
  backdrop-filter: blur(4px);
  transform: translate3d(0, 0, 20px);
}
.glass-card-inner > * { position: relative; transform: translate3d(0, 0, 40px); }

/* Decorative orb stack, lifted in Z so it parallaxes against the face on tilt. */
.glass-card-orbs { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.glass-card-orbs i {
  position: absolute; display: block; aspect-ratio: 1; border-radius: 50%;
  background: rgb(var(--card-accent) / .14);
  box-shadow: rgb(100 100 111 / .12) -10px 10px 20px 0;
  transition: transform .5s ease;
}
/* Every orb stays BELOW the frosted pane (z 20) and the copy (z 40). In the
   original the orbs sat on top, because that card has no text under them; here
   they were painting straight over the body copy and eating whole phrases.
   Seen through the pane they read as a soft corner glow instead, which is the
   better outcome anyway. Keep the hover values under 20 for the same reason. */
.glass-card-orbs i:nth-child(1) { width: 118px; top: 10px; right: 10px; transform: translate3d(0, 0, 2px); transition-delay: 0s; }
.glass-card-orbs i:nth-child(2) { width: 92px; top: 14px; right: 14px; transform: translate3d(0, 0, 6px); transition-delay: .12s; }
.glass-card-orbs i:nth-child(3) { width: 66px; top: 20px; right: 20px; transform: translate3d(0, 0, 10px); transition-delay: .24s; }
.glass-card-orbs i:nth-child(4) {
  width: 40px; top: 28px; right: 28px; transform: translate3d(0, 0, 14px); transition-delay: .36s;
  background: rgb(var(--card-accent) / .82); box-shadow: rgb(100 100 111 / .22) -8px 10px 18px 0;
}
.glass-card:hover .glass-card-orbs i:nth-child(1) { transform: translate3d(0, 0, 5px); }
.glass-card:hover .glass-card-orbs i:nth-child(2) { transform: translate3d(0, 0, 10px); }
.glass-card:hover .glass-card-orbs i:nth-child(3) { transform: translate3d(0, 0, 15px); }
.glass-card:hover .glass-card-orbs i:nth-child(4) { transform: translate3d(0, 0, 19px); }

.glass-card-tag {
  align-self: flex-start; margin-bottom: .85rem; padding: .32rem .7rem;
  border: 1px solid rgb(var(--card-accent) / .3); border-radius: 999px;
  background: rgb(255 255 255 / .75); color: var(--orange-accessible);
  font: 700 .7rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.glass-card h3 { margin: 0 0 .55rem; max-width: 15ch; font-family: var(--display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.22; }
.glass-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.58; }

/* The site's reduce-motion switch and the OS setting both flatten the tilt;
   the card keeps its depth, it just stops moving. */
body[data-motion="reduced"] .glass-card:hover .glass-card-inner,
body[data-motion="reduced"] .glass-card:focus-within .glass-card-inner { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .glass-card-inner, .glass-card-orbs i { transition: none; }
  .glass-card:hover .glass-card-inner, .glass-card:focus-within .glass-card-inner { transform: none; }
}
@media (max-width: 760px) {
  .glass-card-orbs i:nth-child(1) { width: 108px; }
  .glass-card-orbs i:nth-child(2) { width: 84px; }
  .glass-card-orbs i:nth-child(3) { width: 62px; }
  .glass-card-orbs i:nth-child(4) { width: 38px; }
}

/* ===========================================================================
   Example dashboard
   ---------------------------------------------------------------------------
   A hand-built, animated dashboard mock for the Data page. Deliberately NOT a
   charting library: the site's CSP is `script-src 'self'`, so a CDN Plotly build
   would be blocked outright, and ~1MB of JS for one decorative figure would blow
   the performance budget. Everything here is inline SVG and CSS transitions,
   driven by dashboard-demo.js.

   The numbers are invented and the caption says so. That is a house rule, not a
   style choice — every fabricated specific from the original design comp was
   removed for exactly this reason, and a chart that looks like client results
   would put it straight back.
   =========================================================================== */
/* Clear tint, sitting between the dark explorer above and the white
   approach section below — the middle of the three light tiers. */

.dash {
  margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--panel-radius);
  background: #fff; box-shadow: 0 30px 60px -40px rgb(60 40 22 / .45);
}
.dash-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--cloud);
}
.dash-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(27 28 28 / .16); }
.dash-chrome-title { margin-left: .7rem; font: 700 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dash-body { display: grid; gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(1.1rem, 2.4vw, 1.9rem); }

.dash-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.dash-tile { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; }
.dash-tile-label { display: block; margin-bottom: .35rem; font-size: .74rem; line-height: 1.35; color: var(--muted); }
.dash-num { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

.dash-panels { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .75rem; }
.dash-panel { display: flex; flex-direction: column; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; }
.dash-panel-title { margin: 0 0 .85rem; font-size: .8rem; font-weight: 700; color: var(--ink); }

.dash-area { display: block; width: 100%; height: auto; overflow: visible; }
.dash-gridlines line { stroke: var(--line); stroke-width: 1; }
.dash-area-fill { fill: rgb(var(--hero-orange) / .12); opacity: 0; transition: opacity .7s ease .55s; }
.dash-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-line--actual { stroke: rgb(var(--hero-orange)); }
.dash-line--budget { stroke: rgb(27 28 28 / .3); stroke-width: 2; stroke-dasharray: 4 4; }
/* Both lines draw themselves in; dashboard-demo.js measures each path and sets
   the dash offset, because a stroke-dasharray hard-coded here would be wrong the
   moment anyone edits the path data. The budget line keeps its 4 4 dashes, so it
   is faded in rather than drawn. */
.dash-line--actual { stroke-dashoffset: var(--len, 0); }
.dash-points circle { fill: #fff; stroke: rgb(var(--hero-orange)); stroke-width: 2.5; opacity: 0; transform: scale(.4); transform-origin: center; transform-box: fill-box; }
.dash-legend { display: flex; align-items: center; gap: .4rem; margin: .85rem 0 0; font-size: .72rem; color: var(--muted); }
.dash-key { width: 14px; height: 3px; border-radius: 2px; }
.dash-key--actual { background: rgb(var(--hero-orange)); }
.dash-key--budget { background: rgb(27 28 28 / .3); margin-left: .6rem; }

/* The two panels are stretched to the same height by the grid; without this the
   four bars bunch at the top of the taller one and leave a dead half-panel. */
.dash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; flex: 1 1 auto; align-content: space-evenly; }
.dash-bars li { display: grid; grid-template-columns: 4.6rem 1fr 2.4rem; align-items: center; gap: .6rem; font-size: .78rem; }
.dash-bar-label { color: var(--muted); }
.dash-bar { height: 10px; border-radius: 999px; background: rgb(27 28 28 / .07); overflow: hidden; }
.dash-bar i {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--hero-orange-deep)), rgb(var(--hero-orange-amber)));
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.dash-bar-value { text-align: right; font: 700 .76rem/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Animated state, added by dashboard-demo.js when the figure scrolls into view. */
.dash.is-live .dash-area-fill { opacity: 1; }
.dash.is-live .dash-line--actual { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1); }
.dash.is-live .dash-points circle { opacity: 1; transform: scale(1); transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.dash.is-live .dash-points circle:nth-child(1) { transition-delay: .55s; }
.dash.is-live .dash-points circle:nth-child(2) { transition-delay: .68s; }
.dash.is-live .dash-points circle:nth-child(3) { transition-delay: .81s; }
.dash.is-live .dash-points circle:nth-child(4) { transition-delay: .94s; }
.dash.is-live .dash-points circle:nth-child(5) { transition-delay: 1.07s; }
.dash.is-live .dash-points circle:nth-child(6) { transition-delay: 1.2s; }
.dash.is-live .dash-bar i { width: var(--to); }
.dash.is-live .dash-bars li:nth-child(2) .dash-bar i { transition-delay: .1s; }
.dash.is-live .dash-bars li:nth-child(3) .dash-bar i { transition-delay: .2s; }
.dash.is-live .dash-bars li:nth-child(4) .dash-bar i { transition-delay: .3s; }

.dash-caption { padding: .95rem 1.2rem 1.1rem; border-top: 1px solid var(--line); background: var(--cloud); font-size: .78rem; line-height: 1.55; color: var(--muted); }
.dash-caption strong { color: var(--ink); }

/* Reduced motion: the figure still shows its finished state, it just arrives
   there instantly. Never leave a chart blank because motion is off. */
body[data-motion="reduced"] .dash .dash-area-fill,
body[data-motion="reduced"] .dash .dash-points circle { opacity: 1; transform: none; transition: none; }
body[data-motion="reduced"] .dash .dash-line--actual { stroke-dashoffset: 0; transition: none; }
body[data-motion="reduced"] .dash .dash-bar i { width: var(--to); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .dash-area-fill, .dash-points circle, .dash-line--actual, .dash-bar i { transition: none !important; }
}

@media (max-width: 860px) {
  .dash-panels { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .dash-tiles { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Problem explorer  (master / detail)
   ---------------------------------------------------------------------------
   Replaces a six-then-four card grid. Cards forced every problem to shout at
   once and gave each one the same weight; this shows one at a time, with the
   others listed as a table of contents. Same content, a quarter of the noise.

   It is a real ARIA tablist driven by [data-tabs] in app.js, so arrow keys,
   Home/End and screen-reader semantics all work — not a set of divs with click
   handlers.

   Light, like every other section. It was built dark, matching the reference it
   came from, but a dark band here made the page a run of alternating slabs. The
   page now carries one gradient and Shadow AI is the only section that breaks it.
   =========================================================================== */
.problem-explorer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.problem-explorer h2 { margin: .6rem 0 .7rem; font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.problem-lede { margin: 0 0 2rem; max-width: 42ch; font-size: .95rem; line-height: 1.6; color: var(--muted); }

.problem-list { display: grid; }
.problem-item {
  display: grid; grid-template-columns: 2.1rem 1fr 1rem; align-items: center; gap: .9rem;
  width: 100%; padding: 1.05rem .9rem; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); border-radius: var(--r-small);
  background: rgb(255 255 255 / .55); color: inherit;
  transition: background .25s ease, box-shadow .25s ease;
}
.problem-item:last-child { border-bottom: 1px solid var(--line); }
.problem-item:hover { background: rgb(255 255 255 / .82); }
.problem-item[aria-selected="true"] {
  background: rgb(255 255 255 / .96);
  box-shadow: inset 3px 0 0 rgb(var(--hero-orange)), 0 8px 22px rgb(60 40 22 / .07);
}
.problem-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgb(27 28 28 / .06); font-size: .95rem; color: var(--muted); }
.problem-item[aria-selected="true"] .problem-icon { background: rgb(var(--hero-orange) / .14); color: var(--orange-accessible); }
.problem-text strong { display: block; font-size: .96rem; font-weight: 700; color: var(--ink); }
.problem-text small { display: block; margin-top: .12rem; font-size: .78rem; color: var(--muted); }
.problem-arrow { color: rgb(27 28 28 / .28); transition: color .25s ease, transform .25s ease; }
.problem-item:hover .problem-arrow, .problem-item[aria-selected="true"] .problem-arrow { color: var(--orange-accessible); transform: translate(2px, -2px); }

.problem-detail {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--panel-radius);
  background: var(--glass);
  box-shadow: 0 18px 44px -32px rgb(60 40 22 / .4);
}
.problem-detail-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font: 700 .7rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--orange-accessible); }
.problem-detail h3 { margin: 0 0 .85rem; max-width: 20ch; font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.16; }
.problem-detail-body { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--muted); }
.problem-detail-sub { margin: 1.5rem 0 .5rem; font-size: .82rem; font-weight: 700; color: var(--ink); }

.problem-example { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem; border-left: 2px solid rgb(var(--hero-orange) / .55); border-radius: 0 12px 12px 0; background: rgb(242 129 29 / .06); }
.problem-example-label { margin: 0 0 .55rem; font: 700 .7rem/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.problem-example-quote { margin: 0 0 .7rem; font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.problem-example-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.problem-example-note .icon { margin-top: .18rem; flex: 0 0 auto; color: var(--orange-accessible); }

@media (max-width: 900px) {
  .problem-explorer { grid-template-columns: 1fr; }
  .problem-detail { margin-top: .5rem; }
}
@media (max-width: 520px) {
  .problem-item { grid-template-columns: 1fr 1rem; gap: .7rem; }
  .problem-icon { display: none; }
}
}

/* Chart variant of a service card.
   The three service cards were structurally identical, which made the row read
   as one repeated shape. This one swaps its bullet list for a sparkline, so the
   card that sells dashboards actually shows one. The other two keep their lists
   deliberately — the point is variety across the row, not a new default.

   The line draws itself with `pathLength="100"`, which normalises the path to 100
   units so a stroke-dasharray of 100 is always exactly its length. That means no
   JS measurement, and editing the path data can never leave a half-drawn line. */
.way--chart .way-spark {
  margin: .25rem 0 0; padding: .85rem .95rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-inner);
  background: linear-gradient(180deg, #fff, var(--tint-1));
}
.way-spark-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .5rem; }
.way-spark-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; color: var(--ink); }
.way-spark-label .icon { color: var(--orange-accessible); }
.way-spark-value { font: 700 .7rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.way-spark-svg { display: block; width: 100%; height: auto; }
.way-spark-fill { fill: rgb(var(--hero-orange) / .1); opacity: 0; transition: opacity .6s ease .45s; }
.way-spark-line {
  fill: none; stroke: rgb(var(--hero-orange)); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
.way-spark-dot { fill: #fff; stroke: rgb(var(--hero-orange)); stroke-width: 2.5; opacity: 0; transition: opacity .3s ease .95s; }
.way--chart.is-visible .way-spark-line { stroke-dashoffset: 0; }
.way--chart.is-visible .way-spark-fill, .way--chart.is-visible .way-spark-dot { opacity: 1; }
.way-spark-note { margin: .55rem 0 0; font-size: .7rem; line-height: 1.4; color: var(--muted); }

/* Motion off: show the finished chart, never a blank panel. */
body[data-motion="reduced"] .way--chart .way-spark-line { stroke-dashoffset: 0; transition: none; }
body[data-motion="reduced"] .way--chart .way-spark-fill,
body[data-motion="reduced"] .way--chart .way-spark-dot { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .way-spark-line, .way-spark-fill, .way-spark-dot { transition: none !important; }
  .way-spark-line { stroke-dashoffset: 0; }
  .way-spark-fill, .way-spark-dot { opacity: 1; }
}

/* Split media / copy section.
   A third section shape for the home page, which had become a run of card grids.
   Media left, copy right: pill eyebrow, large headline, short paragraphs, one
   quiet CTA. Deliberately generous whitespace — this is the page breathing
   between two denser sections, so resist the urge to fill it. */

.split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split-media {
  margin: 0; overflow: hidden; border-radius: var(--r-card);
  background: linear-gradient(160deg, #fff, var(--tint-2));
  border: 1px solid var(--line);
}
.split-media img { display: block; width: 100%; height: auto; }
.split-copy h2 {
  margin: 1.1rem 0 1rem; max-width: 16ch;
  font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08; text-wrap: balance;
}
.split-copy p { margin: 0 0 1rem; max-width: 46ch; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.split-cta { margin-top: .6rem; border-radius: 999px; }

@media (max-width: 860px) {
  .split-grid { grid-template-columns: 1fr; gap: 2rem; }
  .split-copy h2 { max-width: 20ch; }
}

/* Takeaways section (home page "Resources").
   A fourth section shape: pill eyebrow, headline, then a three-column grid of
   ticked points with no card chrome at all. The point is the absence of boxes —
   it reads as a quiet list rather than another grid of panels, which is what
   makes it a change of pace from the sections around it.

   The actions and the newsletter form are kept below the list rather than being
   folded into it. They are the section's whole job (template downloads, handbook,
   list signup), and a checklist with no way to act on it would have been a
   downgrade dressed up as a redesign. */

.takeaways h2 {
  margin: 1.1rem 0 .6rem; max-width: 18ch;
  font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.08;
}
.takeaways-lede { margin: 0 0 clamp(2.25rem, 5vw, 3.5rem); font-size: 1rem; color: var(--muted); }
.takeaways-grid {
  list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3.5rem);
}
.takeaways-grid li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .85rem; align-items: start; }
.takeaways-grid .icon { margin-top: .22rem; width: 1.1rem; height: 1.1rem; stroke-width: 2.4; color: var(--ink); }
.takeaways-grid strong { display: block; margin-bottom: .2rem; font-size: .96rem; font-weight: 700; color: var(--ink); }
.takeaways-grid span { display: block; font-size: .87rem; line-height: 1.55; color: var(--muted); }

.takeaways-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.takeaways-actions .button { border-radius: 999px; }
.takeaways-note { margin: 1rem 0 0; font-size: .82rem; color: var(--muted); }

.takeaways-news {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--tint-1);
}
.takeaways-news label { display: block; margin-bottom: .85rem; }
.takeaways-news label strong { display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.takeaways-news label span { display: block; margin-top: .15rem; font-size: .86rem; color: var(--muted); }
.takeaways-news-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.takeaways-news input {
  flex: 1 1 16rem; min-height: 48px; padding: .7rem 1rem;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.takeaways-news .button { border-radius: 999px; }

@media (max-width: 860px) { .takeaways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .takeaways-grid { grid-template-columns: 1fr; } }

/* `.news-note` is `color: #fff !important` for the old dark newsletter card.
   On this light panel that rendered a real message ("Signup opens shortly...")
   as invisible white-on-cream, so it is overridden in this scope rather than
   changed globally, in case a dark newsletter card comes back elsewhere. */
.takeaways .news-note { color: var(--muted) !important; }

/* ---------- legal pages (privacy.html) ----------
   Plain reading layout: one column at a comfortable measure, no panels. */
.legal-page.section { padding-top: clamp(4rem, 9vw, 6.5rem); }
.legal-shell { max-width: 46rem; }
.legal-header { display: grid; justify-items: start; gap: .8rem; margin-bottom: 2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.legal-header h1 { margin: 0; font: 700 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--display); letter-spacing: -.03em; }
.legal-header p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
.legal-header .legal-effective { font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-accessible); }
.legal-shell h2 { margin: 2.2rem 0 .7rem; font: 700 1.3rem/1.2 var(--display); letter-spacing: -.015em; }
.legal-shell p, .legal-shell li { font-size: .98rem; line-height: 1.7; color: var(--ink); }
.legal-shell p { margin: 0 0 .9rem; }
.legal-shell ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-shell li { margin-bottom: .45rem; }
.legal-shell a { color: var(--ink); text-decoration-color: var(--orange); text-underline-offset: 3px; }
.legal-contact { font-style: normal; line-height: 1.8; padding: 1.1rem 1.3rem; border-left: 3px solid var(--orange); background: rgba(255,255,255,.7); border-radius: 0 12px 12px 0; }

/* ---------- sample decision register (home "Delivery" section) ----------
   Shows the real deliverable the copy beside it describes, labeled as a sample. */

/* ---------- 404 page ----------
   The Shadow AI ghost searching the dark with a flashlight (pages/404.html). */
.not-found-hero .page-hero-grid { align-items: center; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.nf-links span { color: rgba(255,255,255,.55); font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nf-links a { color: #fff; text-decoration: none; }
.nf-links a:hover, .nf-links a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.nf-art { display: grid; place-items: center; }
.nf-scene { width: min(100%, 560px); height: auto; overflow: visible; }
.nf-traces path { stroke: rgba(255,255,255,.1); stroke-width: 1.5; }
.nf-traces .nf-pulse { stroke: var(--orange); stroke-width: 2; stroke-dasharray: 36 384; opacity: .8; }
.nf-digits { font-family: "Shlop", "Fira Sans", serif; font-size: 210px; letter-spacing: .02em; }
.nf-digits--dim { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.16); stroke-width: 1.5; }
.nf-digits--lit { fill: url(#nf-lit-fill); }
.nf-beam { mix-blend-mode: screen; }
.nf-ghost-body { fill: #171b21; stroke: var(--orange); stroke-width: 1.4; }
.nf-ember { fill: var(--orange); filter: drop-shadow(0 0 3px rgba(242,129,29,.9)); }
.nf-ghost-mouth { fill: #0b0d10; stroke: var(--orange); stroke-opacity: .5; }
/* On phones the mascot leads, smaller, so it is seen without scrolling. */
@media (max-width: 900px) {
  .not-found-hero .nf-art { order: -1; }
  .nf-scene { width: min(100%, 340px); }
}
/* One ghost per page: the alert widget would be a second one. */
body:has(.not-found-hero) .ghost-widget { display: none; }

/* Homepage hero art: the handbook the primary button offers, as the object itself. */
.hero-handbook { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.4rem; color: var(--ink); text-decoration: none; }
.hero-handbook .handbook-book { display: block; width: min(15.5rem, 100%); transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.hero-handbook .handbook-book-cover { box-shadow: 5px 1px 0 -1px #f3eee8, 9px 2px 0 -2px #e4dcd2, 13px 3px 0 -3px #d8cfc4, 26px 34px 60px rgba(94,37,0,.45); }
.hero-handbook-caption { display: grid; gap: .3rem; justify-items: center; padding: .7rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px rgba(94,37,0,.16); font: 700 .7rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hero-handbook-caption strong { font: 700 .95rem/1 var(--display); letter-spacing: -.01em; text-transform: none; }
.hero-handbook:hover .handbook-book, .hero-handbook:focus-visible .handbook-book { transform: translateY(-6px) rotate(-1deg); }
.hero-handbook:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; border-radius: var(--r-inner); }

/* ---------- AI Governance page: stage bar, Stage 02, byline ----------
   The page is long, so the four stages ride along as a slim frosted bar under
   the header, marking the one being read (roadmap.js). Sticky headings and
   anchor jumps account for both bars through --stagebar-h. */
body[data-page="governance"] { --stagebar-h: 3.6rem; }
body[data-page="governance"] main > section { scroll-margin-top: calc(var(--header-h) + var(--stagebar-h)); }
/* Hidden while the hero is on screen (the hero already lists the stages), then
   slides out from under the header. Fixed, so it never occupies a gap between
   sections. roadmap.js toggles .is-visible. */
.governance-roadmap.stage-bar { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 45; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .35s cubic-bezier(.2,.75,.2,1), opacity .25s ease, visibility 0s linear .35s; overflow: visible; content-visibility: visible; contain-intrinsic-size: none; padding: 0; background: rgba(255, 253, 251, .9); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(79, 55, 32, .06); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.governance-roadmap.stage-bar::before { display: none; }
.governance-roadmap.stage-bar.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform .35s cubic-bezier(.2,.75,.2,1), opacity .25s ease, visibility 0s; }
body[data-motion="reduced"] .governance-roadmap.stage-bar { transition: none; }
.stage-bar-inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--stagebar-h); }
.stage-bar-label { flex: 0 0 auto; color: var(--muted); font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stage-bar .roadmap-track { flex: 1 1 auto; min-width: 0; }
.stage-bar .roadmap-tabs { flex-wrap: nowrap; gap: .25rem; margin: 0; }
.stage-bar .roadmap-tabs .roadmap-tab-link { position: relative; flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: .45rem; min-height: 0; padding: .55rem .8rem; border: 0; border-radius: 999px; background: transparent; box-shadow: none; transform: none; color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.stage-bar .roadmap-tabs .roadmap-tab-link:hover { background: rgb(var(--accent-warm) / .08); transform: none; }
.stage-bar .roadmap-number { font: 700 .7rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.stage-bar .roadmap-tabs .roadmap-tab-link strong { font: 700 .95rem/1 var(--display); }
.stage-bar .roadmap-tabs .roadmap-tab-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .15rem; height: 2px; border-radius: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.stage-bar .roadmap-tabs .roadmap-tab-link.is-current-stage::after { transform: scaleX(1); }
.stage-bar .roadmap-tabs .roadmap-tab-link.is-current-stage .roadmap-number { color: var(--orange-accessible); }
.stage-bar-included { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border: 1px solid rgb(var(--accent-warm) / .45); border-radius: 999px; background: #fff; color: var(--ink); font: 700 .85rem/1 var(--display); text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.stage-bar-included:hover, .stage-bar-included:focus-visible, .stage-bar-included.is-current-stage { background: var(--orange); border-color: var(--orange); }

/* Hero: a quiet route straight to the service description. */
.page-hero-sublink { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; color: rgba(255, 255, 255, .82); font-size: .92rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--accent-warm) / .8); text-underline-offset: 4px; }
.page-hero-sublink:hover, .page-hero-sublink:focus-visible { color: #fff; }

/* What's included: who does the work. */
.package-byline { max-width: 72ch; margin: clamp(1rem, 2vw, 1.4rem) 0 0; padding: .95rem 1.2rem; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .72); color: var(--muted); font-size: .95rem; line-height: 1.6; }
.package-byline strong { color: var(--ink); }
.package-byline a { color: var(--ink); font-weight: 700; white-space: nowrap; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* Stage headings stick below both bars. (Their sections use overflow: clip,
   not hidden: hidden makes a scroll container and silently disables sticky.) */
body[data-page="governance"] .stage-split > .section-heading { top: calc(var(--header-h) + var(--stagebar-h) + 1.5rem); }

@media (max-width: 900px) {
  .stage-bar-label { display: none; }
  .stage-bar-inner { gap: .6rem; }
  .stage-bar .roadmap-track { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .stage-bar .roadmap-track::-webkit-scrollbar { display: none; }
  .stage-bar .roadmap-number { display: none; }
  .stage-bar-included { padding: .5rem .8rem; font-size: .8rem; }
}

/* ---------- Governance Stage 02: the three documents ----------
   Each document is a row: what it is on the left, a sample of it on the right.
   The numbered rail down the left edge ties the three together. */
.govern-docs { display: grid; gap: clamp(1.4rem, 3vw, 2rem); margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.govern-doc-copy { display: grid; gap: .8rem; justify-items: start; }
.govern-doc-copy h3 { margin: 0; font: 700 clamp(1.35rem, 2.4vw, 1.7rem)/1.15 var(--display); letter-spacing: -.02em; }
.govern-doc-copy > p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.govern-doc-cta { margin-top: .3rem; }
.govern-doc-copy .govern-doc-note { margin-top: -.2rem; font: 700 .7rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.govern-doc-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.govern-doc-sample { margin: 0; min-width: 0; }

/* A policy excerpt, set like a page of the document. */

/* The approval process as four connected steps. */

.govern-docs-close { margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 1rem 1.3rem; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .72); font-size: .98rem; }
.govern-docs-close a { margin-left: .4rem; color: var(--ink); font-weight: 700; white-space: nowrap; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* ---------- Governance Stage 03: what is watched, then a sample report ---------- */
.watch-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: clamp(1.4rem, 3vw, 2rem) 0 1.2rem; padding: 0; list-style: none; }
.watch-legend li { display: grid; gap: .3rem; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--cat); }
.watch-legend strong { font: 700 1rem/1.25 var(--display); }
.watch-legend span { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.watch-legend--data, .report-cat--data { --cat: #c23b1f; }
.watch-legend--tools, .report-cat--tools { --cat: #d9790f; }
.watch-legend--access, .report-cat--access { --cat: #537397; }

.report-sample table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.report-sample th, .report-sample td { padding: .95rem 1.3rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.report-sample thead th { padding-block: .7rem; background: #faf7f3; color: var(--muted); font: 700 .7rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.report-sample tbody th { width: 42%; font-weight: 600; }
.report-sample td { color: var(--muted); }
.report-sample td:last-child { width: 1%; white-space: nowrap; }
.report-cat { display: block; margin-bottom: .3rem; color: var(--cat); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.report-cat::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: var(--cat); vertical-align: .05rem; }
.report-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding: 1rem 1.3rem; background: #faf7f3; font-size: .88rem; color: var(--muted); }
.report-steps ol { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.report-steps li { counter-increment: steps; color: var(--ink); }
.report-steps li::before { content: counter(steps) "."; margin-right: .35rem; color: var(--orange-accessible); font: 700 .8rem/1 var(--mono); }
.report-note { margin: .9rem 0 0; color: var(--muted); font-size: .84rem; }

@media (max-width: 900px) {
        .watch-legend { grid-template-columns: 1fr; }
      }
@media (max-width: 640px) {
    .report-sample thead th:nth-child(2), .report-sample td:nth-child(2) { display: none; }
  .report-sample th, .report-sample td { padding: .8rem .9rem; }
  .report-sample tbody th { width: auto; }
}

/* ---------- Samples that look like the real thing ----------
   Each sample is dressed as the document it represents (a printed page, a
   spreadsheet, a filled-in form), not as a UI card: near-square corners, a
   paper shadow, sentence-case labels, and no pills. */
.govern-doc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); }
.govern-doc:first-child { border-top: 0; padding-top: .5rem; }
.govern-doc-num { color: var(--orange); font: 700 2.4rem/1 var(--display); letter-spacing: -.03em; }

/* The register as a spreadsheet, down to the workbook's real sheet tabs. */

/* The monthly report as a document. */
.report-sample .report-summary { margin: 0 0 1.2rem; font-size: 1rem; color: #3a3a3a; }
.report-sample table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.report-sample th, .report-sample td { padding: .85rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.report-sample thead th { padding-block: .5rem; border-bottom: 1.5px solid var(--ink); background: none; color: var(--muted); font: 600 .8rem/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.report-sample .report-cat { font: 600 .78rem/1.2 var(--body); letter-spacing: 0; text-transform: none; }
.report-sample .report-steps li::before { font: 700 .88rem/1 var(--body); }
.report-sample .report-steps { margin-top: 1rem; padding: .9rem 0 0; border-top: 1px solid var(--line); background: none; }

@media (max-width: 900px) {
  .govern-doc { grid-template-columns: 1fr; }
}

/* ---------- Paper: texture and restraint ----------
   A faint fibre grain over warm stock, one hairline under the letterhead, and
   nothing else competing: no tinted boxes, no colored side-borders. */

.report-sample thead th { border-bottom: 1px solid rgba(27, 28, 28, .35); }
.report-sample .report-steps { border-top: 0; padding-top: .4rem; }

/* The spreadsheet stays a screen, so no grain; just quieter lines. */

/* ---------- Document samples (Governance page, homepage register) ----------
   Each sample mirrors a real Noventech download: the Policy Builder output, the
   AI Governance Workbook, the AI Tool Approval Request, the monthly report.
   One shell for all of them: --r-card corners, warm paper with a faint grain,
   the shared card shadow, and a small lift on hover. */
.doc-card {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(60, 45, 30, .1); border-radius: var(--r-card); color: var(--ink);
  background: var(--grain), linear-gradient(180deg, #fffdf9, #faf7f1);
  box-shadow: var(--shadow-card); transform: none;
  transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.govern-doc .doc-card { transform: none; }
.govern-doc .doc-card:hover { transform: translateY(-3px); }
.paper.doc-card { padding: 1.7rem 1.9rem 1.2rem; }

/* Policy Builder output */
.pd-head { position: relative; padding-bottom: 1rem; margin-bottom: 1.1rem; border-bottom: 3px solid var(--orange); }
.pd-logo { position: absolute; top: 0; right: 0; width: 92px; height: auto; }
.pd-eyebrow { margin: 0 0 .3rem; color: #b45309; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pd-title { margin: 0 0 .9rem; padding-right: 100px; font: 700 1.15rem/1.25 var(--display); color: var(--ink); }
.paper .pd-title { font-size: 1.15rem; color: var(--ink); }
.pd-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.4rem; margin: 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.pd-meta dt, .ad-meta dt { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8f96; }
.pd-meta dd, .ad-meta dd { margin: 0; font-size: .84rem; font-weight: 700; }
.paper .pd-h { margin: 1rem 0 .55rem; font: 700 .92rem/1.3 var(--display); color: var(--ink); }
.pd-approved { padding: .7rem .9rem; border: 1px solid rgba(31,157,99,.3); border-left: 4px solid var(--emerald); border-radius: var(--r-small); background: rgba(31,157,99,.07); }
.pd-badge { display: inline-block; margin-bottom: .45rem; padding: .15rem .55rem; border-radius: 999px; background: #eafaf2; color: var(--emerald); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pd-approved ul { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.pd-approved li::before { content: "\2713"; margin-right: .4rem; color: var(--emerald); font-weight: 800; }
.pd-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.pd-tiers div { display: grid; gap: .1rem; padding: .55rem .7rem; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r-small); background: color-mix(in srgb, var(--c) 7%, #fff); }
.pd-tiers b { font-size: .8rem; color: var(--c); }
.pd-tiers span { font-size: .76rem; color: #555; }
.pd-tiers [data-risk="public"] { --c: #1f9d63; }
.pd-tiers [data-risk="internal"] { --c: #537397; }
.pd-tiers [data-risk="sensitive"] { --c: #d9690f; }
.pd-tiers [data-risk="restricted"] { --c: #c23b1f; }

/* AI Tool Approval Request */
.ad-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .7rem; border-bottom: 3px solid var(--orange); }
.ad-head .pd-logo { position: static; }
.ad-eyebrow { margin: 0 0 .2rem; color: #b45309; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.paper .ad-title { margin: 0; font: 700 1.2rem/1.2 var(--display); color: var(--ink); }
.ad-meta { display: flex; gap: 1.6rem; margin: .7rem 0 1rem; }
.paper .ad-section { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font: 700 .92rem/1.2 var(--display); color: var(--ink); }
.ad-section span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.25rem; border-radius: 4px; background: var(--orange); color: #fff; font-size: .78rem; }
.ad-fields { margin: 0; }
.ad-fields > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid rgba(27,28,28,.1); }
.ad-fields dt { font-size: .78rem; font-weight: 600; color: #8a8f96; }
.ad-fields dd { margin: 0; font-size: .86rem; }
.ad-boxes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.ad-boxes .box::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border: 1.25px solid var(--ink); border-radius: 2px; vertical-align: -.1rem; }
.ad-boxes .box.is-checked { font-weight: 700; }
.ad-boxes .box.is-checked::before { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .6rem no-repeat; }
.ad-written { font-style: italic; color: #2d3a55; }

/* AI Governance Workbook, AI Register sheet: navy header, pale-yellow input cells. */
.register-sample.doc-card { background: #fff; }
.register-sample .sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid #dde1e4; background: #f5f6f7; font-size: .76rem; font-weight: 600; }
.register-sample .sheet-file { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-sample .sheet-file i { flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 2px; background: #1f7a4a; }
.register-sample .sheet-sample { flex: 0 0 auto; color: var(--muted); font-weight: 500; }
.sheet-body { padding: .9rem 1rem 1rem; }
.sheet-title { margin: 0 0 .7rem; font: 700 1.05rem/1.2 Arial, var(--body); color: #172033; }
.register-sample table { width: 100%; border-collapse: collapse; font: .8rem/1.35 Arial, var(--body); color: #172033; }
.register-sample th, .register-sample td { padding: .5rem .6rem; border: 0; border-bottom: 1px solid #d8dee6; text-align: left; vertical-align: top; }
.register-sample thead th { background: #172033; color: #fff; font: 700 .74rem/1.25 Arial, var(--body); text-align: center; text-transform: none; letter-spacing: 0; }
.register-sample tbody th, .register-sample tbody td { background: #fffbea; }
.register-sample tbody th { font-weight: 700; }
.sheet-id { color: #556070; white-space: nowrap; }
.sheet-drop { position: relative; padding-right: 1.3rem !important; white-space: nowrap; }
.sheet-drop::after { content: ""; position: absolute; right: .5rem; top: 50%; border: 4px solid transparent; border-top-color: #8a8f96; transform: translateY(-15%); }
.register-status, .tier { font-weight: 700; }
.register-status::before { display: none; }
.register-status--approved { color: #146b43; }
.register-status--pilot { color: #9a5405; }
.register-status--proposed { color: #3a5470; }
.register-status--rejected { color: #9c2f18; }
.tier--low { color: #146b43; }
.tier--moderate { color: #9a5405; }
.tier--high { color: #9c2f18; }
.register-sample .sheet-tabs { display: flex; overflow: hidden; border-top: 1px solid #dde1e4; background: #f5f6f7; font-size: .72rem; color: var(--muted); }
.register-sample .sheet-tabs span { padding: .4rem .75rem; border-right: 1px solid #e6e9eb; white-space: nowrap; }
.register-sample .sheet-tabs .is-active { background: #fff; color: #1f7a4a; font-weight: 700; box-shadow: inset 0 2px 0 #1f7a4a; }
.register-sample figcaption { padding: .7rem 1rem; border-top: 1px solid #eef0f2; background: #fff; color: var(--muted); font-size: .76rem; line-height: 1.5; }

/* Monthly report */
.report-sample.doc-card { padding: 1.8rem 2rem 1.4rem; }

@media (max-width: 640px) {
  .paper.doc-card, .report-sample.doc-card { padding: 1.2rem 1.1rem 1rem; }
  .pd-tiers { grid-template-columns: 1fr; }
  .pd-title { padding-right: 0; }
  .pd-head .pd-logo { display: none; }
  .ad-fields > div { grid-template-columns: 1fr; gap: .15rem; }
  .register-sample thead th:nth-child(1), .register-sample td:nth-child(1), .register-sample thead th:nth-child(3), .register-sample td:nth-child(3) { display: none; }
  .register-sample .sheet-tabs span:nth-child(n+4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .doc-card, .doc-card:hover { transition: none; transform: none; } }

/* ---------- One card system ----------
   Every card on the site shares the same corners, resting shadow, and hover
   response, so pages read as one site. Colors and content vary; the object
   doesn't. */
.glass-panel { --radius: var(--r-card); box-shadow: var(--shadow-card), inset 0 1px rgba(255,255,255,.85); }
.learn-card, .watch-card, .tool-card, .package-phase, .govern-doc .doc-card { border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease, border-color .3s ease; }
.learn-card:hover, .watch-card:hover, .tool-card:hover { transform: translateY(-4px); border-color: rgb(var(--accent-warm) / .4); box-shadow: var(--shadow-card-hover); }
.package-phase--managed { box-shadow: 0 2px 4px rgba(20, 11, 6, .12), 0 26px 60px -20px rgba(20, 11, 6, .45); }
.learn-grid--timeline .learn-card, .learn-grid--timeline .learn-card:hover { box-shadow: none; transform: none; border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .learn-card:hover, .watch-card:hover, .tool-card:hover { transform: none; } }
/* Shared document parts: letterhead (report), body text, and page footer. */
.doc-card .paper-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; margin-bottom: 1.2rem; border-bottom: 3px solid var(--orange); font-size: .76rem; font-weight: 700; color: var(--ink); }
.doc-card .paper-head span:last-child { color: var(--muted); font-weight: 500; }
.doc-card.paper p { margin: 0 0 .7rem; font-size: .88rem; line-height: 1.6; color: #3a3a3a; }
.doc-card .paper-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .7rem; color: #8a857c; }
.doc-card.paper .pd-eyebrow { margin: 0 0 .3rem; color: #b45309; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.doc-card.paper .pd-title { margin: 0 0 .9rem; padding-right: 100px; font: 700 1.2rem/1.25 var(--display); color: var(--ink); }
.doc-card.paper .pd-h { margin: 1.15rem 0 .55rem; font: 700 .92rem/1.3 var(--display); color: var(--ink); }
.doc-card.paper .ad-eyebrow { margin: 0 0 .2rem; color: #b45309; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.doc-card.paper .ad-title { margin: 0; font: 700 1.2rem/1.2 var(--display); color: var(--ink); }
.doc-card.paper .ad-section { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font: 700 .92rem/1.2 var(--display); color: var(--ink); }
@media (max-width: 640px) { .doc-card.paper .pd-title { padding-right: 0; } }

/* ---------- AI Governance page: breathing room ----------
   Fewer blocks per stage, and more space between them, so each stage reads as
   one idea: a heading, a sentence, and one sample. */
body[data-page="governance"] main > .section:not(.page-hero):not(.shadow):not(.final-cta) { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
body[data-page="governance"] .section-lede { max-width: 52ch; }
body[data-page="governance"] .govern-doc { padding-block: clamp(2.5rem, 5vw, 4rem); }
body[data-page="governance"] .package-addons, body[data-page="governance"] .package-boundaries { margin-top: clamp(2.2rem, 4vw, 3.2rem); }

/* Stage 04: the one-page guide staff actually receive, with two notes beside it. */
.educate-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.guide-doc { max-width: 560px; }
.guide-rules { display: grid; gap: .6rem; margin: 0; }
.guide-rule { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; padding: .75rem .9rem; border-radius: var(--r-small); background: color-mix(in srgb, var(--c) 8%, transparent); }
.guide-rule dt { color: var(--c); font: 700 .86rem/1.3 var(--display); }
.guide-rule dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.guide-rule--ok { --c: #1f9d63; }
.guide-rule--no { --c: #c23b1f; }
.guide-rule--ask { --c: #b45309; }
.guide-rule--help { --c: #3a5470; }
.educate-notes { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.educate-notes li { display: grid; gap: .45rem; padding-left: 1.2rem; border-left: 2px solid var(--orange); }
.educate-notes strong { font: 700 1.2rem/1.25 var(--display); letter-spacing: -.01em; }
.educate-notes span { color: var(--muted); font-size: 1rem; line-height: 1.6; }
@media (max-width: 900px) { .educate-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .guide-rule { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- AI Governance page: balance ----------
   Approximate symmetry: every stage opens with a centered heading, and the
   content beneath it is balanced around the center line. Stage 02 alternates
   copy and sample left and right (a Z-pattern), which scans well here because
   the samples carry information rather than decoration (NN/g). Plain text
   replaces boxes that only held one line. */
body[data-page="governance"] :is(#assessment, #monitoring, #educate, #whats-included) > .shell > .section-heading { max-width: 760px; margin-inline: auto; text-align: center; }
body[data-page="governance"] :is(#assessment, #monitoring, #educate, #whats-included) > .shell > .section-heading .section-lede { margin-inline: auto; }

.govern-doc:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.govern-doc:nth-child(even) .govern-doc-copy { order: 2; }
.govern-doc { border-top: 0; }
.govern-docs-close { max-width: 760px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; font-size: 1.05rem; }

.package-byline { max-width: 640px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
.package-phases { margin-top: clamp(2rem, 4vw, 3rem); }
.package-addons h3, .package-boundaries h3 { text-align: center; }
.package-addons ul { gap: 0; }
.package-addons li { padding: .4rem clamp(1rem, 3vw, 2rem); border: 0; border-radius: 0; background: none; text-align: center; }
.package-addons li + li { border-left: 1px solid var(--line); }
.package-boundaries { text-align: center; }
.package-boundaries p { max-width: 42ch; margin-inline: auto; }

@media (max-width: 900px) {
  .govern-doc:nth-child(even) { grid-template-columns: 1fr; }
  .govern-doc:nth-child(even) .govern-doc-copy { order: 0; }
  .package-addons li + li { border-left: 0; border-top: 1px solid var(--line); }
}
body[data-page="governance"] .section-heading h2 { text-wrap: balance; }
body[data-page="governance"] .report-note { text-align: center; }

/* Governance phase pop-outs: the full deliverable list, on demand. */
.package-more { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 1px solid rgb(var(--accent-warm) / .5); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .9rem; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.package-more:hover, .package-more:focus-visible { background: var(--orange); border-color: var(--orange); }
.package-phase--managed .package-more { color: #fff; border-color: rgba(255,255,255,.35); }
.package-phase--managed .package-more:hover, .package-phase--managed .package-more:focus-visible { color: var(--ink); }
.detail-dialog { width: min(820px, 100%); border-radius: var(--r-card); }
.detail-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.detail-timeline li { display: grid; gap: .2rem; padding: .7rem .8rem; border-radius: var(--r-inner); background: rgb(var(--accent-warm) / .08); }
.detail-timeline b { font: 700 .92rem/1.2 var(--display); }
.detail-timeline span { color: var(--muted); font-size: .82rem; }
.detail-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
.detail-groups h3 { margin: 0 0 .5rem; color: var(--orange-accessible); font: 700 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.detail-groups ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.detail-groups li { position: relative; padding-left: 1.4rem; font-size: .9rem; line-height: 1.45; }
.detail-groups li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); }
.detail-note { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) { .detail-timeline, .detail-groups { grid-template-columns: 1fr; } }

/* ---------- Balance, site-wide ----------
   A heading stacked above full-width content is centered, with its lede on a
   readable measure, so every page opens each section on the center line.
   Headings that sit beside content in a split layout stay left-aligned. */
main > .section > .shell > .section-heading-left { max-width: 760px; margin-inline: auto; text-align: center; }
main > .section > .shell > .section-heading-left h2 { text-wrap: balance; }
main > .section > .shell > .section-heading-left .section-lede { max-width: 58ch; margin-inline: auto; }
.ways-foot { max-width: 60ch; margin-inline: auto; text-align: center; }

/* ---------- Restraint pass (2026-09-25) ----------
   Buttons are solid fills: no glass blur, no glow, no gloss gradient, no lift.
   The warm paper document samples are the site's one signature surface; the
   controls around them stay quiet. The !important on the effect properties is
   deliberate: about a dozen contextual button rules each re-add a shadow. */
.button { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.button:hover { transform: none; }
.button-primary,
.page-hero .button-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.button-primary:hover, .button-primary:focus-visible,
.page-hero .button-primary:hover, .page-hero .button-primary:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.button-quiet,
.resource-actions .button-quiet { background: #fff; border-color: rgba(27,28,28,.22); color: var(--ink); }
.button-quiet:hover, .button-quiet:focus-visible,
.resource-actions .button-quiet:hover { background: #fff; border-color: var(--ink); }
/* On the orange home hero and the orange About panel: white primary, ink secondary. */
.hero .button-primary,
.about-reach-panel .button-primary { background: #fff; border-color: #fff; color: var(--ink); }
.hero .button-primary:hover, .hero .button-primary:focus-visible,
.about-reach-panel .button-primary:hover, .about-reach-panel .button-primary:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero .button-quiet,
body[data-page="home"] .hero .button-quiet { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero .button-quiet:hover, .hero .button-quiet:focus-visible,
body[data-page="home"] .hero .button-quiet:hover, body[data-page="home"] .hero .button-quiet:focus-visible { background: #000; border-color: #000; }
/* On the dark sub-page heroes and the handbook panel: outline secondary. */
.page-hero .button-quiet,
.handbook-download-panel .button-quiet { background: transparent; border-color: rgb(255 255 255 / .5); color: #fff; }
.page-hero .button-quiet:hover, .page-hero .button-quiet:focus-visible,
.handbook-download-panel .button-quiet:hover, .handbook-download-panel .button-quiet:focus-visible { background: rgb(255 255 255 / .1); border-color: #fff; }
.page-hero .button-primary:hover, .page-hero .button-primary:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.news-form .button { background: var(--ink); border-color: var(--ink); color: #fff; }
.news-form .button:hover, .news-form .button:focus-visible { background: #000; border-color: #000; }

/* Section labels: a quiet editorial tag with a short rule, not a mono pill.
   The mono face is kept for real data (file names, counts, IDs). */
.section-index { gap: .6rem; padding: 0; border: 0; border-radius: 0; background: none; font: 600 .74rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.section-index::before { content: ""; width: 1.6rem; height: 2px; background: var(--orange); }
.page-hero .section-index, .page-hero-eyebrow { border: 0; background: none; padding-inline: 0; }

/* Header: solid, and the booking button lives here instead of the motion switch. */
.site-header { background: #fff; }
.header-actions .button-compact { min-height: 42px; padding: .55rem 1.1rem; }

/* Motion switch: moved to the footer's bottom row. */
.site-footer-bottom .motion-toggle { min-height: 36px; padding: .2rem .7rem .2rem .4rem; border-color: var(--line); background: transparent; font-size: .74rem; font-weight: 600; }
.site-footer-bottom .motion-toggle .motion-switch { transform: scale(.85); }

/* ---------- Heading variety ----------
   Same headings, three treatments, so the page doesn't read as one centered
   stamp repeated: centered (default), split (heading left, lede right), and
   rail (heading pinned left beside its content). */
main > .section > .shell > .section-heading.section-heading--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 1rem clamp(2rem, 6vw, 5rem); max-width: none; margin: 0 0 2.75rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); text-align: left; }
main > .section > .shell > .section-heading.section-heading--split > .section-index { grid-column: 1 / -1; }
main > .section > .shell > .section-heading.section-heading--split h2 { margin: 0; text-wrap: balance; }
main > .section > .shell > .section-heading.section-heading--split .section-lede { max-width: 46ch; margin: 0; }
@media (max-width: 800px) { main > .section > .shell > .section-heading.section-heading--split { grid-template-columns: 1fr; } }

.section-rail { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.section-rail > .section-heading { max-width: none; margin: 0; text-align: left; }
.section-rail > .section-heading h2 { text-wrap: balance; }
.section-rail > .section-heading .section-lede { margin: 0; }
.section-rail .faq-list { max-width: none; margin: 0; }
@media (max-width: 900px) { .section-rail { grid-template-columns: 1fr; } .section-rail > .section-heading { position: static; } }

/* Why Noventech: left-aligned, two readable paragraphs, not a centered block. */
.why-noventech .section-heading, .why-noventech .section-heading h2 { text-align: left; }
.why-noventech .why-noventech-copy, .why-noventech .why-noventech-credential { margin-inline: 0; }

/* Closing orange panel: tighter headline leading. */
.final-cta-panel h2 { line-height: 1.12; text-wrap: balance; }

/* Shadow AI alert: waits until the visitor has scrolled past the hero, stays
   dismissed for the session, and never sits over body text on phones. */
.ghost-widget.is-waiting { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
@media (max-width: 720px) { .ghost-widget { display: none; } }

/* ---------- App shots: realistic product screens in the service heroes ----------
   Light UI on the dark hero, the way a real screenshot sits on a page. Each one
   is a fictional client (Riverside Services, the same one the governance samples
   use) and carries a visible "illustrative" caption. */
.app-shot { position: relative; margin: 0; }
.app-shot-window { overflow: hidden; border-radius: var(--r-card); background: #f7f8fa; color: #1f2328; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .65), 0 0 0 1px rgb(255 255 255 / .08); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; text-align: left; }
.app-shot-caption { margin: .8rem 0 0; font-size: .74rem; color: rgb(255 255 255 / .62); }
/* The dashboard runs off the hero's right edge like a cropped screenshot. */
@media (min-width: 901px) {
  .app-shot--bleed { width: 128%; }
  .app-shot--bleed .app-shot-caption { max-width: 78%; }
}

/* Dashboard */
.rd-bar { display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; background: #fff; border-bottom: 1px solid #e3e6ea; font-size: .7rem; white-space: nowrap; }
.rd-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #1d4e63; color: #fff; font-weight: 700; font-size: .72rem; }
.rd-title { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; color: #57606a; font-size: .7rem; }
.rd-title b { color: #1f2328; font-size: .78rem; font-weight: 600; }
.rd-filter { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .55rem; border: 1px solid #d0d7de; border-radius: 4px; color: #1f2328; background: #fff; }
.rd-filter i { width: 5px; height: 5px; border-right: 1.5px solid #57606a; border-bottom: 1.5px solid #57606a; transform: rotate(45deg) translateY(-2px); }
.rd-fresh { display: inline-flex; align-items: center; gap: .35rem; color: #57606a; }
.rd-fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: #1a7f37; }
.rd-body { display: grid; gap: .6rem; padding: .7rem; }
.rd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.rd-kpi { display: grid; gap: .15rem; padding: .6rem .7rem; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; }
.rd-kpi span { font-size: .7rem; color: #57606a; }
.rd-kpi b { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rd-kpi em { font-style: normal; font-size: .7rem; color: #57606a; }
.rd-kpi em.is-up { color: #1a7f37; }
.rd-kpi em.is-down { color: #bc4c00; }
.rd-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .6rem; }
.rd-card { padding: .65rem .75rem; border: 1px solid #e3e6ea; border-radius: 6px; background: #fff; }
.rd-card-title { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-size: .72rem; font-weight: 600; }
.rd-card-title span { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; font-size: .7rem; color: #57606a; }
.rd-key { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.rd-key--actual { background: #1d4e63; }
.rd-key--budget { height: 0; border-top: 2px dashed #e0751a; border-radius: 0; margin-left: .3rem; }
.rd-chart svg { display: block; width: 100%; height: auto; }
.rd-grid line { stroke: #eceff2; }
.rd-axis text { fill: #6e7781; font-size: 8px; text-anchor: end; font-family: inherit; }
.rd-axis--x text { text-anchor: middle; }
.rd-bars rect { fill: #9fb8c4; rx: 2; }
.rd-bars rect.is-current { fill: #1d4e63; }
.rd-budget { fill: none; stroke: #e0751a; stroke-width: 1.6; stroke-dasharray: 4 3; }
.rd-list ul { display: grid; margin: 0; padding: 0; list-style: none; }
.rd-list li { display: grid; gap: .1rem; padding: .35rem 0 .35rem .6rem; border-left: 2px solid #e0751a; }
.rd-list li + li { margin-top: .4rem; }
.rd-list b { font-size: .72rem; font-weight: 600; }
.rd-list span { font-size: .7rem; color: #57606a; }
.rd-foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .5rem .85rem; border-top: 1px solid #e3e6ea; background: #fff; font-size: .7rem; color: #57606a; white-space: nowrap; }

/* Agent flow */
.flow-bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; background: #fff; border-bottom: 1px solid #e1dfdd; font-size: .72rem; }
.flow-name { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; color: #605e5c; font-size: .7rem; }
.flow-name b { color: #242424; font-size: .82rem; font-weight: 600; }
.flow-saved { color: #605e5c; }
.flow-btn { padding: .3rem .7rem; border: 1px solid #d1d1d1; border-radius: 4px; background: #fff; font-weight: 600; }
.flow-btn--primary { border-color: #0f6cbd; background: #0f6cbd; color: #fff; }
.flow-canvas { position: relative; display: grid; justify-items: center; gap: 1.05rem; padding: 1.1rem .9rem 1.2rem 4.6rem; background-color: #f5f5f5; background-image: radial-gradient(#d6d6d6 1px, transparent 1px); background-size: 14px 14px; }
.flow-node { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 340px; padding: .55rem .7rem; border: 1px solid #e1dfdd; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .08); font-size: .7rem; line-height: 1.35; }
.flow-node b { display: block; font-size: .76rem; font-weight: 600; color: #242424; }
.flow-node span:not(.flow-ico) { color: #605e5c; }
.flow-node i { font-style: normal; font-weight: 600; }
/* Connector between stacked nodes. */
.flow-canvas > .flow-node:not(:first-child)::before, .flow-branches::before { content: ""; position: absolute; left: 50%; top: -1.05rem; height: 1.05rem; border-left: 1.5px solid #a19f9d; }
.flow-branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; max-width: 340px; }
.flow-branch { display: grid; gap: .3rem; align-content: start; }
.flow-branch .flow-node { padding: .5rem .55rem; }
.flow-branch-label { margin: 0; font-size: .7rem; font-weight: 600; color: #605e5c; }
.flow-branch-label--yes { color: #0e700e; }
/* Beat labels on the left rail tie the flow to the page's four beats. */
.flow-node[data-beat]::after { content: attr(data-beat); position: absolute; right: calc(100% + .7rem); top: 50%; transform: translateY(-50%); padding: .15rem .45rem; border-radius: 999px; background: #fde9d7; color: #8d3d00; font: 600 .7rem/1.3 var(--body); white-space: nowrap; }
.flow-node--human { border-color: #e0751a; box-shadow: 0 0 0 2px rgb(224 117 26 / .15); }
.flow-tag { margin-left: auto; padding: .1rem .4rem; border-radius: 4px; background: #ebe7fd; color: #5b3fd1; font-style: normal !important; font-size: .7rem; font-weight: 700; }
.flow-ico { flex: none; width: 24px; height: 24px; border-radius: 5px; background-position: center; background-repeat: no-repeat; background-size: 14px; }
.flow-ico--mail { background-color: #0f6cbd; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.flow-ico--ai { background-color: #6f4bd8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E"); }
.flow-ico--db { background-color: #03787c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.flow-ico--cond { background-color: #616161; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 9a9 9 0 0 1-9 9'/%3E%3C/svg%3E"); }
.flow-ico--approve { background-color: #5b5fc7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.flow-ico--doc { background-color: #8a6100; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.flow-ico--list { background-color: #036c70; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.flow-run { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .55rem .85rem; border-top: 1px solid #e1dfdd; background: #fff; font-size: .7rem; color: #605e5c; }
.flow-run > span:last-child { margin-left: auto; }
.flow-run-dot { width: 7px; height: 7px; border-radius: 50%; background: #0e700e; }

@media (max-width: 560px) {
  .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row { grid-template-columns: 1fr; }
  .rd-bar .rd-filter, .flow-saved, .flow-btn:not(.flow-btn--primary), .rd-foot span, .flow-run > span:last-child { display: none; }
  .flow-canvas { padding-left: .9rem; }
  .flow-node[data-beat]::after { display: none; }
}

/* Before / after on the Data page: the same five questions, today vs. one view. */
.before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ba-card { padding: clamp(1.3rem, 2.5vw, 1.8rem); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.ba-card--after { border-color: rgb(var(--accent-warm) / .45); background: linear-gradient(180deg, rgb(242 129 29 / .06), #fff 40%); }
.ba-label { margin: 0 0 1rem; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.ba-card ul { display: grid; margin: 0; padding: 0; list-style: none; }
.ba-card li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ba-card li b { font-weight: 600; font-size: .84rem; color: var(--muted); text-align: right; }
.ba-card--after li b { color: #1a7f37; }
.ba-note { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }
@media (max-width: 800px) { .before-after { grid-template-columns: 1fr; } }

/* Why Noventech sits beside its figure, so it opts out of the centered balance rule. */
main > .why-noventech > .shell > .section-heading-left { max-width: none; margin-inline: 0; text-align: left; }
.why-noventech-copy + .why-noventech-copy { margin-top: 1rem; }
/* Home hero label: same quiet tag as the section labels, not a pill. */
.hero .kicker { padding: 0; border: 0; border-radius: 0; background: none; letter-spacing: .14em; }
.hero .kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--ink); }
@media (max-width: 600px) { .hero .kicker::before { display: none; } .hero .kicker span { display: inline; } .hero .kicker { flex-direction: row; } }

/* ---------- Five logins, wiped into one view (Data page) ----------
   Five scattered app windows sit on the stage. When the figure scrolls into
   view, a wipe sweeps left to right and the unified dashboard replaces them.
   dashboard-demo.js adds .is-merged; with reduced motion it lands on the end
   state at once. */
.consolidate { margin: 0; }
.cons-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 8.2; border: 1px solid var(--line); border-radius: var(--r-panel, var(--r-card)); background: #eef0f3; background-image: radial-gradient(rgb(27 28 28 / .08) 1px, transparent 1px); background-size: 16px 16px; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: #1f2328; }
.cons-windows { position: absolute; inset: 0; }
.cons-win { position: absolute; overflow: hidden; margin: 0; border: 1px solid #d0d7de; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px -12px rgb(0 0 0 / .35); font-size: .7rem; transition: transform .6s ease, opacity .6s ease; }
.cons-win-bar { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .6rem; border-bottom: 1px solid #e3e6ea; background: #f6f8fa; font-weight: 600; white-space: nowrap; }
.cons-win-bar i { width: 8px; height: 8px; border-radius: 2px; background: var(--win, #57606a); }
.cons-win--sheet { --win: #1f7a44; left: 3%; top: 7%; width: 42%; transform: rotate(-2deg); }
.cons-win--billing { --win: #0f6cbd; left: 33%; top: 3%; width: 32%; transform: rotate(1.5deg); z-index: 2; }
.cons-win--crm { --win: #6f4bd8; left: 62%; top: 10%; width: 34%; transform: rotate(-1deg); }
.cons-win--sched { --win: #03787c; left: 8%; top: 53%; width: 36%; transform: rotate(1deg); z-index: 3; }
.cons-win--acct { --win: #8a6100; left: 47%; top: 55%; width: 44%; transform: rotate(-1.5deg); z-index: 1; }
.cons-sheet { display: grid; grid-template-columns: 1.4rem 1.3fr repeat(3, 1fr); }
.cons-sheet span { padding: .22rem .35rem; border-right: 1px solid #e3e6ea; border-bottom: 1px solid #e3e6ea; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.cons-sheet span:nth-child(-n+5), .cons-sheet span:nth-child(5n+1) { background: #f3f4f6; color: #6e7781; text-align: center; }
.cons-sheet .is-err { color: #cf222e; font-weight: 700; background: #fff0f0; }
.cons-rows { margin: 0; padding: .2rem .6rem .4rem; list-style: none; }
.cons-rows li { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: .5rem; padding: .28rem 0; border-bottom: 1px solid #eef0f2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cons-rows b { font-weight: 600; }
.cons-rows em { font-style: normal; color: #57606a; }
.cons-rows em.is-ok { color: #1a7f37; }
.cons-rows em.is-late { color: #bc4c00; font-weight: 600; }
.cons-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; padding: .5rem .6rem .6rem; }
.cons-kanban div { display: grid; gap: .3rem; align-content: start; }
.cons-kanban b { font-weight: 600; color: #57606a; }
.cons-kanban span { height: 1.3rem; border-radius: 4px; background: #ebe7fd; border-left: 3px solid #6f4bd8; }
.cons-cal { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, .75rem); gap: 2px; padding: .5rem .6rem .6rem; background-image: linear-gradient(#eef0f2 1px, transparent 1px); background-size: 100% calc(.75rem + 2px); }
.cons-cal span { grid-column: var(--c); grid-row: var(--r) / span var(--h); border-radius: 3px; background: #c8ecec; border-left: 3px solid #03787c; }

.cons-unified { position: absolute; inset: 5% 6%; z-index: 5; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid #d0d7de; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); clip-path: inset(0 100% 0 0); }
.cons-unified-bar { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .7rem 1rem; border-bottom: 1px solid #e3e6ea; font-size: .78rem; }
.cons-unified-bar b { margin-right: auto; font-weight: 600; }
.cons-unified-bar .rd-fresh { font-size: .7rem; }
.cons-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1rem; background: #f7f8fa; align-content: center; }
.cons-tiles div { display: grid; gap: .2rem; padding: .8rem .9rem; border: 1px solid #e3e6ea; border-radius: 8px; background: #fff; }
.cons-tiles span { font-size: .72rem; color: #57606a; }
.cons-tiles b { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cons-tiles em { justify-self: start; padding: .08rem .45rem; border-radius: 999px; background: #eef2f5; color: #1d4e63; font-style: normal; font-size: .7rem; font-weight: 600; }
.cons-unified-foot { margin: 0; padding: .6rem 1rem; border-top: 1px solid #e3e6ea; font-size: .72rem; color: #57606a; }

.cons-wipe { position: absolute; top: 0; bottom: 0; left: 0; z-index: 6; width: 3px; background: var(--orange); box-shadow: 0 0 24px 6px rgb(242 129 29 / .45); opacity: 0; pointer-events: none; }

.consolidate.is-merged .cons-unified { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }
.consolidate.is-merged .cons-wipe { left: 100%; opacity: 1; transition: left 1.2s cubic-bezier(.65, 0, .35, 1), opacity .3s ease 1.05s; animation: cons-wipe-fade 1.35s forwards; }
@keyframes cons-wipe-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
.consolidate.is-merged .cons-win { opacity: .35; }

.cons-caption { display: flex; align-items: center; gap: 1rem; margin: .9rem 0 0; font-size: .92rem; color: var(--muted); }
.cons-state--after { display: none; color: var(--ink); font-weight: 600; }
.consolidate.is-merged .cons-state--before { display: none; }
.consolidate.is-merged .cons-state--after { display: inline; }
.cons-replay { margin-left: auto; padding: .45rem .9rem; border: 1px solid rgba(27,28,28,.22); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .8rem/1 var(--body); cursor: pointer; }
.cons-replay:hover, .cons-replay:focus-visible { border-color: var(--ink); }

body[data-motion="reduced"] .consolidate .cons-unified,
body[data-motion="reduced"] .consolidate .cons-wipe { transition: none; animation: none; }
body[data-motion="reduced"] .consolidate .cons-wipe { display: none; }
@media (prefers-reduced-motion: reduce) {
  .consolidate .cons-unified, .consolidate .cons-win { transition: none; }
  .consolidate .cons-wipe { display: none; }
}

@media (max-width: 760px) {
  .cons-stage { aspect-ratio: 3 / 4; }
  .cons-win--sheet { left: 3%; top: 3%; width: 82%; }
  .cons-win--billing { left: 22%; top: 22%; width: 72%; }
  .cons-win--crm { left: 4%; top: 41%; width: 70%; }
  .cons-win--sched { left: 26%; top: 58%; width: 66%; }
  .cons-win--acct { left: 6%; top: 76%; width: 86%; }
  .cons-unified { inset: 3% 4%; }
  .cons-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .7rem; }
  .cons-tiles div { padding: .6rem .65rem; }
  .cons-caption { flex-wrap: wrap; }
}
@media (min-width: 761px) {
  .cons-stage { aspect-ratio: 16 / 7.2; }
  .cons-tiles { align-content: stretch; gap: .9rem; padding: 1.2rem; }
  .cons-tiles div { align-content: center; padding: 1rem 1.1rem; }
  .cons-tiles b { font-size: clamp(1.2rem, 2.2vw, 1.7rem); }
}

/* Consolidation figure, branded: gray and flat before, Noventech orange after. */
.cons-stage { background-color: #e4e5e7; transition: background-color 1.2s ease; }
.cons-win { filter: grayscale(1) contrast(.92) brightness(.98); }
.cons-win-bar { background: #eceef0; }
.cons-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background:
  radial-gradient(ellipse 70% 60% at 50% 110%, rgb(255 214 150 / .9), transparent 70%),
  linear-gradient(135deg, #f2811d 0%, #f59a3a 55%, #f2a341 100%); transition: opacity 1.2s cubic-bezier(.65, 0, .35, 1); }
.cons-glow::after { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: var(--dots-size); opacity: .5; }
.cons-windows { z-index: 1; }
.consolidate.is-merged .cons-glow { opacity: 1; }
.consolidate.is-merged .cons-win { opacity: 0; transform: scale(.92); }

.cons-unified { border: 0; box-shadow: 0 40px 80px -30px rgb(104 48 7 / .55), 0 0 0 1px rgb(255 255 255 / .6); }
.cons-unified::before { content: ""; height: 4px; background: linear-gradient(90deg, #b34f00, #f2811d 45%, #f2a341); }
.cons-unified { grid-template-rows: auto auto 1fr auto; }
.cons-unified-bar { gap: .8rem; padding: .75rem 1.1rem; }
.cons-logo { width: auto; height: 26px; }
.cons-unified-title { display: flex; flex-direction: column; margin-right: auto; padding-left: .8rem; border-left: 1px solid #e3e6ea; line-height: 1.2; color: #57606a; font-size: .7rem; }
.cons-unified-title b { color: var(--ink); font-size: .82rem; }
.cons-tiles { background: #fff8f1; }
.cons-tiles div { border-color: #f4dcc4; }
.cons-tiles em { background: #fde9d7; color: #8d3d00; }
.cons-tiles div.is-hero { border: 0; background: linear-gradient(150deg, #f2811d, #e26f0c); color: var(--ink); }
.cons-tiles div.is-hero span { color: rgb(27 28 28 / .75); }
.cons-tiles div.is-hero em { background: rgb(255 255 255 / .35); color: var(--ink); }
.cons-unified-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cons-built { color: #b34f00; font-weight: 600; }

/* A soft, wide wipe edge instead of a hairline. */
.cons-wipe { width: 70px; margin-left: -35px; background: linear-gradient(90deg, transparent, rgb(255 236 210 / .9) 45%, #fff 50%, rgb(242 129 29 / .9) 55%, transparent); box-shadow: none; filter: blur(2px); }

.cons-caption .cons-state--before { color: #6e7781; }
.cons-caption .cons-state--after { color: #b34f00; }
@media (max-width: 560px) { .cons-logo { height: 20px; } .cons-unified-title { display: none; } .cons-built { display: none; } }
/* The color arrives with the wipe, not as a fade. */
.cons-glow { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }
.consolidate.is-merged .cons-glow { clip-path: inset(0 0 0 0); }
body[data-motion="reduced"] .consolidate .cons-glow { transition: none; }
@media (prefers-reduced-motion: reduce) { .consolidate .cons-glow { transition: none; } }

/* Unified view: a revenue vs. budget chart takes the big slot, four KPI tiles
   beside it. The revenue line draws in once the wipe has passed. */
.cons-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cons-tiles div.cons-chart { grid-column: span 2; grid-row: span 2; display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; align-content: stretch; min-height: 0; }
.cons-chart div { padding: 0; border: 0; border-radius: 0; background: none; }
.cons-chart-head { display: grid; gap: .1rem; margin: 0; }
.cons-chart-head span { font-size: .72rem; color: #57606a; }
.cons-chart-head b { font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cons-chart-head strong { font-size: .72rem; font-weight: 600; color: #8d3d00; }
.cons-tiles .cons-plot { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: 1fr auto; gap: .25rem .4rem; min-height: 0; }
.cons-tiles .cons-plot-y { position: relative; }
.cons-plot-y span { position: absolute; top: var(--y); right: 0; transform: translateY(-50%); font-size: .62rem; color: #6e7781; font-variant-numeric: tabular-nums; }
.cons-tiles .cons-plot-area { position: relative; min-height: 5rem; }
.cons-plot-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cons-plot-grid path { fill: none; stroke: #eadfd3; stroke-width: 1; }
.cons-tiles .cons-plot-lines { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.cons-plot-fill { fill: rgb(242 129 29 / .14); stroke: none; }
.cons-plot-budget { fill: none; stroke: #57606a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.cons-plot-rev { fill: none; stroke: #e26f0c; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cons-plot-dot { position: absolute; left: 96%; top: 10.88%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e26f0c; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.4); }
.cons-tiles .cons-plot-x { grid-column: 2; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 -1.6%; }
.cons-plot-x span { text-align: center; font-size: .62rem; color: #6e7781; }
.cons-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-size: .68rem; color: #57606a; }
.cons-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cons-legend span::before { content: ""; width: 14px; height: 0; border-top: 2.5px solid #e26f0c; }
.cons-legend .is-bud::before { border-top: 1.5px dashed #57606a; }
.cons-legend em { margin-left: auto; padding: .08rem .45rem; border-radius: 999px; background: #fde9d7; color: #8d3d00; font-style: normal; font-size: .68rem; font-weight: 600; }

.consolidate.is-merged .cons-plot-lines { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .9s; }
.consolidate.is-merged .cons-plot-dot { opacity: 1; transform: scale(1); transition: opacity .25s ease 1.9s, transform .35s cubic-bezier(.34, 1.56, .64, 1) 1.9s; }
body[data-motion="reduced"] .consolidate .cons-plot-lines,
body[data-motion="reduced"] .consolidate .cons-plot-dot { transition: none; }
@media (prefers-reduced-motion: reduce) { .consolidate .cons-plot-lines, .consolidate .cons-plot-dot { transition: none; } }

@media (max-width: 760px) {
  .cons-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .cons-tiles div.cons-chart { grid-row: span 1; gap: .35rem; }
  .cons-chart-head strong { display: none; }
  .cons-tiles .cons-plot { grid-template-columns: 2rem 1fr; }
  .cons-tiles .cons-plot-area { min-height: 3.5rem; }
  .cons-legend em { display: none; }
}

/* FAQ: five questions show; the other seven open and close with the pill
   button under the list (app.js). Once open, the button sits below them and
   folds them back up. Without the script all twelve show and the button stays hidden. */
.faq-more { display: grid; gap: 1rem; }
.faq-more > .faq-list { margin-top: -.25rem; } /* .faq-body gap (1rem) back down to the list gap (.75rem) */
.faq-more > .faq-list[hidden], .faq-more-toggle[hidden] { display: none; }
.faq-more .faq-item.reveal { opacity: 1; transform: none; }
.faq-more-toggle { justify-self: center; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .55rem .55rem 1.3rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 700 .95rem/1.2 var(--display); cursor: pointer; transition: border-color .2s ease; }
.faq-more-toggle::after { content: ""; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 1.05rem no-repeat; transition: transform .25s ease; }
.faq-more-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.faq-more-toggle:hover { border-color: var(--ink); }
.faq-more-toggle:focus-visible { border-color: var(--ink); outline: 3px solid var(--orange-accessible); outline-offset: 2px; }
@keyframes faq-more-in { from { opacity: 0; transform: translateY(-6px); } }
body[data-motion="full"] .faq-more > .faq-list:not([hidden]) > .faq-item { animation: faq-more-in .3s ease-out both; }

/* Five logins: no window covers another's title bar. */
@media (min-width: 761px) {
  .cons-win--sheet { left: 3%; top: 7%; width: 40%; transform: rotate(-1.5deg); }
  .cons-win--billing { left: 46%; top: 5%; width: 27%; transform: rotate(1.2deg); }
  .cons-win--crm { left: 76%; top: 9%; width: 21%; transform: rotate(-1deg); }
  .cons-win--sched { left: 7%; top: 55%; width: 32%; transform: rotate(1deg); }
  .cons-win--acct { left: 44%; top: 52%; width: 42%; transform: rotate(-1.2deg); }
}
@media (max-width: 760px) {
  .cons-win--sheet { left: 3%; top: 2%; width: 84%; }
  .cons-win--billing { left: 12%; top: 25%; width: 80%; }
  .cons-win--crm { left: 4%; top: 45%; width: 62%; }
  .cons-win--sched { left: 40%; top: 58%; width: 56%; }
  .cons-win--acct { left: 5%; top: 77%; width: 88%; }
}
.section-rail > .section-heading h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-bottom: .75rem; }
/* On phones the windows cascade: each one covers the body of the one above,
   never its title bar. */
@media (max-width: 760px) {
  .cons-stage { aspect-ratio: 3 / 4.4; }
  .cons-win--sheet { z-index: 1; } .cons-win--billing { z-index: 2; } .cons-win--crm { z-index: 3; }
  .cons-win--sched { z-index: 4; } .cons-win--acct { z-index: 5; }
  .cons-win--billing { top: 21%; } .cons-win--crm { top: 40%; } .cons-win--sched { top: 56%; } .cons-win--acct { top: 73%; }
}

/* Shadow AI drip title: brought down and in from the right edge. It still
   breaks past the panel's edge a little, but reads as a word, not a fragment. */
@media (min-width: 1051px) {
  .shadow-ghost-title { right: -13rem; top: clamp(15rem, 22vw, 20rem); width: clamp(26rem, 34vw, 34rem); font-size: clamp(6.5rem, 9.2vw, 10.5rem); rotate: 24deg; transform-origin: center; opacity: 1; }
}
/* Measured from the panel's right edge (14px inside the viewport), so the title
   crosses that edge by the same small amount at every desktop width. */
@media (min-width: 1051px) {
  .shadow-ghost-title { right: calc(-1 * ((100vw - min(1180px, 100vw - 48px)) / 2 - 14px) - 5.75rem); }
}

/* ---- Homepage story (partials/ai-plan-story.html, story.js) ----
   Three beats that keep the scroll short: the "Your data plan" accordion
   (chapters 1 to 4, open item's scene beside the list on wide screens), a
   full-width pause, then chapters 5 and 6 as two cards. Scenes default to
   their finished state; .js-story adds the before state and the switch.
   Text is never animated or dimmed. */
.ai-plan-head { max-width: 760px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.ai-plan-head h2 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ai-plan-lede { margin: 0 auto; max-width: 60ch; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.story-part { display: flex; align-items: center; gap: .7rem; margin: 0; font: 700 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-accessible); }
.story-part::before { content: ""; width: 22px; height: 2px; background: var(--orange); flex: 0 0 auto; }

/* Your data plan */
/* These blocks set their own display, which would override the hidden attribute the script toggles. */
@media (min-width: 861px) {
  /* With the accordion running, only the open item's scene shows, pinned beside the list. */
}

/* The pause between the two halves */
.ai-plan-turn { margin: clamp(2.8rem, 6vw, 4.2rem) 0; padding: clamp(2.4rem, 6vw, 3.8rem) 0; background: var(--ink); color: #fff; text-align: center; }
.ai-plan-turn-kicker { margin: 0 0 .7rem; color: var(--orange); font: 700 .78rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ai-plan-turn-line { max-width: 24ch; margin: 0 auto; font: 700 clamp(1.6rem, 3.4vw, 2.5rem)/1.2 var(--display); }

/* Scenes: small, plain product-style windows */

/* Before and after. Default is the finished state. With the script running a
   scene starts on "before"; switching to "after" crosses out the problem,
   fades it, then brings in and briefly highlights the fix. */
@media (prefers-reduced-motion: reduce) { .story-scene, .story-scene * { transition: none !important; animation: none !important; } }

/* "Cut through the noise": scrambled AI jargon around a title that decodes
   once (story.js). Default is the settled state: faint jargon, clear title,
   orange rule. .js-noise adds the noisy starting state until .is-clear. */
.noise { position: relative; display: grid; place-items: center; min-height: clamp(220px, 30vw, 330px); max-width: 1080px; margin: 0 auto .6rem; }
.noise-words { position: absolute; inset: 0; pointer-events: none; }
/* Anchored by the same percentage as its position, so words near an edge grow inward and never clip. */
.noise-word { position: absolute; left: var(--x); top: var(--y); transform: translate(calc(var(--x) * -1), -50%); color: rgb(34 34 34 / .16); font: 600 clamp(.72rem, 1.1vw, .95rem)/1 var(--mono); white-space: nowrap; filter: blur(.6px); transition: color .9s ease, filter .9s ease; }
.noise-title { position: relative; margin: 0; padding: 0 .5rem; text-align: center; text-wrap: balance; font: 700 clamp(2rem, 6vw, 4.3rem)/1.08 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.noise-kicker { display: block; margin-bottom: .45rem; color: var(--muted); font: 700 clamp(1.05rem, 1.9vw, 1.4rem)/1.2 var(--display); letter-spacing: 0; }
.noise-title::after { content: ""; display: block; width: 120px; height: 6px; margin: .7rem auto 0; border-radius: 3px; background: var(--orange); transition: width .6s ease .15s; }
.js-noise:not(.is-clear) .noise-word { color: rgb(34 34 34 / .5); filter: none; }
.js-noise:not(.is-clear) .noise-title { color: #6b6b6b; }
.js-noise:not(.is-clear) .noise-title::after { width: 0; }
.js-noise .noise-title { transition: color .5s ease; }
.ai-plan-lede strong { color: var(--ink); }
@media (max-width: 640px) {
  .noise-word--wide { display: none; }
}

/* The chapter formula: why it matters (warning icon), how we help (check
   icon), then a link to the service page. */
.story-more { justify-self: start; color: var(--ink); font: 700 .9rem/1.3 var(--body); text-decoration: underline; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
.story-more:hover { text-decoration-color: var(--orange); }

/* ---- Homepage layout pass (2026-09-29) ----
   Research-based: content uses the full ~1180px container; body text is
   left-aligned at about 45 to 75 characters a line; one size for every
   section heading (NN/g: no more than about three sizes); and more space
   between sections than inside them, on an 8px scale. Centering is kept for
   short things only. Scoped to the homepage for now. */
body[data-page="home"] main > .section { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
body[data-page="home"] main > .section#ai-plan { padding-top: clamp(3rem, 5vw, 4.5rem); }
body[data-page="home"] main > .section > .shell > .section-heading-left { max-width: 760px; margin: 0 0 2.5rem; text-align: left; }
body[data-page="home"] main > .section > .shell > .section-heading-left .section-lede { margin-inline: 0; }
body[data-page="home"] main > .section .section-heading h2,
body[data-page="home"] main > .section .section-heading-left h2,
body[data-page="home"] .final-cta-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
body[data-page="home"] .ways-foot { max-width: 70ch; margin-inline: 0; text-align: left; }

/* The story intro: copy on the left, the jargon field on the right */
.ai-plan-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: none; margin: 0 0 clamp(3rem, 6vw, 4.5rem); text-align: left; }
.ai-plan-intro { max-width: 620px; }
.ai-plan-head .noise-title { padding: 0; text-align: left; text-wrap: balance; }
.ai-plan-head .noise-title::after { margin: 1rem 0 0; }
.ai-plan-head .ai-plan-lede { margin: 1.5rem 0 0; max-width: 58ch; }
.noise-field { position: relative; min-height: 160px; order: -1; }
@media (min-width: 861px) {
  .ai-plan-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .noise-field { order: 0; min-height: 360px; }
}
@media (max-width: 860px) {
  .noise-field .noise-word--wide { display: none; }
}

/* Use the whole container, and weight the data plan 5:7 (text : picture) */

/* The pause band: left-aligned, with the line on the left and a short note on the right */
.ai-plan-turn { text-align: left; }
.ai-plan-turn .shell { display: grid; gap: .8rem; }
.ai-plan-turn-line { max-width: 22ch; margin: 0; }
.ai-plan-head .noise-title { font-size: clamp(2rem, 4.1vw, 3.3rem); line-height: 1.12; }
.ai-plan-head .ai-plan-lede + .ai-plan-lede { margin-top: 1rem; }
.ai-plan-lede--lead { color: var(--ink); font-weight: 600; }
.ai-plan-turn-note { margin: 0; max-width: 42ch; color: rgb(255 255 255 / .78); font-size: 1.05rem; line-height: 1.6; }
@media (min-width: 861px) {
  .ai-plan-turn .shell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(2rem, 5vw, 4.5rem); }
  .ai-plan-turn-kicker { grid-column: 1 / -1; }
}
/* "Why start with your data?" above the data plan list */
/* The intro spans the width; the list and the open item's scene share the row below it. */
@media (min-width: 861px) {
  .ai-plan-turn-note { max-width: 52ch; font-size: 1.02rem; }
}
.ways-industry { margin: .6rem 0 0; color: var(--muted); font-size: .98rem; }
.ways-industry a { color: var(--ink); font-weight: 700; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
body[data-page="home"] .ways-industry { text-align: left; }
/* Eyebrows removed (owner: they read as AI templates). The service cards lead
   with the outcome in plain words; the marquee tab reads in sentence case. */
.way .way-outcome { margin: 0 0 .35rem; max-width: none; color: var(--ink); font: 700 1.08rem/1.3 var(--display); }
.hero-serve-tab-label { font: 700 .82rem/1 var(--display); letter-spacing: 0; text-transform: none; }
h3.ai-plan-turn-line { color: #fff; }
/* The band closes the story section; the service cards follow it directly. */
/* Phone labels read as plain sentences, not all-caps tags. */
.final-cta-label, .footer-phone-note { font-family: var(--body); font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---- Homepage review pass (2026-09-29) ---- */
/* Data plan: the open item is one grouped card; the picture sits in a soft
   panel with progress dots, instead of floating on white. */
.plan[data-done="1"] .plan-dots i:nth-child(-n+1), .plan[data-done="2"] .plan-dots i:nth-child(-n+2),
@media (min-width: 861px) {
  /* Stretched between the panel's top and the progress row, with the window centered in that space. */
}

/* Service cards: shorter art, no process track, a plain sentence-case link. */
.way-art { height: clamp(104px, 9vw, 128px); }
.way .way-foot { padding-top: .8rem; }
.way .way-cta { min-height: 0; padding: .3rem 0; color: var(--ink); font: 700 .92rem/1.3 var(--body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
@media (max-width: 720px) { .way-art { height: 84px; } }

/* FAQ: visible questions, then one toggle for the rest. */
.faq-body { display: grid; gap: 1rem; }
.faq-body > .faq-list { margin: 0; }
.faq-body .faq-item.reveal { opacity: 1; transform: none; }

/* Tools: two cards, no tabs. */
body[data-page="home"] #resources .library-grid { margin-top: 0; }

/* The "Who we serve" tab is a link now. */
a.hero-serve-tab-label { text-decoration: none; }
a.hero-serve-tab-label:hover, a.hero-serve-tab-label:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Let the open item shrink to the screen: the scene title bar must not set a minimum width. */

/* "It starts with your data." Two calm columns: the owner's paragraph on the
   left, four numbered problems on the right. Hierarchy comes from type weight
   and color, not boxes or icons: heading (pain point), lighter line (why it
   matters), darker line (what we do). */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.steps-intro h2 { margin: 0 0 .8rem; }
.steps-intro p { margin: 0; max-width: 52ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.steps-intro .story-more { display: inline-block; margin-top: 1.4rem; }
.steps-list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-item { position: relative; display: grid; gap: .45rem; padding: 1.6rem 0 1.6rem 3.4rem; border-top: 1px solid var(--line); counter-increment: step; }
.steps-item:first-child { padding-top: 0; border-top: 0; }
.steps-item::before { content: counter(step); position: absolute; left: 0; top: 1.55rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--orange); color: var(--ink); font: 700 1rem/1 var(--display); }
.steps-item:first-child::before { top: -.05rem; }
.steps-item h3 { margin: 0; font-size: clamp(1.12rem, 1.6vw, 1.28rem); line-height: 1.35; }
.steps-why { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.steps-fix { margin: 0; color: var(--ink); font-size: .98rem; font-weight: 500; line-height: 1.65; }
@media (min-width: 861px) {
  .steps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
/* The service cards continue the dark band's thought, so they sit closer to it. */
body[data-page="home"] main > .section#help { padding-top: clamp(3rem, 5vw, 4rem); }

/* ---- Homepage flow pass (2026-09-29): cards first, then data, automation,
   dashboards, a short Why Noventech callout, and a short tools row. ---- */
body[data-page="home"] #data-first h2, body[data-page="home"] #automate h2,
body[data-page="home"] #dashboards h2, body[data-page="home"] #why-noventech h2,
body[data-page="home"] #resources h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.ai-plan-head { margin-bottom: 0; }
body[data-page="home"] main > .section#data-first { padding-bottom: 0; }

/* Automation overview */
.automate-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.automate-copy h2 { margin: 0 0 .9rem; }
.automate-copy p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.automate-list { display: grid; gap: .55rem; margin: 1.3rem 0 1.8rem; padding: 0; list-style: none; }
.automate-list li { position: relative; padding-left: 1.2rem; color: var(--ink); font-weight: 500; }
.automate-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.agent-flow { margin: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.agent-flow-bar { display: flex; align-items: center; gap: .7rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.agent-flow-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #f2811d, #e26f0c); color: #fff; }
.agent-flow-mark .icon { width: 18px; height: 18px; }
.agent-flow-title { display: grid; font: 700 1rem/1.2 var(--display); }
.agent-flow-title small { color: var(--muted); font: 500 .8rem/1.3 var(--body); }
.agent-flow-replay { display: none; margin-left: auto; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .82rem/1 var(--body); cursor: pointer; }
.js-flow .agent-flow-replay { display: inline-block; }
.agent-flow-replay:hover, .agent-flow-replay:focus-visible { border-color: var(--ink); }
.agent-flow-steps { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.agent-flow-steps li { position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: #faf8f5; font-size: .94rem; transition: opacity .35s ease, border-color .35s ease, box-shadow .35s ease; }
.agent-flow-steps li + li::before { content: ""; position: absolute; left: 3.9rem; top: -.6rem; height: .6rem; border-left: 2px dashed rgb(34 34 34 / .2); }
.agent-flow-steps .agent-flow-person { background: rgb(var(--accent-warm) / .1); }
.agent-app { justify-self: start; padding: .22rem .55rem; border-radius: 999px; background: #ece8e2; color: var(--ink); font: 700 .72rem/1.2 var(--body); }
.agent-app--ai { background: var(--orange); }
.agent-flow-done { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 0; color: #1f6b3f; font-weight: 700; transition: opacity .35s ease; }
.agent-flow-done .icon { width: 18px; height: 18px; }
.agent-flow figcaption { margin-top: .8rem; color: var(--muted); font-size: .74rem; }
.js-flow .agent-flow-steps li:not(.is-on) { opacity: .3; }
.js-flow .agent-flow-steps li.is-current { border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--accent-warm) / .15); }
.js-flow .agent-flow-done:not(.is-on) { opacity: 0; }
body[data-motion="reduced"] .agent-flow * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .agent-flow * { transition: none !important; } }

/* Dashboards: picture first so the page zigzags */
.dash-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dash-home-copy { order: -1; }
.dash-home-copy h2 { margin: 0 0 .9rem; }
.dash-home-copy p { margin: 0 0 1.3rem; max-width: 52ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.dash-mini { margin: 0; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.dash-mini-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); font: 700 1rem/1.2 var(--display); }
.dash-mini-bar small { color: var(--muted); font: 500 .8rem/1 var(--body); }
.dash-mini-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dash-mini-tiles p { display: grid; gap: .25rem; margin: 0; padding: 1rem 1.1rem; border-radius: var(--r-inner); background: #f6f4f1; }
.dash-mini-tiles span { color: var(--muted); font-size: .82rem; }
.dash-mini-tiles b { font: 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.1 var(--display); }
.dash-mini-tiles em { color: #1f6b3f; font-size: .82rem; font-style: normal; font-weight: 700; }
.dash-mini-tiles em.is-warn { color: #9b3a22; }
.dash-mini-sources { margin: 1rem 0 0; color: var(--muted); font-size: .88rem; }
.dash-mini figcaption { margin-top: .5rem; color: var(--muted); font-size: .74rem; }
@media (min-width: 861px) {
  .automate-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .dash-home-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .dash-home-copy { order: 0; }
}

/* Why Noventech: one callout that points to About */
.why-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(1.5rem, 3.5vw, 2.6rem); border: 1px solid rgb(var(--accent-warm) / .28); border-radius: var(--r-panel); background: linear-gradient(135deg, rgb(var(--accent-warm) / .12), rgb(var(--accent-warm) / .04)), #fff; }
.why-callout-copy { max-width: 64ch; }
.why-callout-copy h2 { margin: 0 0 .8rem; }
.why-callout-copy p { margin: 0 0 1.1rem; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

/* Free tools: one row, no cards */
.tools-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line); }
.tools-row-copy { max-width: 62ch; }
.tools-row-copy h2 { margin: 0 0 .7rem; }
.tools-row-copy p { margin: 0; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.tools-row-copy a { color: var(--ink); font-weight: 600; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 3px; }
@media (max-width: 720px) {
  .why-callout .button, .tools-row .button { width: 100%; justify-content: center; }
}
/* Why Noventech and the tools line are both short; keep them together. */
body[data-page="home"] main > .section#resources { padding-top: 0; }

/* Data items collapse: heading and "why it matters" show; opening adds "what we do". */
.steps-detail summary { display: grid; gap: .45rem; padding-right: 2.2rem; list-style: none; cursor: pointer; position: relative; }
.steps-detail summary::-webkit-details-marker { display: none; }
.steps-detail summary::after { content: ""; position: absolute; right: .4rem; top: .45rem; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .25s ease; }
.steps-detail[open] summary::after { transform: rotate(-135deg); top: .7rem; }
.steps-detail summary:hover h3 { text-decoration: underline; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
.steps-detail summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--r-small); }
.steps-detail summary h3 { margin: 0; }
.steps-detail .steps-why { display: block; }
.steps-detail .steps-fix { margin-top: .6rem; }
.steps-item { padding-block: 1.3rem; }
.steps-item::before { top: 1.25rem; }
body[data-page="home"] #help .section-lede { max-width: 68ch; }

/* ---- Less template, more specific (2026-09-29) ----
   Service overview: typographic, no art or icons; a ruled top edge. The
   deeper sections carry the visuals. */
.overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem clamp(1.5rem, 4vw, 3rem); }
.overview-card { display: grid; align-content: start; gap: .55rem; padding-top: 1.3rem; border-top: 3px solid var(--ink); }
.overview-card h3 { margin: 0; color: var(--muted); font: 600 .98rem/1.3 var(--body); }
.overview-card .overview-outcome { margin: 0; color: var(--ink); font: 700 clamp(1.35rem, 2.1vw, 1.65rem)/1.2 var(--display); letter-spacing: -.01em; }
.overview-card p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.overview-card .overview-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .5rem; }
.overview-links a { color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: underline; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
.overview-links a:hover { text-decoration-color: var(--orange); }
.overview-links a:first-child { font-weight: 600; color: var(--muted); }
@media (min-width: 861px) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The agent flow uses the Noventech mark, not a generic "AI" sparkle. */
img.agent-flow-mark { display: block; width: 34px; height: 34px; border-radius: 6px; background: none; }

/* "Approved AI tools" paper snippet beside the data section's paragraph */
.tools-doc { margin-top: 2rem; padding: 1.2rem 1.3rem 1rem; max-width: 460px; }
.tools-doc:hover { transform: none; box-shadow: var(--shadow-card); }
.tools-doc .paper-head { margin-bottom: .6rem; }
.tools-doc-list { margin: 0; padding: 0; list-style: none; }
.tools-doc-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid rgba(60, 45, 30, .1); font-size: .9rem; }
.tools-doc-list li:first-child { border-top: 0; }
.tools-doc-list em { flex: 0 0 auto; padding: .18rem .55rem; border-radius: 999px; font: 700 .74rem/1.3 var(--body); font-style: normal; }
.tools-doc-list .is-ok { background: #dcefe3; color: #1f6b3f; }
.tools-doc-list .is-mid { background: #fbefd6; color: #7d4a00; }
.tools-doc-list .is-no { background: #fbe3dc; color: #9b3a22; }
.tools-doc figcaption { margin-top: .6rem; color: var(--muted); font-size: .72rem; }

/* Ready for a real photo of Vince in the Why Noventech callout */
.why-photo { flex: 0 0 auto; width: clamp(110px, 12vw, 160px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
#help .ways-industry { margin-top: 2.2rem; }

/* ---- Homepage polish (2026-09-29) ---- */
/* The opening question uses the heading font while scrambled and once it decodes. */
.ai-plan-head .noise-title { font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.7rem); letter-spacing: -.02em; line-height: 1.08; }
@media (max-width: 860px) { .noise-field { min-height: 110px; } }

/* Overview: links sit on one line across the three columns. */
.overview-card { grid-template-rows: auto auto 1fr auto; }

/* The approved-tools snippet: under the paragraph on wide screens, after the list on phones. */
.steps > .tools-doc { margin-top: 0; }
@media (min-width: 861px) {
  .steps > .steps-intro { grid-column: 1; grid-row: 1; }
  .steps > .steps-list { grid-column: 2; grid-row: 1 / span 2; }
  .steps { grid-template-rows: auto 1fr; row-gap: 2rem; }
  .steps > .tools-doc { grid-column: 1; grid-row: 2; align-self: start; }
}

/* Text shows right away on the homepage (NN/g: animated text reads as slow loading). */
body[data-page="home"] .reveal { opacity: 1; transform: none; transition: none; }

/* ---- Homepage, reference pass (2026-09-29): layout after the owner's first
   reference (tabbed services, three steps, an About block), look after the
   second (soft peach-to-orange panels, light gray cards, floating UI cards,
   one accent word per heading in a readable orange). ---- */
.accent { color: #c45a00; }
.services-head { max-width: 720px; margin: 0 auto 1.8rem; text-align: center; }
.services-head h2 { margin: 0 0 .8rem; }
.services-head p { margin: 0 auto; max-width: 62ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
body[data-page="home"] #help h2, body[data-page="home"] #how-it-works h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }

/* Service tabs */
.service-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; width: fit-content; max-width: 100%; margin: 0 auto 2rem; padding: .35rem; border-radius: 999px; background: #f3f1ee; }
.service-tabs [role="tab"] { min-height: 44px; padding: .55rem 1.2rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .95rem/1 var(--body); cursor: pointer; transition: background .2s ease, color .2s ease; }
.service-tabs [role="tab"]:hover { color: var(--ink); }
.service-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.service-tabs [role="tab"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.service-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--r-panel); background: #f7f6f4; }
.service-panel[hidden] { display: none; }
.service-panel:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.service-copy { padding: clamp(.4rem, 2vw, 1.2rem); }
.service-copy h3 { margin: 0 0 .8rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; }
.service-copy p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.service-checks { display: grid; gap: .6rem; margin: 1.3rem 0 1.6rem; padding: 0; list-style: none; }
.service-checks li { position: relative; padding-left: 1.8rem; color: var(--ink); font-weight: 500; }
.service-checks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat; }
.service-visual { display: grid; place-items: center; min-height: 380px; padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: var(--r-card); background: radial-gradient(120% 90% at 85% 10%, #f7a049 0%, rgb(242 129 29 / .55) 30%, rgb(255 222 190 / .6) 62%, #fff4ea 100%); }
.svc-card { width: min(100%, 440px); margin: 0; padding: clamp(1rem, 2.2vw, 1.4rem); border: 1px solid rgb(255 255 255 / .8); border-radius: var(--r-card); background: rgb(255 255 255 / .94); box-shadow: 0 24px 50px -24px rgb(120 60 10 / .45); }
.svc-card figcaption { margin-top: .7rem; color: var(--muted); font-size: .72rem; }
.svc-card-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .8rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); font: 700 1rem/1.2 var(--display); }
.svc-card-head small { color: var(--muted); font: 500 .8rem/1 var(--body); }
.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.report-stats li { display: grid; gap: .15rem; padding: .7rem; border-radius: var(--r-inner); background: #f6f4f1; }
.report-stats b { font: 700 1.5rem/1 var(--display); }
.report-stats span { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.report-rows { margin: 0; padding: 0; list-style: none; }
.report-rows li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.report-rows em { flex: 0 0 auto; padding: .18rem .55rem; border-radius: 999px; font: 700 .72rem/1.3 var(--body); font-style: normal; }
.report-rows .is-ok { background: #dcefe3; color: #1f6b3f; }
.report-rows .is-mid { background: #fbefd6; color: #7d4a00; }
.service-visual .agent-flow, .service-visual .dash-mini { box-shadow: 0 24px 50px -24px rgb(120 60 10 / .45); }
#help .ways-industry { margin-top: 1.6rem; text-align: center; }
@media (min-width: 861px) { .service-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* Here's how it works */
.how-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.how-step { display: grid; align-content: start; gap: .6rem; padding: .7rem .7rem 1.5rem; border-radius: var(--r-card); background: #f7f6f4; }
.how-art { position: relative; height: 150px; margin-bottom: .6rem; border-radius: var(--r-inner); background: radial-gradient(110% 100% at 90% 0%, #f7a049 0%, rgb(242 129 29 / .5) 35%, #fff1e3 100%); overflow: hidden; }
.how-chip { position: absolute; right: 1rem; top: 1rem; padding: .35rem .7rem; border-radius: 999px; background: #fff; color: var(--ink); font: 700 .78rem/1 var(--body); box-shadow: 0 8px 20px -10px rgb(120 60 10 / .5); }
.how-step h3 { margin: 0; padding-inline: .8rem; font-size: 1.2rem; line-height: 1.3; }
.how-step p { margin: 0; padding-inline: .8rem; color: var(--muted); font-size: .97rem; line-height: 1.65; }
@media (min-width: 861px) { .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Why Noventech: statement left, paragraph and values right */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem clamp(2rem, 6vw, 5rem); }
.about-lead h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; }
.about-body > p { margin: 0 0 1.8rem; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.about-values { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem 2rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.about-values li { display: grid; gap: .35rem; }
.about-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .3rem; border-radius: 12px; background: #fff1e3; color: #c45a00; }
.about-icon .icon { width: 20px; height: 20px; stroke-width: 1.8; }
.about-values h3 { margin: 0; font-size: 1.05rem; }
.about-values p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.6; }
@media (min-width: 600px) { .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
/* Reference pass fixes */
.about-values li { align-content: start; }
.about-values li > * { margin: 0; }
.about-values li > .about-icon { margin-bottom: .3rem; }
.about-lead .button { margin-top: 1.6rem; }
.how-art { background: radial-gradient(120% 120% at 0% 100%, #e8741a 0%, #f2811d 22%, rgb(247 160 73 / .75) 48%, #fff1e3 100%); }
@media (max-width: 860px) {
  .services-head { text-align: left; }
  .services-head p { margin-inline: 0; }
  #help .ways-industry { text-align: left; }
  .service-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: var(--r-card); }
  .service-tabs [role="tab"] { padding: .55rem .4rem; border-radius: var(--r-inner); font-size: .82rem; line-height: 1.2; }
  .service-visual { min-height: 0; }
}
/* Keep the reference layouts compact on phones. */
@media (max-width: 860px) {
  .how-art { height: 92px; }
  .how-step { padding-bottom: 1.1rem; }
  .service-panel { padding: .9rem; }
  .service-copy { padding: .4rem; }
  .service-visual { padding: 1rem .7rem; }
  .about-values { gap: 1.2rem; }
}
@media (min-width: 861px) { .service-visual { min-height: 340px; } }
/* Services tabs stay side by side down to small tablets; only phones stack. */
@media (min-width: 700px) {
  .service-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: clamp(1rem, 2.4vw, 2rem); }
  .service-copy { padding: clamp(.3rem, 1.4vw, 1.2rem); }
  .service-visual { min-height: 0; padding: clamp(.8rem, 2vw, 2.2rem); }
  .service-tabs { display: flex; width: fit-content; border-radius: 999px; }
  .service-tabs [role="tab"] { padding: .55rem 1.1rem; border-radius: 999px; font-size: .92rem; }
}
@media (min-width: 700px) and (max-width: 1000px) { .svc-card { font-size: .92em; } .service-copy h3 { font-size: 1.45rem; } }
/* The dark band sits inside the page margins as a rounded panel, like every other block. */
#data-first .ai-plan-turn { width: var(--shell); margin-inline: auto; border-radius: var(--r-panel); padding-inline: clamp(1.4rem, 4vw, 3.4rem); }
body[data-page="home"] main > .section#data-first { padding-bottom: clamp(3rem, 5.5vw, 4.5rem); }

/* ---- Pain points split (2026-09-30): compact strip on the homepage, full
   section and the automation bridge on the Governance page. ---- */
.exposed-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.exposed-list li { position: relative; display: grid; align-content: start; gap: .45rem; padding: 1.3rem 1.2rem; border-radius: var(--r-card); background: #f7f6f4; }
.exposed-list h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.exposed-list p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.exposed-more { margin: 1.5rem 0 0; text-align: center; }
.exposed-more a { color: var(--ink); font-weight: 700; text-decoration-color: rgb(var(--accent-warm) / .6); text-underline-offset: 4px; }
body[data-page="home"] #exposed h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
@media (min-width: 600px) { .exposed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .exposed-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px) { .exposed-more { text-align: left; } }

#why-data .steps-intro h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.ai-plan-turn--inset { width: var(--shell); margin: 0 auto; padding-inline: clamp(1.4rem, 4vw, 3.4rem); border-radius: var(--r-panel); }
.ai-plan-turn--inset .shell { width: auto; }
.ai-plan-turn-cta { justify-self: start; margin-top: .4rem; }
@media (min-width: 861px) { .ai-plan-turn--inset .ai-plan-turn-cta { grid-column: 2; } }
h2.ai-plan-turn-line { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.2; }

/* "Here's how it works." now closes with who you work with. */
#how-it-works .services-head p { max-width: 70ch; }
.how-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.4rem; padding: 1.1rem 1.4rem; border-radius: var(--r-card); background: #f7f6f4; }
.how-values { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.how-values li { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 600; font-size: .95rem; }
.how-values .about-icon { width: 32px; height: 32px; margin: 0; border-radius: 10px; }
.how-values .about-icon .icon { width: 17px; height: 17px; }
@media (max-width: 720px) {
  .how-values { display: grid; grid-template-columns: 1fr; }
  .how-foot .button { width: 100%; justify-content: center; }
}

/* Free tools live in the contact panel's "Not ready to talk?" line now. */
.final-cta-alt--tools { line-height: 1.55; }
.final-cta-alt--tools a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.final-cta-alt--tools a:hover, .final-cta-alt--tools a:focus-visible { text-decoration-thickness: 2px; }

/* ---- Site-wide baseline (Phase 0 of docs/SITE-COHESION-PLAN.md, 2026-09-30) ----
   What the homepage established, now on every page: text shows immediately,
   one section-heading size, homepage section spacing, and sentence-case
   labels in the footer and mobile menu. */
.reveal { opacity: 1; transform: none; transition: none; }
main > .section { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
main > .section .section-heading h2,
main > .section .section-heading-left h2,
main > .section .section-heading-center h2,
.final-cta-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.footer-col-title, .mobile-nav-title { font-family: var(--body); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.site-footer-bottom .footer-meta { font-family: var(--body); font-size: .78rem; }

/* ---- AI Governance pass (plan 3.1, 2026-09-30) ---- */
.hero-steps-title { margin: 0 0 1rem; color: var(--ink); font: 700 1rem/1.3 var(--display); }
.package-stage { color: var(--ink); font: 700 .95rem/1.3 var(--display); letter-spacing: 0; text-transform: none; }
.stage-bar-label { font: 600 .82rem/1 var(--body); letter-spacing: 0; text-transform: none; }
.stage-bar .roadmap-number { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: .1rem; border-radius: 50%; background: rgb(var(--accent-warm) / .16); color: var(--ink); font: 700 .72rem/1 var(--display); letter-spacing: 0; }
.stage-bar .roadmap-tab-link.is-active .roadmap-number, .stage-bar .roadmap-tab-link[aria-current] .roadmap-number { background: var(--orange); }
.page-hero .hero-steps-title { color: #fff; }
.package-phase-step { font: 700 .8rem/1 var(--body); letter-spacing: 0; text-transform: none; }
.govern-doc-copy .govern-doc-note { font: 600 .82rem/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.govern-docs { gap: 0; }
.govern-doc { padding-block: clamp(1.2rem, 2.4vw, 1.8rem); }

/* ---- AI Automation pass (plan 3.2, 2026-09-30) ---- */
.use-case-workflow { color: var(--ink); font-size: .86rem; line-height: 1.55; }
.use-case-systems { font-family: var(--body); font-size: .8rem; }
.use-case-tag { font: 700 .76rem/1 var(--body); letter-spacing: 0; text-transform: none; }

/* ---- Data & Custom Dashboards pass (plan 3.3, 2026-09-30) ---- */
.problem-detail-body.problem-fix { margin-top: 1.3rem; padding: .85rem 1rem; border-left: 3px solid var(--orange); border-radius: 0 var(--r-inner) var(--r-inner) 0; background: rgb(var(--accent-warm) / .08); color: var(--ink); }
.problem-example-quote { font-style: italic; }

/* ---- Who We Serve pass (plan 3.4, 2026-09-30) ---- */
.serve-pressure h4, .serve-opportunities > h4, .serve-more-body h4 { color: var(--ink); font: 700 1rem/1.3 var(--display); letter-spacing: 0; text-transform: none; }
.serve-start > span { color: var(--orange-accessible); font: 700 .85rem/1.3 var(--body); letter-spacing: 0; text-transform: none; }
.serve-more { padding: 0; }
.serve-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; list-style: none; cursor: pointer; color: var(--ink); font-weight: 700; }
.serve-more > summary::-webkit-details-marker { display: none; }
.serve-more > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .25s ease; }
.serve-more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.serve-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-inner); }
.serve-more-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 0 1.2rem 1.2rem; }
.serve-more-body ul { margin: 0; padding-left: 1.1rem; }
@media (min-width: 861px) { .serve-more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.serve-more-body .questions-section { border-top: 0; padding-top: 0; }

/* ---- About pass (plan 3.5, 2026-09-30) ---- */
.about-reach-alt { margin-top: .8rem; font-size: .92rem; }
.about-reach-alt a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.about-practice-grid > .section-heading-left { text-align: left; margin-inline: 0; }
.about-practice-grid > .section-heading-left .section-lede { margin-inline: 0; }
main > .section > .about-practice-grid > .section-heading-left, main > .section > .about-practice-grid > .section-heading-left .section-lede { text-align: left; margin-inline: 0; }
.about-reach-alt { margin-top: 1rem; }
.about-reach-alt a { text-decoration-color: currentColor; }

/* ---- Resources pass (plan 3.6, 2026-09-30) ---- */
.tool-risk-badge, .tool-label, .resource-card-badge, .resource-card-kind { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.page-hero-art-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.resource-card-format, .resource-library-status, .tool-section h4, .ai-tools-checklist li::before { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.tool-section h4 { font-weight: 700; font-size: .86rem; color: var(--ink); }
.ai-tools-principle-mark { font: 700 1.6rem/1 var(--display); }
.not-found-code { margin: 0 0 .8rem; color: var(--muted); font: 600 .9rem/1.3 var(--body); }
.not-found-code { color: rgb(255 255 255 / .78); }
.handbook-nav-title { font-family: var(--body); font-size: .9rem; letter-spacing: 0; text-transform: none; }
.nf-links > span { font-family: var(--body); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.automation-score-label { margin: 0 0 .3rem; color: var(--muted); font: 600 .88rem/1.3 var(--body); }
.about-proof-list dt { color: var(--ink); font: 700 .95rem/1.35 var(--display); letter-spacing: 0; text-transform: none; }

/* Phone tap targets: standalone links at least 24px tall (WCAG 2.5.8). */
@media (max-width: 860px) {
  .footer-phone, .page-hero-sublink, .serve-start h4 a, .resource-library-card h3 a, .resource-card-details, .nf-links a { display: inline-block; padding-block: .35rem; }
}
@media (max-width: 860px) {
  a.hero-serve-tab-label { padding-block: .45rem .4rem; }
  .privacy-contact a, main address a { display: inline-block; padding-block: .3rem; }
}

/* ---- Governance steps: "What we do in this step" row (2026-09-30) ---- */
.step-work { margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem); }
.step-work > h3 { margin: 0 0 1rem; font-size: 1.15rem; }
.step-work ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.step-work li { padding: 1.1rem 1.2rem; border-top: 3px solid var(--orange); border-radius: var(--r-inner); background: #f7f6f4; }
.step-work h4 { margin: 0 0 .4rem; font-size: 1.02rem; line-height: 1.3; }
.step-work p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.step-get { margin: 0; color: var(--muted); font-size: .98rem; }
.step-get strong { color: var(--ink); }
/* Inside the dark Shadow AI section */
.shadow .step-work { position: relative; z-index: 2; margin-top: clamp(2rem, 4vw, 3rem); }
.shadow .step-work > h3, .shadow .step-work h4, .shadow .step-get strong { color: #fff; }
.shadow .step-work li { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-top: 3px solid var(--orange); }
.shadow .step-work p, .shadow .step-get { color: rgb(255 255 255 / .74); }
.shadow .step-get { position: relative; z-index: 2; }
.educate-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (min-width: 861px) { .step-work ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shadow .step-work li { background: rgb(24 24 27 / .92); }

/* ---- "Next" row at the bottom of each service page (2026-09-30) ----
   One light link instead of a dark panel, so the orange contact panel stays
   the only loud block. A line draws along the top and an orange gleam sweeps
   the headline once when seen; hover and focus replay it. */
.next-section { padding-bottom: 0; }
body[data-page] main > .next-section { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.next-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(1rem, 4vw, 3rem); row-gap: .5rem; align-items: center; padding: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); text-decoration: none; }
.next-row::before, .next-row::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; border-radius: 2px; }
.next-row::before { right: 0; background: var(--line); }
.next-row::after { width: 100%; background: linear-gradient(90deg, var(--orange), #f7a049 60%, rgb(242 129 29 / 0)); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.75,.2,1); }
.next-row.is-gleam::after, .next-row:hover::after, .next-row:focus-visible::after { transform: scaleX(1); }
.next-row-label { grid-column: 1; color: var(--orange-accessible); font: 600 .95rem/1.3 var(--body); }
.next-row-title { grid-column: 1; margin: 0; font: 700 clamp(1.6rem, 3.4vw, 2.5rem)/1.12 var(--display); letter-spacing: -.02em; }
.next-row-note { grid-column: 1; max-width: 62ch; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.next-row-arrow { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: clamp(3.4rem, 6vw, 4.5rem); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.next-row-arrow .icon { width: 45%; height: 45%; stroke-width: 2.2; transition: transform .3s ease; }
.next-row:hover .next-row-arrow, .next-row:focus-visible .next-row-arrow { background: var(--orange); border-color: var(--orange); }
.next-row:hover .next-row-arrow .icon, .next-row:focus-visible .next-row-arrow .icon { transform: translateX(3px); }
.next-row:focus-visible { outline: 3px solid var(--orange-accessible); outline-offset: 6px; border-radius: var(--r-small); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .next-row-title { background: linear-gradient(100deg, var(--ink) 0 42%, #f2811d 47%, #ffc27a 50%, #f2811d 53%, var(--ink) 58% 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .next-row.is-gleam .next-row-title { animation: next-gleam 1.4s cubic-bezier(.4,0,.2,1) .15s both; }
  .next-row:hover .next-row-title, .next-row:focus-visible .next-row-title { animation: next-gleam-again 1.1s cubic-bezier(.4,0,.2,1) both; }
}
@keyframes next-gleam { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes next-gleam-again { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (forced-colors: active) { .next-row-title { background: none; color: CanvasText; } }
body[data-motion="reduced"] .next-row-title, body[data-motion="reduced"] .next-row::after, body[data-motion="reduced"] .next-row-arrow, body[data-motion="reduced"] .next-row-arrow .icon { animation: none !important; transition: none !important; }
body[data-motion="reduced"] .next-row::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .next-row-title { animation: none !important; } .next-row::after { transition: none; transform: scaleX(1); } }
@media (max-width: 640px) {
  .next-row { grid-template-columns: minmax(0, 1fr); }
  .next-row-arrow { grid-column: 1; grid-row: auto; width: 3rem; margin-top: .4rem; }
}
main > .next-section + .final-cta { padding-top: clamp(1rem, 2.5vw, 1.8rem); }

/* "Next" row gleam, slowed and carried into the arrow (owner, 2026-09-30).
   In view: a slow sweep across the headline (3s) that finishes by glinting
   through the arrow. Hover/focus: a 1.6s sweep, then the arrow glints and
   fills orange as the gleam arrives. Plays once; static with reduced motion. */
.next-row-arrow { position: relative; overflow: hidden; }
.next-row-arrow::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(100deg, transparent 30%, rgb(255 214 160 / .95) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.next-row-arrow .icon { position: relative; z-index: 1; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .next-row.is-gleam .next-row-title { animation: next-gleam 3s cubic-bezier(.45,0,.25,1) .2s both; }
  .next-row:hover .next-row-title, .next-row:focus-visible .next-row-title { animation: next-gleam-again 1.6s cubic-bezier(.45,0,.25,1) both; }
}
.next-row.is-gleam .next-row-arrow::before { animation: next-arrow-glint .9s ease-out 2.7s both; }
.next-row:hover .next-row-arrow::before, .next-row:focus-visible .next-row-arrow::before { animation: next-arrow-glint-again .7s ease-out 1.3s both; }
.next-row-arrow { transition: background .45s ease, border-color .45s ease; }
.next-row:hover .next-row-arrow, .next-row:focus-visible .next-row-arrow { transition-delay: 1.45s; }
.next-row:hover .next-row-arrow .icon, .next-row:focus-visible .next-row-arrow .icon { transition: transform .4s ease 1.45s; }
@keyframes next-arrow-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes next-arrow-glint-again { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
body[data-motion="reduced"] .next-row-arrow::before { animation: none !important; }
body[data-motion="reduced"] .next-row:hover .next-row-arrow, body[data-motion="reduced"] .next-row:focus-visible .next-row-arrow { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .next-row-arrow::before { animation: none !important; } .next-row:hover .next-row-arrow, .next-row:focus-visible .next-row-arrow { transition-delay: 0s; } }

/* ---- No decorative haze on inner pages (owner, 2026-09-30) ----
   The homepage has none of these soft orange glows or dot fields behind
   sections, so the other pages drop them too. Card and panel treatments stay. */
.automation-checker-section::before, .assessment-section::before, .monitoring::before, .educate::before,
.approach::before, .resources::before, .use-cases::before { display: none; }

/* ---- Next row gleam, driven by story.js (owner, 2026-09-30) ----
   Plays once when the row comes into view (.is-gleaming-slow), and once per
   hover or focus (.is-gleaming-fast). The script removes the class when the
   arrow glint ends, so leaving the row never restarts anything. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .next-row.is-gleam .next-row-title, .next-row:hover .next-row-title, .next-row:focus-visible .next-row-title { animation: none; }
  .next-row.is-gleaming-slow .next-row-title { animation: next-gleam 3s cubic-bezier(.45,0,.25,1) .2s both; }
  .next-row.is-gleaming-fast .next-row-title { animation: next-gleam-again 1.6s cubic-bezier(.45,0,.25,1) both; }
}
.next-row.is-gleam .next-row-arrow::before, .next-row:hover .next-row-arrow::before, .next-row:focus-visible .next-row-arrow::before { animation: none; }
.next-row.is-gleaming-slow .next-row-arrow::before { animation: next-arrow-glint .9s ease-out 2.7s both; }
.next-row.is-gleaming-fast .next-row-arrow::before { animation: next-arrow-glint-again .7s ease-out 1.3s both; }
body[data-motion="reduced"] .next-row .next-row-title, body[data-motion="reduced"] .next-row .next-row-arrow::before { animation: none !important; }

/* Numbers everywhere match the homepage: orange circle, display font, no leading zero. */
.learn-num, .workflow-index { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .8rem; border-radius: 50%; background: var(--orange); color: var(--ink); font: 700 .95rem/1 var(--display); letter-spacing: 0; }
.workflow-index { width: 1.6rem; height: 1.6rem; margin-bottom: .35rem; font-size: .8rem; }
.watch-flow-num { border: 0; background: var(--orange); color: var(--ink); font-family: var(--display); font-weight: 700; }

/* ---- One dark band per page (owner: off-white read dated, 2026-09-30) ----
   The same dark, dotted texture as the page heroes, inset as a rounded panel,
   with orange accents. Homepage: free tools. Service pages: how we work. */
.dark-band, .section--dark > .shell { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.8rem, 5vw, 3.4rem); border-radius: var(--r-panel); background: radial-gradient(120% 90% at 0% 0%, rgb(120 60 10 / .55), transparent 55%), #17171a; color: #fff; }
.dark-band::before, .section--dark > .shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 6px 6px; pointer-events: none; }
.section--dark > .shell { width: min(1180px, calc(100% - 32px)); }
.dark-band h2, .dark-band h3, .section--dark h2, .section--dark h3, .section--dark strong { color: #fff; }
.dark-band p, .section--dark .section-lede, .section--dark p { color: rgb(255 255 255 / .74); }
.dark-band .accent, .section--dark .accent { color: #f7a049; }

/* Homepage free tools */
.tools-band-head { max-width: 640px; margin-bottom: 1.8rem; }
.tools-band-head h2 { margin: 0 0 .6rem; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.tools-band-head p { margin: 0; font-size: 1.05rem; }
.tools-band-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.tools-band-list li { display: grid; align-content: start; gap: .6rem; padding: 1.4rem; border: 1px solid rgb(255 255 255 / .12); border-radius: var(--r-card); background: rgb(255 255 255 / .05); }
.tools-band-list li:hover { border-color: rgb(242 129 29 / .6); }
.tools-band-list h3 { margin: 0; font-size: 1.3rem; }
.tools-band-list p { margin: 0; line-height: 1.6; }
.tools-band-list .tools-band-meta { color: #f7a049; font-size: .85rem; font-weight: 600; }
.tools-band-list .button { justify-self: start; margin-top: .6rem; }
.tools-band-more { margin: 1.4rem 0 0; }
.tools-band-more a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
@media (min-width: 861px) { .tools-band-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Service-page dark sections: cards inside read on dark */
.section--dark .learn-card, .section--dark .watch-flow, .section--dark .package-phase:not(.package-phase--managed) { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .12); box-shadow: none; color: #fff; }
.section--dark .learn-card p, .section--dark .watch-flow span, .section--dark .package-phase li, .section--dark .package-phase-meta { color: rgb(255 255 255 / .74); }
.section--dark .package-phase--managed { border: 1px solid rgb(242 129 29 / .45); }
.section--dark .package-addons, .section--dark .package-boundaries { border-color: rgb(255 255 255 / .12); }
.section--dark .package-addons li, .section--dark .package-boundaries > div { border-color: rgb(255 255 255 / .12); }
.section--dark a:not(.button) { color: #fff; }
.section--dark .package-byline a, .section--dark .package-more { color: #fff; }
.section--dark .package-phase-close { background: rgb(242 129 29 / .14); color: #fff; }

/* Governance step 2 as tabs */
.doc-tabs { margin: 0 0 1.4rem; }
.govern-docs--tabs { margin: 0; }
.govern-docs--tabs > .govern-doc { border-top: 0; padding-top: 0; }
.govern-docs--tabs > .govern-doc[hidden] { display: none; }
@media (max-width: 700px) {
  .doc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: var(--r-card); }
  .doc-tabs [role="tab"] { padding: .55rem .4rem; border-radius: var(--r-inner); font-size: .8rem; line-height: 1.2; }
}
/* Dark-band fixes: readable secondary text and matching number circles. */
.section--dark .package-addons span, .section--dark .package-boundaries p { color: rgb(255 255 255 / .74); }
.section--dark .package-phase-step { background: rgb(242 129 29 / .22); color: #ffc27a; }
.section--dark .learn-grid--timeline .learn-num { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.section--dark .learn-grid--timeline .learn-card { background: none; border: 0; }
.doc-tabs { margin-inline: auto; }
/* Governance spacing matches every other page (was a larger, page-only rhythm). */
body[data-page="governance"] main > .section:not(.page-hero):not(.shadow):not(.final-cta) { padding-block: clamp(3rem, 5.5vw, 4.5rem); }
body[data-page="governance"] main > .section.next-section { padding-block: clamp(2rem, 4vw, 3rem) 0; }
body[data-page="governance"] main > .next-section + .final-cta { padding-top: clamp(1rem, 2.5vw, 1.8rem); }
body[data-page="governance"] .govern-docs--tabs > .govern-doc { padding-block: 0; }
#after-governance { padding-bottom: 0; }

/* ---- Every page hero in brand orange (owner, 2026-09-30) ----
   Inner heroes were dark; the homepage and Governance were orange. One rule now (the 404 keeps its dark scene).
   The page's next section (Shadow AI) is dark, so a dark hero stacked two
   dark blocks. The hero takes the homepage's orange instead. Text is ink:
   white on this orange is about 2.3:1, under the 3:1 needed even for large
   type. The highlighted words get a white underline instead of a color. */
.page-hero:not(.not-found-hero) { color: var(--ink); background: linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%); }
.page-hero:not(.not-found-hero)::before { background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); background-size: 6px 6px; opacity: 1; }
.page-hero:not(.not-found-hero) h1 { color: var(--ink); }
.page-hero:not(.not-found-hero) h1 em { color: var(--ink); text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: .12em; text-underline-offset: .12em; }
.page-hero:not(.not-found-hero) .page-hero-lede, .page-hero:not(.not-found-hero) .page-hero-sublink { color: var(--ink); }
.page-hero:not(.not-found-hero) .page-hero-sublink:hover, .page-hero:not(.not-found-hero) .page-hero-sublink:focus-visible { color: #000; }
.page-hero:not(.not-found-hero) .button-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-hero:not(.not-found-hero) .button-primary:hover, .page-hero:not(.not-found-hero) .button-primary:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.page-hero:not(.not-found-hero) .button:focus-visible { outline-color: var(--ink); }
.page-hero:not(.not-found-hero) .crumbs li + li::before { color: rgb(34 34 34 / .45); }
.page-hero:not(.not-found-hero) .crumbs a { color: rgb(34 34 34 / .8); }
.page-hero:not(.not-found-hero) .crumbs a:hover { color: var(--ink); }
.page-hero:not(.not-found-hero) .crumbs [aria-current="page"] { color: var(--ink); }
.page-hero:not(.not-found-hero) .page-hero-art { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .9); backdrop-filter: none; box-shadow: 0 24px 50px -24px rgb(120 60 10 / .45); }
.page-hero:not(.not-found-hero) .hero-steps-title { color: var(--ink); }
.page-hero:not(.not-found-hero) .hero-steps li { border-color: var(--line); background: #fff; }
.page-hero:not(.not-found-hero) .hero-steps li::before { color: var(--orange-accessible); }
.page-hero:not(.not-found-hero) .hero-steps strong { color: var(--ink); }
.page-hero:not(.not-found-hero) .hero-steps span { color: var(--muted); }
/* No rule under the opening question: no other section heading has one (owner, 2026-09-30). */
.noise-title::after { display: none; }
.hero-steps li::before { content: counter(hero-step); font-family: var(--display); font-size: .95rem; }
/* Resources maps tools onto the four steps but they are not done in order, so no numbers. */
.hero-steps.hero-steps--plain li { grid-template-columns: 1fr; }
.hero-steps.hero-steps--plain li::before { content: none; }
.page-hero:not(.not-found-hero) h1 em { text-decoration-thickness: .07em; text-underline-offset: .14em; }

/* Hero art on orange: readouts, profile facts, and the product shots. */
.page-hero:not(.not-found-hero) .hero-readout div { border-color: var(--line); background: #fff; }
.page-hero:not(.not-found-hero) .hero-readout dt { color: var(--ink); }
.page-hero:not(.not-found-hero) .hero-readout dd { background: #fff1e3; color: #7a3d00; border-color: rgb(242 129 29 / .35); }
.page-hero:not(.not-found-hero) .page-hero-art-note { color: var(--muted); }
.page-hero:not(.not-found-hero) .app-shot-caption { color: rgb(34 34 34 / .8); }

/* ---- Tool dialogs hold still (owner, 2026-09-30) ----
   A fixed-height dialog pinned near the top: the header and progress stay
   put and only the questions scroll, so short and long steps no longer
   resize and re-center the box. Phones already open full screen. */
.tool-modal { align-items: flex-start; }
.tool-modal-dialog { height: min(820px, 100%); margin-top: clamp(0rem, 3vh, 2rem); }
@media (max-width: 720px) { .tool-modal-dialog { margin-top: 0; height: 100%; } }
/* Orange heroes: secondary buttons are outlined in ink; highlighted words stay ink. */
.page-hero:not(.not-found-hero) .button-quiet { background: rgb(255 255 255 / .18); border-color: var(--ink); color: var(--ink); }
.page-hero:not(.not-found-hero) .button-quiet:hover, .page-hero:not(.not-found-hero) .button-quiet:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
main .page-hero:not(.not-found-hero) h1 em { color: var(--ink); }
/* Shadow AI title fits inside its panel at every desktop width (owner, 2026-09-30):
   no longer crosses the panel's right edge. */
@media (min-width: 1051px) {
  .shadow-ghost-title { right: calc(-1 * ((100vw - min(1180px, 100vw - 48px)) / 2 - 14px) + 2.5rem); width: clamp(20rem, 26vw, 27rem); font-size: clamp(5.2rem, 7.4vw, 8.6rem); }
}

/* "How we work" cards: an icon for the step centered on the gradient; the
   step number stays in its original bottom-left spot (owner, 2026-09-30). */
.how-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.how-icon { display: grid; place-items: center; width: clamp(4.8rem, 7vw, 6rem); aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--orange-accessible); box-shadow: 0 10px 24px -12px rgb(120 60 10 / .55); }
.how-icon .icon { width: 52%; height: 52%; stroke-width: 1.8; }
@media (max-width: 860px) { .how-icon { width: 4rem; } }
@media (max-width: 860px) { .how-art { height: 120px; } }

/* ---- Equal hero heights on desktop (owner, 2026-09-30) ----
   Every page hero is the same height, with its content centered; phones
   stack content, so heights there follow the content. */
@media (min-width: 861px) {
  .page-hero:not(.not-found-hero), .hero-panel { display: flex; flex-direction: column; min-height: 760px; box-sizing: border-box; }
  .page-hero:not(.not-found-hero) > .page-hero-grid { flex: 1; align-items: center; }
  .hero-panel > .hero-layout { flex: 1; align-items: center; }
}

/* Homepage hero: the circuit fades out behind the text column so the
   paragraph reads cleanly; the paragraph is a touch heavier. */
.hero-circuit { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 68%); mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 68%); }
@media (max-width: 860px) { .hero-circuit { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); } }
.hero-deck { font-weight: 500; }

/* Captions under hero product shots: a readable note directly below the image. */
.page-hero:not(.not-found-hero) .app-shot-caption { display: table; margin: .9rem auto 0; padding: .45rem .9rem; border-radius: 999px; background: rgb(255 255 255 / .9); color: var(--ink); font-size: .8rem; font-weight: 500; text-align: center; }

/* Hero padding tightened so every hero fits the shared 760px on desktop. */
@media (min-width: 861px) { .page-hero:not(.not-found-hero) { padding-block: clamp(2.6rem, 4.5vw, 4rem) clamp(3rem, 5vw, 4.5rem); } }

/* ---- Homepage free tools: a slim strip of links (owner, 2026-09-30) ---- */
body[data-page="home"] main > .tools-strip { padding-block: 0 clamp(3rem, 6vw, 5rem); }
/* Last thing before the footer, which already draws a rule, so no second line under it. */
body[data-page="home"] main > .tools-strip .tools-strip-row { border-bottom: 0; }
.tools-strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tools-strip h2 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.tools-strip-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.tools-strip-links a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .55rem 1rem; border: 1px solid rgb(242 129 29 / .45); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.tools-strip-links a:hover, .tools-strip-links a:focus-visible { background: var(--orange); border-color: var(--orange); }
.tools-strip-links .tools-strip-all { border-color: transparent; background: none; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.tools-strip-links .tools-strip-all:hover { background: none; text-decoration-thickness: 2px; }
/* Automation hero flow: slightly tighter so the hero matches the shared height. */
@media (min-width: 861px) {
  .page-hero .flow-canvas { gap: .62rem; padding-block: .8rem .9rem; }
  .page-hero .flow-node { padding-block: .45rem; }
  .page-hero:not(.not-found-hero) .app-shot-caption { margin-top: .6rem; }
}

/* Automation process: three phases, each naming the one meeting the client attends. */
.learn-grid--phases .learn-card { display: flex; flex-direction: column; }
.learn-grid--phases .learn-card > p:not(.learn-meet) { margin-bottom: 1.25rem; }
.learn-meet { display: flex; gap: .65rem; align-items: flex-start; margin-top: auto !important; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.learn-meet .icon { width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--orange-accessible); }
.learn-meet strong { color: var(--ink); }
.section--dark .learn-meet { border-color: rgb(255 255 255 / .12); }
.section--dark .learn-meet .icon { color: var(--orange); }
.section--dark .learn-meet strong { color: #fff; }

/* ---- Page heroes use the homepage hero's type colors (owner, 2026-09-30) ----
   White headline, highlighted words in the same cream gradient as the
   homepage's third line. A warm shade sits behind the text column and fades
   out toward the art, and the dot texture fades out the same way the homepage
   circuit does, so the white headline has a quieter, deeper field to sit on.
   Phones stack the art under the copy, so the fade runs top to bottom there. */
.page-hero:not(.not-found-hero)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(140 50 0 / .16) 0%, rgb(140 50 0 / .12) 42%, rgb(140 50 0 / 0) 68%);
}
.page-hero:not(.not-found-hero)::before { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 68%); mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 68%); }
@media (max-width: 900px) {
  .page-hero:not(.not-found-hero)::after { background: linear-gradient(180deg, rgb(140 50 0 / .16) 0%, rgb(140 50 0 / .12) 55%, rgb(140 50 0 / 0) 85%); }
  .page-hero:not(.not-found-hero)::before { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); mask-image: linear-gradient(180deg, transparent 0%, transparent 55%, #000 85%); }
}
main .page-hero:not(.not-found-hero) h1 { color: #fff; }
main .page-hero:not(.not-found-hero) h1 em { color: transparent; text-decoration: none; background: linear-gradient(92deg, #ffe8c8, #fff 45%, #ffd08f); -webkit-background-clip: text; background-clip: text; }
.page-hero:not(.not-found-hero) .page-hero-lede { font-weight: 500; }

/* ---- Color in the hero graphics (owner, 2026-09-30) ----
   The Data dashboard graphic sat on the orange hero in greys and one teal, and
   read flat. Cool accents (teal, blue) next to warm ones (orange, ember) give
   it contrast against the orange instead of blending into it. */
.rd-bar { background: linear-gradient(90deg, #f2811d, #2b8fa8 55%, #3d5f9e) top / 100% 3px no-repeat, #fff; }
.rd-logo { background: linear-gradient(135deg, #f2811d, #c23b1f); }
.rd-kpi { --kpi: #0f6b80; border-top: 3px solid var(--kpi); background: linear-gradient(180deg, color-mix(in srgb, var(--kpi) 10%, #fff), #fff 70%); }
.rd-kpi:nth-child(2) { --kpi: #3d5f9e; }
.rd-kpi:nth-child(3) { --kpi: #e0751a; }
.rd-kpi:nth-child(4) { --kpi: #c23b1f; }
.rd-bars rect { fill: url(#rd-bar-fill); }
.rd-bars rect.is-current { fill: url(#rd-bar-now); }
.rd-key--actual { background: linear-gradient(180deg, #0f5c73, #2b8fa8); }
.rd-list li { --flag: #c23b1f; border-left-color: var(--flag); padding-right: .5rem; border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--flag) 7%, #fff); }
.rd-list li:nth-child(2) { --flag: #e0751a; }
.rd-list li:nth-child(3) { --flag: #3d5f9e; }

/* Governance hero steps: brand orange and ink only (owner, 2026-10-02). The
   teal, blue, red and green steps clashed with the theme. Ink numerals on
   the orange circle clear 4.5:1; white does not. */
.hero-steps--color li { --step: var(--orange); align-items: center; border-left: 4px solid var(--step); }
.page-hero:not(.not-found-hero) .hero-steps--color li { border-left-color: var(--step); background: linear-gradient(90deg, color-mix(in srgb, var(--step) 9%, #fff), #fff 60%); }
.page-hero:not(.not-found-hero) .hero-steps--color li::before {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--step); color: var(--ink); font-size: .9rem; line-height: 1;
}

/* Depth and gleam on the hero cards (owner, 2026-09-30). Layered shadows lift
   each card, a soft gloss sits on the top edge, and a light band sweeps across
   once on load (staggered) and again on hover. Still under reduced motion. */
.rd-kpi, .rd-card, .page-hero:not(.not-found-hero) .hero-steps--color li { position: relative; overflow: hidden; isolation: isolate; }
.rd-card { --gleam: #2b8fa8; }
.rd-kpi { --gleam: var(--kpi); }
.hero-steps--color li { --gleam: var(--step); }
.rd-kpi, .rd-card {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(15 35 50 / .08), 0 10px 22px -12px rgb(15 35 50 / .35);
}
.page-hero:not(.not-found-hero) .hero-steps--color li {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 1px 2px rgb(60 30 5 / .1), 0 12px 24px -14px rgb(90 45 5 / .45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-hero:not(.not-found-hero) .hero-steps--color li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 2px 4px rgb(60 30 5 / .12), 0 18px 30px -14px rgb(90 45 5 / .5);
}
.page-hero:not(.not-found-hero) .hero-steps--color li::before {
  background: radial-gradient(circle at 32% 25%, rgb(255 255 255 / .5), transparent 55%), var(--step);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / .18), 0 3px 6px -2px color-mix(in srgb, var(--step) 70%, transparent);
}
.rd-kpi::after, .rd-card::after, .page-hero:not(.not-found-hero) .hero-steps--color li::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(110deg, transparent 36%, color-mix(in srgb, var(--gleam) 22%, #fff) 44%, #fff 48%, color-mix(in srgb, var(--gleam) 14%, #fff) 53%, transparent 60%) 160% 0 / 260% 100% no-repeat;
}
body[data-motion="full"] .rd-kpi::after, body[data-motion="full"] .rd-card::after, body[data-motion="full"] .page-hero:not(.not-found-hero) .hero-steps--color li::after { animation: card-gleam 1.4s .4s ease-out both; }
body[data-motion="full"] .rd-kpi:nth-child(2)::after, body[data-motion="full"] .hero-steps--color li:nth-child(2)::after { animation-delay: .55s; }
body[data-motion="full"] .rd-kpi:nth-child(3)::after, body[data-motion="full"] .hero-steps--color li:nth-child(3)::after { animation-delay: .7s; }
body[data-motion="full"] .rd-kpi:nth-child(4)::after, body[data-motion="full"] .hero-steps--color li:nth-child(4)::after { animation-delay: .85s; }
body[data-motion="full"] .rd-card::after { animation-delay: 1s; }
body[data-motion="full"] .rd-kpi:hover::after, body[data-motion="full"] .rd-card:hover::after, body[data-motion="full"] .page-hero:not(.not-found-hero) .hero-steps--color li:hover::after { animation: card-gleam-hover .9s ease-out both; }
@keyframes card-gleam { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes card-gleam-hover { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .page-hero:not(.not-found-hero) .hero-steps--color li:hover { transform: none; } }

/* Depth in the page heroes (owner, 2026-09-30). The flat ramp plus the text
   shade read as one plane. Light now pools behind the art and in the top-right
   corner, the bottom-left falls off into ember, and the panel gets a lit top
   edge and an inner shadow along the bottom, so it reads as a lit, curved
   surface. The glow stays on the art side so the white headline keeps its
   contrast; phones move it under the copy, where the art stacks. */
.page-hero:not(.not-found-hero) {
  background:
    radial-gradient(45% 70% at 76% 45%, rgb(255 196 120 / .55), transparent 70%),
    radial-gradient(40% 55% at 100% 0%, rgb(255 225 180 / .4), transparent 70%),
    radial-gradient(65% 85% at 0% 100%, rgb(150 45 0 / .38), transparent 68%),
    linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .4),
    inset 0 -60px 90px -60px rgb(110 35 0 / .45),
    0 30px 60px -34px rgb(120 50 5 / .5);
}
@media (max-width: 900px) {
  .page-hero:not(.not-found-hero) {
    background:
      radial-gradient(80% 45% at 50% 88%, rgb(255 196 120 / .5), transparent 70%),
      radial-gradient(60% 40% at 100% 0%, rgb(255 225 180 / .35), transparent 70%),
      radial-gradient(90% 60% at 0% 40%, rgb(150 45 0 / .3), transparent 68%),
      linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
  }
}
/* More depth behind the hero text (owner, 2026-10-02). The even shade that
   made the white headline readable flattened that half of the panel. The text
   side is now a deep burnt orange that falls away into the glow behind the
   art, with a deeper pool low on the left, so the panel reads as lit from the
   right. That field is dark enough for white text at 4.5:1, so the lede,
   sublink and breadcrumbs are white (ink dropped to about 3:1 on it). The dots
   return faintly behind the text and the headline casts a soft shadow. */
.page-hero:not(.not-found-hero)::after {
  background:
    radial-gradient(48% 70% at 12% 78%, rgb(90 26 0 / .3), transparent 72%),
    linear-gradient(90deg, rgb(104 32 0 / .56) 0%, rgb(108 34 0 / .52) 51%, rgb(120 40 0 / 0) 73%);
}
.page-hero:not(.not-found-hero)::before { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 42%, #000 68%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 42%, #000 68%); }
main .page-hero:not(.not-found-hero) h1 { filter: drop-shadow(0 1px 0 rgb(90 28 0 / .4)) drop-shadow(0 14px 22px rgb(80 22 0 / .35)); }
.page-hero:not(.not-found-hero) .page-hero-lede, .page-hero:not(.not-found-hero) .page-hero-sublink, .page-hero:not(.not-found-hero) .page-hero-sublink:hover, .page-hero:not(.not-found-hero) .page-hero-sublink:focus-visible { color: #fff; }
.page-hero:not(.not-found-hero) .page-hero-sublink { text-decoration-color: rgb(255 255 255 / .7); }
.page-hero:not(.not-found-hero) .crumbs li + li::before { color: rgb(255 255 255 / .6); }
.page-hero:not(.not-found-hero) .crumbs a, .page-hero:not(.not-found-hero) .crumbs a:hover, .page-hero:not(.not-found-hero) .crumbs [aria-current="page"] { color: #fff; }
.page-hero:not(.not-found-hero) .page-hero-art { box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 34px 60px -26px rgb(100 40 0 / .6), 0 10px 20px -12px rgb(100 40 0 / .35); }
@media (max-width: 900px) {
  .page-hero:not(.not-found-hero)::after {
    background:
      radial-gradient(90% 34% at 10% 50%, rgb(90 26 0 / .26), transparent 72%),
      linear-gradient(180deg, rgb(104 32 0 / .52) 0%, rgb(110 35 0 / .46) 58%, rgb(120 40 0 / 0) 88%);
  }
  .page-hero:not(.not-found-hero)::before { -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 55%, #000 85%); mask-image: linear-gradient(180deg, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .4) 55%, #000 85%); }
}

/* Governance step 2 as a bento (owner, 2026-10-02): two small tiles, then one
   large tile that holds "Write the rules" with its tabs and sample documents,
   so the tabs no longer float between the cards and the samples. */
/* The large tile is a sibling of .step-work, not a child, so the small tiles'
   list styles never reach the lists inside the sample documents. */
.step-work--bento li, .bento-box { border-radius: var(--r-card); }
.step-work--bento { margin-bottom: 0; }
.bento-box { margin: 1rem 0 clamp(1.6rem, 3.5vw, 2.4rem); padding: clamp(1.2rem, 2.6vw, 2rem); border-top: 3px solid var(--orange); background: #f7f6f4; }
.bento-box-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem); border-bottom: 1px solid var(--line); }
.bento-box-head h4, .bento-box-copy h4 { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.3; }
.bento-box-head p, .bento-box-copy p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* Secondary hero buttons: white outline on the deeper field (ink no longer reads there). */
.page-hero:not(.not-found-hero) .button-quiet { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }
.page-hero:not(.not-found-hero) .button-quiet:hover, .page-hero:not(.not-found-hero) .button-quiet:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
/* Step 4's large tile: the guide's description beside its sample. */
.bento-box--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.5rem); align-items: center; }
.bento-box--split .guide-doc { width: 100%; margin: 0; justify-self: center; }
@media (min-width: 861px) { .bento-box--split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .bento-box--split .guide-doc { justify-self: end; } }
/* The deeper hero field takes the ink button's edge away, so the hero button is white there. */
.page-hero:not(.not-found-hero) .button-primary { background: #fff; border-color: #fff; color: var(--ink); }
.page-hero:not(.not-found-hero) .button-primary:hover, .page-hero:not(.not-found-hero) .button-primary:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-hero:not(.not-found-hero) .button:focus-visible { outline-color: #fff; }
.bento-box-head .doc-tabs { margin: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.govern-doc-copy h5 { margin: 0; font: 700 clamp(1.35rem, 2.4vw, 1.7rem)/1.15 var(--display); letter-spacing: -.02em; }
@media (min-width: 861px) { .step-work--bento ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cons-tiles em { align-self: start; }
@media (max-width: 760px) { .cons-stage { aspect-ratio: 3 / 4.8; } }

/* Layered page hero, trial on Governance only (owner, 2026-10-02). The straight
   left-to-right shade read as a curtain laid over the panel. With
   .page-hero--depth the shade is an ellipse anchored off the left edge, so the
   dark wraps the text and falls away in a curve. The glow leaves the back of
   the card for the top-right corner and an ember pool sits under the card, so
   the card's shadow has a darker field to land on. Circuit traces run out from
   behind the card as a middle plane between the field and the card, and fade
   out along the same ellipse before they reach the text. Phones stack the card
   under the copy, so the ellipse hangs from the top there and the traces go. */
.page-hero.page-hero--depth {
  background:
    radial-gradient(52% 78% at 98% 0%, rgb(255 222 170 / .62), transparent 70%),
    radial-gradient(46% 62% at 60% 104%, rgb(132 38 0 / .42), transparent 70%),
    radial-gradient(65% 85% at 0% 100%, rgb(150 45 0 / .38), transparent 68%),
    linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
}
.page-hero.page-hero--depth::after { background: radial-gradient(72% 100% at -6% 62%, rgb(92 26 0 / .64) 0%, rgb(100 30 0 / .58) 60%, rgb(108 34 0 / .48) 80%, rgb(120 40 0 / 0) 100%); }
.page-hero.page-hero--depth::before { -webkit-mask-image: radial-gradient(72% 100% at -6% 62%, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .35) 72%, #000 100%); mask-image: radial-gradient(72% 100% at -6% 62%, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .35) 72%, #000 100%); }
.page-hero-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; -webkit-mask-image: radial-gradient(72% 100% at -6% 62%, transparent 0%, transparent 74%, #000 100%); mask-image: radial-gradient(72% 100% at -6% 62%, transparent 0%, transparent 74%, #000 100%); }
.page-hero-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-hero-lines path { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.page-hero-lines .via { fill: rgb(255 255 255 / .5); }
.page-hero-lines .node { fill: #fff; stroke: #ffd9a3; stroke-width: 3; vector-effect: non-scaling-stroke; }
.page-hero.page-hero--depth .page-hero-art { box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, -18px 40px 70px -28px rgb(84 26 0 / .7), -6px 14px 24px -14px rgb(84 26 0 / .4); }
@media (max-width: 900px) {
  .page-hero.page-hero--depth {
    background:
      radial-gradient(90% 40% at 100% 100%, rgb(255 205 140 / .5), transparent 70%),
      radial-gradient(60% 40% at 100% 0%, rgb(255 225 180 / .35), transparent 70%),
      radial-gradient(90% 45% at 0% 100%, rgb(132 38 0 / .4), transparent 70%),
      linear-gradient(176deg, #f2811d 0%, #ef7a14 52%, #e26f0c 100%);
  }
  .page-hero.page-hero--depth::after { background: radial-gradient(160% 60% at 10% 14%, rgb(96 28 0 / .62) 0%, rgb(104 32 0 / .56) 55%, rgb(110 35 0 / .46) 78%, rgb(120 40 0 / 0) 100%); }
  .page-hero.page-hero--depth::before { -webkit-mask-image: radial-gradient(160% 60% at 10% 14%, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .35) 72%, #000 100%); mask-image: radial-gradient(160% 60% at 10% 14%, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .35) 72%, #000 100%); }
  .page-hero-lines { display: none; }
}

/* ── Scenes from the Managed AI deck ──────────────────────────────────────
   One window style for every sample on the site: a title bar with three
   lights (.win-bar), on the dark desk on the homepage (.tue-win) or as a
   light card on the service pages (.sample-win). Problems wear a red tag,
   fixes a green one, "your call" an amber one. A pointer (.scene-cursor) acts
   the longer scenes out on wide screens. story.js adds the .js-* classes and
   the step classes; without it, and with reduced motion, the finished state
   shows. Text inside the windows stays at or above the .7rem floor. */
.win-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; border-bottom: 1px solid #e6e4e0; background: linear-gradient(#f7f6f3, #edece8); color: #4d4f55; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.win-bar > b:not(.win-app) { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; }
.win-lights { display: flex; flex: 0 0 auto; gap: .32rem; }
.win-lights i { width: .62rem; height: .62rem; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.win-lights i:nth-child(2) { background: #febc2e; }
.win-lights i:nth-child(3) { background: #28c840; }
.win-app { flex: 0 0 auto; width: .95rem; height: .95rem; border-radius: 4px; background: #8b8d95; }
.win-app--mail { background: #2f5fb3; }
.win-app--teams { background: #5b5fc7; }
.win-app--files { background: #0f7b76; }
.win-app--copilot { background: conic-gradient(from 200deg, #2f5fb3, #7b5ce0, #e0538e, #f7941d, #2f5fb3); }
.win-url { flex: 1; min-width: 0; overflow: hidden; padding: .14rem .55rem; border: 1px solid #e6e4e0; border-radius: 6px; background: #fff; font-weight: 500; text-overflow: ellipsis; }
.win-tag { flex: 0 0 auto; padding: .18rem .55rem; border-radius: 999px; background: #e6e4e0; color: #3e4046; font-size: .7rem; font-style: normal; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.win-bar .win-tag { margin-left: auto; }
.win-tag--bad { background: #fde5e2; color: #9b2318; }
.win-msg { margin: 0 8% 0 0; padding: .5rem .65rem; border-radius: 10px; background: #f4f2ee; }
.win-msg--me { margin: 0 0 0 18%; background: #eef0f4; }
.win-cite { display: inline-block; padding: .05rem .35rem; border-radius: 5px; background: #fde5e2; color: #9b2318; font-weight: 700; }
.win-btn { flex: 0 0 auto; padding: .28rem .7rem; border: 1px solid #e6e4e0; border-radius: 6px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 600; transition: transform .12s ease; }
.win-btn--primary { border-color: #2f5fb3; background: #2f5fb3; color: #fff; }
.win-btn.is-pressed { transform: scale(.9); }
.win-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; margin: 0; }
.win-fields dt { color: #5d5f66; }
.win-fields dd { margin: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; }
.sample-win { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; box-shadow: var(--shadow-card); }

.scene-stage { position: relative; }
.scene-cursor { display: none; }
.scene-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .85rem; }
.scene-replay { display: none; flex: 0 0 auto; padding: .45rem .9rem; border: 1px solid rgba(27,28,28,.22); border-radius: 999px; background: #fff; color: var(--ink); font: 600 .8rem/1 var(--body); cursor: pointer; }
.js-scene .scene-replay { display: inline-block; }
.scene-replay:hover, .scene-replay:focus-visible { border-color: var(--ink); }
.sample-win > .scene-foot { min-height: 2.1rem; padding: .25rem .8rem; border-top: 1px solid var(--line); background: #faf9f7; font-size: .78rem; }
.sample-win > .scene-foot .scene-replay { min-height: 24px; padding: .2rem .1rem; border: 0; border-radius: 0; background: none; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
@keyframes scene-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }
@media (min-width: 861px) {
  .scene-cursor { position: absolute; z-index: 9; top: 0; left: 0; display: block; width: 20px; height: 20px; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .3s ease; }
  .scene-cursor.is-show { opacity: 1; }
  .scene-cursor svg { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
  .scene-cursor path { fill: #fff; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; }
  .scene-ring { position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; border: 2px solid var(--orange); border-radius: 50%; opacity: 0; }
  .scene-cursor.is-click .scene-ring { animation: scene-ring .45s ease-out; }
  .scene-chip { position: absolute; top: 14px; left: 14px; padding: .28rem .55rem; border: 1px solid #d5dcea; border-radius: 6px; background: #fff; color: var(--ink); font: 600 .72rem/1.2 var(--body); white-space: nowrap; box-shadow: 0 10px 20px rgb(0 0 0 / .35); opacity: 0; transform: scale(.7); transform-origin: top left; transition: opacity .25s ease, transform .25s ease; }
  .scene-cursor.is-drag .scene-chip { opacity: 1; transform: none; }
}

/* A normal Tuesday (homepage #exposed) */
.tuesday { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.tuesday-clock { display: grid; gap: .35rem; margin: 0; }
.tuesday-day { color: var(--muted); font-size: .9rem; font-weight: 600; }
.tuesday-time { color: var(--ink); font: 700 clamp(2.3rem, 4.4vw, 3.3rem)/1 var(--mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tuesday-log { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.tuesday-log li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--line); transition: opacity .6s ease; }
.tuesday-at { color: var(--ink); font: 700 .82rem/1.65 var(--mono); transition: color .6s ease; }
/* The moment that just happened: its time turns orange until the next one lands. */
.tuesday-log li.is-now .tuesday-at { color: #c45a00; }
.tuesday-log h3 { margin: 0 0 .2rem; font-size: 1.02rem; line-height: 1.3; }
.tuesday-log p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.js-tuesday .tuesday-log li:not(.is-on) { opacity: .3; }
.tuesday-count { display: flex; align-items: baseline; gap: .8rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.4; }
.tuesday-count b { color: #c45a00; font: 700 3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.tuesday-count span { max-width: 26ch; }

.tuesday-desk { isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: .7rem; padding: .8rem .8rem 2.6rem; border-radius: var(--r-card); background: radial-gradient(120% 90% at 100% 0%, rgb(120 60 10 / .55), transparent 55%), #17171a; }
.tuesday-desk::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px); background-size: 6px 6px; pointer-events: none; }
.tuesday-desk::after { content: ""; position: absolute; inset: auto 0 0; height: 1.9rem; border-top: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .06); pointer-events: none; }
.tue-win { overflow: hidden; border-radius: var(--r-inner); background: #fff; color: var(--ink); font-size: .76rem; line-height: 1.4; box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 26px 50px -18px rgb(0 0 0 / .7); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.js-tuesday .tue-win:not(.is-on) { opacity: 0; transform: translateY(22px) scale(.96); }
.tue-body { padding: .6rem .7rem; }
.tue-body p, .tue-body ul { margin: 0; }
.tue-body .win-msg { margin: 0 8% 0 0; }
.tue-body .win-msg--me { margin: 0 0 .45rem 18%; }
.tue-mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .5rem; align-items: center; padding: .36rem .3rem; border-top: 1px solid #e6e4e0; border-radius: 6px; transition: background .2s ease; }
.tue-mail:first-child { border-top: 0; }
.tue-mail i { grid-row: span 2; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #dde3ee; }
.tue-mail small { color: #5d5f66; font-size: .7rem; }
.tue-mail span { grid-column: 2 / -1; overflow: hidden; color: #5d5f66; white-space: nowrap; text-overflow: ellipsis; }
.tue-mail.is-pressed { background: #e3e9f5; }
.tue-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .4rem; border-radius: 6px; background: #1f2026; }
.tue-tiles span { display: grid; place-items: end start; aspect-ratio: 16 / 10; padding: .2rem .3rem; border-radius: 5px; background: #34363f; color: #d8d9de; font-size: .7rem; line-height: 1.2; }
.tue-tiles .tue-bot { background: #4a3a1c; color: #ffd27a; outline: 1px solid #febc2e; transition: opacity .4s ease .5s, transform .5s cubic-bezier(.2, .9, .3, 1.4) .5s; }
.js-tuesday .tue-win:not(.is-on) .tue-bot { opacity: 0; transform: scale(.6); }
.tue-body .tue-consent-title { margin-bottom: .3rem; font-size: .8rem; font-weight: 700; }
.tue-consent-list { padding-left: 1rem; color: #4d4f55; }
.tue-body .tue-btns { display: flex; justify-content: flex-end; gap: .35rem; margin-top: .5rem; }
.tue-body .tue-sent { margin-top: .5rem; text-align: right; }
@media (max-width: 860px) {
  /* Phones: the inbox only sets the scene for the pointer, so it is left out,
     and with the script the desk shows one window at a time. */
  .tue-win--mail { display: none; }
  .js-tuesday .tuesday-desk { display: grid; align-items: center; }
  .js-tuesday .tue-win { grid-area: 1 / 1; }
  .js-tuesday .tue-win:not(.is-now) { opacity: 0; transform: translateY(14px) scale(.97); }
}
@media (min-width: 861px) {
  .tuesday-desk { display: block; aspect-ratio: 16 / 13.4; padding: 0; }
  .tue-win { position: absolute; }
  .tue-win--mail { left: 3%; top: 4%; width: 50%; }
  .tue-win--call { right: 3%; top: 5%; width: 41%; }
  .tue-win--chat { left: 20%; top: 36%; width: 44%; z-index: 2; }
  .tue-win--consent { right: 4%; top: 35%; width: 36%; z-index: 3; }
  .tue-win--copilot { left: 4%; top: 64%; width: 52%; z-index: 4; }
  .tue-win--sent { right: 5%; top: 67%; width: 36%; z-index: 4; }
}
@media (min-width: 1000px) {
  .tuesday { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
  .tuesday-foot { grid-column: 1 / -1; }
}

/* Before-and-after rows (Governance steps 2 and 3) */
.step-work--bento li { display: flex; flex-direction: column; }
.step-work--bento li > .sample-win { margin-top: auto; }
.step-work--bento li > p:has(+ .sample-win) { margin-bottom: 1.1rem; }
.fix-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem .8rem; border-top: 1px solid var(--line); color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.3; transition: background .4s ease; }
.fix-rows .fix-row:first-child { border-top: 0; }
.fix-row small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.fix-swap { display: inline-grid; flex: 0 0 auto; justify-items: end; }
.fix-swap em { grid-area: 1 / 1; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; line-height: 1.3; font-style: normal; font-weight: 700; white-space: nowrap; transition: opacity .35s ease, transform .35s ease; }
.fix-before { background: #fde5e2; color: #9b2318; opacity: 0; }
.fix-after { background: #dcefe3; color: #1f6b3f; }
.fix-after--ask { background: #fbefd6; color: #7d4a00; }
.js-fix .fix-row:not(.is-fixed) .fix-before { opacity: 1; }
.js-fix .fix-row:not(.is-fixed) .fix-after { opacity: 0; transform: translateY(5px); }
.js-fix .fix-row.is-fixed .fix-before { transform: translateY(-5px); }

/* The stopped email (Governance step 3) */
.dlp-body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden; padding: .9rem .8rem; font-size: .88rem; }
.dlp-body .win-fields { flex: 1; min-width: 0; }
.dlp-body .dlp-found { color: #9b2318; font-weight: 700; transition: opacity .4s ease; }
.dlp-stamp { flex: 0 0 auto; padding: .3rem .7rem; border: 2px solid #b42a1f; border-radius: var(--r-small); color: #b42a1f; font: 700 .95rem/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-5deg); transition: opacity .2s ease, transform .3s cubic-bezier(.7, 0, .8, 1); }
.js-dlp:not(.is-scanned) .dlp-found { opacity: 0; }
.js-dlp:not(.is-stopped) .dlp-stamp { opacity: 0; transform: rotate(-5deg) scale(2.2); }
.dlp-body::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient(90deg, transparent, rgb(242 129 29 / .22), transparent); opacity: 0; transform: translateX(-100%); pointer-events: none; }
.is-scanning .dlp-body::after { opacity: 1; animation: dlp-scan .9s ease-in-out; }
@keyframes dlp-scan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* The Copilot moment (Governance step 2) */
.copilot-moment { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3.5vw, 2.4rem); padding: clamp(1.2rem, 2.6vw, 2rem); border-top: 3px solid var(--orange); border-radius: var(--r-card); background: #f7f6f4; }
.copilot-copy h3 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.3; }
.copilot-copy p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.copilot-copy .copilot-quote { margin-top: 1.1rem; color: var(--ink); font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.25 var(--display); letter-spacing: -.01em; }
.copilot-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.copilot-chat { display: flex; flex-direction: column; }
.copilot-thread { display: grid; flex: 1; align-content: start; gap: .5rem; padding: .9rem; font-size: .9rem; line-height: 1.45; }
.copilot-thread p { transition: opacity .4s ease, transform .4s ease; }
.copilot-thread .copilot-why { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.js-copilot .copilot-thread p:not(.is-on) { opacity: 0; transform: translateY(8px); }
.copilot-ask { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--line); background: #faf9f7; }
.copilot-field { flex: 1; min-width: 0; overflow: hidden; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: var(--r-small); background: #fff; color: #5d5f66; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.copilot-field.is-typing { color: var(--ink); }
.copilot-field.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; background: currentColor; vertical-align: text-bottom; }
.copilot-hit { background: #fff0ee; }
.js-copilot .copilot-hit:not(.is-hit) { background: transparent; }
.copilot-moment > .scene-foot { font-size: .85rem; }
@media (min-width: 700px) { .copilot-stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
@media (min-width: 1100px) {
  .copilot-moment { grid-template-columns: minmax(0, .62fr) minmax(0, 2fr); align-items: center; }
  .copilot-moment > .scene-foot { grid-column: 1 / -1; }
}
.bento-box > .report-sample { margin: 0; }
.bento-box > .report-note { margin-bottom: 0; }

/* The payback chart and table (Automation page) */
.payback-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.payback-panel { margin: 0; padding: clamp(1rem, 2vw, 1.4rem); border-radius: var(--r-card); background: #f7f6f4; }
.payback-chart { display: flex; flex-direction: column; justify-content: center; }
.payback-chart svg { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
.payback-chart text { fill: #4d4d4d; font: 400 14px var(--body); }
.payback-chart .pb-zone--first, .payback-chart .pb-title { fill: var(--ink); font-weight: 600; }
.pb-first { fill: rgb(242 129 29 / .09); stroke: rgb(196 90 0 / .55); stroke-dasharray: 4 4; }
.pb-axis { stroke: rgba(27,28,28,.3); }
.pb-bub { transform-box: fill-box; transform-origin: center; transition: opacity .3s ease, transform .5s cubic-bezier(.2, .9, .3, 1.4); }
.pb-bub circle { fill: var(--orange); stroke: #f7f6f4; stroke-width: 2; transition: stroke .2s ease; }
.pb-bub--keep circle { fill: #a3a5ab; }
.payback-chart .pb-bub text { fill: var(--ink); font-weight: 700; text-anchor: middle; }
.pb-bub.is-hot circle { stroke: var(--ink); }
.js-payback .pb-bub:not(.is-on) { opacity: 0; transform: scale(.2); }
.payback-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-top: .6rem; color: var(--muted); font-size: .82rem; }
.payback-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.payback-legend i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--orange); }
.payback-legend i.is-keep { background: #a3a5ab; }
.payback-rate { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .9rem; font-size: .95rem; }
.payback-rate label { font-weight: 600; }
.payback-rate input { display: none; flex: 1; min-width: 8rem; accent-color: #c45a00; }
.js-payback .payback-rate input { display: block; }
.payback-rate output { font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.payback-scroll { overflow-x: auto; }
.payback-table table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.payback-table th, .payback-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: 1.35; }
.payback-table thead th { border-bottom-color: rgba(27,28,28,.35); color: var(--muted); font: 600 .8rem/1.3 var(--body); white-space: nowrap; }
.payback-table tbody th { font-weight: 600; }
.payback-table tbody th small { display: block; color: var(--muted); font-size: .78rem; font-weight: 400; }
.payback-table tbody tr { transition: background .2s ease; }
.payback-table tbody tr.is-hot { background: #fff1e0; }
.payback-table .pb-n { width: 1%; padding-left: 0; }
.pb-n { font: 700 .9rem/1 var(--display); }
.payback-table td.pb-n { text-align: center; }
.pb-effort { display: inline-flex; gap: .2rem; }
.pb-effort i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(27,28,28,.16); }
.pb-effort[data-effort="1"] i:nth-child(-n+1), .pb-effort[data-effort="2"] i:nth-child(-n+2), .pb-effort[data-effort="3"] i:nth-child(-n+3), .pb-effort[data-effort="4"] i:nth-child(-n+4), .pb-effort[data-effort="5"] i:nth-child(-n+5) { background: #c45a00; }
.payback-table .pb-v { font-weight: 600; text-align: right; white-space: nowrap; }
.payback-table thead th:last-child { text-align: right; }
.payback-table tr.is-keep .pb-v { color: var(--muted); font-size: .8rem; font-weight: 400; }
.payback-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin: 1rem 0 0; color: var(--muted); }
.payback-total b { color: var(--ink); font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.payback-note { margin: .8rem 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.payback-note a { color: var(--ink); font-weight: 600; text-decoration-color: rgb(var(--accent-warm) / .7); text-underline-offset: 3px; }
@media (max-width: 699px) { .payback-grid .payback-chart { display: none; } }
@media (max-width: 559px) { .payback-table th:nth-child(4), .payback-table td:nth-child(4) { display: none; } }
@media (min-width: 1180px) { .payback-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* The same three lights on the older sample windows (the Automation and Data
   heroes, and the five windows in the five-logins figure), so every window on
   the site shares one title bar. Drawn in CSS; the markup is unchanged. */
.flow-bar::before, .rd-bar::before, .cons-win-bar::before { content: ""; flex: 0 0 auto; width: .62rem; height: .62rem; margin-right: 2.05rem; border-radius: 50%; background: #ff5f57; box-shadow: .94rem 0 0 #febc2e, 1.88rem 0 0 #28c840; }
.cons-win-bar::before { width: .5rem; height: .5rem; margin-right: 1.65rem; box-shadow: .76rem 0 0 #febc2e, 1.52rem 0 0 #28c840; }

/* One container with side tabs (Automation page: the examples and "We keep
   it working"). Same look as the large Governance tiles. Tabs run down the
   left with the panel beside them; on phones the tabs sit on top in a grid,
   so there is one panel instead of a stack of cards. */
.tab-box { padding: clamp(1.1rem, 2.2vw, 1.6rem); border-top: 3px solid var(--orange); border-radius: var(--r-card); background: #f7f6f4; }
.side-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin-bottom: 1.2rem; padding: .35rem; border-radius: calc(var(--r-inner) + .35rem); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.side-tabs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.side-tabs [role="tab"] { min-height: 44px; padding: .55rem .5rem; border: 0; border-radius: var(--r-inner); background: none; color: var(--muted); font: 600 .84rem/1.25 var(--body); cursor: pointer; transition: background .2s ease, color .2s ease; }
.side-tabs [role="tab"]:hover { color: var(--ink); }
.side-tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; }
.side-tabs [role="tab"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.tab-panel[hidden] { display: none; }
.tab-panel h3 { margin: 0 0 .4rem; font-size: 1.25rem; line-height: 1.25; }
.tab-panel p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.tab-panel-card { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-inner); background: #fff; list-style: none; }
.tab-panel-card p { color: var(--ink); font-size: .95rem; }
.tab-panel-card .tab-panel-note { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.tab-checks { padding-block: .4rem; }
.tab-checks li { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.45; }
.tab-checks li:first-child { border-top: 0; }
.tab-checks .icon { flex: 0 0 auto; margin-top: .15rem; color: #c45a00; }
@media (min-width: 700px) {
  .tab-box--side { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 clamp(1rem, 2.2vw, 1.8rem); align-items: start; }
  .side-tabs, .side-tabs--4 { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .side-tabs [role="tab"] { padding: .65rem .85rem; font-size: .92rem; text-align: left; }
}

/* Heading and lede on the left, the content on the right, for sections whose
   content does not need the full row (Automation page). Narrower than 1180px
   the heading goes back on top. */
.split-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3.5rem); align-items: center; }
.split-row > .split-intro { max-width: none; margin: 0; }
.split-row > .split-intro h2 { text-wrap: balance; }
@media (min-width: 1180px) {
  .split-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .split-row > .split-intro .section-lede { max-width: 42ch; }
}

/* The one caveat under "What's included" (Governance), marked by the asterisk on the lede. */
.package-footnote { margin: clamp(1.4rem, 3vw, 2rem) 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.section--dark .package-footnote { color: rgb(255 255 255 / .74); }

/* Animated flows inside the tabbed containers (Automation page). A window
   whose steps appear one at a time down a line; AI steps carry the Noventech
   mark, the step a person owns is dark. The tag in the title bar follows the
   state. story.js adds .js-flowviz and the .is-on / .is-done steps; without
   it, and with reduced motion, every step shows finished. */
.win-tag--ok { background: #dcefe3; color: #1f6b3f; }
.win-tag--ask { background: #fbefd6; color: #7d4a00; }
.flowviz .win-bar .win-tag { transition: background .3s ease, color .3s ease; }
.fv-steps { display: grid; margin: 0; padding: .7rem 1rem .8rem; list-style: none; }
.fv-steps li { position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 3.4rem; padding: .45rem 0; color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.35; transition: opacity .4s ease, transform .4s ease; }
.fv-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--orange); border-radius: 50%; background: #fff; color: var(--ink); transition: background .3s ease, border-color .3s ease, color .3s ease; }
.fv-ico .icon { width: 1.05rem; height: 1.05rem; }
.fv-ico img { display: block; width: 1.05rem; height: 1.05rem; }
.fv-steps li[data-kind="person"] .fv-ico { border-color: var(--ink); background: var(--ink); color: #fff; }
.fv-steps li:not(:last-child)::after { content: ""; position: absolute; top: calc(50% + 1.1rem); left: calc(1.1rem - 1px); width: 2px; height: calc(100% - 2.2rem); background: var(--orange); transform-origin: top; transition: transform .45s ease; }
.fv-steps .fix-before--plain { background: #e6e4e0; color: #3e4046; }
.js-flowviz .fv-steps li:not(.is-on) { opacity: 0; transform: translateY(8px); }
.js-flowviz .fv-steps li:not(.is-done) .fv-ico { border-color: rgba(27,28,28,.25); background: #fff; color: var(--muted); }
.js-flowviz .fv-steps li:not(.is-done)::after { transform: scaleY(0); }
.js-flowviz .fv-steps li:not(.is-done) .win-tag { opacity: 0; }
.fv-steps .win-tag { transition: opacity .3s ease; }
.js-flowviz .fv-steps li:not(.is-done) .fix-before { opacity: 1; }
.js-flowviz .fv-steps li:not(.is-done) .fix-after { opacity: 0; transform: translateY(5px); }
.js-flowviz .fv-steps li.is-done .fix-before { transform: translateY(-5px); }