/* Metrivo AI — Private Preview waitlist page
   Design tokens and structure per Claude Design handover, v3 (design of record). */

:root {
  --paper: oklch(0.955 0.014 84);
  --paper-2: oklch(0.912 0.022 80);
  --paper-dots: oklch(0.88 0.02 78);
  --card: oklch(0.99 0.007 84);
  --chrome: oklch(0.965 0.014 84);
  --ink: oklch(0.27 0.014 62);
  --ink-2: oklch(0.3 0.015 62);
  --muted: oklch(0.44 0.02 66);
  --meta: oklch(0.6 0.025 68);
  --border: oklch(0.86 0.022 78);
  --border-soft: oklch(0.9 0.018 80);
  --rule: oklch(0.82 0.03 72);
  --dash: oklch(0.87 0.022 78);
  --dot: oklch(0.86 0.03 70);
  --accent: oklch(0.56 0.165 46);
  --accent-hover: oklch(0.49 0.155 44);
  --accent-ink: oklch(0.5 0.06 45);
  --on-accent: oklch(0.97 0.012 84);
  --accent-shadow: oklch(0.56 0.165 46 / 0.85);
  --shadow: oklch(0.4 0.03 60 / 0.6);
  --note-bg: oklch(0.985 0.012 88);
  --note-edge: oklch(0.78 0.05 55);
  --alert-bg: oklch(0.925 0.045 28);
  --alert-border: oklch(0.8 0.085 28);
  --alert-icon: oklch(0.5 0.15 28);
  --skel-1: oklch(0.86 0.025 74);
  --skel-2: oklch(0.9 0.02 78);
  --beat-bg: oklch(0.24 0.018 62);
  --beat-fg: oklch(0.955 0.014 84);
  --beat-muted: oklch(0.83 0.02 80);
  /* Same in both themes: the dark-mode beat green, used behind the hero value prop */
  --value-bg: oklch(0.225 0.052 166);
  --value-fg: oklch(0.94 0.012 84);
  --link: oklch(0.46 0.082 42);
  --link-hover: oklch(0.36 0.082 42);
  --surface-opacity: 0.3;
  --dot-fill: transparent;
  --pill-bg: oklch(0.875 0.032 74);
  --pill-border: oklch(0.72 0.04 70);
}

[data-theme="dark"] {
  --paper: oklch(0.185 0.012 62);
  --paper-2: oklch(0.205 0.013 62);
  --paper-dots: oklch(0.245 0.014 64);
  --card: oklch(0.235 0.014 64);
  --chrome: oklch(0.275 0.015 64);
  --ink: oklch(0.94 0.012 84);
  --ink-2: oklch(0.9 0.012 84);
  --muted: oklch(0.77 0.014 80);
  --meta: oklch(0.68 0.016 78);
  --border: oklch(0.35 0.016 66);
  --border-soft: oklch(0.32 0.016 66);
  --rule: oklch(0.42 0.02 68);
  --dash: oklch(0.34 0.016 66);
  --dot: oklch(0.37 0.018 66);
  --accent: oklch(0.64 0.1 45);
  --accent-hover: oklch(0.71 0.1 45);
  --accent-ink: oklch(0.77 0.09 50);
  --on-accent: oklch(0.17 0.015 60);
  --accent-shadow: oklch(0.1 0.02 50 / 0.7);
  --shadow: oklch(0.05 0.01 60 / 0.75);
  --note-bg: oklch(0.265 0.016 70);
  --note-edge: oklch(0.52 0.075 52);
  --alert-bg: oklch(0.29 0.055 28);
  --alert-border: oklch(0.44 0.09 28);
  --alert-icon: oklch(0.76 0.12 32);
  --skel-1: oklch(0.36 0.018 68);
  --skel-2: oklch(0.31 0.016 66);
  --beat-bg: oklch(0.225 0.052 166);
  --beat-fg: oklch(0.94 0.012 84);
  --beat-muted: oklch(0.85 0.032 160);
  --link: oklch(0.77 0.085 50);
  --link-hover: oklch(0.85 0.08 50);
  --surface-opacity: 0.42;
  --dot-fill: oklch(0.77 0.09 50);
  --pill-bg: oklch(0.33 0.022 66);
  --pill-border: oklch(0.52 0.028 70);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

a { color: var(--link); text-decoration-color: var(--note-edge); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
input { font-family: inherit; }
/* Paragraphs: 'pretty' avoids one-word last lines while keeping the measure.
   Headings and short statements: 'balance' evens the lines so nothing dangles. */
p, .row-primary, .microcopy, .diagram-footnote, .confirm-body, .form-alert-text { text-wrap: pretty; }
h1, h2, .closing-line, .note { text-wrap: balance; }

/* Page wrapper. Deliberately not named "page"/"content"/"article": those class names
   raise Safari's Reader score. UI text elsewhere uses <div>, keeping <p> for real prose. */
.site {
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--paper);
  background-image: radial-gradient(var(--paper-dots) 0.6px, transparent 0.6px);
  background-size: 22px 22px;
}

/* Bands: full-bleed alternate background behind the recognition + memory sections */
.band { position: relative; }
.band::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: -1;
}

