/* ==========================================================================
   GlyntIQ — glucose intelligence for diabetes population management.
   Standalone brand system.

   Semantic colour is the product:
     cyan  = in range — the reading, the day, the month is where it should be
     amber = out of range — the thing that needs a human's attention
   Nothing else in the palette competes with those two. Amber is spent
   sparingly, so that when it appears it means something.
   ========================================================================== */

:root {
  --night:       #0A0F26;   /* deep night-indigo ground */
  --night-soft:  #131A3C;
  --ink:         #14183A;   /* text on light */
  --ink-soft:    #232949;
  --paper:       #F7F8FB;
  --surface:     #FFFFFF;
  --line:        #E2E5EF;
  --line-soft:   #EEF0F6;
  --muted:       #5A6178;
  --muted-soft:  #8B91A6;

  /* in-range: electric cyan-teal */
  --range:        #0E7C8F;  /* on light backgrounds */
  --range-soft:   #E4F5F8;
  --range-line:   #B5DFE8;
  --range-bright: #2BD9EE;  /* on dark backgrounds */
  --range-mid:    #57C9DB;
  --range-dim:    #7ADCE9;

  /* out-of-range: warm amber — attention, not decoration */
  --alert:        #A85808;  /* on light backgrounds */
  --alert-soft:   #FDF1E3;
  --alert-line:   #F2D6AE;
  --alert-bright: #F5A83C;  /* on dark backgrounds */

  --display: "Space Grotesk", "Segoe UI", -apple-system, sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 9999px;

  --shell: 1120px;
  --gut: 28px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); }
h3 {
  font-size: 1.2rem;
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.35;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.58;
  color: var(--muted);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--range);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--range);
  flex: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--range); }

.btn__arrow { transition: transform .16s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* The header CTA carries a full and a short label; the short one takes over
   before the full one can wrap. */
.btn__short { display: none; }
@media (max-width: 720px) {
  .btn__full { display: none; }
  .btn__short { display: inline; }
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 20px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__text {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The mark takes its colours from the header, so it inverts with the bar. */
.site-head { --gm-cyan: #19B8CE; --gm-band: rgba(43, 217, 238, .2); }
.gm__band  { fill: var(--gm-band); }
.gm__trace { stroke: var(--gm-cyan); }
.gm__dot   { fill: var(--gm-cyan); }

/* The SOLID light bar is the default — readable on every background even if
   the script never runs. The dark-over-hero treatment is opt-in by script. */
.site-head,
.site-head.is-stuck {
  background: rgba(247, 248, 251, .9);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
.site-head .wordmark { color: var(--ink); }
.site-head .btn--primary { background: var(--ink); color: #fff; border-color: transparent; }
.site-head .btn--primary:hover { background: var(--range); }

/* Sitting above the dark hero the bar matches the hero's night ground, so
   bar and hero read as one continuous dark block. */
.site-head--over-hero:not(.is-stuck) {
  background: var(--night);
  backdrop-filter: none;
  color: #fff;
  border-bottom-color: transparent;
  --gm-cyan: #2BD9EE;
  --gm-band: rgba(43, 217, 238, .18);
}
.site-head--over-hero:not(.is-stuck) .wordmark { color: #fff; }
.site-head--over-hero:not(.is-stuck) .btn--primary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.site-head--over-hero:not(.is-stuck) .btn--primary:hover {
  background: #fff;
  color: var(--night);
  border-color: #fff;
}

/* A quiet link beside the primary CTA. */
.site-head__nav { margin-left: auto; margin-right: 26px; }
.site-head__link {
  font-size: 0.93rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  text-decoration: none;
  color: inherit;
  opacity: .78;
  transition: opacity .16s ease;
}
.site-head__link:hover { opacity: 1; }
@media (max-width: 720px) {
  .site-head__nav { display: none; }
}

/* ==========================================================================
   ICP badge — the first line on the page names who it is for.
   ========================================================================== */

.icpbadge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 1px solid rgba(43, 217, 238, .38);
  border-radius: var(--r-pill);
  background: rgba(43, 217, 238, .08);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.icpbadge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--range-bright);
  flex: none;
  margin: 0 0 0 15px;
  animation: glowpulse 2.4s ease-in-out infinite;
}
@keyframes glowpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43, 217, 238, .55); }
  70%      { box-shadow: 0 0 0 9px rgba(43, 217, 238, 0); }
}

.icpbadge__pre {
  padding: 11px 13px 11px 11px;
  color: var(--range-dim);
}

/* the audience itself, carried in reverse so it reads first */
.icpbadge__main {
  padding: 11px 17px;
  background: var(--range-bright);
  color: #04222A;
  font-weight: 600;
  letter-spacing: 0.075em;
  align-self: stretch;
  display: flex;
  align-items: center;
}

@media (max-width: 720px) {
  .icpbadge {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    border-radius: var(--r-md);
  }
  .icpbadge__pre { padding: 9px 11px 9px 9px; }
  .icpbadge__main { padding: 9px 13px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .icpbadge__dot { animation: none; }
}

/* ==========================================================================
   The journey hero — one dark night band; the rest of the page stays light.
   The rail IS the argument: readings travel through interpretation and
   action to the claim, brightening as they go. The cyan gains strength
   station by station — no rainbow.
   ========================================================================== */

.jhero {
  background: var(--night);
  color: #fff;
  padding: clamp(40px, 5vw, 62px) 0 clamp(104px, 10vw, 150px);
  position: relative;
  overflow: hidden;
}

/* a soft cyan bloom behind the end of the rail */
.jhero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -190px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .13) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}

.jhero .shell { position: relative; z-index: 1; }

.jhero h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
  max-width: 17em;
}
.jhero h1 .accent {
  display: block;
  color: var(--range-bright);
}

