/* ============================================================
   ASSURA LANDING - page styles
   Tokens live in theme.css. Structure of this file:
     1. Base + drafting canvas
     2. Primitives (buttons, eyebrows, reveals)
     3. Nav
     4. Hero + dashboard depiction
     5. Framework strip
     6. How it works
     7. Assura vs consulting
     8. Feature grid + mini depictions
     9. Pricing
    10. FAQ
    11. Final CTA + footer
    12. Legal pages (privacy / terms)
    13. Responsive + accessibility
   ============================================================ */

/* ---------- 1. Base ---------- */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* belt and braces with body's overflow-x: iOS Safari lets the visual
     viewport pan to absolutely-positioned bleed (the hero glow) unless the
     root clips too */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(59, 130, 246, 0.35); color: var(--paper); }

/* The drafting sheet: a faint construction grid pinned behind everything,
   plus one soft light source high on the page. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.55));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.55));
}

.sheet::after {
  content: '';
  position: absolute;
  top: -320px; left: 50%;
  width: 1100px; height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.14), transparent 62%);
}

main { position: relative; z-index: 1; }

.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--edge-pad);
}

section { padding: var(--section-pad) 0 0; }

img, svg { display: block; }

/* ---------- 2. Primitives ---------- */

h1, h2, h3 { font-family: var(--font-display); color: var(--paper); letter-spacing: -0.02em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure-bright);
}

/* The control point: the filled square lifted from the logo's crossbar.
   Every eyebrow starts with one - it is the site's accent mark. */
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--azure);
  flex-shrink: 0;
}

/* Hero eyebrow carries the product name and drops the square. */
.eyebrow-plain::before { display: none; }

.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  margin: 18px 0 14px;
}
.section-head p { font-size: 17px; color: var(--slate); max-width: 56ch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-ctl);
  padding: 13px 26px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(180deg, #4c8dff, #2f6fe4);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px rgba(47, 111, 228, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 12px 32px rgba(47, 111, 228, 0.45); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--body);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--azure); color: var(--paper); }

/* Scroll reveal - one quiet move, upward into place */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 3. Nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(9, 13, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--edge-pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}
.brand-chip {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
}

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  transition: color 0.18s ease;
}
.nav-links a:hover { color: var(--paper); }

/* Platform dropdown - browse the feature pages from anywhere */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.18s ease;
}
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--paper); }
.nav-drop-btn svg { transition: transform 0.18s ease; }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 40px);
  flex-wrap: wrap;
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 48px rgba(2, 6, 16, 0.6);
  display: none;
}
/* the menu is a mega-menu: category columns sit side by side */
.nav-drop-menu .nd-col { min-width: 246px; display: flex; flex-direction: column; }
.nav-drop-menu .nd-col + .nd-col {
  border-left: 1px solid var(--line);
  margin-left: 8px;
  padding-left: 14px;
}
/* invisible bridge so the pointer can cross the gap without closing it */
.nav-drop-menu::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0;
  height: 16px;
}
.nav-drop.open .nav-drop-menu { display: flex; animation: navDropIn 0.18s ease; }
@keyframes navDropIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.nav-drop-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.nav-drop-menu a:hover { background: var(--surface-2); }
.nav-drop-menu .nd-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--body); transition: color 0.15s ease; }
.nav-drop-menu a:hover .nd-name { color: var(--paper); }
.nav-drop-menu .nd-sub {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}
.nav-drop-menu a[aria-current="page"] { background: var(--azure-ghost); }
.nav-drop-menu a[aria-current="page"] .nd-name { color: var(--azure-bright); }
.nav-drop-menu .nd-group {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 12px 6px;
}

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 10px 18px; font-size: 14px; }

/* ---------- 4. Hero ---------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(140px, 17vh, 200px) 0 0;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(420px, 500px) 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

/* orchestrated load: copy rises line by line, the dashboard settles after */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: heroRise 0.7s ease both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.14s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.23s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.32s; }

.hero h1 {
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 20px 0 20px;
}
.hero h1 em {
  font-style: normal;
  color: var(--azure-bright);
}