section, header, footer > div {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

/* Honeypot field — hidden from real users, catches simple bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Header ---------- */
.site-header {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 30px; width: auto; }
.site-footer .logo img { height: 22px; }
[data-logo="light"] { display: none; }
[data-theme="dark"] [data-logo="dark"] { display: none; }
[data-theme="dark"] [data-logo="light"] { display: block; }

.header-actions { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); }

.nav-link { font-size: 13px; letter-spacing: 0.01em; white-space: nowrap; text-decoration: underline; }

.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-pill:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.theme-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-ink);
  background: var(--dot-fill);
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(36px, 7vw, 88px); padding-bottom: clamp(20px, 4vw, 40px); }
.hero h1 {
  margin: 0;
  max-width: 15em;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.h1-line { display: block; } /* each sentence of the headline starts its own line */
.hero-subhead {
  margin: 24px 0 0;
  max-width: 34em;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--muted);
}
/* Value proposition — set on the bottle green of the dark-mode beat, in both themes */
.hero-value {
  /* Spans the full content column, like the Today card and diagram frame below */
  margin: 28px 0 0;
  padding: clamp(20px, 3vw, 34px) clamp(22px, 4vw, 48px);
  background: var(--value-bg);
  border-radius: 8px;
  box-shadow: 0 20px 44px -30px var(--shadow);
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.1rem, 1.9vw, 1.42rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--value-fg);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.btn-primary {
  display: inline-block;
  padding: 15px 26px;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px var(--accent-shadow);
}
/* Pin the label color in every link state — the generic a:hover rule would otherwise
   win on specificity (and touch devices keep :hover after a tap). */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited { color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.caption { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--meta); }

/* ---------- Section headings shared ---------- */
.recognition h2, .product-surface h2, .memory h2, .waitlist h2 {
  margin: 0;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  letter-spacing: -0.018em;
}
.section-subhead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: var(--muted); }

/* ---------- Recognition ---------- */
.recognition { padding-block: clamp(56px, 7.5vw, 96px); }
.recognition h2 { margin-bottom: clamp(28px, 4vw, 48px); max-width: 22em; }

.notes-wrap { position: relative; padding: clamp(26px, 5vw, 70px) clamp(14px, 3vw, 48px); }

.ghost-surface {
  position: absolute; inset: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  opacity: var(--surface-opacity);
  filter: blur(1.4px);
}
.ghost-chrome {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--chrome);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--meta);
}
.ghost-body { padding: 26px 34px; }
.skel { height: 10px; border-radius: 2px; background: var(--skel-2); margin-bottom: 14px; }
.skel:nth-child(2), .skel:nth-child(4) { margin-bottom: 30px; }
.skel-1 { height: 14px; background: var(--skel-1); margin-bottom: 26px; }

.notes {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}
.note {
  margin: 0;
  max-width: 22em;
  padding: 20px 22px;
  background: var(--note-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--note-edge);
  border-radius: 2px;
  box-shadow: 0 12px 26px -20px var(--shadow);
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  line-height: 1.45;
}
.note-1 { transform: rotate(-1.6deg); }
.note-2 { transform: rotate(1.2deg); }
.note-3 { transform: rotate(-0.8deg); }
.note-4 { transform: rotate(1.8deg); }
.note-5 { transform: rotate(-1.1deg); }
.note-6 { transform: rotate(0.9deg); }