.jhero__row {
  display: block;
  margin-bottom: clamp(40px, 5vw, 62px);
}

.jhero__lede {
  font-size: clamp(1.02rem, 1.55vw, 1.15rem);
  line-height: 1.6;
  color: #A6ADC4;
  margin: 0 0 clamp(26px, 3vw, 34px);
  max-width: 62ch;
}
.jhero__lede strong { color: #fff; font-weight: 500; }

.jhero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.jhero .btn--light { background: #fff; color: var(--night); }
.jhero .btn--light:hover { background: var(--range-bright); color: var(--night); }

/* ---------- the rail ---------- */

.rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  position: relative;
}

.rail__node {
  position: relative;
  padding-top: 76px;
  text-align: left;
}

/* the connecting thread, drawn per station so it stops at the last one */
.rail__node::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 58px;
  right: -8px;
  height: 2px;
  background: currentColor;
  opacity: .45;
}
.rail__node:last-child::after { display: none; }

.rail__disc {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #101733;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail__disc svg { width: 23px; height: 23px; }

.rail__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.006em;
  margin-bottom: 3px;
}
.rail__sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.645rem;
  letter-spacing: 0.03em;
  line-height: 1.45;
  color: #7C84A0;
}

/* The cyan gains strength station by station.
   nth-of-type, NOT nth-child: the pulse <span> is .rail's first child. */
