/* ==========================================================================
   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-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-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;
  --teal-wash:      #e5f8f4;
  --teal-shadow:    rgba(10, 166, 166, .22);
  --teal-shadow-hi: rgba(10, 166, 166, .28);

  /* ---- Semantic — separate from the brand hue ---------------------------- */
  --warn:       #7d4d10;
  --bad:        #a3352c;
  --info:       #1f5c9e;
  --check-ink:  #0f7565;  /* one "confirmed" mark */
  --check-wash: #def6f0;

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

  /* ---- Campus map -------------------------------------------------------- */
  --map-ground:    #eef5f2;
  --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-safety:    #7045a1;
  --map-track:     #d6bfb2;
  --map-track-line: #b6998c;
  --map-roof:      #d5dfe1;
  --map-roof-edge: #aabcc1;
  --map-roof-detail: rgba(88, 112, 120, .13);
  --map-pavement:  #e4e9e7;
  --map-tree:      #a9cdb7;
  --map-tree-hi:   #bedbc8;
  --map-tree-shadow: rgba(55, 94, 72, .11);
  --map-infield:   #decdb2;

  /* ---- Intelligence band ----------------------------------------------- */
  --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);
  --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-chip:  0 8px 28px rgba(17, 71, 77, .06);
  --lift-band:  0 25px 65px rgba(0, 0, 0, .22);

  /* ---- Type scale — 12px floor -------------------------------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-md:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-label: 1rem;
  --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;  --section-space: var(--s9);

  /* ---- 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;
  --drawer-bg:   rgba(255, 255, 255, .98);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s6);
}

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(--section-space) 0; }

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

/* The header sits over the top of each page and scrolls away with it. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
}

.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: minmax(0, 1.35fr) minmax(0, .65fr);
  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-sm);
  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-hover); }

.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-md);
  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; }

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

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

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

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

/* One section-label style across every public page and background. */
.kicker {
  margin-bottom: var(--s3);
  color: var(--teal-text);
  font-family: inherit;
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: .04em;
  font-weight: 700;
}

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

.section-dark .kicker, .cta-panel .kicker { color: var(--teal-bright); }

.section-heading > div > h2 { max-width: 18ch; }
#platform-title > .platform-heading-accent { display: block; color: var(--teal-hover); }

.section-heading p:not(.kicker) {
  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; }
.section-heading > h2 + p { margin-top: var(--s5); }
.center-heading p:not(.kicker) { 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; }

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

.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 { max-width: 64ch; 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(--s6);
  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);
}

