/* ==========================================================================
   TACET CAMPUS — marketing site
   --------------------------------------------------------------------------
   Type is IBM Plex Sans, self-hosted, the same face the product runs on.
   No CDN is ever contacted (see AGENTS.md — "no external network
   dependencies"). The latin-subset variable woff2 is ~45KB and covers
   weights 100–700.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-latin-var.woff2') format('woff2-variations'),
       url('fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Ink — min 5.17:1 across every light ground on the page ----------- */
  --ink:   #10161b;
  --ink-2: #4a5663;
  --ink-3: #5b6773;

  /* ---- Surfaces ---------------------------------------------------------- */
  --bg:        #ffffff;
  --bg-alt:    #f5f9fa;
  --surface:   #fbfcfd;
  --surface-2: #f2f5f6;
  --surface-3: #f9fbfc;
  --bg-tint:   #fbfcfd;  /* = --surface; kept distinct only because the ecosystem gradient reads as a ground, not a card */
  --line:      #dfe7ec;
  --line-soft: #eaeff2;

  /* ---- Hero ground ------------------------------------------------------- */
  --hero-base:   #f6fafb;
  --hero-a:      #f8fbfc;
  --hero-b:      #f4f9fa;
  --hero-c:      #ffffff;
  --hero-grid:   rgba(10, 166, 166, .032);
  --hero-glow-1: rgba(45, 212, 191, .15);
  --hero-glow-2: rgba(51, 135, 255, .08);
  --eyebrow-bg:  rgba(255, 255, 255, .84);

  /* ---- Bands — sections that are dark on purpose in both themes ---------- */
  --band:        #071726;
  --band-1:      #0a1c2b;
  --band-2:      #0d2636;
  --band-line:   #173344;
  --band-hair:   rgba(255, 255, 255, .1);
  --band-fill:   rgba(255, 255, 255, .055);
  --band-fill-2: rgba(255, 255, 255, .045);
  --band-ink:    #eef4f7;
  --band-ink-2:  #a9bfcd;
  --band-ink-3:  #93aaba;

  /* ---- Brand — one hue, four jobs ----------------------------------------
     --teal-fill is the original brand teal — restored to its full brightness.
     White text on it measures 2.99:1 (fails AA), so filled surfaces pair it
     with --on-teal (dark ink, 6.09:1) instead of darkening the teal itself.
     --teal-text is darker again so it reads as small text on a white/light
     ground, where the bright teal itself would also fail;
     --teal-accent never carries text (dots, pins, rings, washes) and matches
     --teal-fill exactly, same as the single --teal token this split from;
     --teal-bright is for band grounds only. */
  --teal-fill:      #0aa6a6;
  --teal-hover:     #078e8e;
  --on-teal:        #08131f;
  --teal-text:      #076a6a;
  --teal-accent:    #0aa6a6;
  --teal-bright:    #2dd4bf;
  --on-bright:      #04302e;
  --teal-wash:      #e5f8f4;
  --teal-shadow:    rgba(10, 166, 166, .22);
  --teal-shadow-hi: rgba(10, 166, 166, .28);
  --logo-grad-b:    #39d2bd;

  /* ---- Semantic — separate from the brand hue ---------------------------- */
  --good:       #1c7c4a;
  --good-ink:   #12705c;
  --good-wash:  #e2f8f1;
  --warn:       #7d4d10;
  --warn-wash:  #fff4df;
  --warn-dot:   #d08a2a;
  --bad:        #a3352c;
  --bad-wash:   #ffebed;
  --info:       #1f5c9e;
  --info-wash:  #e8f1ff;
  --check-ink:  #0f7565;  /* also the phone status icon — one "confirmed" mark */
  --check-wash: #def6f0;

  /* ---- Buttons ----------------------------------------------------------- */
  --btn-2-ink: #1f3345;
  --btn-2-bg:  rgba(255, 255, 255, .8);

  /* ---- Product mock ------------------------------------------------------ */
  --mock-frame:       #d6e1e7;
  --mock-canvas:      #f5f8fa;
  --mock-surface:     #ffffff;
  --mock-line:        #e7edf1;
  --mock-rail:        #071726;
  --mock-rail-ink:    #7891a5;
  --mock-rail-on:     #59e0ca;
  --mock-rail-bg:     rgba(45, 212, 191, .13);
  --mock-ink:         #26333f;
  --mock-ink-2:       #55636f;
  --mock-ink-3:       #5f6d79;
  --mock-strong:      #24384a;
  --mock-btn-bg:      #0b2032;
  --mock-btn-ink:     #ffffff;
  --mock-live-ink:    #12604f;
  --mock-live-bg:     #e6f9f3;
  --mock-rule:        #d8e2e7;
  --mock-dot-idle:    #b9c8d0;
  --mock-good:        #3aa383;
  --mock-active:      #2f7fe0;
  --mock-active-ring: rgba(47, 127, 224, .14);

  /* ---- Campus map -------------------------------------------------------- */
  --map-ground:    #eef5f2;
  --map-grid:      rgba(132, 159, 172, .08);
  --map-road:      #dde7e5;
  --map-road-line: #d5e1df;
  --map-bldg:      #d7e3df;
  --map-bldg-line: #c9d6d3;
  --map-bldg-drop: rgba(90, 125, 115, .08);
  --map-turf-a:    #d8ede0;
  --map-turf-b:    #d3e8dc;
  --map-turf-line: #b9d6c7;
  --map-pin-ring:  #ffffff;
  --pin-medical:   #d9534f;
  --pin-student:   #3387ff;

  /* ---- Feature mini-map -------------------------------------------------- */
  --mini-a:       #d5ebe3;
  --mini-b:       #eaf2ef;
  --mini-veil:    rgba(255, 255, 255, .5);
  --mini-line-1:  #b9d1c9;
  --mini-line-2:  #c3d8d1;
  --chip-ink:     #3c5249;
  --chip-bg:      rgba(255, 255, 255, .92);
  --chip-line:    rgba(191, 208, 205, .8);
  --pulse-2:      #3387ff;
  --pulse-3:      #ff9f43;
  --pulse-ring-1: rgba(10, 166, 166, .13);
  --pulse-ring-2: rgba(10, 166, 166, .055);

  /* ---- Phone mock -------------------------------------------------------- */
  --phone-shell:        #101d27;
  --phone-shell-line:   #243746;
  --phone-screen:       #f2faf7;
  --phone-screen-a:     #f8fcfb;
  --phone-screen-b:     #edf8f5;
  --phone-halo:         rgba(45, 212, 191, .17);
  --phone-ink:          #4e6169;
  --phone-ink-2:        #5d6f6b;
  --phone-accent:       #106152;
  --phone-icon-bg:      #dff8f1;
  --phone-icon-halo:    rgba(223, 248, 241, .58);
  --phone-callout-bg:   rgba(255, 255, 255, .8);
  --phone-callout-line: #d6e8e3;
  --phone-callout-ink:  #4d6259;

  /* ---- Console mock ------------------------------------------------------ */
  --console-live:      #77ddc2;
  --console-label:     #8fa8b8;
  --console-value:     #d5e1e8;
  --console-icon:      #ffc071;
  --console-icon-bg:   rgba(255, 159, 67, .1);
  --console-icon-line: rgba(255, 159, 67, .25);
  --review-ink:        #8fd9c8;
  --review-bg:         rgba(45, 212, 191, .12);
  --guidance-bg:       rgba(45, 212, 191, .06);
  --guidance-line:     rgba(45, 212, 191, .18);
  --tag-ink:           #bcd6d4;
  --orbit-line:        rgba(45, 212, 191, .14);
  --orbit-core-line:   rgba(45, 212, 191, .3);
  --orbit-core-bg:     rgba(45, 212, 191, .08);
  --step-line:         rgba(45, 212, 191, .28);
  --step-bg:           rgba(45, 212, 191, .08);
  --wash-teal-soft:    rgba(10, 166, 166, .11);
  --wash-teal-faint:   rgba(10, 166, 166, .06);
  --wash-teal-cta:     rgba(10, 166, 166, .07);
  --wash-teal-card:    rgba(45, 212, 191, .17);

  /* ---- Ecosystem --------------------------------------------------------- */
  --ring:       #cfdcdf;
  --ring-faint: #dce7e8;
  --spoke:      #e0eaea;
  --hub-line:   #cfe6e3;
  --hub-shadow: rgba(28, 84, 84, .1);
  --node-halo:  rgba(10, 166, 166, .1);

  /* ---- Form -------------------------------------------------------------- */
  --form-bg:      rgba(255, 255, 255, .06);
  --form-line:    rgba(255, 255, 255, .16);
  --form-field:   rgba(255, 255, 255, .07);
  --form-ink:     #ffffff;
  --form-label:   #c2d1da;
  --form-holder:  #8fa3b1;
  --form-note:    #9fb2bf;
  --form-error:   #ffb3a3;
  --form-invalid: #f0a08e;
  --form-ok-ink:  #9ce6d3;
  --form-ok-bg:   rgba(45, 212, 191, .1);

  /* ---- Elevation --------------------------------------------------------- */
  --lift-2:     0 12px 32px rgba(8, 30, 47, .09), 0 1px 3px rgba(8, 30, 47, .05);
  --lift-3:     0 28px 70px rgba(8, 30, 47, .14);
  --lift-chip:  0 8px 28px rgba(17, 71, 77, .06);
  --lift-phone: 0 35px 70px rgba(15, 49, 60, .2);
  --lift-band:  0 25px 65px rgba(0, 0, 0, .22);
  --lift-pin:   0 4px 10px rgba(18, 48, 47, .18);

  /* ---- Type scale — 12px floor outside the mockups ----------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-md:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.125rem;
  --display-h2: clamp(1.875rem, 3.4vw, 2.875rem);
  --display-h1: clamp(2.5rem, 5.2vw, 4rem);

  /* ---- Leading — body copy only; display sizes set their own tight
     line-height inline, since each is a bespoke headline treatment. ------- */
  --leading-snug:   1.55;  /* dense secondary copy: card meta, list body */
  --leading-normal: 1.65;  /* default paragraph copy */
  --leading-loose:  1.7;   /* wide single-column lede copy */

  /* ---- Space scale — 4px base ------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --s11: 80px; --s12: 112px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 24px; --r-2xl: 30px; --r-pill: 999px;

  /* ---- Shell ------------------------------------------------------------- */
  --container:   1180px;
  --gutter:      20px;
  --header-h:    82px;
  --header-bg:   rgba(255, 255, 255, .9);
  --header-line: rgba(8, 19, 31, .08);
  --drawer-bg:   rgba(255, 255, 255, .98);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s2));
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; }