.rail__node:nth-of-type(1) { color: #5A6480; }
.rail__node:nth-of-type(2) { color: #40798F; }
.rail__node:nth-of-type(3) { color: #2E93AC; }
.rail__node:nth-of-type(4) { color: #22ABC4; }
.rail__node:nth-of-type(5) { color: #1DC2DA; }
.rail__node:nth-of-type(6) { color: #2BD9EE; }

/* the claim is the arrival — filled, not outlined */
.rail__node--end .rail__disc {
  background: var(--range-bright);
  border-color: var(--range-bright);
  box-shadow: 0 0 0 7px rgba(43, 217, 238, .14);
}
.rail__node--end .rail__disc svg { color: #04222A; }
.rail__node--end .rail__name { color: #8BE9F5; }

/* a pulse travelling reading -> claim */
.rail__pulse {
  position: absolute;
  top: 25px;
  left: 58px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A5F3FC;
  box-shadow: 0 0 12px 3px rgba(165, 243, 252, .6);
  animation: railrun 4.6s cubic-bezier(.55,.1,.4,.9) infinite;
  pointer-events: none;
}
@keyframes railrun {
  0%   { left: 58px;  opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - 34px); opacity: 0; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .rail__node:nth-of-type(3)::after { display: none; }
  .rail__pulse { display: none; }
}

/* Mobile: the rail turns vertical and keeps its thread and its pulse. */
@media (max-width: 760px) {
  .rail {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    margin-top: 4px;
  }

  .rail__node {
    position: relative;
    padding: 0 0 26px 62px;
    text-align: left;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .rail__node:last-child { padding-bottom: 0; }

  .rail__disc {
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
  }
  .rail__disc svg { width: 19px; height: 19px; }

  /* the connector, now vertical — this is the thread */
  .rail__node::after {
    display: block;
    top: 48px;
    bottom: -2px;
    left: 21px;
    right: auto;
    width: 2px;
    height: auto;
    opacity: .5;
  }
  .rail__node:last-child::after { display: none; }

  .rail__name {
    font-size: 1rem;
    margin-bottom: 2px;
    padding-top: 2px;
  }
  .rail__sub { font-size: 0.7rem; }

  /* the pulse travels down the thread instead of across it */
  .rail__pulse {
    display: block;
    top: 0;
    left: 17px;
    width: 8px;
    height: 8px;
    animation: railfall 5s cubic-bezier(.5,.05,.4,.95) infinite;
  }
  @keyframes railfall {
    0%   { top: 22px; opacity: 0; }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: calc(100% - 26px); opacity: 0; }
  }
}

@media (max-width: 620px) {
  .jhero { padding-top: 30px; }
  .jhero h1 { font-size: clamp(2.05rem, 9vw, 2.8rem); }
  .jhero__cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__pulse { display: none !important; }
}

/* ==========================================================================
   Value cards — lift off the page and overlap the dark hero.
   ========================================================================== */

.section { padding: clamp(56px, 7vw, 90px) 0; }
.section--tint {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head { max-width: 44rem; margin-bottom: clamp(34px, 4.5vw, 50px); }
.section__head h2 { margin-bottom: 18px; }

.section--strip {
  background: transparent;
  border-bottom: 0;
  padding: 0 0 clamp(48px, 5.5vw, 70px);
  margin-top: clamp(-88px, -7vw, -60px);
  position: relative;
  z-index: 3;
}

.vstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

.vstrip__cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px 26px;
  box-shadow:
    0 1px 2px rgba(10, 15, 38, .05),
    0 22px 44px -26px rgba(10, 15, 38, .34);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vstrip__cell:hover {
  transform: translateY(-5px);
  border-color: var(--range-line);
  box-shadow:
    0 1px 2px rgba(10, 15, 38, .05),
    0 30px 54px -26px rgba(14, 124, 143, .32);
}

.vstrip__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}

.vstrip__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--range-line);
  background: var(--range-soft);
  color: var(--range);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.vstrip__icon svg { width: 18px; height: 18px; }
.vstrip__cell:hover .vstrip__icon {
  background: var(--range);
  border-color: var(--range);
  color: #fff;
}

.vstrip__k {
  font-family: var(--mono);
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--range);
  display: block;
  line-height: 1.28;
}

.vstrip__v {
  font-size: 0.895rem;
  line-height: 1.52;
  color: var(--muted);
  font-weight: 400;
  display: block;
}

/* a quiet cue that the page continues */
.scrollcue {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.2vw, 40px);
}
.scrollcue span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  animation: cuebob 2.6s ease-in-out infinite;
}
@keyframes cuebob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

@media (max-width: 1000px) {
  .vstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .section--strip { margin-top: -52px; }
  .vstrip { grid-template-columns: 1fr; }
  .vstrip__cell { padding: 20px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue span { animation: none; }
}

/* ==========================================================================
   Devices — one stream. A dark band where the brand motif does the talking:
   four device families emit flowing reading-paths that converge into the
   logo's own band-and-trace, then exit toward the work. No vendor names —
   categories, boldly. The static frame reads on its own; the flow is a
   grace note.
   ========================================================================== */

.dstream {
  background: var(--night);
  color: #fff;
  padding: clamp(58px, 7vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.dstream::after {
  content: "";
  position: absolute;
  right: -160px;
  top: 30%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .12) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}
.dstream .shell { position: relative; z-index: 1; }

.dstream__eyebrow {
  font-family: var(--mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--range-mid);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.dstream__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--range-mid);
  flex: none;
}

.dstream h2 {
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0 0 18px;
}
.dstream h2 em { font-style: normal; color: var(--range-bright); }

.dstream__lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: #A6ADC4;
  margin: 0;
  max-width: 46em;
}

/* ---- the convergence ---- */

.dviz {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(120px, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  margin-top: clamp(34px, 4vw, 48px);
}

.dviz__devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ddev {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "disc name" "disc sub";
  column-gap: 13px;
  row-gap: 1px;
  align-items: center;
  align-content: center;
  min-height: 46px;
}
.ddev__disc {
  grid-area: disc;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(43, 217, 238, .5);
  background: #101733;
  color: var(--range-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ddev__disc svg { width: 21px; height: 21px; }
.ddev__name {
  grid-area: name;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.006em;
  align-self: end;
}
.ddev__sub {
  grid-area: sub;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.03em;
  color: #7C84A0;
  align-self: start;
}

/* The paths must span exactly the input list, so each curve leaves its own
   row. A fixed height silently desynced the moment a fifth and sixth input
   were added — stretching to the grid row (which the input list is the
   tallest member of) keeps them aligned however many inputs there are.
   The viewBox spaces the curves in even fractions to match. */
.dviz__paths { align-self: stretch; position: relative; min-height: 0; }
/* Absolute, so the SVG's own aspect ratio can never drive the cell height —
   the input list stays the thing that decides how tall this row is. */
.dviz__paths svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.dpath {
  stroke: var(--range-bright);
  stroke-width: 1.6;
  opacity: .55;
  stroke-dasharray: 3 9;
  animation: dflow 1.4s linear infinite;
}
@keyframes dflow {
  to { stroke-dashoffset: -12; }
}

/* the arrival: the wordmark's own band, writ large */
.dband {
  border: 1px solid rgba(43, 217, 238, .4);
  border-radius: var(--r-lg);
  background: rgba(43, 217, 238, .08);
  box-shadow: 0 0 0 8px rgba(43, 217, 238, .05), 0 24px 60px -28px rgba(43, 217, 238, .35);
  padding: 18px 22px 14px;
  width: clamp(210px, 22vw, 260px);
}
.dband > svg { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.dband__band { fill: rgba(43, 217, 238, .2); }
.dband__trace { stroke: var(--range-bright); }
.dband__dot { fill: var(--range-bright); }
.dband__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--range-dim);
  text-align: center;
}

.dviz__outs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dviz__outs li {
  position: relative;
  padding-left: 22px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A6ADC4;
}
.dviz__outs li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--range-bright);
}

/* ---- the cellular claim — the boldest honest line on the page ---- */

.dcell {
  margin-top: clamp(36px, 4.4vw, 54px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3.5vw, 56px);
  align-items: center;
}
.dcell__big {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.1vw, 2.3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: #7C84A0;
  margin: 0;
}
.dcell__big strong {
  display: block;
  color: var(--range-bright);
  font-weight: 600;
}
.dcell__why {
  font-size: 0.97rem;
  line-height: 1.6;
  color: #A6ADC4;
  margin: 0;
}

@media (max-width: 880px) {
  .dviz {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }
  /* A grid, not flex-wrap: the input labels are different widths, so wrapping
     scattered six inputs across four ragged rows. Two fixed columns keep it
     a clean 3 x 2 whatever the labels say. */
  .dviz__devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 18px 26px;
    width: 100%;
  }
  .ddev { min-height: 0; grid-template-columns: 38px minmax(0, auto); }
  .ddev__disc { width: 38px; height: 38px; }
  .ddev__disc svg { width: 17px; height: 17px; }
  .ddev__name { font-size: 0.84rem; }

  /* the converge paths become one short falling thread */
  .dviz__paths { align-self: center; height: 44px; width: 2px; margin: 10px 0; }
  .dviz__paths svg { display: none; }
  .dviz__paths::after {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom, var(--range-bright) 0 3px, transparent 3px 9px);
    opacity: .55;
  }

  .dviz__stream { display: flex; flex-direction: column; align-items: center; }
  .dviz__outs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }

  .dcell { grid-template-columns: 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .dpath { animation: none; }
}

/* ==========================================================================
   Manifesto — the systems-that-don't-talk cost framing.
   ========================================================================== */

.manifesto {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 6vw, 80px) 0;
}

.manifesto::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -200px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 124, 143, .07) 0%, rgba(14, 124, 143, 0) 68%);
  pointer-events: none;
}
.manifesto .shell { position: relative; z-index: 1; }

.manifesto__head {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: end;
  max-width: none;
  margin-bottom: 0;
}

