:root {
  /* ------------------------------------------------------------------------
     Light is the base palette. Dark is redefined twice below: once behind
     prefers-color-scheme (for the default "system" state, where nothing is
     stamped on <html>), and once behind [data-theme="dark"] so the toggle wins
     in both directions. Every colour on this page comes from a token defined
     HERE, so nothing is left undefined in the un-stamped state.
     ------------------------------------------------------------------------ */

  /* Ground and structure. The neutrals carry a slight teal bias rather than
     being pure greys, so they read as chosen. */
  --ink:        #F2F6F8;
  --ink-2:      #FFFFFF;
  --panel:      #FFFFFF;
  --panel-2:    #F8FBFC;
  --line:       #CFDCE3;
  --line-soft:  #E3EBEF;

  /* Type */
  --fg:         #08131D;
  --fg-2:       #33475A;
  --mut:        #5C7183;
  --faint:      #7D93A5;

  /* Signal. One accent, spent carefully; the warm tone is a counter-signal only.
     On light ground the teal is darkened until it passes contrast as text. */
  --signal:     #007C68;
  --signal-dim: #009B81;
  --signal-ink: #FFFFFF;
  --signal-hi:  #005F50;
  --warm:       #C0410C;
  --signal-rgb: 0, 124, 104;
  --warm-rgb:   192, 65, 12;

  /* Semantic, separate from the accent */
  /* The green is read on three surfaces in this theme and the worst of them decides it: the plain card, the section
     grey, and — the one that fails first — a 12% wash of the green itself, which lifts the background toward the
     text rather than away from it. #06795A cleared the first two at 5.4:1 and 5.0:1 and landed on 4.2:1 inside the
     discount badge, so the one place the colour is boxed and emphasised was the one place it was hardest to read.
     #05674C takes that to 5.4:1 with the other two at 6.9:1 and 6.3:1. --ok-rgb follows it, since the wash is mixed
     from the same green and a pair left out of step would tint the badge with the colour it no longer carries. */
  --ok:         #05674C;
  --info:       #1A66C7;
  --warn:       #9A5B06;
  --ok-rgb:     5, 103, 76;
  --info-rgb:   26, 102, 199;
  --warn-rgb:   154, 91, 6;

  /* Companions to the signal. The page used to run on teal alone, which read as flat; these widen it
     without competing: each is spent in small doses (an icon, a gradient stop), never as a ground.
     Violet is the onboarding page's heartbeat colour, so the site and the page it sends people to agree.
     On light ground each is darkened until it passes contrast as text, like the teal above. */
  --sky:        #0369A1;
  --violet:     #6D28D9;
  --amber:      #B45309;
  --rose:       #BE185D;
  --grad-hero:  linear-gradient(95deg, #007C68 0%, #0369A1 48%, #6D28D9 100%);

  /* Derived surfaces. Named by role so a theme can move them independently. */
  --raise:      rgba(8, 19, 29, .028);
  --raise-2:    rgba(8, 19, 29, .05);
  --nav-bg:     rgba(242, 246, 248, .78);
  --nav-bg-on:  rgba(242, 246, 248, .95);
  --panel-bg:   rgba(255, 255, 255, .98);
  --chip-bg:    rgba(255, 255, 255, .94);
  --shadow:     rgba(19, 45, 61, .17);
  --shadow-2:   rgba(19, 45, 61, .28);
  --dot:        #BCCBD5;
  --dot-warm:   #E0C4B6;
  --hero-wash-1: rgba(15, 61, 219, .1);
  --hero-wash-2: rgba(0, 124, 104, .11);

  --radius:     14px;
  --radius-lg:  22px;

  --shell:      1200px;
  --gutter:     24px;

  --font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .68, .28, 1);

  color-scheme: light;
}