/* Long words stay readable at larger text sizes and grid/flex children may
   shrink without blowing out column widths. */
body { overflow-wrap: anywhere; }
:where(main, section, article, figure, form, nav, .container) * { min-width: 0; }
[hidden] { display: none !important; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Scoped, so a filled logo or illustration added later is not blanked. */
.icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible {
  /* --teal-text, not --teal-fill: the restored brand teal is only 2.7–2.99:1
     against these light grounds, short of the 3:1 WCAG 2.4.11 needs for a
     non-text indicator. --teal-text clears every ground at 5.85:1+. */
  outline: 2px solid var(--teal-text);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.section-dark :focus-visible,
.cta-panel :focus-visible,
.feature-card-dark :focus-visible {
  outline-color: var(--teal-bright);
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: var(--s4);
  z-index: 200;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--on-teal);
  background: var(--teal-fill);
  font-size: var(--text-md);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

.page-shell {
  /* `clip` first fails to parse on older engines, which keep `hidden`. */
  overflow-x: hidden;
  overflow-x: clip;
}

.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section { position: relative; padding: var(--s12) 0; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .25s ease, border-color .25s ease;
}

.site-header.scrolled {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-line);
  backdrop-filter: blur(18px);
}

.nav-wrap {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s2) 0;
  min-width: max-content;
}

/* Bars are sized from the box, so any .brand-mark size composes correctly
   and the mark stays optically centred at every scale. */
.brand-mark {
  width: 30px;
  height: 30px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.brand-mark > span {
  position: absolute;
  width: 26.7%;
  border-radius: 20%;
  background: var(--teal-fill);
  transform: skewY(-28deg);
}

.brand-mark > span:nth-child(1) { left: 3.3%;  top: 30%; height: 56.7%; }
.brand-mark > span:nth-child(2) { left: 36.7%; top: 10%; height: 80%; }
.brand-mark > span:nth-child(3) { left: 70%;   top: 6.7%; height: 56.7%; }

.brand-mark.large { width: 62px; height: 62px; margin-bottom: var(--s2); }

.brand-text {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  letter-spacing: .02em;
}

.brand-text strong { font-size: var(--text-base); font-weight: 700; }

.brand-text small {
  font-size: var(--text-xs);
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--teal-text);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
  font-size: var(--text-md);
  font-weight: 600;
}