.closing-line {
  margin: clamp(28px, 4vw, 46px) 0 0;
  max-width: 32em; /* one line on desktop */
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- Product surface / Today card ---------- */
.product-surface { padding-block: clamp(56px, 7.5vw, 96px); }
.product-surface h2 { max-width: 22em; }
.product-surface .section-subhead { max-width: 36em; margin: 20px 0 clamp(34px, 5vw, 56px); }

.today-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 34px 70px -46px var(--shadow);
  overflow: hidden;
}
.today-chrome {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--chrome);
}
.chrome-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; white-space: nowrap;
  color: var(--meta);
}
.chrome-item svg { display: block; }

.today-rows { padding: clamp(8px, 1.4vw, 16px) clamp(18px, 3vw, 40px) clamp(14px, 2vw, 24px); }
.today-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--dash);
}
.today-row:last-child { border-bottom: none; }
.row-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--accent-ink);
}
.row-primary { margin: 0; font-size: clamp(0.98rem, 1.4vw, 1.1rem); line-height: 1.5; color: var(--ink-2); }
.row-meta {
  margin: 8px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--meta);
}
.row-action {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent-ink);
  white-space: nowrap;
  padding-top: 4px;
}

.mechanism-line {
  margin: 18px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--meta);
}

/* ---------- Memory diagram ---------- */
.memory { padding-block: clamp(56px, 7.5vw, 96px); }
.memory h2 { max-width: 22em; }
.memory .section-subhead { max-width: 36em; margin: 20px 0 clamp(38px, 6vw, 64px); }

.diagram-frame {
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: clamp(26px, 4vw, 48px) clamp(18px, 3vw, 40px);
  background: color-mix(in oklab, var(--card) 55%, transparent);
}
.eyebrow {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--meta);
}

.star {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  aspect-ratio: 840 / 520;
  min-height: 400px;
}
.spoke { position: absolute; left: 50%; top: 50%; transform-origin: 0 50%; }
.spoke-line { margin: 0 clamp(30px, 8%, 74px) 0 clamp(28px, 7%, 62px); border-top: 1px dashed var(--rule); }
.spoke-1 { width: 25.9%; transform: rotate(-90deg); }
.spoke-2 { width: 37.6%; transform: rotate(-168.7deg); }
.spoke-3 { width: 37.6%; transform: rotate(-11.3deg); }
.spoke-4 { width: 40.7%; transform: rotate(142.1deg); }
.spoke-5 { width: 40.7%; transform: rotate(37.9deg); }

.hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: clamp(14px, 2.2vw, 24px) clamp(18px, 2.8vw, 32px);
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  box-shadow: 0 20px 44px -30px var(--shadow);
  text-align: center;
  max-width: 46%;
}
.hub-title {
  margin: 0;
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.hub-meta {
  margin: 7px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8.5px, 1.05vw, 10.5px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--accent-ink);
}

.sat {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: clamp(9px, 1.3vw, 14px) clamp(12px, 1.7vw, 20px);
  border: 1px solid var(--border);
  border-top: 3px solid var(--note-edge);
  border-radius: 2px;
  background: var(--note-bg);
  box-shadow: 0 10px 22px -20px var(--shadow);
  text-align: center;
  white-space: nowrap;
  /* Size to content: otherwise an absolutely positioned card near the right edge only
     gets the leftover width and its caption wraps ("WHAT IT / CHANGED"). */
  width: max-content;
}
.sat-mission   { left: 50%; top: 8%; }
.sat-programs  { left: 16%; top: 36%; }
.sat-impact    { left: 84%; top: 36%; }
.sat-voice     { left: 20%; top: 90%; }
.sat-documents { left: 80%; top: 90%; }

.sat-icon { display: grid; place-items: center; margin-bottom: 9px; color: var(--accent-ink); }
.sat-icon svg { display: block; }
.sat-label { margin: 0; font-family: 'IBM Plex Serif', serif; font-size: clamp(12px, 1.6vw, 16px); line-height: 1.25; color: var(--ink-2); }
.sat-caption { margin: 5px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: clamp(8.5px, 1vw, 10px); letter-spacing: 0.09em; color: var(--meta); }

.diagram-footnote {
  margin: clamp(22px, 3vw, 34px) 0 0;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--meta);
}