.manifesto__head h2 {
  font-size: clamp(2.25rem, 4.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0;
}
.manifesto__head h2 em {
  font-style: normal;
  color: var(--range);
}

.mstat {
  border: 1px solid var(--line);
  border-left: 3px solid var(--range);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(10, 15, 38, .04), 0 18px 38px -26px rgba(10, 15, 38, .22);
}

.mstat__row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 22px);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.mstat__n {
  font-family: var(--display);
  font-size: clamp(3.6rem, 7vw, 5.2rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--range);
  flex: none;
}

.mstat__l {
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.008em;
  color: var(--ink);
}

.mstat__p {
  font-size: 1rem;
  line-height: 1.58;
  color: var(--muted);
  margin: 0;
}
.mstat__p strong { color: var(--alert); font-weight: 600; }

@media (max-width: 940px) {
  .manifesto__head { grid-template-columns: 1fr; align-items: start; }
  .mstat__n { font-size: clamp(3rem, 13vw, 4.2rem); }
}

/* ---- the month, re-divided ----
   A night panel inside the light manifesto, so the clinical colour can
   burn. Each column is ONE contiguous block of time — no gutters — and
   the two columns are the same month shown twice. On reveal, the right
   column starts at today's split and inverts: the bright clinical share
   grows as the dead admin share retreats. That motion is the message.
   Deliberately no numbers anywhere — the note says so out loud. */

.monthviz {
  margin-top: clamp(38px, 4.6vw, 56px);
  background: var(--night);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 46px);
  box-shadow: 0 34px 70px -34px rgba(10, 15, 38, .55);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  color: #fff;
}
.monthviz::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .13) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}
.monthviz > * { position: relative; z-index: 1; }

.monthviz__cols {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 24px);
}

.mcol {
  margin: 0;
  width: clamp(170px, 17vw, 230px);
  display: flex;
  flex-direction: column;
}

/* one continuous block of time — outer corners only */
.mcol__bar {
  display: flex;
  flex-direction: column;
  height: clamp(320px, 30vw, 400px);
  border-radius: 14px;
  overflow: hidden;
}

.mseg {
  flex-grow: var(--g);
  flex-basis: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 16px;
  transition: flex-grow .85s cubic-bezier(.65, .02, .2, 1) .3s;
}
.mseg--care {
  background: var(--range-bright);
  color: #04222A;
  box-shadow: 0 0 34px -2px rgba(43, 217, 238, .45);
}
/* The overhead has to read as a COST, not as emptiness — slate receded into
   the panel and the eye skipped it. Warm-against-cool is the strongest
   contrast pair after light/dark, and amber/cyan survives red-green colour
   blindness, which matters here because comparing these two blocks IS the
   whole message. Amber also already means "needs attention" on this page. */
.mseg--admin {
  background: linear-gradient(180deg, #7C4B12 0%, #5A380F 100%);
  color: #FFD9A0;
  box-shadow: inset 0 0 0 1px rgba(255, 201, 128, .16);
}

.mseg__k {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.55;
}
.mseg__sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  margin-top: 4px;
  opacity: .8;
}

/* the right column starts at today's split, then the month re-divides */
.js-anim .monthviz.reveal:not(.is-in) .mcol--after .mseg--care { flex-grow: 16; }
.js-anim .monthviz.reveal:not(.is-in) .mcol--after .mseg--admin { flex-grow: 84; }

.mcol__cap {
  margin-top: 14px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #7C84A0;
}
.mcol--after .mcol__cap { color: var(--range-bright); }

/* the hinge between the columns — it is ONE month, shown twice */
.monthviz__same {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 clamp(2px, .6vw, 8px);
  margin-bottom: 34px;
}
.monthviz__same-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(43, 217, 238, .12);
  border: 1px solid rgba(43, 217, 238, .4);
  color: var(--range-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.monthviz__same-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7C84A0;
  text-align: center;
  line-height: 1.6;
  max-width: 7em;
}

.monthviz__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--range-mid);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.monthviz__kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--range-mid);
  flex: none;
}
.monthviz__head {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 16px;
}
.monthviz__head em { font-style: normal; color: var(--range-bright); }
.monthviz__point {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.62;
  color: #A6ADC4;
  margin: 0 0 18px;
  max-width: 32em;
}
.monthviz__point strong { color: #fff; font-weight: 600; }
.monthviz__note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #6D7590;
  margin: 0;
}

@media (max-width: 940px) {
  .monthviz { grid-template-columns: 1fr; gap: 30px; }
  .monthviz__cols { justify-content: center; }
  .mcol { width: auto; flex: 1 1 0; max-width: 220px; }
  .mcol__bar { height: 300px; }
}

@media (max-width: 480px) {
  .monthviz__same { display: none; }
  .mseg { padding: 8px 11px; }
  .mseg__k { font-size: 0.62rem; line-height: 1.35; }
  .mseg__sub { font-size: 0.58rem; margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .mseg { transition: none; }
}

/* ==========================================================================
   Capability modules — the five jobs.
   ========================================================================== */

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

.mods--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mods--five > .mod:nth-child(1),
.mods--five > .mod:nth-child(2),
.mods--five > .mod:nth-child(3) { grid-column: span 2; }
.mods--five > .mod:nth-child(4),
.mods--five > .mod:nth-child(5) { grid-column: span 3; }

.mod {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* the number, set large and faint so it reads as texture not content */
.mod::after {
  content: attr(data-n);
  position: absolute;
  top: -26px;
  right: 4px;
  font-family: var(--display);
  font-size: 7.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--range);
  opacity: .06;
  pointer-events: none;
}

.mod::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--range);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .26s ease;
  z-index: 1;
}

.mod:hover {
  border-color: var(--range-line);
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(10, 15, 38, .05), 0 26px 48px -28px rgba(14, 124, 143, .34);
}
.mod:hover::before { transform: scaleY(1); }
.mod:hover::after { opacity: .09; }

.mod__verb {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--range-soft);
  border: 1px solid var(--range-line);
  font-family: var(--mono);
  font-size: 0.645rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--range);
  margin-bottom: 18px;
}