.hero-sub {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  color: var(--slate);
  line-height: 1.68;
  max-width: 52ch;
  margin: 0 0 34px;
}

/* Email capture */
.capture { max-width: 480px; margin: 0 auto; }
.hero-copy .capture { margin: 0; }
.hero-copy .capture-note { text-align: left; }
.capture-row { display: flex; gap: 10px; }
.capture input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  font-size: 15px;
  font-family: inherit;
  color: var(--paper);
  background: rgba(17, 24, 40, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
}
.capture input[type="email"]::placeholder { color: var(--muted); }
.capture input[type="email"]:focus {
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.capture .btn { flex-shrink: 0; }

.capture-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.capture-note b { color: var(--slate); font-weight: 600; }
.capture-note a { color: var(--azure-bright); text-decoration: none; }
.capture-note a:hover { color: var(--paper); }

/* Hero action pair: book a slot, or watch the walkthrough first */
.hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* the primary hero button carries a full and a short label; the short one
   only shows on phones (see the max-width: 620px block) */
.hero-ctas .btn-primary .cta-short { display: none; }

.capture-msg {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
}
.capture-msg.ok { display: flex; color: var(--good); }
.capture-msg.err { display: flex; color: var(--bad); }

/* --- The dashboard depiction: large, tilted, in the first viewport --- */

.hero-visual {
  position: relative;
  z-index: 1;
  animation: heroRise 0.9s ease 0.3s both;
}

/* soft light behind the window */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -6% -10%;
  background: radial-gradient(ellipse at 45% 40%, rgba(59, 130, 246, 0.16), transparent 62%);
  filter: blur(26px);
  z-index: 0;
}

/* The window deliberately bleeds past its grid column, but never past the
   viewport: its max width = column width (100%) + the container's side
   margin - a 16px safety gap. Works at any zoom/scaling level. */
.hero-visual { min-width: 0; margin-top: 20px; }
.hero-visual .mock {
  width: clamp(560px, 45vw, 800px);
  max-width: calc(100% + max(0px, (100vw - var(--content-w)) / 2) - 16px);
}

/* floating detail cards - glassy, drifting gently */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.float-card {
  position: absolute;
  z-index: 3;
  background: rgba(14, 21, 39, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  padding: 13px 15px;
  box-shadow: 0 18px 48px rgba(2, 6, 16, 0.6);
}
.fc-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azure-bright);
  margin-bottom: 9px;
}
.fc-label::before { content: ''; width: 6px; height: 6px; background: var(--azure); }
.fc-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.fc-line {
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* The floats hang off the window's corners - over its chrome and edges,
   never over the three metric cards. */
.fc-score {
  top: -26px; right: -24px;
  animation: heroRise 0.7s ease 0.8s both, bob 7s ease-in-out 2.4s infinite;
}
.fc-map {
  bottom: -44px; left: -28px;
  animation: heroRise 0.7s ease 0.95s both, bob 8s ease-in-out 2.9s infinite;
}

.mock {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0f1729, #0b1120);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 80px rgba(2, 6, 16, 0.7);
  overflow: hidden;
  text-align: left;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); }
.mock-url {
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  background: rgba(17, 24, 40, 0.7);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 14px;
}

.mock-body { display: flex; }

.mock-side {
  width: 64px;
  border-right: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.mock-side .brand-chip { width: 30px; height: 30px; border-radius: 8px; }
.side-dash { width: 22px; height: 4px; border-radius: 2px; background: var(--surface-2); }
.side-dash.on { background: var(--azure); }

.mock-main { flex: 1; padding: 22px 24px 26px; min-width: 0; }

.mock-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.mock-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--paper); }
.mock-sub { font-size: 11.5px; color: var(--muted); }

/* One landscape row - gauge | framework bars | risk tiles - mirroring the
   real dashboard's horizontal card board. */
.mock-grid {
  display: grid;
  grid-template-columns: minmax(178px, 198px) minmax(0, 1.5fr) minmax(0, 0.98fr);
  grid-template-rows: auto;
  gap: 14px;
}