/* The dark palette, written once and applied from both places that can select it.
   Only tokens are redefined — no component ever gets its colour from inside one of
   these blocks, which is what keeps the un-stamped "system" state correct. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #060910;
    --ink-2:      #080C15;
    --panel:      #0C111C;
    --panel-2:    #101725;
    --line:       #1F2A3D;
    --line-soft:  #151E2D;

    --fg:         #E8EEF9;
    --fg-2:       #B7C3D6;
    --mut:        #8695AC;
    --faint:      #5C6B82;

    --signal:     #00E0B8;
    --signal-dim: #0FA98D;
    --signal-ink: #041713;
    --signal-hi:  #4BF0D2;
    --warm:       #FF7A45;
    --signal-rgb: 0, 224, 184;
    --warm-rgb:   255, 122, 69;

    --ok:         #35D6A4;
    --info:       #56A8FF;
    --warn:       #FFB454;
    --ok-rgb:     53, 214, 164;
    --info-rgb:   86, 168, 255;
    --warn-rgb:   255, 180, 84;

    --sky:        #38BDF8;
    --violet:     #A78BFA;
    --amber:      #FBBF24;
    --rose:       #F472B6;
    --grad-hero:  linear-gradient(95deg, #00E0B8 0%, #38BDF8 50%, #A78BFA 100%);

    --raise:      rgba(255, 255, 255, .022);
    --raise-2:    rgba(255, 255, 255, .055);
    --nav-bg:     rgba(6, 9, 16, .72);
    --nav-bg-on:  rgba(6, 9, 16, .92);
    --panel-bg:   rgba(6, 9, 16, .985);
    --chip-bg:    rgba(10, 14, 23, .94);
    --shadow:     rgba(0, 0, 0, .85);
    --shadow-2:   rgba(0, 0, 0, .95);
    --dot:        #263149;
    --dot-warm:   #3A2A34;
    --hero-wash-1: rgba(15, 61, 219, .28);
    --hero-wash-2: rgba(0, 224, 184, .13);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:        #060910;
  --ink-2:      #080C15;
  --panel:      #0C111C;
  --panel-2:    #101725;
  --line:       #1F2A3D;
  --line-soft:  #151E2D;

  --fg:         #E8EEF9;
  --fg-2:       #B7C3D6;
  --mut:        #8695AC;
  --faint:      #5C6B82;

  --signal:     #00E0B8;
  --signal-dim: #0FA98D;
  --signal-ink: #041713;
  --signal-hi:  #4BF0D2;
  --warm:       #FF7A45;
  --signal-rgb: 0, 224, 184;
  --warm-rgb:   255, 122, 69;

  --ok:         #35D6A4;
  --info:       #56A8FF;
  --warn:       #FFB454;
  --ok-rgb:     53, 214, 164;
  --info-rgb:   86, 168, 255;
  --warn-rgb:   255, 180, 84;

  --sky:        #38BDF8;
  --violet:     #A78BFA;
  --amber:      #FBBF24;
  --rose:       #F472B6;
  --grad-hero:  linear-gradient(95deg, #00E0B8 0%, #38BDF8 50%, #A78BFA 100%);

  --raise:      rgba(255, 255, 255, .022);
  --raise-2:    rgba(255, 255, 255, .055);
  --nav-bg:     rgba(6, 9, 16, .72);
  --nav-bg-on:  rgba(6, 9, 16, .92);
  --panel-bg:   rgba(6, 9, 16, .985);
  --chip-bg:    rgba(10, 14, 23, .94);
  --shadow:     rgba(0, 0, 0, .85);
  --shadow-2:   rgba(0, 0, 0, .95);
  --dot:        #263149;
  --dot-warm:   #3A2A34;
  --hero-wash-1: rgba(15, 61, 219, .28);
  --hero-wash-2: rgba(0, 224, 184, .13);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }
/* Anchors land clear of the sticky header rather than under it. */
:target { scroll-margin-top: 96px; }
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 5.4vw, 4.05rem); font-weight: 700; }
h2 { font-size: clamp(1.62rem, 3.4vw, 2.85rem); font-weight: 700; }
h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: .82rem; font-weight: 600; }

p { margin: 0; }

a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--signal-hi); }
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--signal);
  color: var(--signal-ink);
  border-radius: 8px;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; color: var(--signal-ink); }

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 820px; }

/* ==========================================================================
   Shared type pieces
   ========================================================================== */

.kicker {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 18px;
}

.section-lead {
  color: var(--mut);
  font-size: 1.06rem;
  max-width: 62ch;
  margin-top: 18px;
}

.section-head { margin-bottom: 56px; }

.section-foot {
  margin-top: 40px;
  color: var(--mut);
  font-size: .95rem;
  max-width: 70ch;
}
.section-foot b { color: var(--fg-2); font-weight: 600; }

.note {
  margin-top: 40px;
  padding: 18px 22px;
  border-left: 2px solid var(--line);
  color: var(--mut);
  font-size: .93rem;
  max-width: 78ch;
}

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