/* Fictional campus schematic, with numbered markers and a readable legend. */
.campus-map-visual { min-height: 0; padding: var(--s4); background: var(--bg); border: 1px solid var(--line); }
.campus-map-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.campus-map-heading strong { font-size: var(--text-base); font-weight: 600; }
.campus-map-heading > span { color: var(--ink-3); font-size: var(--text-xs); }
.campus-site-plan { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.site-ground { fill: var(--map-ground); }
.site-street { fill: none; stroke: var(--map-road); stroke-width: 45; }
.site-road-center { fill: none; stroke: var(--bg); stroke-width: 2; stroke-dasharray: 12 12; }
.site-fence { fill: none; stroke: var(--map-bldg-line); stroke-width: 2; stroke-dasharray: 4 3; }
.site-pavement { fill: var(--map-pavement); }
.site-walk { fill: none; stroke: var(--bg); stroke-width: 13; stroke-linecap: square; stroke-linejoin: round; }
.site-parking, .site-dropoff { fill: var(--map-road); stroke: var(--map-road-line); stroke-width: 2; }
.site-parking-lane { stroke: var(--bg); stroke-width: 2; stroke-dasharray: 9 9; }
.site-parking-stripe { stroke: var(--bg); stroke-width: 2; }
.site-parking-access { fill: none; stroke: var(--map-road); stroke-width: 27; }
.site-parking-access-line { fill: none; stroke: var(--bg); stroke-width: 2; stroke-dasharray: 8 7; }
.site-dropoff-island, .site-quad, .site-stadium-lawn, .site-baseball-grass { fill: var(--map-turf-a); stroke: var(--map-turf-line); stroke-width: 2; }
.site-dropoff-arrow { fill: none; stroke: var(--bg); stroke-width: 2; }
.site-crosswalk { stroke: var(--bg); stroke-width: 4; }
.site-quad-walk { stroke: var(--bg); stroke-width: 7; }
.site-plaza { fill: var(--map-pavement); stroke: var(--map-bldg-line); stroke-width: 2; }
.site-benches { stroke: var(--map-roof-edge); stroke-width: 4; }
.site-track { fill: var(--map-track); stroke: var(--map-track-line); stroke-width: 2; }
.site-track-lane { fill: none; stroke: var(--bg); stroke-width: 1; opacity: .7; }
.site-field { fill: var(--map-turf-b); stroke: var(--bg); stroke-width: 2; }
.site-field-lines { fill: none; stroke: var(--bg); stroke-width: 2; }
.site-bleachers { stroke: var(--map-roof-edge); stroke-width: 3; }
.site-court { fill: var(--map-bldg); stroke: var(--map-roof-edge); stroke-width: 2; }
.site-court-lines { fill: none; stroke: var(--bg); stroke-width: 2; }
.site-baseball-infield { fill: var(--map-infield); }
.site-baseball-lines { fill: none; stroke: var(--bg); stroke-width: 2; }
.site-buildings { fill: var(--map-roof); stroke: var(--map-roof-edge); stroke-width: 2; filter: drop-shadow(2px 3px 0 var(--map-bldg-drop)); }
.site-roofs { fill: url(#campus-roof-lines); }
.site-roof-line { fill: none; stroke: var(--map-roof-detail); stroke-width: 1; }
.site-room-lines { fill: none; stroke: var(--map-roof-edge); stroke-width: 1; opacity: .7; }
.site-tree { fill: var(--map-tree); }
.site-tree-highlight { fill: var(--map-tree-hi); }
.site-tree-shadow { fill: var(--map-tree-shadow); }
.site-label { fill: var(--ink-2); font-size: 19px; font-weight: 500; }
.site-label-plate { paint-order: stroke; stroke: var(--map-roof); stroke-width: 5; stroke-linejoin: round; }
.site-label-major { font-size: 22px; font-weight: 600; }
.site-label-small { font-size: 17px; }
.site-label-tiny { font-size: 14px; }
.site-street-label { font-size: 16px; letter-spacing: .12em; }
.campus-map-north { fill: var(--ink-3); stroke: var(--ink-3); stroke-width: 2; }
.campus-map-north text { stroke: none; font-size: 18px; font-weight: 600; }
.map-medical { --marker-color: var(--bad); }
.map-facilities { --marker-color: var(--warn); }
.map-hall-pass { --marker-color: var(--info); }
.map-safety { --marker-color: var(--pin-safety); }
.campus-map-pin { fill: var(--marker-color); }
.campus-map-pin circle { stroke: var(--map-pin-ring); stroke-width: 4; }
.campus-map-pin text { fill: var(--map-pin-ring); text-anchor: middle; font-size: 28px; font-weight: 700; }
.campus-map-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); padding: 0; list-style: none; }
.campus-map-legend li { display: flex; align-items: flex-start; gap: var(--s2); }
.campus-map-key { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; background: var(--marker-color); color: var(--map-pin-ring); font-size: var(--text-xs); font-weight: 700; }
.campus-map-legend strong { display: block; font-size: var(--text-md); line-height: 1.35; font-weight: 600; }
.campus-map-legend small { display: block; margin-top: var(--s1); color: var(--ink-3); font-size: var(--text-sm); line-height: 1.4; }

.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;
}

/* Balance the Intelligence heading and explanation across the desktop band. */
@media screen and (min-width: 861px) {
  .feature-card-dark .feature-copy {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--s10);
    align-items: center;
    max-width: none;
    margin-top: 0;
  }
  .feature-card-dark h3 { max-width: 22ch; margin-bottom: 0; }
  .feature-card-dark p { max-width: none; }
  .feature-card-dark .ai-orbit { opacity: .35; }
}