.mod h3 {
  font-family: var(--display);
  font-size: clamp(1.24rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.mod p { color: var(--muted); font-size: 0.955rem; }

.mod__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.89rem;
  color: var(--muted);
}
.mod__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
}
.mod__list li:last-child { margin-bottom: 0; }
.mod__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--range-line);
}

@media (max-width: 940px) {
  .mods { grid-template-columns: 1fr; }
  .mods--five { grid-template-columns: 1fr; }
  .mods--five > .mod { grid-column: auto; }
}

@media (max-width: 620px) {
  .mod::after { font-size: 5.6rem; top: -18px; }
  .mod { padding-left: 22px; padding-right: 22px; }
}

/* ==========================================================================
   The artifact — a product-shaped card used inside modules and sections.
   Here it is the patient-month billing card: cyan month is ready to bill,
   amber month still needs attention while there is time to save it.
   ========================================================================== */

.artifact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: 0 1px 2px rgba(10, 15, 38, .04), 0 12px 30px -14px rgba(10, 15, 38, .14);
}

.artifact__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.artifact__title {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.artifact__meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted-soft);
  letter-spacing: 0.04em;
}

.artifact__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.695rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* the artifact when nested inside a capability module */
.mod .artifact {
  margin-top: 20px;
  box-shadow: none;
  padding: 16px 16px 12px;
  background: var(--paper);
}
.mod .artifact__head { margin-bottom: 14px; padding-bottom: 11px; }
.mod .artifact__foot { margin-top: 12px; padding-top: 11px; }

/* ---------- month rows inside the artifact ---------- */

.gate { display: flex; flex-direction: column; gap: 14px; }
.mod .gate { gap: 10px; }

.gate__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  grid-template-areas:
    "who checks"
    "who verdict";
  gap: 4px 16px;
  padding: 16px 16px 15px;
  border: 1px solid var(--range-line);
  border-left: 3px solid var(--range);
  border-radius: var(--r-md);
  background: var(--range-soft);
}
.mod .gate__row { padding: 13px 13px 12px; }
.gate__row--warn {
  border-color: var(--alert-line);
  border-left-color: var(--alert);
  background: var(--alert-soft);
}

.gate__who {
  grid-area: who;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-right: 15px;
  border-right: 1px solid var(--range-line);
  align-self: center;
}
.gate__row--warn .gate__who { border-right-color: var(--alert-line); }

.gate__initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--range);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate__initials--warn { background: var(--alert); }

.gate__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.gate__checks {
  grid-area: checks;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chk {
  font-family: var(--mono);
  font-size: 0.685rem;
  letter-spacing: 0.01em;
  padding: 4px 9px 4px 21px;
  border-radius: var(--r-pill);
  background: #fff;
  position: relative;
  white-space: nowrap;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chk::before {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  line-height: 1;
}
.chk--ok { border-color: var(--range-line); }
.chk--ok::before { content: "✓"; color: var(--range); }
.chk--warn { border-color: var(--alert-line); color: var(--alert); }
.chk--warn::before { content: "!"; color: var(--alert); font-weight: 700; }

.gate__verdict {
  grid-area: verdict;
  margin: 0;
  font-family: var(--body);
  font-size: 0.855rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gate__verdict--go { color: var(--range); }
.gate__verdict--warn { color: var(--alert); }

@media (max-width: 400px) {
  .gate__row {
    grid-template-columns: 1fr;
    grid-template-areas: "who" "checks" "verdict";
    gap: 10px;
  }
  .gate__who {
    flex-direction: row;
    align-items: center;
    border-right: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   Human-decides bar.
   ========================================================================== */

.humanbar {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border: 1px solid var(--range-line);
  background: var(--range-soft);
  border-radius: var(--r-md);
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.humanbar__tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--range);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  flex: none;
}
.humanbar strong { font-weight: 600; }

@media (max-width: 620px) {
  .humanbar { padding: 14px 18px; font-size: 0.88rem; }
}

/* ==========================================================================
   AI agents band — dark, with a live badge.
   ========================================================================== */

.aband {
  background: var(--night);
  color: #fff;
  padding: clamp(58px, 7vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.aband::after {
  content: "";
  position: absolute;
  right: -180px;
  top: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .11) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}
.aband .shell { position: relative; z-index: 1; }

.aibadge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(43, 217, 238, .1);
  border: 1px solid rgba(43, 217, 238, .4);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--range-dim);
  margin-bottom: 26px;
}
.aibadge__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--range-bright);
  flex: none;
  animation: glowpulse 2.4s ease-in-out infinite;
}
.aibadge__sep { color: rgba(122, 220, 233, .45); }

.aband h2 {
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0 0 20px;
  max-width: 20em;
}
.aband h2 em { font-style: normal; color: var(--range-bright); }

.aband__lede {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: #A6ADC4;
  margin: 0;
  max-width: 42em;
}

.aband .acols { margin-top: clamp(32px, 3.8vw, 44px); }

.acols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.acol {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .03);
  padding: 26px 26px 28px;
}
.acol__tag {
  font-family: var(--mono);
  font-size: 0.655rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--range-mid);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.acol__tag::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--range-mid);
  flex: none;
}
.acol h3 { font-size: 1.16rem; margin-bottom: 16px; color: #fff; }

.acol ul { list-style: none; margin: 0; padding: 0; }
.acol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: #A6ADC4;
}
.acol li:last-child { margin-bottom: 0; }
.acol li b { color: #fff; font-weight: 600; }
.acol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(43, 217, 238, .45);
  background: transparent;
}
.acol li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--range-bright);
}