.btn {
  --btn-pad: 11px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad);
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.btn-primary {
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .5);
}
.btn-primary:hover {
  background: var(--signal-hi);
  color: var(--signal-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 30px -10px rgba(var(--signal-rgb), .55);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg);
}
.btn-ghost:hover {
  border-color: var(--signal-dim);
  color: var(--fg);
  background: rgba(var(--signal-rgb), .07);
  transform: translateY(-1px);
}

.btn-lg { --btn-pad: 15px 28px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.nav.scrolled {
  background: var(--nav-bg-on);
  border-bottom-color: var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.brand:hover { color: var(--fg); }
.brand-mark { color: var(--signal); flex: none; }
.brand-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .66em;
  letter-spacing: .12em;
  color: var(--mut);
  margin-left: 7px;
}

/* Wrapper is transparent to layout on desktop, so both children stay flex items
   of .nav-inner. It becomes a real box only in the mobile block below. */
.nav-menu { display: contents; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  position: relative;
  padding: 8px 14px;
  color: var(--fg-2);
  font-size: .93rem;
  font-weight: 500;
  border-radius: 8px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover { color: var(--fg); background: var(--raise-2); }

/* 44px, not the 42 it was: this is the only way to navigate on a phone, and it is pressed with a thumb by somebody
   walking a corridor. WCAG's own floor is 24px and 42 cleared it — the number worth hitting is the 44 both platform
   guidelines set, because that one is measured off a thumb rather than off a pointer. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  cursor: pointer;
}
.bars { display: block; width: 18px; }
.bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.bars i + i { margin-top: 4.5px; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1.5px;
  width: 0;
  background: linear-gradient(90deg, var(--signal-dim), var(--signal));
  box-shadow: 0 0 12px rgba(var(--signal-rgb), .6);
}

/* ==========================================================================
   Section rail — navigation to every section, not just the header's five
   ========================================================================== */

.rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  color: var(--faint);
}
.rail a span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.rail a i {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
/* The label appears on hover only. Showing it for the active item too meant it sat
   over the section heading at viewports where the rail's gutter is narrow. */
.rail a:hover span { opacity: 1; transform: none; }
.rail a:hover { color: var(--fg-2); }
.rail a.on { color: var(--signal); }
.rail a.on i { width: 30px; }

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

.hero {
  position: relative;
  padding: 84px 0 0;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 78% -10%, var(--hero-wash-1), transparent 62%),
    radial-gradient(760px 520px at 6% 4%, var(--hero-wash-2), transparent 60%),
    var(--ink);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding-bottom: 96px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-bg);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--fg-2);
  margin-bottom: 26px;
}
.live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), .55); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--signal-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0); }
}

/* Deliberately allowed to wrap: at the hero's column width the phrase is wider than
   the measure, and holding it on one line pushes it out over the console. */
/* The global h1 clamp is tuned for the short headings on platform.html and
   investors.html. In the hero the headline shares its row with the console, so it
   only has ~550px to work in — at the global size that is five lines of 65px type
   and a hero taller than the viewport. */
.hero h1 { font-size: clamp(1.95rem, 4.4vw, 3.4rem); }
/* The signal-coloured phrase is the second half of the sentence, so it should read
   as its own line rather than starting with a stranded word at the end of a black
   one — which is where it lands if the browser is left to wrap it. */
.hero h1 em { display: block; }
/* Its own line, but only as wide as its words: a full-width block stretches the gradient across the whole
   column, and the words then sit in its first third and read as flat teal. */
.hero h1 em { width: fit-content; }

h1 em {
  font-style: normal;
  color: var(--signal);
}
/* The headline's key phrase runs teal into sky into violet: the one loud moment on the page. The plain teal
   above stays as the fallback wherever gradient text cannot be painted, and forced-colours mode keeps the
   system's own text colour rather than an invisible transparent fill. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 em {
    background: var(--grad-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Descenders (the g in "page") sit below the line box; without this they are clipped out of the fill. */
    padding-bottom: .08em;
  }
}
@media (forced-colors: active) {
  h1 em { -webkit-text-fill-color: currentColor; background: none; }
}