.site-nav > a:not(.button) {
  padding: var(--s3) 0;
  color: var(--ink-2);
  transition: color .2s ease;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  width: 22px;
  height: 2px;
  display: block;
  margin: 5px auto;
  background: var(--ink);
  border-radius: 2px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s6);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: 600;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button .icon { width: 18px; }

.button-primary {
  color: var(--on-teal);
  background: var(--teal-fill);
  box-shadow: 0 12px 30px var(--teal-shadow);
}

.button-secondary {
  color: var(--btn-2-ink);
  background: var(--btn-2-bg);
  border: 1px solid var(--line);
}

.button-small { min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-sm); }
.button-ghost { border: 1px solid var(--line); background: transparent; }
.button-full  { width: 100%; }

/* Hover effects are gated so a tap on a touch device does not leave the
   button stuck in its lifted state. */
@media (hover: hover) and (pointer: fine) {
  .site-nav > a:not(.button):hover { color: var(--teal-text); }
  .button:hover { transform: translateY(-2px); }
  .button-primary:hover {
    background: var(--teal-hover);
    box-shadow: 0 15px 36px var(--teal-shadow-hi);
  }
  .button-secondary:hover, .button-ghost:hover { border-color: var(--teal-accent); }
  .footer-links a:hover, .text-link:hover { color: var(--teal-text); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: calc(var(--header-h) + var(--s11));
  padding-bottom: var(--s11);
  background-color: var(--hero-base);
  background-image: linear-gradient(180deg, var(--hero-a) 0%, var(--hero-b) 62%, var(--hero-c) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-glow-one {
  width: 520px; height: 520px; right: -180px; top: 40px;
  background: radial-gradient(circle, var(--hero-glow-1), transparent 66%);
}

.hero-glow-two {
  width: 450px; height: 450px; left: -200px; top: 200px;
  background: radial-gradient(circle, var(--hero-glow-2), transparent 65%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: var(--s10);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s6);
  border: 1px solid var(--teal-wash);
  background: var(--eyebrow-bg);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .025em;
  box-shadow: var(--lift-chip);
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-accent);
  box-shadow: 0 0 0 5px var(--node-halo);
}

h1 {
  margin-bottom: var(--s6);
  font-size: var(--display-h1);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -.035em;
}

h1 span { color: var(--teal-fill); }

.hero-lede {
  max-width: 34rem;
  margin-bottom: var(--s7);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--ink-2);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s7);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.hero-trust li { display: inline-flex; align-items: center; gap: var(--s2); }
.hero-trust i { color: var(--teal-text); font-style: normal; font-weight: 700; }

.hero-product { position: relative; }

/* ---- The product mock ----------------------------------------------------
   Every dimension inside the window is em-relative to one container-driven
   base size, so type and the boxes around it scale as a single object. The
   old build mixed 5–8px type with fixed px geometry, which meant a browser
   minimum-font-size setting grew the text but not the boxes.
   -------------------------------------------------------------------------- */

.product-stage { container-type: inline-size; }

.product-window {
  /* Plain px first: engines without container-query units drop the clamp
     and would otherwise inherit 16px and blow the mock up. */
  font-size: 10px;
  font-size: clamp(9px, calc(100cqw * 16 / 820), 14px);
  overflow: hidden;
  border: 1px solid var(--mock-frame);
  border-radius: var(--r-xl);
  background: var(--mock-surface);
  box-shadow: var(--lift-3);
}

.window-topbar {
  height: 4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.3em;
  color: var(--mock-ink-3);
  background: var(--surface);
  border-bottom: 1px solid var(--mock-line);
  font-size: .78em;
}

.window-brand, .window-meta { display: flex; align-items: center; gap: .7em; }
.window-brand b { color: var(--teal-text); font-weight: 600; }

.window-logo {
  width: 1.4em; height: 1.4em;
  border-radius: .4em;
  background: linear-gradient(135deg, var(--teal-fill), var(--logo-grad-b));
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .6em;
  border-radius: var(--r-pill);
  color: var(--mock-live-ink);
  background: var(--mock-live-bg);
  font-weight: 600;
}

.live-chip i, .console-live i {
  width: .45em; height: .45em;
  display: inline-block;
  border-radius: 50%;
  background: currentColor;
}

.ops-layout {
  min-height: 34em;
  display: grid;
  grid-template-columns: 3.7em 1fr;
}

.ops-sidebar { padding-top: 1.2em; background: var(--mock-rail); }

.ops-nav-item {
  width: 2.5em; height: 2.5em;
  display: grid;
  place-items: center;
  margin: 0 auto .6em;
  border-radius: .6em;
  color: var(--mock-rail-ink);
}

.ops-nav-item.is-active { color: var(--mock-rail-on); background: var(--mock-rail-bg); }

.nav-icon { width: 1em; height: 1em; position: relative; display: block; }
.grid-icon { border: 1px solid currentColor; }
.grid-icon::before, .grid-icon::after { content: ""; position: absolute; background: currentColor; opacity: .8; }
.grid-icon::before { width: 1px; top: 0; bottom: 0; left: 45%; }
.grid-icon::after  { height: 1px; left: 0; right: 0; top: 45%; }
.pin-icon { width: .8em; border: 1px solid currentColor; border-radius: .6em; }
.pin-icon::after { content: ""; position: absolute; width: .25em; height: .25em; border: 1px solid currentColor; border-radius: 50%; left: 50%; top: 25%; transform: translateX(-50%); }
.people-icon::before, .people-icon::after { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; }
.people-icon::before { width: .4em; height: .4em; left: 30%; top: 0; }
.people-icon::after  { width: .85em; height: .45em; left: 8%; bottom: 0; border-radius: .5em .5em .15em .15em; }
.alert-icon { border: 1px solid currentColor; transform: rotate(45deg); border-radius: .2em; }

.ops-content { padding: 1.4em; background: var(--mock-canvas); }

.ops-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em;
  margin-bottom: 1.1em;
}

.mini-label {
  display: block;
  margin-bottom: .4em;
  color: var(--mock-ink-3);
  font-size: .7em;
  letter-spacing: .14em;
  font-weight: 600;
}