.aband .humanbar {
  background: rgba(43, 217, 238, .07);
  border-color: rgba(43, 217, 238, .3);
  color: #A6ADC4;
}
.aband .humanbar strong { color: #fff; }
.aband .humanbar__tag { background: var(--range-bright); color: #04222A; }

@media (max-width: 940px) {
  .acols { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .aibadge { font-size: 0.65rem; letter-spacing: 0.12em; padding: 8px 14px 8px 12px; }
  .aibadge__sep, .aibadge__tail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aibadge__dot { animation: none; }
}

/* ==========================================================================
   The differentiator — coaching, not charts.
   Two panels: the chart a team is usually handed, and what GlyntIQ hands
   them instead. The raw panel is deliberately mute; the coaching panel is
   the only place on the light page where the product speaks in sentences.
   ========================================================================== */

.vsgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.12fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.vsdisc {
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex: none;
  justify-self: center;
}

.rawpanel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
}
.rawpanel__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: block;
  margin-bottom: 14px;
}
.rawpanel__chart {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px 12px 10px;
  margin-bottom: 12px;
}
.rawpanel__chart svg { display: block; width: 100%; height: auto; }
.rawpanel__cap {
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--muted-soft);
  margin: 0;
}

.coachpanel {
  border: 1px solid var(--range-line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 20px 18px;
  box-shadow: 0 1px 2px rgba(10, 15, 38, .04), 0 22px 44px -26px rgba(14, 124, 143, .3);
}
.coachpanel__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--range);
  display: block;
  margin-bottom: 14px;
}

.insight {
  border: 1px solid var(--line);
  border-left: 3px solid var(--range);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 14px 16px 13px;
  margin-bottom: 10px;
}
.insight--alert { border-left-color: var(--alert); }
.insight:last-of-type { margin-bottom: 0; }

.insight__k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--range);
  margin-bottom: 7px;
}
.insight--alert .insight__k { color: var(--alert); }
.insight__k i {
  font-style: normal;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--range);
  flex: none;
}
.insight--alert .insight__k i { background: var(--alert); }

.insight__p {
  font-size: 0.885rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.insight__p b { font-weight: 600; }

.coachpanel__foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.665rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.mealnote {
  margin-top: clamp(26px, 3vw, 34px);
  padding: 20px 24px;
  border: 1px solid var(--range-line);
  border-left: 3px solid var(--range);
  background: var(--range-soft);
  border-radius: var(--r-md);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mealnote strong { color: var(--ink); font-weight: 600; }

@media (max-width: 880px) {
  .vsgrid { grid-template-columns: 1fr; }
  .vsdisc { margin: -2px 0; }
}

/* ==========================================================================
   Patients — engagement is the other half of the billable month.
   The visual is an SMS thread ON PURPOSE: no app to install.
   ========================================================================== */

.pts { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.pts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.pts h2 em { font-style: normal; color: var(--range); }

.pts__points { list-style: none; margin: 26px 0 0; padding: 0; }
.pts__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted);
}
.pts__points li b { color: var(--ink); font-weight: 600; }
.pts__points li::before {
  content: "";
  position: absolute; left: 0; top: 0.46em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--range-line); background: var(--paper);
}
.pts__points li::after {
  content: "";
  position: absolute; left: 4.5px; top: 0.75em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--range);
}

.pts__bottom {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--range);
  background: var(--range-soft);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--ink-soft);
}
.pts__bottom strong { color: var(--ink); font-weight: 600; }

/* ---- the phone thread ---- */

.phone {
  background: var(--night);
  border-radius: 22px;
  padding: 20px 18px 16px;
  color: #fff;
  box-shadow: 0 24px 50px -26px rgba(10, 15, 38, .5);
  max-width: 420px;
  justify-self: center;
  width: 100%;
}
.phone__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}
.phone__who {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.phone__meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: #7C84A0;
}

.msg {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.msg--out {
  background: rgba(43, 217, 238, .13);
  border: 1px solid rgba(43, 217, 238, .3);
  color: #D8F6FA;
  border-bottom-left-radius: 5px;
}
.msg--in {
  background: rgba(255, 255, 255, .1);
  color: #E6E9F2;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.phone__route {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: rgba(245, 168, 60, .1);
  border: 1px solid rgba(245, 168, 60, .35);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: #F6CD92;
}
.phone__route i {
  font-style: normal;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--alert-bright); flex: none;
}

.phone__foot {
  margin-top: 12px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: 0.615rem;
  letter-spacing: 0.05em;
  color: #6D7590;
}

@media (max-width: 940px) {
  .pts__grid { grid-template-columns: 1fr; }
  .phone { justify-self: start; }
}

/* ==========================================================================
   Virtual visits — the deck's telemedicine scene, in GlyntIQ's clothes.
   A dark band: the call window is the hero (real faces, active-speaker
   ring, nameplates on the tiles), the ambient-scribe strip sits inside it
   in its own deeper teal with a live waveform, and the chips are the
   receipts. The four beats ride a filled-icon rail on the right.
   ========================================================================== */

.visits {
  background: var(--night);
  color: #fff;
  padding: clamp(58px, 7vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.visits::after {
  content: "";
  position: absolute;
  left: -180px;
  bottom: -200px;
  width: 660px;
  height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .1) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}
.visits .shell { position: relative; z-index: 1; }

.visits__head { margin-bottom: clamp(30px, 3.6vw, 42px); }

.visits__eyebrow {
  font-family: var(--mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--range-mid);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.visits__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--range-mid);
  flex: none;
}

.visits h2 {
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0;
}
.visits h2 em { font-style: normal; color: var(--range-bright); }

.visits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ---- the showpiece — the visit panel, framed on night ---- */

.vshow {
  margin: 0;
  background: #101733;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-lg);
  padding: clamp(10px, 1.2vw, 16px);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, .65);
}
.vshow img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.vshow__foot {
  margin: 11px 6px 2px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: #6D7590;
}