.mcard {
  background: rgba(17, 25, 43, 0.75);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
}
.mcard-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

/* gauge */
.m-gauge { display: flex; flex-direction: column; }

/* the arc draws itself once the hero has settled */
@keyframes arcDraw {
  from { stroke-dashoffset: 232.5; }
  to   { stroke-dashoffset: 65; }
}
.gauge-arc { animation: arcDraw 1.3s cubic-bezier(0.33, 1, 0.5, 1) 0.9s both; }
.gauge-wrap { position: relative; width: 168px; max-width: 100%; margin: 6px auto 2px; }
.gauge-wrap svg { width: 100%; height: auto; }
.gauge-num {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  text-align: center;
}
.gauge-num strong {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
}
.gauge-num span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.gauge-tier {
  margin: 14px auto 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--azure-bright);
  background: var(--azure-ghost);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
}
/* framework bars */
.fw-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.fw-name { width: 80px; flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-track { flex: 1; min-width: 64px; height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.fw-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2f6fe4, #74a9ff); }
.fw-pct { width: 36px; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--slate); }

/* bars grow in, one after another; their percentages fade in behind them */
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes softIn { from { opacity: 0; } to { opacity: 1; } }
.fw-fill { transform-origin: left; animation: barGrow 0.9s cubic-bezier(0.33, 1, 0.5, 1) both; }
.fw-pct { animation: softIn 0.5s ease both; }
.fw-row:nth-child(2) .fw-fill { animation-delay: 0.95s; }
.fw-row:nth-child(3) .fw-fill { animation-delay: 1.08s; }
.fw-row:nth-child(4) .fw-fill { animation-delay: 1.21s; }
.fw-row:nth-child(5) .fw-fill { animation-delay: 1.34s; }
.fw-row:nth-child(2) .fw-pct { animation-delay: 1.35s; }
.fw-row:nth-child(3) .fw-pct { animation-delay: 1.48s; }
.fw-row:nth-child(4) .fw-pct { animation-delay: 1.61s; }
.fw-row:nth-child(5) .fw-pct { animation-delay: 1.74s; }

/* the signal strip under the metric row - the "across your platform" band
   from the real dashboard, compressed into chips */
.mock-signals {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow: hidden;
  white-space: nowrap;
  /* The strip crops at every width by design; the fade makes the crop read
     as intentional instead of a chip sliced mid-word. */
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
}
.msig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--slate);
  background: rgba(17, 24, 40, 0.7);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 11px;
  flex-shrink: 0;
  opacity: 0;
  animation: softIn 0.5s ease both;
}
.msig:nth-child(1) { animation-delay: 1.5s; }
.msig:nth-child(2) { animation-delay: 1.62s; }
.msig:nth-child(3) { animation-delay: 1.74s; }
.msig:nth-child(4) { animation-delay: 1.86s; }
.msig:nth-child(5) { animation-delay: 1.98s; }
.msig b { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.msig b.ok { background: var(--good); }
.msig b.az { background: var(--azure); }

/* risk tiles - 2x2 like the real dashboard card; minmax(0,1fr) so they
   compress instead of spilling out of the window on narrower laptops */
.risk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.risk-tile { border-radius: 10px; padding: 10px 6px; border: 1px solid var(--line); text-align: center; min-width: 0; }
.risk-tile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* tiles pop in while their numbers count up */
@keyframes tileIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.risk-tile { animation: tileIn 0.55s cubic-bezier(0.33, 1, 0.5, 1) both; }
.risk-tile:nth-child(1) { animation-delay: 1.0s; }
.risk-tile:nth-child(2) { animation-delay: 1.12s; }
.risk-tile:nth-child(3) { animation-delay: 1.24s; }
.risk-tile:nth-child(4) { animation-delay: 1.36s; }
.risk-tile strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.risk-tile span { font-size: 10.5px; color: var(--slate); }
.rt-crit strong { color: var(--bad); }
.rt-high strong { color: var(--warn); }
.rt-med  strong { color: var(--azure-bright); }
.rt-low  strong { color: var(--good); }

/* ---------- 5. Framework strip ---------- */

.fw-strip { padding-top: clamp(72px, 9vw, 110px); }
.fw-strip-head {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
}
.fw-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.fw-tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(14, 21, 38, 0.6);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.fw-tag:hover { border-color: var(--azure); color: var(--paper); }
.fw-more { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); }