/* ==========================================================================
   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:not(.kicker) {
  max-width: 44ch;
  margin-bottom: var(--s8);
  color: var(--band-ink-2);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
}

/* Reporting preview uses fictional counts and makes no automatic decisions. */
.reporting-panel { min-width: 0; padding: var(--s6); border: 1px solid var(--band-hair); border-radius: var(--r-xl); background: var(--band-2); box-shadow: var(--lift-band); }
.reporting-panel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); }
.reporting-panel-header h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.reporting-panel-header p { margin-top: var(--s2); color: var(--band-ink-3); font-size: var(--text-xs); line-height: 1.5; }
.reporting-sample { border: 1px solid var(--band-hair); border-radius: var(--r-pill); padding: var(--s1) var(--s2); color: var(--band-ink-2); font-size: var(--text-xs); white-space: nowrap; }
.reporting-findings { display: grid; gap: var(--s3); padding: 0; margin: 0; list-style: none; }
.reporting-finding { padding: var(--s4); border: 1px solid var(--band-hair); border-radius: var(--r-md); background: var(--band-fill); }
.reporting-finding-context { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin-bottom: var(--s2); color: var(--band-ink-3); font-size: var(--text-xs); line-height: 1.4; }
.reporting-finding-context > span:first-child { color: var(--teal-bright); font-weight: 600; }
.reporting-finding h4 { margin: 0; color: var(--band-ink); font-size: var(--text-base); font-weight: 600; line-height: 1.35; }
.reporting-finding > p { margin-top: var(--s2); color: var(--band-ink-2); font-size: var(--text-md); line-height: var(--leading-snug); }
.reporting-finding > p strong { color: var(--band-ink); font-weight: 500; }
.reporting-next-step { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--band-hair); }
.reporting-next-step > span { display: block; margin-bottom: var(--s1); color: var(--teal-bright); font-size: var(--text-xs); font-weight: 600; }
.reporting-next-step p { color: var(--band-ink); font-size: var(--text-md); line-height: var(--leading-snug); }
@media (max-width: 620px) {
  .reporting-panel { padding: var(--s5); }
}

/* ==========================================================================
   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-copy h2 { margin-bottom: var(--s5); max-width: 20ch; }

.phone-copy > p:not(.kicker) {
  max-width: 46ch;
  margin-bottom: var(--s6);
  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;
}

/* ==========================================================================
   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:not(.kicker) {
  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 { background: var(--bg); }

.cta-panel {
  position: relative;
  overflow: hidden;
  overflow: clip; /* Clip the decorative glow without scrolling the panel on focus. */
  display: grid;
  /* 300px widget plus the form’s padding and borders. */
  grid-template-columns: minmax(0, 1fr) minmax(350px, .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:not(.kicker) { 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);
}

/* Form spacing is intentionally explicit so labels, controls, Turnstile,
   feedback, and the submit action keep a consistent vertical rhythm. */
.form-row {
  display: grid;
  /* Stack fields when the form itself is narrow, including desktop columns. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s4);
  margin-bottom: var(--s4);
}

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

.form-field-message {
  margin-bottom: var(--s4);
}

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

.form-guidance {
  color: var(--form-note);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.optional-label {
  color: var(--form-note);
  font-weight: 400;
}

.demo-form input,
.demo-form textarea {
  width: 100%;
  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);
  font: inherit;
  font-size: var(--text-base);
}

.demo-form input {
  height: 48px;
}

.demo-form textarea {
  min-height: 88px;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  line-height: 1.45;
  resize: vertical;
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: var(--form-holder);
}

.demo-form input:focus-visible,
.demo-form textarea:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 1px;
  border-color: transparent;
}

.demo-form input[aria-invalid="true"],
.demo-form textarea[aria-invalid="true"] {
  border-color: var(--form-invalid);
}

.form-error {
  min-height: 0;
  margin-top: var(--s3);
  margin-bottom: 0;
  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); line-height: 1.5; text-align: center; }
.form-note:empty { display: none; }

.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; }
.contact-fallback {
  margin-top: var(--s4);
  color: var(--form-note);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  text-align: center;
}
.contact-fallback a { color: var(--band-ink); }
.contact-fallback a, .form-error a { text-decoration: underline; text-underline-offset: .2em; }
.form-error a { color: inherit; }

/* The fieldset wraps the controls so an unconfigured form can be disabled in
   markup. It carries no visual weight of its own. */
.demo-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.demo-form legend.visually-hidden { position: absolute; }
.demo-form input:disabled,
.demo-form textarea:disabled { opacity: .6; cursor: not-allowed; }
.button:disabled { cursor: default; box-shadow: none; transform: none; }

/* Turnstile is the one intentional third-party UI element on this static page.
   Keep its spacing owned by the form rather than by Cloudflare's iframe. */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  min-height: 65px;
  margin: 0 0 var(--s4);
}
.cf-turnstile { width: 100%; min-width: 300px; }