/* ---- the four beats, filled-icon rail ---- */

.vrail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}
.vrail li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.vrail__disc {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--range-bright);
  color: #04222A;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(43, 217, 238, .12);
}
.vrail__disc svg { width: 21px; height: 21px; }
.vrail h3 {
  font-family: var(--body);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
  color: #fff;
  margin: 3px 0 6px;
}
.vrail p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #A6ADC4;
  margin: 0;
}

.visits .humanbar {
  background: rgba(43, 217, 238, .07);
  border-color: rgba(43, 217, 238, .3);
  color: #A6ADC4;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.visits .humanbar strong { color: #fff; }
.visits .humanbar__tag { background: var(--range-bright); color: #04222A; }

@media (max-width: 940px) {
  .visits__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Programs — the payer-contract layer. The card is the same visual language
   as the patient-month artifact, one level up: a program's month rolls up to
   enrolled / billable / one-short, and the one amber row is the pitch — a
   patient one requirement short, surfaced while there is still month left.
   ========================================================================== */

.prog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.prog h2 em { font-style: normal; color: var(--range); }

.prog__points { list-style: none; margin: 26px 0 0; padding: 0; }
.prog__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--muted);
}
.prog__points li b { color: var(--ink); font-weight: 600; }
.prog__points li::before {
  content: "";
  position: absolute; left: 0; top: 0.46em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--range-line); background: var(--paper);
}
.prog__points li::after {
  content: "";
  position: absolute; left: 4.5px; top: 0.75em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--range);
}

.prog__bottom {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 3px solid var(--range);
  background: var(--range-soft);
  border-radius: var(--r-md);
  font-size: 0.98rem;
  line-height: 1.58;
  color: var(--ink-soft);
}
.prog__bottom strong { color: var(--ink); font-weight: 600; }

/* ---- the program-month card ---- */

.progcard {
  max-width: 480px;
  width: 100%;
  justify-self: center;
}

/* the payer contract is the anchor of the card — it gets the band, not a pill */
.progcard__payer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 16px 13px;
  margin: 0 0 12px;
  border: 1px solid var(--range-line);
  border-left: 3px solid var(--range);
  border-radius: var(--r-md);
  background: var(--range-soft);
}
.progcard__payer-k {
  font-family: var(--mono);
  font-size: 0.615rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--range);
}
.progcard__payer-name {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
}
.progcard__payer-meta {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* one design, several contracts — the quiet pills behind the anchor */
.progtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}
.progtabs__k {
  font-family: var(--mono);
  font-size: 0.595rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-right: 3px;
}
.progtab {
  font-family: var(--mono);
  font-size: 0.615rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted-soft);
}
/* the month roll-up: enrolled is neutral, billable is in range,
   one-short is the only amber on the card */
.proll {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.proll__chip {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 13px 8px 11px;
  text-align: center;
}
.proll__chip--ok { border-color: var(--range-line); background: var(--range-soft); }
.proll__chip--warn { border-color: var(--alert-line); background: var(--alert-soft); }
.proll__n {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.proll__chip--ok .proll__n { color: var(--range); }
.proll__chip--warn .proll__n { color: var(--alert); }
.proll__l {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.595rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.progcard__cue {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--alert);
  margin: 0 0 9px;
}
.progcard__cue::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--alert-bright);
  flex: none;
}

/* the closing beat — the payer door, said once, full width */
.prog__door {
  margin-top: clamp(26px, 3vw, 34px);
  padding: 20px 24px;
  border: 1px solid var(--range-line);
  border-left: 3px solid var(--range);
  background: var(--paper);
  border-radius: var(--r-md);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}
.prog__door strong { color: var(--ink); font-weight: 600; }

@media (max-width: 940px) {
  .prog__grid { grid-template-columns: 1fr; }
  .progcard { justify-self: start; }
}

/* ==========================================================================
   Bottom line — the money message, in its own dark band.
   Direction glyphs, no invented percentages: the mechanism is the claim.
   ========================================================================== */

.bline {
  background: var(--night);
  color: #fff;
  padding: clamp(56px, 6.5vw, 86px) 0;
  position: relative;
  overflow: hidden;
}
.bline::after {
  content: "";
  position: absolute;
  left: -160px;
  top: -200px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 217, 238, .12) 0%, rgba(43, 217, 238, 0) 68%);
  pointer-events: none;
}
.bline .shell { position: relative; z-index: 1; }

.bline__head {
  max-width: 40rem;
  margin-bottom: clamp(36px, 4.4vw, 52px);
}
.bline__eyebrow {
  font-family: var(--mono);
  font-size: 0.715rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--range-mid);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.bline__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--range-mid);
  flex: none;
}
.bline h2 {
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  margin: 0;
}
.bline h2 em { font-style: normal; color: var(--range-bright); }

.blist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

.bitem {
  padding: 28px 26px 30px 0;
  border-right: 1px solid rgba(255,255,255,.14);
  position: relative;
}
.bitem:last-child { border-right: 0; padding-right: 0; }
.bitem:not(:first-child) { padding-left: 26px; }

.bitem__dir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.645rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #7C84A0;
  margin-bottom: 18px;
}
.bitem__arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(43, 217, 238, .12);
  border: 1px solid rgba(43, 217, 238, .36);
  color: var(--range-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: none;
}

.bitem h3 {
  font-family: var(--display);
  font-size: clamp(1.16rem, 1.85vw, 1.42rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #fff;
  margin-bottom: 11px;
}
.bitem p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #A6ADC4;
  margin: 0;
}