/* ---------- 6. How it works ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* the product walkthrough reel under the three steps */
.demo-reel { margin-top: 44px; text-align: center; }
.demo-reel video {
  display: block;
  width: min(960px, 100%);
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(2, 6, 16, 0.6);
  background: var(--ink);
}

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px 28px;
}
.step-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--azure-bright);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.step-no::after { content: ''; width: 34px; height: 1px; background: var(--line-strong); }
.step h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.step p { font-size: 14.5px; color: var(--slate); line-height: 1.65; }

/* ---------- 7. Assura vs consulting ---------- */

.versus {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.versus-head, .versus-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.4fr;
}
.versus-head {
  border-bottom: 1px solid var(--line-strong);
  background: rgba(17, 25, 43, 0.6);
}
.versus-head > div {
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.versus-head .vh-assura { color: var(--azure-bright); }
.versus-row { border-bottom: 1px solid var(--line); }
.versus-row:last-child { border-bottom: none; }

/* rows cascade in when the comparison scrolls into view */
.versus .versus-row { opacity: 0; }
.versus.reveal.in .versus-row { animation: vizPop 0.5s ease both; }
.versus.reveal.in .versus-row:nth-child(2) { animation-delay: 0.15s; }
.versus.reveal.in .versus-row:nth-child(3) { animation-delay: 0.25s; }
.versus.reveal.in .versus-row:nth-child(4) { animation-delay: 0.35s; }
.versus.reveal.in .versus-row:nth-child(5) { animation-delay: 0.45s; }
.versus.reveal.in .versus-row:nth-child(6) { animation-delay: 0.55s; }
.versus.reveal.in .versus-row:nth-child(7) { animation-delay: 0.65s; }
.versus-row > div { padding: 17px 22px; font-size: 14px; }
.v-dim { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.v-assura { color: var(--paper); }
.v-assura::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--azure);
  margin-right: 10px;
  vertical-align: 2px;
}
.v-other { color: var(--muted); }
.versus-foot {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 68ch;
}

/* ---------- 8. Feature grid ---------- */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature:hover { border-color: rgba(59, 130, 246, 0.45); transform: translateY(-2px); }

.feature-viz {
  height: 118px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    rgba(10, 16, 30, 0.65);
  background-size: 24px 24px, 24px 24px, auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.feature-text { padding: 20px 22px 24px; }
.feature-text h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; }
.feature-text p { font-size: 13.5px; color: var(--slate); line-height: 1.62; }
.feature-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azure-bright);
  text-decoration: none;
  transition: color 0.18s ease;
}
.feature-link:hover { color: var(--paper); }

/* mini-depiction shared bits */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--body);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 5px 9px;
  white-space: nowrap;
}
.chip.blue { color: var(--azure-bright); border-color: rgba(59,130,246,0.4); background: var(--azure-ghost); }
.chip.green { color: var(--good); border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.1); }

.viz-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.skeleton { height: 6px; border-radius: 3px; background: var(--surface-2); }

/* --- depiction life: each mini-mock performs once when scrolled into view.
       Everything keys off .reveal.in so it fires with the card's reveal. --- */

@keyframes vizPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vizSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* scoring: chips land one after another, the reasoning line sweeps in */
.feature .viz-row > * { opacity: 0; }
.feature.reveal.in .viz-row > * { animation: vizPop 0.45s ease both; }
.feature.reveal.in .viz-row > *:nth-child(1) { animation-delay: 0.35s; }
.feature.reveal.in .viz-row > *:nth-child(2) { animation-delay: 0.5s; }
.feature.reveal.in .viz-row > *:nth-child(3) { animation-delay: 0.65s; }
.feature.reveal.in .viz-row > *:nth-child(4) { animation-delay: 0.85s; }