.lead {
  margin-top: 24px;
  font-size: 1.1rem;
  color: var(--mut);
  max-width: 58ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-note {
  margin-top: 18px;
  font-size: .87rem;
  color: var(--faint);
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* --- Ticker -------------------------------------------------------------- */

.ticker {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  background: var(--raise);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-run {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 15px 0;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.ticker-run span {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut);
  white-space: nowrap;
}
.ticker-run i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal-dim); flex: none; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 104px 0; position: relative; }
.section.ruled { border-top: 1px solid var(--line-soft); }

/* Thesis --------------------------------------------------------------- */

.thesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: 72px;
  align-items: center;
}

.counters-src {
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

.counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 32px;
  margin: 18px 0 0;
}
.counters dt {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.counters dd { margin: 6px 0 0; font-size: .86rem; color: var(--mut); }
.counters dd b { display: block; color: var(--fg); font-weight: 600; font-size: .95rem; margin-bottom: 3px; }

.orbit { margin: 0; }
.orbit svg { display: block; width: 100%; height: auto; }
.orbit .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 7; }
.orbit .spokes line { stroke: var(--line); stroke-width: 1; }
.orbit .nodes circle {
  fill: var(--panel-2);
  stroke: var(--line);
  stroke-width: 1;
}
.orbit .nodes text {
  fill: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-anchor: middle;
  text-transform: uppercase;
}
.orbit .core circle {
  fill: var(--ink-2);
  stroke: var(--signal);
  stroke-width: 1.5;
}
.orbit .core text {
  fill: var(--signal);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-anchor: middle;
}
.orbit figcaption {
  margin-top: 18px;
  text-align: center;
  font-size: .82rem;
  color: var(--faint);
}

/* Cards ----------------------------------------------------------------- */

.card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -34px var(--shadow);
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--mut); font-size: .93rem; }


.area {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 7px;
}

.card-sub { margin-bottom: 18px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; }
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: .89rem;
  color: var(--fg-2);
}
.ticks li b { color: var(--fg); font-weight: 600; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .52em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--signal);
  border-bottom: 1.6px solid var(--signal);
  transform: rotate(-45deg);
}
.ticks li.off { color: var(--faint); }
.ticks li.off::before {
  border: 0;
  top: .62em;
  left: 4px;
  width: 8px;
  height: 1.6px;
  background: var(--faint);
  transform: none;
}

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
/* .wide was written on three of the five module cards and had no rule anywhere, so the grid it names was never a
   bento — five equal tiles, with the fifth stranded in a half-width slot beside an empty one.

   It now spans, but on one card rather than the three that claimed it. Giving all three a full row was tried and
   measured first: it is what the markup asked for, and it made the section 141px taller, because four stacked rows
   cost more than the height each wider card saves. The two seven-item areas are peers and read better beside each
   other; the card that is explicitly "not a module of its own" is the one that earns the full width, closing the
   section under the four areas it runs beneath. The class was removed from the other two rather than left to mean
   nothing. */
.bento > .wide { grid-column: 1 / -1; }
/* Only where there are three columns to give. Expressed as a min-width so it cannot outrank the narrow-screen
   rules below by specificity — `.bento > .wide .ticks.two` beats a bare `.ticks.two`, which is how a phone would
   otherwise have ended up with three columns of ticks. */
@media (min-width: 901px) {
  .bento > .wide .ticks.two { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The bento never left two columns, so a 375px phone rendered these cards 159px wide — 95px of content inside
   32px padding, for headings like "Wards, Visits, Pharmacy & Procurement". */
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > .wide { grid-column: auto; }
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mechanisms .card { padding-top: 26px; }
/* Pricing ---------------------------------------------------------------- */

.billing {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}
.billing span {
  font-size: .9rem;
  color: var(--faint);
  transition: color .2s var(--ease);
}
.price { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price b {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.price span { font-size: .84rem; color: var(--mut); }
@keyframes flash {
  0%   { transform: translateY(-6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* FAQ -------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--fg);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--signal); }
.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.6px solid var(--signal);
  border-bottom: 1.6px solid var(--signal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-body { padding: 0 4px 24px; }
.faq-body p { color: var(--mut); font-size: .95rem; max-width: 70ch; }

/* Demo ------------------------------------------------------------------- */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 64px;
  align-items: start;
}
.form-shell {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 90px -50px var(--shadow-2);
}
#demo-form { display: grid; gap: 16px; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.field { display: grid; gap: 7px; margin: 0; }
.field label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: .01em;
}
.field label b { color: var(--signal); }
.field .opt {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: .93rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%),
                    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal-dim);
  box-shadow: 0 0 0 3px rgba(var(--signal-rgb), .16);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--warm); }