.ops-title { font-size: 1.25em; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.time-stamp { color: var(--mock-ink-3); font-size: .74em; white-space: nowrap; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7em;
  margin-bottom: .8em;
}

.metric-card {
  padding: .95em;
  background: var(--mock-surface);
  border: 1px solid var(--mock-line);
  border-radius: .8em;
}

.metric-card > span {
  display: block;
  margin-bottom: .35em;
  color: var(--mock-ink-2);
  font-size: .72em;
}

.metric-card strong { display: block; margin-bottom: .3em; font-size: 1.5em; font-weight: 600; color: var(--ink); }

.metric-card small {
  display: flex;
  align-items: center;
  gap: .4em;
  color: var(--mock-ink-2);
  font-size: .7em;
}

.metric-card i { width: .5em; height: .5em; border-radius: 50%; flex: 0 0 auto; }
.good { background: var(--good); }
.warn { background: var(--warn-dot); }

.dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: .8em; }

.map-card, .incident-card {
  min-width: 0;
  background: var(--mock-surface);
  border: 1px solid var(--mock-line);
  border-radius: .9em;
  overflow: hidden;
}

.card-head {
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .9em;
  border-bottom: 1px solid var(--mock-line);
  font-size: .74em;
  color: var(--mock-ink-2);
}

.card-head strong { color: var(--mock-ink); font-size: 1.1em; font-weight: 600; }

.severity {
  padding: .3em .45em;
  border-radius: .4em;
  color: var(--warn);
  background: var(--warn-wash);
  font-weight: 700;
  font-size: .85em;
}

.campus-map {
  height: 16em;
  position: relative;
  overflow: hidden;
  background-color: var(--map-ground);
  background-image: linear-gradient(45deg, transparent 49%, var(--map-grid) 50%, transparent 51%);
  background-size: 2.2em 2.2em;
}

.road { position: absolute; background: var(--map-road); border: 1px solid var(--map-road-line); }
.road-a { width: 120%; height: 1.4em; left: -10%; top: 45%; transform: rotate(-6deg); }
.road-b { height: 120%; width: 1.1em; left: 57%; top: -10%; transform: rotate(9deg); }

.building {
  position: absolute;
  border: 1px solid var(--map-bldg-line);
  border-radius: .25em;
  background: var(--map-bldg);
  box-shadow: 0 2px 0 var(--map-bldg-drop);
}

.building-a { width: 4.2em; height: 2.6em; left: 1.4em; top: 2.3em; }
.building-b { width: 5em;   height: 2.2em; left: 6.6em; top: 3.4em; }
.building-c { width: 3.4em; height: 4.2em; left: 2.7em; bottom: 1.7em; }
.building-d { width: 4.2em; height: 2.6em; right: 1.9em; bottom: 3.1em; }

.map-field {
  position: absolute;
  width: 4.8em; height: 3.2em;
  right: 1.8em; top: 2.1em;
  border: 1px solid var(--map-turf-line);
  border-radius: .6em;
  background: repeating-linear-gradient(90deg,
    var(--map-turf-a) 0, var(--map-turf-a) .45em,
    var(--map-turf-b) .45em, var(--map-turf-b) .9em);
}

.map-pin {
  position: absolute;
  width: 1.3em; height: 1.3em;
  border: 2px solid var(--map-pin-ring);
  border-radius: 50%;
  box-shadow: var(--lift-pin);
  z-index: 4;
}

.map-pin.medical { left: 3.9em; bottom: 4.8em; background: var(--pin-medical); }
.map-pin.student { right: 6.3em; top: 5.5em;   background: var(--pin-student); }
.map-pin.staff   { right: 3.2em; bottom: 5.2em; background: var(--teal-accent); }

.incident-body { padding: .9em; }

.incident-type { display: flex; gap: .7em; align-items: center; margin-bottom: 1em; }

.incident-icon {
  width: 2.1em; height: 2.1em;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: .55em;
  color: var(--bad);
  background: var(--bad-wash);
  font-weight: 600;
}

.incident-type strong { display: block; margin-bottom: .15em; font-size: .8em; font-weight: 600; color: var(--ink); }
.incident-type small  { display: block; color: var(--mock-ink-2); font-size: .7em; }

.timeline { position: relative; margin-bottom: .9em; }

.timeline-row {
  position: relative;
  display: grid;
  grid-template-columns: 1em 1fr auto;
  gap: .5em;
  align-items: center;
  min-height: 1.9em;
  color: var(--mock-ink-2);
  font-size: .7em;
}

.timeline-row:not(:last-child)::before {
  content: "";
  position: absolute;
  width: 1px; height: 1em;
  left: .35em; top: 1.35em;
  background: var(--mock-rule);
}

.timeline-row i { width: .75em; height: .75em; border: 2px solid var(--mock-dot-idle); border-radius: 50%; background: var(--mock-surface); }
.timeline-row.complete i { border-color: var(--mock-good); background: var(--mock-good); }
.timeline-row.active { color: var(--mock-strong); font-weight: 600; }
.timeline-row.active i { border-color: var(--mock-active); box-shadow: 0 0 0 3px var(--mock-active-ring); }
.timeline-row time { color: var(--mock-ink-3); }

.mock-button {
  height: 2.3em;
  display: grid;
  place-items: center;
  border-radius: .5em;
  color: var(--mock-btn-ink);
  background: var(--mock-btn-bg);
  font-size: .7em;
  font-weight: 600;
}

.floating-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--lift-2);
}

/* Positioned to overhang the window edge rather than sit on top of the
   content inside it. */
.floating-card-one { left: -34px; bottom: -26px; }
.floating-card-two { right: -30px; top: -24px; }

.float-icon {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  color: var(--good-ink);
  background: var(--good-wash);
  font-size: var(--text-sm);
  font-weight: 700;
}

.float-icon.ai { color: var(--info); background: var(--info-wash); }

.floating-card strong { display: block; font-size: var(--text-xs); font-weight: 600; }
.floating-card small  { display: block; color: var(--ink-3); font-size: var(--text-xs); }

/* ==========================================================================
   Credibility strip
   ========================================================================== */

.credibility-strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}

.credibility-inner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s4) var(--s7);
  padding: var(--s5) 0;
}

.credibility-inner p { color: var(--ink-3); font-size: var(--text-md); }

.audiences { display: flex; flex-wrap: wrap; gap: var(--s2); }

.audiences li {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.section-light { background: var(--bg); }

.section-heading { margin-bottom: var(--s11); }

.split-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s10);
  align-items: end;
}