/* mapping connector */
.viz-map { display: flex; align-items: center; gap: 0; }
.feature .viz-map .chip, .feature .viz-map + .chip { opacity: 0; }
.feature .map-link { transform: scaleX(0); transform-origin: left; }
.feature.reveal.in .viz-map .chip:first-child { animation: vizPop 0.45s ease 0.35s both; }
.feature.reveal.in .map-link { animation: vizSweep 0.5s ease 0.55s both; }
.feature.reveal.in .viz-map .chip:last-child { animation: vizPop 0.45s ease 0.95s both; }
.feature.reveal.in .viz-map + .chip { animation: vizPop 0.45s ease 1.15s both; }
.map-link { width: 54px; height: 1px; border-top: 1px dashed var(--line-strong); position: relative; }
.map-link::before, .map-link::after {
  content: '';
  position: absolute;
  top: -3.5px;
  width: 6px; height: 6px;
  background: var(--azure);
}
.map-link::before { left: -2px; }
.map-link::after { right: -2px; }

/* risk rows: lines slide in, their bars sweep */
.viz-risks { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 220px; }
.riskline { display: flex; align-items: center; gap: 9px; }
.riskline .sq { width: 8px; height: 8px; flex-shrink: 0; }
.riskline .skeleton { flex: 1; transform-origin: left; }
.feature .riskline { opacity: 0; }
.feature.reveal.in .riskline { animation: vizPop 0.45s ease both; }
.feature.reveal.in .riskline:nth-child(1) { animation-delay: 0.35s; }
.feature.reveal.in .riskline:nth-child(2) { animation-delay: 0.55s; }
.feature.reveal.in .riskline:nth-child(3) { animation-delay: 0.75s; }
.feature.reveal.in .riskline .skeleton { animation: vizSweep 0.5s ease both; }
.feature.reveal.in .riskline:nth-child(1) .skeleton { animation-delay: 0.5s; }
.feature.reveal.in .riskline:nth-child(2) .skeleton { animation-delay: 0.7s; }
.feature.reveal.in .riskline:nth-child(3) .skeleton { animation-delay: 0.9s; }

/* report page */
.viz-report {
  width: 96px; height: 118px;
  margin-bottom: -34px;
  background: #101a30;
  border: 1px solid var(--line-strong);
  border-radius: 6px 6px 0 0;
  padding: 12px 12px 0;
  box-shadow: 0 -8px 24px rgba(2, 6, 16, 0.5);
}
.viz-report .bar { height: 8px; border-radius: 2px; background: var(--azure); width: 55%; margin-bottom: 8px; transform-origin: left; }
.viz-report .skeleton { margin-bottom: 6px; }

/* report: the page rises off the card edge, content writes itself */
.feature .viz-report { opacity: 0; }
.feature.reveal.in .viz-report { animation: vizPop 0.6s ease 0.35s both; }
.feature .viz-report .bar, .feature .viz-report .skeleton { transform: scaleX(0); transform-origin: left; }
.feature.reveal.in .viz-report .bar { animation: vizSweep 0.45s ease 0.7s both; }
.feature.reveal.in .viz-report .skeleton { animation: vizSweep 0.45s ease both; }
.feature.reveal.in .viz-report .skeleton:nth-of-type(1) { animation-delay: 0.85s; }
.feature.reveal.in .viz-report .skeleton:nth-of-type(2) { animation-delay: 0.95s; }
.feature.reveal.in .viz-report .skeleton:nth-of-type(3) { animation-delay: 1.05s; }
.feature.reveal.in .viz-report .skeleton:nth-of-type(4) { animation-delay: 1.15s; }

/* chat */
.viz-chat { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 230px; }
.bubble {
  font-size: 11px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 11px;
  max-width: 88%;
}
.bubble.q { align-self: flex-end; background: #2f6fe4; color: #fff; border-bottom-right-radius: 4px; }
.bubble.a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--slate); border-bottom-left-radius: 4px; }

/* chat: question lands, the answer arrives a beat later */
.feature .bubble { opacity: 0; }
.feature.reveal.in .bubble.q { animation: vizPop 0.45s ease 0.35s both; }
.feature.reveal.in .bubble.a { animation: vizPop 0.45s ease 1.0s both; }