.err { font-size: .76rem; color: var(--warm); min-height: 0; }
.err:empty { display: none; }

.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .87rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.error { background: rgba(var(--warm-rgb), .1); color: var(--warm); border: 1px solid rgba(var(--warm-rgb), .3); }

.fineprint { font-size: .76rem; color: var(--faint); text-align: center; }

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

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 72px 0 40px;
  background: var(--ink-2);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
}
.foot-brand p { margin-top: 16px; font-size: .87rem; color: var(--mut); max-width: 34ch; }
.foot nav { display: flex; flex-direction: column; gap: 11px; }
.foot h4 {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  margin-bottom: 3px;
}
.foot nav a { color: var(--fg-2); font-size: .89rem; }
.foot nav a:hover { color: var(--signal); }
/* Role notes ------------------------------------------------------------
   The seven groups a hospital buys for do not read the same section. Rather
   than stack them in one grid, each gets a note beside the problem it owns:
   surgeons and clinicians under the outcomes, owners and finance under the
   price, compliance under the security question. Same component every time,
   so the reader learns to spot their own line. */

/* A lone note should not stretch to the full measure — long lines are what the
   two-up case avoids for free. */


/* The demo column is already narrow; the note there sits under the steps. */

/* Hero role rail --------------------------------------------------------- */

/* Contact ---------------------------------------------------------------- */
.contact-lines {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-lines li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.contact-lines li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.contact-lines b { font-size: .8rem; font-weight: 500; color: var(--mut); }
.contact-lines a { color: var(--fg); font-weight: 600; text-decoration: none; }
.contact-lines a:hover { color: var(--signal); text-decoration: underline; }
.contact-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--raise);
  color: var(--signal);
}
.contact-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Card pictures ----------------------------------------------------------- */
/* Every card opens with a small drawing in the onboarding carousel's manner: a rounded plate in a faint tint of
   the brand colour, one object on it in the card's own surface with a hairline edge and a few grey lines of
   "text", and exactly two colours on top of that — the action blue and the brand teal. The first version gave
   each picture its own palette and read as clip art; two hues across all twenty-three is what makes them a set.
   Every fill is a token, so the drawings follow light and dark like the rest of the page. */
.spot-icon {
  --i-brand:   var(--action, var(--signal));
  --i-accent:  var(--signal);
  --i-surface: var(--panel);
  --i-line:    var(--line);
  --i-ink:     var(--fg);
  --i-plate:   color-mix(in srgb, var(--i-brand) 10%, var(--panel));
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  transition: transform .3s var(--ease);
}
.spot-icon .p { fill: var(--i-plate); }
.spot-icon .s { fill: var(--i-surface); stroke: var(--i-line); stroke-width: 1.2; }
.spot-icon .b { fill: var(--i-brand); }
.spot-icon .a { fill: var(--i-accent); }
.spot-icon .i { fill: var(--i-ink); opacity: .72; }
.spot-icon .l { fill: var(--i-line); }
.spot-icon .sb, .spot-icon .sa, .spot-icon .sl, .spot-icon .sw, .spot-icon .si {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spot-icon .sb { stroke: var(--i-brand); }
.spot-icon .sa { stroke: var(--i-accent); }
.spot-icon .sl { stroke: var(--i-line); }
.spot-icon .sw { stroke: var(--i-surface); }
.spot-icon .si { stroke: var(--i-ink); opacity: .72; }
.card:hover .spot-icon,
.facility-card:hover .spot-icon { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .spot-icon, .facility-card:hover .spot-icon { transform: none; }
}

/* Facilities ------------------------------------------------------------- */
/* The same card surface as the outcome cards beside it, so the two sections read as one page. */
.facility-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.facility-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.facility-card:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -34px var(--shadow);
}
.facility-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
}
.facility-card p {
  margin: 0;
  color: var(--mut);
  font-size: .95rem;
  line-height: 1.55;
}
@media (max-width: 900px) { .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facility-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .facility-card, .facility-card:hover { transition: none; transform: none; } }
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

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

/* The rail needs a gutter of its own outside the 1200px shell; below this it would
   sit on top of the content. */