.kicker {
  margin-bottom: var(--s4);
  color: var(--teal-text);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  font-weight: 600;
}

.kicker-bright { color: var(--teal-bright); }

h2 {
  font-size: var(--display-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
}

.section-heading > div > h2 { max-width: 18ch; }

.section-heading p {
  max-width: 42ch;
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.center-heading { text-align: center; }
.center-heading h2 { max-width: 24ch; margin-inline: auto; }
.center-heading p { margin: var(--s5) auto 0; }

/* ==========================================================================
   Feature grid
   --------------------------------------------------------------------------
   Three columns, and every row is filled: a full-width band, three equal
   cards, then a second full-width band. Card heights are set by content —
   no min-height stretching a short card over dead space.
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s7);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
}

.feature-card-large {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s8);
  align-items: center;
  background-color: var(--surface);
  background-image: linear-gradient(145deg, var(--teal-wash), var(--surface));
}

.feature-card-dark {
  grid-column: 1 / -1;
  color: var(--band-ink);
  background-color: var(--band-2);
  background-image:
    radial-gradient(circle at 82% 12%, var(--wash-teal-card), transparent 34%),
    linear-gradient(135deg, var(--band-1), var(--band-2));
  border-color: var(--band-line);
}

.feature-card-dark .feature-copy { position: relative; z-index: 1; max-width: 46ch; }

.feature-copy { margin-top: auto; }

.feature-card h3 {
  margin-bottom: var(--s3);
  font-size: var(--text-xl);
  line-height: 1.2;
  font-weight: 600;
}

.feature-card-large h3, .feature-card-dark h3 { font-size: var(--text-2xl); }

.feature-card p {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.feature-card-dark p { color: var(--band-ink-2); font-size: var(--text-base); }

.feature-icon-wrap {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s7);
  border-radius: var(--r-lg);
  color: var(--teal-text);
  background: var(--teal-wash);
}

.feature-icon-wrap .icon { width: 23px; }

.feature-visual {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--r-lg);
}

.mini-map-visual {
  background-color: var(--mini-b);
  background-image:
    linear-gradient(var(--mini-veil), var(--mini-veil)),
    linear-gradient(130deg, var(--mini-a), var(--mini-b));
}

.mini-map-grid {
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    linear-gradient(27deg, transparent 49%, var(--mini-line-1) 50%, transparent 51%),
    linear-gradient(117deg, transparent 49%, var(--mini-line-2) 50%, transparent 51%);
  background-size: 55px 70px;
}

.pulse {
  position: absolute;
  width: 13px; height: 13px;
  border: 3px solid var(--mock-surface);
  border-radius: 50%;
  background: var(--teal-accent);
  box-shadow: 0 0 0 8px var(--pulse-ring-1), 0 0 0 16px var(--pulse-ring-2);
}

.p1 { left: 28%; top: 36%; }
.p2 { right: 20%; top: 28%; background: var(--pulse-2); box-shadow: 0 0 0 8px var(--pulse-ring-1); }
.p3 { right: 31%; bottom: 24%; background: var(--pulse-3); box-shadow: 0 0 0 8px var(--pulse-ring-1); }

.location-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--chip-line);
  border-radius: var(--r-sm);
  background: var(--chip-bg);
  box-shadow: var(--lift-chip);
  color: var(--chip-ink);
  font-size: var(--text-xs);
  font-weight: 500;
}

.location-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-accent); flex: 0 0 auto; }

.chip-one { left: var(--s5); bottom: var(--s5); }
.chip-two { right: var(--s5); top: var(--s5); }

.ai-orbit { position: absolute; width: 300px; height: 300px; right: -35px; top: -35px; }

.orbit {
  position: absolute;
  inset: 50%;
  border: 1px solid var(--orbit-line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-one { width: 170px; height: 170px; }
.orbit-two { width: 250px; height: 250px; }

.ai-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orbit-core-line);
  border-radius: 50%;
  color: var(--teal-bright);
  background: var(--orbit-core-bg);
  box-shadow: 0 0 55px rgba(45, 212, 191, .15);
  transform: translate(-50%, -50%);
  font-size: var(--text-xl);
}

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }

.tag-row li {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-sm);
  color: var(--tag-ink);
  background: var(--band-fill);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ==========================================================================
   Response
   ========================================================================== */

.section-dark {
  color: var(--band-ink);
  background-color: var(--band);
  background-image: radial-gradient(circle at 8% 10%, var(--wash-teal-soft), transparent 30%);
}

.response-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s11);
  align-items: center;
}

.response-copy h2 { margin-bottom: var(--s6); max-width: 20ch; }

.response-copy > p {
  max-width: 44ch;
  margin-bottom: var(--s8);
  color: var(--band-ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.response-steps { display: grid; gap: var(--s5); }

.response-step { display: grid; grid-template-columns: 34px 1fr; gap: var(--s4); align-items: start; }

.response-step > span {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--step-line);
  border-radius: 50%;
  color: var(--teal-bright);
  background: var(--step-bg);
  font-size: var(--text-xs);
  font-weight: 700;
}

.response-step strong { display: block; margin-bottom: var(--s1); color: var(--band-ink); font-size: var(--text-base); font-weight: 600; }
.response-step small { color: var(--band-ink-3); font-size: var(--text-md); line-height: 1.55; }

.response-console {
  padding: var(--s7);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-xl);
  background: var(--band-fill);
  box-shadow: var(--lift-band);
  backdrop-filter: blur(8px);
}

.console-top {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s7);
  color: var(--band-ink-3);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  font-weight: 600;
}

.console-live { display: inline-flex; align-items: center; gap: var(--s1); color: var(--console-live); }

.console-title { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s6); }

.console-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--console-icon-line);
  border-radius: var(--r-md);
  color: var(--console-icon);
  background: var(--console-icon-bg);
  font-size: var(--text-lg);
  font-weight: 700;
}

.console-title > div > span { display: block; margin-bottom: var(--s1); color: var(--band-ink-3); font-size: var(--text-xs); }
.console-headline { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }

.console-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.console-context > div {
  padding: var(--s3);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-sm);
  background: var(--band-fill-2);
}

.console-context span {
  display: block;
  margin-bottom: var(--s1);
  color: var(--console-label);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  font-weight: 600;
}

.console-context strong { color: var(--console-value); font-size: var(--text-sm); font-weight: 500; }

.ai-guidance {
  padding: var(--s5);
  margin-bottom: var(--s4);
  border: 1px solid var(--guidance-line);
  border-radius: var(--r-md);
  background: var(--guidance-bg);
}