.demo-form .button-full {
  margin-top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* The final section and footer share one 64px transition. */
main > .section:last-child { padding-bottom: var(--s7); }
.site-footer { padding: var(--s9) 0 var(--s6); border-top: 1px solid var(--line-soft); background: var(--bg); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--s10);
  padding-bottom: var(--s7);
}

.footer-brand { margin-bottom: var(--s4); }
.footer-about p { max-width: 52ch; color: var(--ink-3); font-size: var(--text-md); line-height: var(--leading-normal); }
.footer-company { margin-top: var(--s6); }
.footer-company-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.footer-company-links .text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: 500; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s6);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  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-sm);
}

/* ==========================================================================
   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 { display: none; }

  .button,
  .feature-card,
  .privacy-item,
  .eco-node,
  .ecosystem-center,
  .demo-form,
  .reporting-panel,
  .tag-row li { 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 { 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,
  .reporting-panel,
  .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,
  .site-footer,
  .privacy-item,
  .eco-node,
  .ecosystem-center { background: none; box-shadow: none; }

  .button,
  .button-primary,
  .status-dot,
  .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, .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 { --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); }
  .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;
    order: -1;
    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 { --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-copy .hero-actions, .hero-trust { justify-content: center; }

  .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; }

  .privacy-card { padding: var(--s8); }
  .cta-panel { padding: var(--s8); }
  .footer-grid { gap: var(--s8); }
  .footer-links { justify-content: flex-start; }
}

@media (min-width: 621px) and (max-width: 860px) {
  .feature-grid > .feature-card:not(.feature-card-large):not(.feature-card-dark) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: var(--s7);
  }
  .feature-grid > .feature-card:not(.feature-card-large):not(.feature-card-dark) .feature-icon-wrap {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .feature-grid > .feature-card:not(.feature-card-large):not(.feature-card-dark) .feature-copy { margin-top: 0; }
  .feature-grid > .feature-card:not(.feature-card-large):not(.feature-card-dark) p { max-width: none; }

  /* Copy and capture sit side by side so the two phone captures are not stacked back to back. */
  .phone-grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s7); }
  .section-phone .phone-grid > .phone-evidence { order: 0; max-width: 240px; }
  .section-phone .phone-evidence .evidence-label { padding-inline: 0; }
}

/* Between tablet and wide desktop the three card titles wrap differently;
   reserve two lines and seat each title on the same baseline. */
@media (min-width: 861px) and (max-width: 1240px) {
  .feature-grid > .feature-card:not(.feature-card-large):not(.feature-card-dark) h3 {
    display: flex;
    align-items: flex-end;
    min-height: 2.4em;
  }
  /* The orbit's core lands on the principle tags at this width. */
  .ai-core { display: none; }
}

@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;
    --s11: 56px;
    --s10: 40px;
    --section-space: var(--s7);
    --header-h: 68px;
  }

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

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }

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

  .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(--s4); }
  .form-row { grid-template-columns: 1fr; }
}

/* The horizontal Turnstile widget needs 300px. Remove nested form
   padding on narrow phones rather than clipping or shrinking its controls. */
@media (max-width: 420px) {
  .cta-section > .container { width: 100%; }
  .cta-panel { padding-inline: 0; border-radius: 0; }
  .cta-copy { padding-inline: var(--gutter); }
  .demo-form {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .demo-form .form-row,
  .demo-form .form-field-message,
  .demo-form .button-full {
    width: calc(100% - var(--s4));
    margin-inline: var(--s2);
  }
}

/* Public evidence pages: actual product captures remain readable without scripts. */
.site-nav a[aria-current="page"] { color: var(--teal-text); text-decoration: underline; text-underline-offset: .4em; }
.evidence-intro { background: var(--bg-alt); padding-top: calc(var(--header-h) + var(--s9)); }
.evidence-intro h1 { max-width: 920px; line-height: 1.08; letter-spacing: -.045em; }
.evidence-intro h1 > .heading-accent { display: block; color: var(--teal-hover); }
.tour-page .evidence-intro h1 > .heading-accent { display: inline; }
.evidence-lede { max-width: 760px; margin-top: 24px; color: var(--ink-2); font-size: 1.2rem; line-height: 1.7; }
.evidence-figure { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); overflow: hidden; box-shadow: 0 16px 50px var(--wash-teal-faint); }
.evidence-figure img { display: block; width: 100%; height: auto; }
.evidence-figure a:focus-visible { outline-offset: -4px; }
.evidence-label, .evidence-figure figcaption.evidence-label { padding: 12px 18px; background: var(--teal-wash); color: var(--teal-text); font-size: .8rem; font-weight: 600; letter-spacing: .025em; }
.evidence-figure figcaption { padding: 16px 18px; color: var(--ink-2); font-size: .875rem; line-height: 1.6; border-top: 1px solid var(--line); }
.evidence-figure figcaption.evidence-label { text-align: center; background: transparent; border-top: 0; }
.evidence-figure figcaption a, .evidence-copy a:not(.button) { color: var(--teal-text); text-decoration: underline; text-underline-offset: .2em; }