@media (max-width: 1420px) {
  .rail { display: none; }
}

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 72px; }
  .thesis-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .orbit { max-width: 460px; margin-inline: auto; }  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

/* The header collapses at the width its links stop fitting — one number, so there is
   no band of viewports with neither the inline links nor the toggle. */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  /* One panel holding both halves, rather than two separately-positioned boxes. */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    /* Fully opaque, not the translucent nav fill: this panel covers page content,
       and the hero headline showed through the nav's own backdrop blur. */
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px -28px var(--shadow-2);
  }
  .nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    padding: 15px 24px;
    border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-cta { padding: 16px 24px; }
  .nav-cta .btn { width: 100%; }
}

@media (max-width: 780px) {
  :root { --gutter: 20px; }
  /* The section and head spacing used to be set here and never applied: apple.css loads after this sheet and
     declares both unguarded, so its desktop values won at every width. They are tokens there now, varied by the
     same breakpoint, and setting them again here would only recreate the disagreement. */

  /* .grid-3 stopped at two columns and never reached one, so the integrations and security sections held two
     147px columns on a 375px screen — about eighty pixels of text each, for paragraphs of five or six lines. Two
     columns is a layout for labels, not for prose, and these are prose. */
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  /* minmax(0, 1fr) rather than a bare 1fr: the auto floor lets a wide child (the console
     tiles, a long table row) push the column past the viewport. */
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .ticks.two { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .hero { padding-top: 56px; }
.card { padding: 26px 22px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }  .f2 { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; }
  .counters { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }}

/* ==========================================================================
   Reduced motion — every animated affordance on the page, not just the first few
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
.live, .ticker-run { animation: none; }
.card:hover, .btn:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Theme toggle
   ========================================================================== */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.theme-toggle:hover {
  color: var(--signal);
  border-color: var(--signal-dim);
  background: rgba(var(--signal-rgb), .07);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Show the icon for the theme the button would switch *to*, so it reads as an action.
   Both states are defined at token level; only the display flips. */
.ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun  { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: block; }
}
:root[data-theme="dark"] .ico-sun  { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }
:root[data-theme="light"] .ico-sun  { display: block; }
:root[data-theme="light"] .ico-moon { display: none; }

/* SVG gradient stops are themed here rather than being frozen into the markup. */
.g-from { stop-color: var(--signal); stop-opacity: .34; }
.g-to   { stop-color: var(--signal); stop-opacity: 0; }
#coreGlow .g-from { stop-opacity: .28; }
/* ==========================================================================
   Sub-pages: page head, tables, end cap, fill-me blocks
   ========================================================================== */

.pagehead { padding-top: 116px; padding-bottom: 68px; }
.pagehead h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.pagehead .lead { max-width: 62ch; }

.crumb {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 20px;
}
.crumb a { color: var(--mut); }
.crumb a:hover { color: var(--signal); }
.crumb span { margin: 0 8px; }
/* ==========================================================================
   Responsive additions
   ========================================================================== */

@media (max-width: 1040px) {.demo-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }}

@media (max-width: 780px) {  .pagehead { padding-top: 96px; }}

/* ==========================================================================
   Pricing. The switches are native radios inside a fieldset rather than buttons
   with aria-pressed: a radio group already means "exactly one of these", arrow
   keys move within it for free, and the legend names the group to a screen
   reader without an extra label. The input is only visually hidden, never
   display:none, so it stays focusable and the focus ring is drawn on its span.
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.price-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px; margin-bottom: 12px; }
.seg { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.seg legend { float: left; margin-right: 10px; font-size: 14px; color: var(--mut); }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-block; padding: 8px 16px; min-height: 24px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  font-size: 15px; line-height: 1.4; transition: background .2s var(--ease), color .2s var(--ease);
}
.seg input:checked + span { background: var(--action, var(--signal)); border-color: var(--action, var(--signal)); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--link, var(--signal)); outline-offset: 2px; }
.price-hint { text-align: center; color: var(--mut); font-size: 15px; margin: 0 0 32px; }

/* Five plans do not divide into rows of three or four without an orphan, so the wide layout is a six-column track:
   the three smaller plans take two columns each and the two larger take three, filling the second row edge to edge.
   Keyed on position from the end rather than on names, so a sixth plan falls back to plain rows of three. */