/* team */
.viz-team { display: flex; align-items: center; }
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: linear-gradient(135deg, #2f6fe4, #74a9ff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-left: -8px;
}
.avatar:first-child { margin-left: 0; }
.avatar.v2 { background: linear-gradient(135deg, #7c5cf0, #a78bfa); }
.avatar.v3 { background: linear-gradient(135deg, #0ea5a4, #34d399); }

/* team: the roster assembles */
.feature .viz-team .avatar, .feature .viz-team ~ .chip { opacity: 0; }
.feature.reveal.in .viz-team .avatar { animation: vizPop 0.45s ease both; }
.feature.reveal.in .viz-team .avatar:nth-child(1) { animation-delay: 0.35s; }
.feature.reveal.in .viz-team .avatar:nth-child(2) { animation-delay: 0.5s; }
.feature.reveal.in .viz-team .avatar:nth-child(3) { animation-delay: 0.65s; }
.feature.reveal.in .viz-team ~ .chip { animation: vizPop 0.45s ease both; }
.feature.reveal.in .viz-team ~ .chip:nth-of-type(1) { animation-delay: 0.85s; }
.feature.reveal.in .viz-team ~ .chip:nth-of-type(2) { animation-delay: 0.97s; }
.feature.reveal.in .viz-team ~ .chip:nth-of-type(3) { animation-delay: 1.09s; }

/* ---------- 9. Pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.plan.hot {
  border-color: rgba(59, 130, 246, 0.55);
  background: linear-gradient(180deg, rgba(31, 51, 94, 0.35), var(--surface) 45%);
  position: relative;
}
.plan-flag {
  position: absolute;
  top: -12px; left: 28px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #4c8dff, #2f6fe4);
  border-radius: 100px;
  padding: 5px 12px;
}
.plan-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--paper); }
.plan-for { font-size: 13px; color: var(--muted); margin: 4px 0 20px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-family: var(--font-display); font-size: 42px; font-weight: 700; color: var(--paper); letter-spacing: -0.02em; }
.plan-price span { font-size: 13.5px; color: var(--muted); }
.plan-annual { font-family: var(--font-mono); font-size: 12px; color: var(--slate); margin: 6px 0 22px; }
.plan ul { list-style: none; display: grid; gap: 9px; margin-bottom: 26px; }
.plan li { font-size: 13.5px; color: var(--body); padding-left: 20px; position: relative; }
.plan li::before {
  content: '';
  position: absolute;
  left: 2px; top: 7px;
  width: 6px; height: 6px;
  background: var(--azure);
}
.plan .btn { margin-top: auto; width: 100%; }
.plans-note {
  text-align: center;
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--slate);
}

/* ---------- 10. FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--paper);
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--azure-bright); }
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  padding: 0 4px 22px;
  font-size: 14.5px;
  color: var(--slate);
  max-width: 66ch;
}

/* ---------- 11. Final CTA + footer ---------- */

.finale {
  margin-top: var(--section-pad);
  border-top: 1px solid var(--line);
  /* soft ambient halo behind the copy - not a hard-edged band rising off
     the bottom edge (which read as a glow seam against the footer) */
  background:
    radial-gradient(ellipse 760px 340px at 50% 42%, rgba(59, 130, 246, 0.10), transparent 72%);
  text-align: center;
  padding: var(--section-pad) 0;
}
.finale h2 {
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  margin: 20px 0 16px;
}
.finale > .container > p { font-size: 16.5px; color: var(--slate); max-width: 54ch; margin: 0 auto 36px; }

/* Structured footer: brand column + categorised link columns */
.footer { border-top: 1px solid var(--line); padding: 56px 0 30px; position: relative; z-index: 1; }
.footer .brand-name { font-size: 16px; }
.footer-top {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--edge-pad);
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: start;
}
.footer-tag {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 30ch;
}
.footer-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer-head::before { content: ''; width: 6px; height: 6px; background: var(--azure); flex-shrink: 0; }
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--slate);
  text-decoration: none;
  padding: 4.5px 0;
  transition: color 0.18s ease;
}
.footer-col a:hover { color: var(--paper); }
.footer-base {
  max-width: var(--content-w);
  margin: 44px auto 0;
  padding: 22px var(--edge-pad) 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-base .footer-made {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
}

@media (max-width: 960px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-base .footer-made { margin-left: 0; }
}

/* ---------- 12. Legal pages ---------- */

.legal { max-width: 760px; margin: 0 auto; padding: 150px var(--edge-pad) 90px; position: relative; z-index: 1; }
.legal h1 { font-size: clamp(30px, 4.5vw, 42px); margin: 16px 0 8px; }
.legal .updated { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin-bottom: 40px; }
.legal h2 { font-size: 21px; margin: 44px 0 12px; }
.legal h3 { font-size: 16.5px; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15px; color: var(--body); line-height: 1.7; }
.legal p { margin: 10px 0; }
.legal ul { padding-left: 22px; margin: 10px 0; }
.legal li { margin: 4px 0; }
.legal a { color: var(--azure-bright); }
.legal a.btn-primary { color: #fff; } /* CTA buttons keep white text despite the .legal link colour */
.legal strong { color: var(--paper); font-weight: 600; }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); color: var(--body); }
.legal th { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); background: var(--surface); }
.legal .highlight-box { background: var(--surface); border: 1px solid var(--line-strong); border-left: 3px solid var(--azure); border-radius: 10px; padding: 18px 20px; margin: 22px 0; }
.legal .highlight-box.important, .legal .highlight-box.warning { border-left-color: var(--warn); }