.ai-guidance-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.spark { color: var(--teal-bright); }
.ai-guidance-head strong { font-size: var(--text-sm); font-weight: 600; }

.review-chip {
  margin-left: auto;
  padding: var(--s1) var(--s2);
  border-radius: var(--r-xs);
  color: var(--review-ink);
  background: var(--review-bg);
  font-size: var(--text-xs);
  font-weight: 600;
}

.ai-guidance p { margin-bottom: var(--s2); color: var(--band-ink-2); font-size: var(--text-md); line-height: var(--leading-normal); }
.ai-guidance small { color: var(--band-ink-3); font-size: var(--text-xs); }

.console-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }

.console-btn {
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0 var(--s4);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-sm);
  color: var(--band-ink-2);
  background: var(--band-fill);
  font-size: var(--text-xs);
  font-weight: 600;
}

.console-btn.primary-action { color: var(--on-bright); border-color: var(--teal-bright); background: var(--teal-bright); }

/* ==========================================================================
   Phone-free
   ========================================================================== */

.section-phone {
  background-color: var(--bg-alt);
  background-image: radial-gradient(circle at 20% 50%, var(--wash-teal-soft), transparent 30%);
}

.phone-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--s11);
  align-items: center;
}

.phone-device { display: grid; place-items: center; }

.phone-shell {
  container-type: inline-size;
  width: 272px;
  position: relative;
  padding: 10px;
  border: 1px solid var(--phone-shell-line);
  border-radius: 44px;
  background: var(--phone-shell);
  box-shadow: var(--lift-phone);
}

.phone-notch {
  position: absolute;
  z-index: 3;
  width: 84px; height: 22px;
  left: 50%; top: 16px;
  border-radius: var(--r-pill);
  background: var(--phone-shell);
  transform: translateX(-50%);
}

.phone-screen {
  font-size: 11px;
  font-size: clamp(9.5px, calc(100cqw * 16 / 390), 15px);
  aspect-ratio: 9 / 18;
  min-height: 460px;
  padding: 3.4em 1.8em 1.8em;
  border-radius: 34px;
  background-color: var(--phone-screen);
  background-image:
    radial-gradient(circle at 50% 27%, var(--phone-halo), transparent 28%),
    linear-gradient(180deg, var(--phone-screen-a) 0%, var(--phone-screen-b) 100%);
  text-align: center;
}
@supports (aspect-ratio: 1) { .phone-screen { min-height: 0; } }


.phone-time { display: block; margin-bottom: 3.6em; color: var(--phone-ink); font-size: .84em; font-weight: 600; }

.phone-status-icon {
  width: 5.2em; height: 5.2em;
  display: grid;
  place-items: center;
  margin: 0 auto 1.6em;
  border-radius: 50%;
  color: var(--check-ink);
  background: var(--phone-icon-bg);
  box-shadow: 0 0 0 .85em var(--phone-icon-halo);
}

.phone-status-icon .icon { width: 2.2em; }

.phone-headline { margin-bottom: .55em; font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.phone-screen > p { margin: 0 auto 2.2em; color: var(--phone-ink); font-size: .88em; line-height: 1.5; }

.phone-callout {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  padding: .95em;
  margin-bottom: 2.6em;
  border: 1px solid var(--phone-callout-line);
  border-radius: .8em;
  background: var(--phone-callout-bg);
  color: var(--phone-callout-ink);
  font-size: .8em;
}

.phone-callout strong { color: var(--phone-accent); font-weight: 600; }
.phone-screen small { color: var(--phone-ink-2); font-size: .74em; }

.phone-copy h2 { margin-bottom: var(--s6); max-width: 20ch; }

.phone-copy > p {
  max-width: 46ch;
  margin-bottom: var(--s7);
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.check-list { display: grid; gap: var(--s4); margin-bottom: var(--s7); }

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 500;
}

.check-list i {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--check-ink);
  background: var(--check-wash);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 700;
}

/* Specificity matches `.phone-copy > p` (0,1,1) so no !important is needed. */
.phone-copy > p.policy-note {
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--teal-fill);
  color: var(--ink-3);
  background: var(--surface-3);
  font-size: var(--text-md);
  line-height: 1.6;
  margin-bottom: 0;
}

/* ==========================================================================
   Privacy
   ========================================================================== */

.privacy-section { background: var(--bg); }

.privacy-card {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--s11);
  align-items: center;
  padding: var(--s10);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background-color: var(--surface-3);
  background-image: radial-gradient(circle at 0% 0%, var(--wash-teal-faint), transparent 30%);
}

.privacy-copy h2 { margin-bottom: var(--s5); max-width: 16ch; }

.privacy-copy > p {
  max-width: 40ch;
  margin-bottom: var(--s6);
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  color: var(--teal-text);
  font-size: var(--text-md);
  font-weight: 600;
  transition: color .2s ease;
}

.privacy-principles { display: grid; gap: var(--s3); }

.privacy-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
}

.privacy-icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--teal-text);
  background: var(--teal-wash);
  font-size: var(--text-xs);
  font-weight: 700;
}

.privacy-item strong { display: block; margin-bottom: var(--s1); font-size: var(--text-base); font-weight: 600; }
.privacy-item p { color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }

/* ==========================================================================
   Ecosystem
   --------------------------------------------------------------------------
   Rings and spokes are one SVG on the same coordinate grid as the nodes, so
   they scale together and the geometry stays true at every width. Node
   percentages match the SVG line endpoints exactly.
   ========================================================================== */

.ecosystem-section {
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%);
}

.ecosystem {
  position: relative;
  max-width: 930px;
  margin: 0 auto;
  min-height: 540px;
  aspect-ratio: 930 / 540;
}

@supports (aspect-ratio: 1) { .ecosystem { min-height: 0; } }

/* The six nodes are a real <ul> for list semantics, but every layout mode
   below — absolute positioning on desktop, CSS Grid on mobile — needs each
   <li> to be a direct child of .ecosystem. `display: contents` drops the
   <ul>'s own box without dropping its list role, so it stays invisible to
   layout in both regimes at once. */
.ecosystem-nodes { display: contents; }

.ecosystem-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--ring);
  stroke-width: 1;
}

.ecosystem-rings .ring-faint { stroke: var(--ring-faint); }
.ecosystem-rings line { stroke: var(--spoke); stroke-dasharray: 4 5; }