.price-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.price-grid > .plan { grid-column: span 2; }
.price-grid > .plan:nth-child(4):nth-last-child(2),
.price-grid > .plan:nth-child(5):nth-last-child(1) { grid-column: span 3; }
.plan {
  display: flex; flex-direction: column; gap: 10px; padding: 32px;
  border-radius: var(--radius-lg); background: var(--alt, var(--panel)); color: var(--fg);
}

/* The card deliberately keeps its neighbours' background. A tint of the accent was the obvious way to set it apart
   and it cost more than it bought: the light theme's --mut sits at 4.66:1 on the plain card ground, so 6% of the
   accent mixed in took the audience and per-month lines to 4.28:1 and under the bar, while being barely visible at
   all. The ring and the flag carry the emphasis, and both are measured. Anything added to this ground has to be
   checked against --mut rather than against --fg, since the muted lines are what run out of contrast first.

   The featured plan. Marked with a ring and a flag rather than by scaling the card: a transform would lift it out of
   the grid's row alignment, blur its text on a non-retina screen, and overlap its neighbours at the width where the
   columns are tightest — all to say something an outline says without moving anything. The ring is drawn with an
   inset shadow instead of a border so the card keeps the exact footprint its unfeatured neighbours have, and the
   row's baselines stay level. */