/* ---------- 13. Responsive + accessibility ---------- */

:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; border-radius: 4px; }

/* Narrower laptops (e.g. 13" at scaled resolutions, incl. 1920 at 125% =
   1536px): shrink the copy column so the graphic renders without spill. */
@media (max-width: 1600px) {
  .hero h1 { font-size: clamp(32px, 3.4vw, 48px); }
  .hero-sub { font-size: 15px; }
  .hero-split { grid-template-columns: minmax(360px, 440px) 1fr; }
  .hero-visual .mock { width: clamp(520px, 42vw, 660px); }
}

/* Below the full-desktop width the hero mock shrinks (see the 1600px block),
   so compact the window internals from the same point: drop the side rail and
   tighten the grid so the landscape row still fits without labels colliding. */
@media (max-width: 1600px) {
  .mock-side { display: none; }
  .mock-main { padding: 18px 20px 22px; }
  .mcard { padding: 12px; }
  .mock-grid { grid-template-columns: minmax(166px, 188px) minmax(0, 1.5fr) minmax(0, 0.98fr); gap: 12px; }
  .fw-name { width: 80px; }
}

/* Small-laptop windows (13" panels at 125-150% scaling: 1280-1440px). The
   side-by-side hero leaves the mock ~540px here - too narrow for three cards,
   so the compliance %s collided with the risk tiles. Restack the board:
   gauge and risks share the top row, the framework bars take the full width
   below and finally get room to read proportional. Not applied under 1101px,
   where the hero stacks and the mock is full-width again. */
@media (min-width: 1101px) and (max-width: 1440px) {
  /* Small laptops keep the desktop's horizontal three-card board, downsized
     just enough. The visual column shrink-wraps the window (auto) so the
     window claims the width its landscape row actually needs - previously it
     inherited a too-narrow share and the compliance %s collided with the
     risk tiles - and the copy centres vertically beside it. */
  .hero { padding-top: clamp(96px, 12vh, 150px); }
  .hero-split { grid-template-columns: 1fr auto; align-items: center; }
  /* nudged slightly below true centre - reads better against the window */
  .hero-copy { max-width: 500px; margin-top: 44px; }
  .hero-visual .mock { width: clamp(620px, 52vw, 680px); }
}