/* ---------- Empathy beat ---------- */
.beat { background: var(--beat-bg); color: var(--beat-fg); max-width: none; }
.beat > .beat-inner {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(64px, 10vw, 132px) clamp(20px, 4vw, 40px);
}
.beat h2 {
  margin: 0; max-width: 24em;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.1vw, 2.75rem) /* each sentence fits one line in the 1000px column, with room for Safari's wider rendering */;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.beat-body {
  margin: 28px 0 0; max-width: 34em;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--beat-muted);
}

/* ---------- Waitlist ---------- */
.waitlist { padding: clamp(64px, 10vw, 130px) clamp(20px, 4vw, 40px) clamp(80px, 12vw, 150px); }
.waitlist h2 { max-width: 24em; }
.waitlist .section-subhead { max-width: 34em; margin: 22px 0 34px; }

.waitlist-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; max-width: 560px; }
.waitlist-form .field-group { flex: 1 1 240px; min-width: 0; }
.waitlist-form input[type="email"] {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--card);
  font-size: 15px;
  color: var(--ink);
}
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--accent-ink); }
.waitlist-form input[aria-invalid="true"] { border-color: var(--accent); }

.waitlist-form button {
  padding: 15px 26px;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px var(--accent-shadow);
}
.waitlist-form button:hover:not(:disabled) { background: var(--accent-hover); }
.waitlist-form button:disabled { cursor: progress; opacity: 0.75; }

.field-error {
  margin: 8px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent-ink);
}
.field-error:empty { display: none; }

.form-alert {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 0;
  max-width: 560px;
  padding: 12px 16px 12px 14px;
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  border-radius: 4px;
}
.form-alert-icon { flex: none; display: block; margin-top: 1px; color: var(--alert-icon); }
.form-alert-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.microcopy { margin: 16px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.7; color: var(--meta); }

/* The form, microcopy and confirmation swap via [hidden]; the form's display:flex would otherwise win. */
.waitlist [hidden] { display: none !important; }

/* Confirmation — a pinned note, answering the six worry notes in the recognition section */
.confirm-note {
  max-width: 480px;
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px);
  background: var(--note-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--note-edge);
  border-radius: 2px;
  box-shadow: 0 12px 26px -20px var(--shadow);
  transform: rotate(-1.2deg);
  transform-origin: 0 50%;
}
.confirm-note:focus { outline: none; }
.confirm-title {
  margin: 0;
  font-family: 'IBM Plex Serif', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.confirm-body {
  margin: 12px 0 0;
  font-family: 'IBM Plex Serif', serif;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.confirm-meta {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--dash);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--meta);
}
.confirm-meta-label { letter-spacing: 0.1em; text-transform: uppercase; }
.confirm-email { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); max-width: none; padding: 0; }
.site-footer > div {
  padding: 26px clamp(20px, 4vw, 40px);
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between; align-items: center;
}
.copyright { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; color: var(--meta); }

/* ---------- Responsive: the one media query the design uses ---------- */
/* Narrow screens keep the star, re-proportioned to a tall 5:8 box: mission on top,
   two satellites either side, hub between them. Spoke widths are % of the box width and
   rotations are atan2(dy * 8/5, dx) from the hub at (50%, 56%), so they meet each card. */
@media (max-width: 660px) {
  .star { max-width: 440px; aspect-ratio: 5 / 8; min-height: 0; }

  .spoke { top: 56%; }
  .spoke-1 { width: 74.4%; transform: rotate(-90deg); }
  .spoke-2 { width: 48.5%; transform: rotate(-121deg); }
  .spoke-3 { width: 48.5%; transform: rotate(-59deg); }
  .spoke-4 { width: 57.7%; transform: rotate(115.67deg); }
  .spoke-5 { width: 57.7%; transform: rotate(64.33deg); }

  .hub { top: 56%; width: 56%; max-width: none; padding: 14px 12px; }
  .hub-title { font-size: 15px; }
  .hub-meta { font-size: 8.5px; letter-spacing: 0.08em; }

  .sat { padding: 9px 11px; }
  .sat-mission   { left: 50%; top: 9.5%; }
  .sat-programs  { left: 25%; top: 30%; }
  .sat-impact    { left: 75%; top: 30%; }
  .sat-voice     { left: 25%; top: 88.5%; }
  .sat-documents { left: 75%; top: 88.5%; }
  .sat-icon { margin-bottom: 6px; }
  .sat-icon svg { width: 22px; height: 22px; }
}

/* Respect reduced-motion preference (the design has no motion beyond hover, but this
   guards any future additions) */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}