.ecosystem-center {
  position: absolute;
  z-index: 3;
  width: 178px; height: 178px;
  left: 50%; top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hub-line);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 20px 60px var(--hub-shadow);
  transform: translate(-50%, -50%);
}

.ecosystem-center strong { font-size: var(--text-lg); font-weight: 700; letter-spacing: .02em; }
.ecosystem-center small { color: var(--teal-text); font-size: var(--text-xs); letter-spacing: .18em; font-weight: 600; }

.eco-node {
  position: absolute;
  z-index: 4;
  width: 190px;
  padding: var(--s4) var(--s4) var(--s4) var(--s7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--lift-2);
  transform: translate(-50%, -50%);
}

.node-dot {
  position: absolute;
  width: 8px; height: 8px;
  left: 16px; top: 22px;
  border-radius: 50%;
  background: var(--teal-accent);
  box-shadow: 0 0 0 4px var(--node-halo);
}

.eco-node strong { display: block; margin-bottom: var(--s1); font-size: var(--text-md); font-weight: 600; }
.eco-node small { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.4; }

.node-one   { left: 16%; top: 22%; }
.node-two   { left: 16%; top: 78%; }
.node-three { left: 84%; top: 22%; }
.node-four  { left: 84%; top: 78%; }
.node-five  { left: 50%; top: 6%; }
.node-six   { left: 50%; top: 94%; }

/* ==========================================================================
   CTA
   ========================================================================== */

.cta-section { padding-top: var(--s12); background: var(--bg); }

.cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: var(--s10);
  align-items: center;
  padding: var(--s10);
  border-radius: var(--r-2xl);
  color: var(--band-ink);
  background-color: var(--band);
  background-image: linear-gradient(135deg, var(--wash-teal-cta), transparent 55%);
}

.cta-glow {
  position: absolute;
  width: 480px; height: 480px;
  left: -220px; bottom: -320px;
  border-radius: 50%;
  background: rgba(45, 212, 191, .18);
  filter: blur(20px);
}

.cta-copy { position: relative; z-index: 1; }
.cta-copy h2 { margin-bottom: var(--s5); max-width: 20ch; }
.cta-copy p { max-width: 44ch; color: var(--band-ink-2); font-size: var(--text-base); line-height: var(--leading-loose); }

.demo-form {
  position: relative;
  z-index: 1;
  padding: var(--s6);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-lg);
  background: var(--form-bg);
}

/* The grid gap is the only spacing authority inside the form. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s5); }

.form-field { display: flex; flex-direction: column; gap: var(--s2); }

.demo-form label { color: var(--form-label); font-size: var(--text-xs); font-weight: 600; }

.demo-form input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s4);
  border: 1px solid var(--form-line);
  border-radius: var(--r-sm);
  outline: none;
  color: var(--form-ink);
  background: var(--form-field);
  /* 16px minimum — anything smaller makes Safari on iOS zoom the viewport
     when the field takes focus. */
  font-size: var(--text-base);
}

.demo-form input::placeholder { color: var(--form-holder); }
.demo-form input:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 1px; border-color: transparent; }
.demo-form input[aria-invalid="true"] { border-color: var(--form-invalid); }

.form-error {
  min-height: 0;
  margin-bottom: var(--s4);
  color: var(--form-error);
  font-size: var(--text-sm);
}
.form-error:empty { display: none; }

.form-note { margin-top: var(--s4); color: var(--form-note); font-size: var(--text-xs); text-align: center; }

.form-status { margin-top: var(--s4); color: var(--band-ink); font-size: var(--text-xs); }
.form-status:empty { display: none; }
.form-status.form-success {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--form-ok-ink);
  background: var(--form-ok-bg);
  font-size: var(--text-md);
  text-align: center;
}
.form-field-error { color: var(--form-error); font-size: var(--text-xs); }
.form-field-error:empty { display: none; }
.form-note a { text-decoration: underline; }
#ai-governance { scroll-margin-top: var(--s4); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: var(--s11) 0 var(--s6); background: var(--bg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s10);
  padding-bottom: var(--s9);
}

.footer-brand { margin-bottom: var(--s4); }
.footer-about p { max-width: 32ch; color: var(--ink-3); font-size: var(--text-md); line-height: var(--leading-normal); }

.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--s7); }
.footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }

.footer-heading {
  margin-bottom: var(--s2);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.footer-links a {
  padding: var(--s2) 0;
  color: var(--ink-3);
  font-size: var(--text-md);
  transition: color .2s ease;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: var(--text-xs);
}

/* ==========================================================================
   Reveal
   --------------------------------------------------------------------------
   The hidden state is applied only once the script has confirmed it is
   running. Without JavaScript the page renders complete and static rather
   than blank.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}

.js .reveal-delay { transition-delay: .12s; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .button, .site-nav a, .footer-links a, .text-link { transition: none; }
}

/* ==========================================================================
   Forced colours (Windows High Contrast)
   --------------------------------------------------------------------------
   The OS drops decorative fills, so anything whose shape was carried by a
   background gets a real border, and the illustrations step aside.
   ========================================================================== */

@media (forced-colors: active) {
  .hero::before,
  .hero-glow,
  .cta-glow,
  .ai-orbit,
  .mini-map-grid { display: none; }

  .button,
  .feature-card,
  .privacy-item,
  .eco-node,
  .ecosystem-center,
  .demo-form,
  .response-console,
  .audiences li,
  .tag-row li,
  .floating-card,
  .product-window,
  .phone-shell,
  .location-chip { border: 1px solid CanvasText; }

  .button-primary,
  .skip-link { forced-color-adjust: none; color: HighlightText; background: Highlight; }

  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

  .ecosystem-rings { stroke: CanvasText; }
  .brand-mark > span,
  .status-dot,
  .node-dot,
  .location-chip i { background: CanvasText; }
}

/* ==========================================================================
   Print
   --------------------------------------------------------------------------
   Districts print things. The mockups are decoration on paper, the bands
   would flood a cartridge, and the fixed header would sit on the first line.
   ========================================================================== */

@media print {
  .site-header,
  .skip-link,
  .hero::before,
  .hero-glow,
  .cta-glow,
  .ai-orbit,
  .product-stage,
  .floating-card,
  .response-console,
  .phone-device,
  .ecosystem-rings,
  .demo-form { display: none; }

  html { scroll-behavior: auto; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .js .reveal { opacity: 1; transform: none; }

  /* Shadows print as grey smudges and tinted grounds waste ink, so every
     decorative surface in the flow drops back to paper. */
  .hero,
  .hero-copy,
  .eyebrow,
  .section-phone,
  .ecosystem-section,
  .privacy-card,
  .feature-card,
  .feature-card-large,
  .credibility-strip,
  .site-footer,
  .audiences li,
  .privacy-item,
  .eco-node,
  .ecosystem-center,
  .policy-note { background: none; box-shadow: none; }

  .button,
  .button-primary,
  .status-dot,
  .float-icon,
  .check-list i,
  .privacy-icon,
  .feature-icon-wrap,
  .node-dot { box-shadow: none; }

  .button-primary { color: #000; background: none; border: 1pt solid #000; }
  .button-secondary, .button-ghost { border: 1pt solid #999; }

  /* Sections are taller than a page — only the small repeated blocks below
     are worth keeping whole. */
  .section { padding: 16pt 0; }
  .hero { padding-top: 0; background: none; }

  .section-dark,
  .cta-panel,
  .feature-card-dark {
    background: none;
    border: 1pt solid #999;
  }
  .section-dark, .section-dark *,
  .cta-panel, .cta-panel *,
  .feature-card-dark, .feature-card-dark * { color: #000; }

  .hero-grid, .response-grid, .phone-grid, .privacy-card, .cta-panel,
  .footer-grid, .feature-grid, .split-heading { display: block; }

  .feature-card, .privacy-item, .eco-node, .response-step, .check-list li {
    break-inside: avoid;
    margin-bottom: 10pt;
  }

  .ecosystem { min-height: 0; aspect-ratio: auto; display: block; }
  .eco-node, .ecosystem-center {
    position: static; width: auto; height: auto;
    transform: none; border-radius: 0; box-shadow: none;
  }

  h1, h2, h3 { break-after: avoid; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  :root { --s12: 96px; --s11: 72px; }
  .site-nav { gap: var(--s5); }
  .hero-grid { gap: var(--s8); }
  .response-grid, .phone-grid { gap: var(--s9); }
  .privacy-card { gap: var(--s9); padding: var(--s9); }
  .cta-panel { gap: var(--s9); padding: var(--s9); }
  .footer-grid { gap: var(--s8); }
  .eco-node { width: 160px; }
  .ecosystem-center { width: 150px; height: 150px; }
}

@media (max-width: 920px) {
  /* Below this the radial diagram cannot hold its geometry without the
     nodes colliding, so it becomes an ordinary grid. */
  .ecosystem {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    max-width: 620px;
  }
  .ecosystem-rings { display: none; }
  .ecosystem-center {
    position: relative;
    grid-column: 1 / -1;
    left: auto; top: auto;
    width: 150px; height: 150px;
    margin: 0 auto var(--s4);
    transform: none;
  }
  .eco-node { position: relative; left: auto; top: auto; width: auto; transform: none; }
}

@media (max-width: 860px) {
  :root { --s12: 80px; --header-h: 76px; }

  .menu-button { display: block; }

  .site-nav {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) - 6px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--drawer-bg);
    box-shadow: var(--lift-2);
    backdrop-filter: blur(18px);
  }

  .site-nav.open { display: flex; }
  .site-nav > a:not(.button) { padding: var(--s4) var(--s3); border-radius: var(--r-sm); }
  .site-nav .button { margin-top: var(--s2); }

  .hero-grid,
  .response-grid,
  .phone-grid,
  .privacy-card,
  .cta-panel,
  .footer-grid { grid-template-columns: 1fr; }

  .hero-grid { gap: var(--s10); }
  .hero-copy { text-align: center; }
  .eyebrow, .hero-lede { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }

  .floating-card-one { left: -8px; bottom: -22px; }
  .floating-card-two { right: -8px; top: -20px; }

  .split-heading { grid-template-columns: 1fr; gap: var(--s5); }
  .section-heading > div > h2, .section-heading p { max-width: none; }

  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card-large { grid-template-columns: 1fr; gap: var(--s6); }

  /* Three small cards in two columns orphans the last one, so it takes the
     full row and turns on its side rather than sitting alone. */
  .feature-grid > .feature-card:nth-child(4) { grid-column: 1 / -1; }

  .phone-device { order: 2; }
  .privacy-card { padding: var(--s8); }
  .cta-panel { padding: var(--s8); }
  .footer-grid { gap: var(--s8); }
}

@media (min-width: 621px) and (max-width: 860px) {
  .feature-grid > .feature-card:nth-child(4) {
    flex-direction: row;
    align-items: center;
    gap: var(--s7);
  }
  .feature-grid > .feature-card:nth-child(4) .feature-icon-wrap {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .feature-grid > .feature-card:nth-child(4) .feature-copy { margin-top: 0; }
}

@media (max-width: 860px) {
  .ai-orbit {
    width: 240px; height: 240px;
    right: -96px; top: auto; bottom: -88px;
  }
  .ai-core { display: none; }
}

@media (max-width: 620px) {
  :root {
    --gutter: 16px;
    --s12: 64px;
    --s11: 56px;
    --s10: 40px;
    --header-h: 68px;
  }

  h1 { font-size: clamp(2.125rem, 9vw, 2.75rem); }

  .hero { padding-top: calc(var(--header-h) + var(--s8)); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }

  /* The mock is already a picture at this size; the floating annotations
     only crowd it. */
  .floating-card { display: none; }
  .incident-card { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }

  .credibility-inner { flex-direction: column; align-items: flex-start; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: var(--s6); }
  .feature-visual { min-height: 220px; }
  .feature-icon-wrap { margin-bottom: var(--s7); }
  .feature-card-large h3, .feature-card-dark h3 { font-size: var(--text-xl); }

  .response-console { padding: var(--s5); }
  .console-actions { justify-content: stretch; }
  .console-btn { flex: 1 1 auto; }

  .ecosystem { grid-template-columns: 1fr; }
  .ecosystem-center { grid-column: 1; }

  .privacy-card { padding: var(--s6) var(--s5); border-radius: var(--r-xl); }
  .privacy-item { grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s4); }
  .privacy-icon { width: 40px; height: 40px; }

  .cta-panel { padding: var(--s7) var(--s5); border-radius: var(--r-xl); }
  .demo-form { padding: var(--s5); }
  .form-row { grid-template-columns: 1fr; }

}

@media (max-width: 400px) {
  .phone-shell { width: 240px; }
  .footer-links { grid-template-columns: 1fr; }
}