@media (max-width: 1100px) {
  .hero { min-height: auto; padding-top: 130px; }
  .hero-split { grid-template-columns: 1fr; }
  /* stretch, don't shrink-to-fit: centring the item makes the mock's
     percentage width resolve against its own max-content (720px) and the
     whole page overflows sideways on phones */
  .hero-visual { margin-top: 16px; }
  .hero-visual .mock { width: 100%; max-width: 720px; margin: 0 auto; }
  .fc-score { right: 4px; }
  .fc-map { left: 4px; }
}

@media (max-width: 960px) {
  /* Keep the Platform menu reachable on phones; hide only the plain text
     links (How it works / FAQ). The mega-menu becomes a full-width panel
     with its category columns stacked vertically. */
  .nav-links { gap: 0; }
  .nav-links > a { display: none; }
  .nav-drop-btn { font-size: 15px; }
  .nav-drop-menu {
    position: fixed;
    top: 78px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 10px;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
  }
  .nav-drop.open .nav-drop-menu { animation: mobileMenuIn 0.2s ease; }
  @keyframes mobileMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .nav-drop-menu .nd-col { min-width: 0; }
  /* stacked columns: no left inset (the links/headers already carry their
     own 12px padding, so every section aligns to the same left edge) */
  .nav-drop-menu .nd-col + .nd-col {
    border-left: none;
    border-top: 1px solid var(--line);
    margin-left: 0;
    padding-left: 0;
    margin-top: 8px;
    padding-top: 8px;
  }
  .nav-drop-menu .nd-group { padding-top: 6px; }
  .steps, .features, .plans { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .plan.hot { order: -1; }
  .mock-grid { grid-template-columns: 1fr; }
  .m-gauge { grid-row: auto; }
  .versus-head { display: none; }
  .versus-row { grid-template-columns: 1fr; border-bottom: 1px solid var(--line-strong); }
  .versus-row > div { padding: 12px 20px; }
  .versus-row .v-dim { padding-top: 18px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
  .versus-row .v-other { padding-bottom: 18px; }
  .v-other::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--muted);
    margin-right: 10px;
    vertical-align: 2px;
    opacity: 0.5;
  }
}

@media (max-width: 620px) {
  .nav-cta .btn-ghost { display: none; }
  /* On phones the top-bar CTA is the Platform dropdown itself; drop the
     Book a Demo button where a Platform menu exists (guide/legal pages have
     no menu, so they keep their Book a Demo). */
  .nav-inner:has(.nav-drop) .nav-cta { display: none; }
  .capture-row { flex-direction: column; }
  .capture .btn { width: 100%; padding: 15px; }
  .mock-side { display: none; }
  .risk-tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-split { grid-template-columns: 1fr; }
  .float-card { display: none; }

  /* Hero action pair stays on one row (share the width) instead of stacking;
     a lone button (feature pages, after Watch the Demo is removed) centres
     at its natural width rather than stretching full-bleed. */
  /* tighten the gap between the hero copy and the action row on phones */
  .hero-sub { margin-bottom: 22px; }
  .hero-ctas { flex-wrap: nowrap; gap: 10px; margin-bottom: 4px; }
  .hero-ctas .btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; text-align: center; }
  .hero-ctas:has(.btn:only-child) { justify-content: center; }
  .hero-ctas .btn:only-child { flex: 0 1 auto; padding-left: 28px; padding-right: 28px; }
  /* Shorten the primary hero label on phones by swapping which label span
     shows. A single visible child means flex centring is exact (no phantom
     zero-width text node to bias it off-centre). */
  .hero-ctas .btn-primary .cta-full { display: none; }
  .hero-ctas .btn-primary .cta-short { display: inline; }

  /* the demo reel serves a portrait cut on phones - keep it within the
     viewport height and centred rather than full-bleed tall */
  .demo-reel video { width: auto; max-width: 100%; max-height: 82vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* depiction elements hidden pre-animation must render settled */
  .feature .viz-row > *, .feature .viz-map .chip, .feature .viz-map + .chip,
  .feature .riskline, .feature .viz-report, .feature .bubble,
  .feature .viz-team .avatar, .feature .viz-team ~ .chip,
  .versus .versus-row, .msig { opacity: 1; }
  .feature .map-link, .feature .viz-report .bar, .feature .viz-report .skeleton { transform: none; }
}