.plan.is-featured {
  box-shadow: inset 0 0 0 2px var(--signal), 0 18px 40px -28px var(--shadow-2, rgba(0, 0, 0, .5));
}
.plan .plan-flag {
  margin: 0 0 2px; align-self: flex-start;
  padding: 3px 11px; border-radius: 999px;
  background: var(--signal); color: var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* The one filled control on the card is already the accent, so the featured card's call to action would otherwise be
   indistinguishable from its ring. It keeps the accent and gains weight instead. */
.plan.is-featured .btn-primary { font-weight: 700; }

.plan h3 { margin: 0; font-size: 1.4rem; }
.plan .plan-for { margin: 0; color: var(--mut); }
/* Outlined rather than filled: the text keeps the card's own ink, which is already contrast-checked on it, instead of
   a new foreground/background pair nobody measured. */
.plan .plan-badge { margin: 0; align-self: flex-start; padding: 2px 10px; border: 1px solid var(--fg-2); border-radius: 999px; color: var(--fg-2); font-size: 13px; font-weight: 600; }
.plan .plan-price { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.plan .plan-per { margin: 0; color: var(--mut); font-size: 15px; }
.plan .plan-support { margin: 0; font-size: 15px; color: var(--fg-2); }
.plan .plan-hosting { margin: 0; font-size: 14px; color: var(--fg-2); }
.hosting-note { text-align: center; color: var(--fg-2); font-size: 15px; max-width: 640px; margin: -20px auto 32px; }
/* The two kinds of hosting, side by side on a wide screen and stacked on a phone, where two narrow columns of
   sentences would wrap a word to a line. Same panel as the plan cards so they read as part of the price list. */
.hosting-compare { list-style: none; padding: 0; margin: 0 auto 40px; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hosting-card { padding: 24px 28px; border-radius: var(--radius-lg); background: var(--alt, var(--panel)); color: var(--fg); }
.hosting-card h3 { margin: 0 0 10px; font-size: 1.2rem; }
.hosting-card ul { margin: 0; padding-left: 1.2em; color: var(--fg-2); font-size: 15px; display: grid; gap: 6px; }
@media (max-width: 700px) { .hosting-compare { grid-template-columns: 1fr; } }
.plan .plan-setup { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg); }
/* A choice that does not apply to this plan: dashed and muted rather than faded, so the words stay legible and the
   sentence under it says why. */
.seg input:disabled { cursor: not-allowed; }
.seg input:disabled + span { border-style: dashed; color: var(--mut); background: transparent; }
.deploy-set { margin: 0; }
.deploy-set legend { float: none; display: block; margin: 0 0 6px; }
.deploy-why { margin: 0; color: var(--mut); font-size: 14px; }
/* The one-off setup sits under its own rule, apart from the recurring total, so it cannot be read as part of it. */
.quote-setup { border-top: 2px dashed var(--line); padding-top: 10px; }
.quote-setup .setup-head { grid-column: 1 / -1; font-weight: 600; color: var(--fg); }
.plan .plan-trial { margin: 8px 0 0; font-weight: 600; color: var(--signal); }
.plan .btn { margin-top: auto; align-self: flex-start; }

.price-fallback { text-align: center; color: var(--mut); max-width: 640px; margin: 0 auto; }
.price-terms { max-width: 780px; margin: 40px auto 0; color: var(--mut); font-size: 15px; }
.price-terms b { color: var(--fg); }

.addons { max-width: 1080px; margin: 72px auto 0; }
/* Table and total side by side, the total sticky so it stays beside whatever row was just ticked. */
.addons-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.quote {
  position: sticky; top: 96px; padding: 24px; border-radius: var(--radius-lg);
  background: var(--alt, var(--panel)); color: var(--fg); display: flex; flex-direction: column; gap: 12px;
}
.quote h4 { margin: 0; font-size: 1.2rem; }
.quote-lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 0; font-size: 15px; }
.quote-lines dt { color: var(--fg-2); overflow-wrap: anywhere; }
.quote-lines dd { margin: 0; text-align: right; white-space: nowrap; }
.quote-lines .is-sub { color: var(--mut); }
.quote-lines .is-total { font-weight: 700; color: var(--fg); font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 8px; }
.quote-note { margin: 0; color: var(--mut); font-size: 14px; }
.quote .btn { align-self: flex-start; }
.addon-pick { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.addon-pick input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--action, var(--signal)); cursor: pointer; }
.addon-pick input:disabled { cursor: not-allowed; }
.addon-pick input:focus-visible { outline: 3px solid var(--link, var(--signal)); outline-offset: 2px; }
.addons-table tr.is-picked th, .addons-table tr.is-picked td { background: var(--panel); }
.addons-table th .desc { display: block; margin-top: 4px; padding-left: 30px; color: var(--mut); font-size: 14px; font-weight: 400; }
.addons h3 { margin: 0 0 6px; font-size: 1.5rem; }
.addons-lead { color: var(--mut); margin: 0 0 16px; }
.addons .seg { margin-bottom: 16px; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible { outline: 3px solid var(--link, var(--signal)); outline-offset: 2px; }
.addons-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.addons-table th, .addons-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.addons-table thead th { color: var(--mut); font-weight: 600; }
.addons-table .num { text-align: right; white-space: nowrap; }
.addons-table tbody th[colspan] { padding-top: 24px; font-family: var(--font-display); color: var(--fg); border-bottom-color: var(--fg-2); }
.addons-table td .desc { display: block; color: var(--mut); font-size: 14px; }
.addons-table .sub { display: block; color: var(--mut); font-size: 13px; }

@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Repeats the wide rule's selectors so the reset carries the same specificity; a lighter one lost to them and the
     span 3 conjured implicit columns off the side of a phone. */
  .price-grid > .plan,
  .price-grid > .plan:nth-child(4):nth-last-child(2),
  .price-grid > .plan:nth-child(5):nth-last-child(1) { grid-column: auto; }
  /* An odd last card takes the full row rather than sitting alone in half of it. */
  .price-grid > .plan:nth-child(5):nth-last-child(1),
  .price-grid > .plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .addons-layout { grid-template-columns: 1fr; }
  .quote { position: static; }
}
@media (max-width: 900px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-grid > .plan:nth-child(5):nth-last-child(1),
  .price-grid > .plan:last-child:nth-child(odd) { grid-column: auto; }
  .plan { padding: 24px; }
  .addons-table th, .addons-table td { padding: 10px 4px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .seg span { transition: none; } }

/* ---- Offers ----
   A discounted price: the list price struck through and muted, the price paid at full weight, and the percentage off
   in the "ok" green, which already means "good for you" elsewhere on the page. Wrapping is allowed so a card at phone
   width puts the badge under the price rather than pushing the card wider. */
.price-offer { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: inherit; gap: 0.1em 0.45em; }
.price-was { font-size: 0.55em; font-weight: 400; opacity: 0.6; text-decoration-thickness: 1.5px; }
.quote-lines .price-was, .addons-table .price-was { font-size: 0.85em; }
.price-off {
  align-self: center;
  font-family: var(--font-body, inherit); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.15em 0.55em; border-radius: 999px;
  color: var(--ok); background: rgba(var(--ok-rgb), 0.12);
}
.price-off-text, .quote-lines .is-saving { color: var(--ok); font-weight: 600; }
.addons-table .price-off-text { display: block; font-size: 0.75rem; }