.hero-product.evidence-figure { align-self: center; transform: none; }
.evidence-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.evidence-copy h2 { margin-bottom: 20px; font-size: var(--display-h2); line-height: 1.1; letter-spacing: -.03em; }
.evidence-copy p:not(.kicker) { color: var(--ink-2); line-height: var(--leading-loose); margin-bottom: 20px; }
.evidence-list { padding-left: 20px; color: var(--ink-2); line-height: 1.8; margin: 24px 0; }
.capability-grid, .about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.capability-card { border: 1px solid var(--line); background: var(--surface); padding: 32px; border-radius: var(--r-lg); }
.capability-card h3 { margin: 20px 0 12px; font-size: var(--text-xl); line-height: 1.2; font-weight: 600; }
.capability-card p, .evidence-callout p { color: var(--ink-2); line-height: var(--leading-normal); }

.evidence-callout { padding: var(--s9); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-xl); }
.section > .evidence-callout > h2 { font-size: var(--text-2xl); line-height: 1.2; }
.evidence-callout h2, .evidence-callout h3 { margin-bottom: 16px; }
.evidence-callout h3 { font-size: var(--text-xl); line-height: 1.25; font-weight: 600; }
.tour-index { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; }
.tour-index a { color: var(--teal-text); text-decoration: underline; text-underline-offset: .25em; padding: 8px 0; }
.tour-steps { padding: 0; margin: 0; list-style: none; }
.tour-step { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: center; }
.tour-step + .tour-step { margin-top: var(--s9); padding-top: var(--s9); border-top: 1px solid var(--line); }
/* The closing card follows the same rule-between-steps rhythm. */
.tour-page > section:last-child::before { content: ""; position: absolute; top: 0; left: 50%; width: min(100% - (var(--gutter) * 2), var(--container)); border-top: 1px solid var(--line); transform: translateX(-50%); }
.about-grid { gap: 48px; }
@media (max-width: 860px) {
  .evidence-split, .tour-step { grid-template-columns: 1fr; gap: 28px; }
  .tour-step + .tour-step { margin-top: var(--s7); padding-top: var(--s7); }
}
@media (max-width: 580px) {
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card, .evidence-callout { padding: 24px; }
  .tour-index { flex-direction: column; gap: 4px; }
}

.evidence-page .hero-actions { margin-top: var(--s6); }
.evidence-page .hero-actions:last-child { margin-bottom: 0; }
.evidence-copy > p:last-child { margin-bottom: 0; }