.bline__foot {
  margin-top: clamp(30px, 3.4vw, 42px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 0.97rem;
  line-height: 1.6;
  color: #A6ADC4;
  max-width: 46em;
}
.bline__foot strong { color: #fff; font-weight: 550; }

@media (max-width: 940px) {
  .blist { grid-template-columns: 1fr 1fr; }
  .bitem { border-bottom: 1px solid rgba(255,255,255,.14); }
  .bitem:nth-child(2n) { border-right: 0; padding-right: 0; }
  .bitem:nth-child(2n+1) { padding-left: 0; padding-right: 26px; }
  .bitem:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 560px) {
  .blist { grid-template-columns: 1fr; }
  .bitem,
  .bitem:nth-child(2n),
  .bitem:nth-child(2n+1) {
    padding: 24px 0 26px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .bitem:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Contact — the walkthrough request, wired to HubSpot.
   Custom-styled and submitted through the Forms API so the brand survives.
   ========================================================================== */

.contact { padding: clamp(60px, 7.5vw, 100px) 0; }

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.contact__pitch h2 { margin-bottom: 18px; }
.contact__pitch .lede { margin-bottom: 26px; }

.contact__points {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.contact__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.contact__points li:last-child { margin-bottom: 0; }
.contact__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2.5px solid var(--range);
}

.contact__alt {
  margin-top: 26px;
  font-size: 0.92rem;
  color: var(--muted);
}
.contact__alt a { color: var(--range); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the form card ---------- */

.cform {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 1px 2px rgba(10, 15, 38, .04), 0 18px 40px -22px rgba(10, 15, 38, .18);
}

.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cform__field { margin-bottom: 16px; }
.cform__field--last { margin-bottom: 22px; }

.cform__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.cform__label span { color: var(--muted-soft); text-transform: none; letter-spacing: 0; }

.cform__input {
  width: 100%;
  font-family: var(--body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.cform__input::placeholder { color: var(--muted-soft); }
.cform__input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--range);
  box-shadow: 0 0 0 3px rgba(14, 124, 143, .13);
}
.cform__input:user-invalid {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(168, 88, 8, .11);
}

textarea.cform__input { resize: vertical; min-height: 84px; line-height: 1.5; }

.cform__submit { width: 100%; justify-content: center; }
.cform__submit[disabled] { opacity: .6; cursor: progress; }

.cform__note {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted-soft);
  text-align: center;
}

/* ---------- states ---------- */

.cform__msg {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.5;
}
.cform__msg a { color: inherit; font-weight: 600; }
.cform__msg--error {
  background: var(--alert-soft);
  border: 1px solid var(--alert-line);
  color: var(--alert);
}

.cform__done {
  text-align: center;
  padding: 18px 4px 6px;
}
.cform__done__mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--range);
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cform__done h3 { margin-bottom: 10px; font-size: 1.2rem; }
.cform__done p { color: var(--muted); font-size: 0.95rem; }

/* inline field error, shown on blur rather than after a failed submit */
.cform__fielderr {
  margin: 8px 0 0;
  font-size: 0.845rem;
  line-height: 1.45;
  color: var(--alert);
}
.cform__fielderr a { color: inherit; font-weight: 600; }
.cform__input[aria-invalid="true"] {
  border-color: var(--alert);
  box-shadow: 0 0 0 3px rgba(168, 88, 8, .11);
}

@media (max-width: 940px) {
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .cform__row .cform__field { margin-bottom: 16px; }
}

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  background: var(--paper);
}
.site-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.87rem;
  color: var(--muted-soft);
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
.site-foot__what { max-width: 62ch; line-height: 1.55; }

/* ---------- 404 ---------- */

.oops {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0;
}
.oops__code {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--range);
  margin-bottom: 18px;
}
.oops h1 { margin-bottom: 16px; }
.oops .lede { max-width: 30rem; margin: 0 auto 30px; }

/* ---------- reveal (progressive enhancement) ---------- */

/* Visible by default. The script opts into the animation by setting
   .js-anim on <html>, so content can never be stranded at opacity 0. */
.js-anim .reveal { opacity: 0; transform: translateY(14px); }
.js-anim .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- responsive base ---------- */

@media (max-width: 620px) {
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .site-head__row { height: 66px; }
  .site-head__row .btn { padding: 10px 16px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
 * "payer" — the word the whole section turns on
 * A hand-drawn ring, because payer is the operator's growth door: a new payer
 * program should be a design session, not a software project. The ring reads
 * as someone circling the word on a printout, which is louder than colour
 * alone and keeps the headline on two lines (a highlight block pushed it to
 * three). It draws itself when the section arrives.
 * ------------------------------------------------------------------------ */
.pword {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.pword__t { position: relative; z-index: 2; }
/* An <svg> sizes from its own aspect ratio, so left/right/top/bottom offsets
   alone leave it at the word's intrinsic box. The dimensions have to be
   stated explicitly for the ring to actually enclose the word. */
.pword__ring {
  position: absolute;
  left: -0.34em;
  top: -0.22em;
  width: calc(100% + 0.68em);
  height: calc(100% + 0.54em);
  max-width: none;   /* the global img/svg reset would clamp it to the word */
  overflow: visible;
  color: #E8940C;
  z-index: 1;
  pointer-events: none;
}
.pword__ring path {
  stroke-dasharray: 540;
  stroke-dashoffset: 0;
}
/* Opt-in animation only: with no JS, or reduced motion, the ring is simply
   drawn. It must never be able to sit permanently half-drawn. */
.js-anim .prog .reveal:not(.is-in) .pword__ring path { stroke-dashoffset: 540; }
.js-anim .prog .reveal .pword__ring path {
  transition: stroke-dashoffset 0.9s cubic-bezier(.65, .02, .2, 1) 0.35s;
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .prog .reveal:not(.is-in) .pword__ring path { stroke-dashoffset: 0; }
  .js-anim .prog .reveal .pword__ring path { transition: none; }
}
@media (max-width: 640px) {
  .pword__ring { left: -0.22em; right: -0.22em; }
  .pword__ring path { stroke-width: 5; }
}