/* Product evidence uses native captures, with portrait screens kept readable. */
.phone-first-hero { padding-top: calc(var(--header-h) + var(--s9)); padding-bottom: var(--s8); }
.phone-first-hero h1 > span { display: block; }
.phone-evidence { width: 100%; max-width: 310px; justify-self: center; }
.phone-first-hero .phone-evidence { max-width: 280px; }
/* Let the original phone capture stand on its own, without an image card. */
.phone-evidence { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.phone-evidence > a { display: block; }
.phone-evidence img { clip-path: inset(1.1% 2.7% 1.1% 2.7% round 14% / 6.5%); }
.phone-evidence .evidence-label { border: 0; background: transparent; }

.review-evidence { width: 100%; max-width: 500px; justify-self: center; }
.capability-card h3:first-child { margin-top: 0; }
.capability-card .text-link { display: inline-block; margin-top: var(--s5); }
.response-copy > .text-link { display: inline-block; color: var(--teal-bright); }
.tour-step { grid-template-columns: 1fr 1fr; }
.tour-step .evidence-copy { max-width: 520px; }
/* Tour examples alternate sides on wide screens; stacked layouts keep copy first. */
@media (min-width: 861px) {
  .tour-step:nth-child(even) > .evidence-copy { order: 2; }
}
@media (max-width: 860px) {
  .tour-step { grid-template-columns: 1fr; }
  .phone-first-hero .phone-evidence { max-width: 310px; }
}

/* Original Intelligence presentation, with its illustrative status kept visible. */
.evidence-callout .text-link { display: inline-block; margin-top: var(--s5); }
/* About keeps the story compact and lets audience headings lead directly. */
.about-audiences h2 { margin-bottom: var(--s4); font-size: var(--text-xl); line-height: 1.25; }
.about-page .evidence-copy p:not(.kicker) { line-height: var(--leading-normal); }
.about-grid .evidence-copy > :last-child { margin-bottom: 0; }
.about-closing { background: var(--bg-alt); }
.about-closing h2 { margin-bottom: var(--s4); font-size: var(--text-2xl); line-height: 1.2; }
@media (max-width: 860px) {
  .about-closing .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--s7); }
}

@media (max-width: 860px) {
  .phone-grid > .phone-evidence { order: 2; }
}

/* Public privacy policies share the marketing site's typography and tokens. */
.policy-intro { background: var(--bg-alt); padding-top: calc(var(--header-h) + var(--s9)); padding-bottom: var(--s9); }
.policy-intro h1 { max-width: 27ch; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; }
.policy-updated { margin-top: var(--s5); color: var(--ink-3); font-size: var(--text-md); }
.policy-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s10); align-items: start; padding-top: var(--s9); padding-bottom: var(--s7); }
.policy-toc { position: sticky; top: var(--s6); font-size: var(--text-md); }
.policy-toc summary { min-height: 44px; cursor: pointer; }
.policy-toc h2 { display: inline; font-size: var(--text-base); }
.policy-toc ol { list-style: decimal; padding-left: var(--s5); }
.policy-toc li { padding-left: var(--s1); }
.policy-toc a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 4px; }
.policy-toc li a { display: block; padding-block: var(--s2); line-height: var(--leading-snug); }
.policy-related { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s5); }
.policy-copy { max-width: 72ch; font-size: var(--text-base); line-height: var(--leading-loose); }
.policy-copy a { color: var(--teal-text); text-decoration: underline; text-underline-offset: 4px; }
.policy-copy p, .policy-copy ul { margin-bottom: var(--s5); }
.policy-copy ul { list-style: disc; padding-left: var(--s6); }
.policy-copy li { margin-bottom: var(--s2); padding-left: var(--s1); }
.policy-copy section { border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s7); }
.policy-copy h2 { font-size: var(--text-xl); line-height: 1.4; margin-bottom: var(--s4); }
.policy-copy section p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .policy-toc { position: static; border-bottom: 1px solid var(--line); padding-bottom: var(--s5); }
  .policy-related { margin-top: var(--s2); }
}
@media print {
  .policy-toc { display: none; }
  .policy-intro { padding-top: 0; }
  .policy-layout { display: block; }
  .policy-copy { max-width: none; }
  .policy-copy h2 { break-after: avoid; }
}

/* Product capability lists use the homepage check marks. */
.evidence-list { padding-left: 0; list-style: none; display: grid; gap: var(--s3); line-height: var(--leading-normal); }
.evidence-list li { position: relative; padding-left: 34px; color: var(--ink); font-weight: 500; }
.evidence-list li::before { content: "✓"; position: absolute; left: 0; top: .1em; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--check-wash); color: var(--check-ink); font-size: var(--text-xs); font-weight: 700; }
.explore-heading { margin-top: var(--s9); }

/* Successful sends replace every form control until the page is refreshed. */
.contact-confirmation { padding: var(--s5) var(--s3); text-align: center; color: var(--band-ink); }
.contact-confirmation h3 { margin: 0 0 var(--s3); font-size: var(--text-xl); }
.contact-confirmation p { margin: 0; line-height: var(--leading-normal); color: var(--form-ok-ink); }
.contact-confirmation h3:focus { outline: none; }