:root {
  /* --- colour · brand §09.1 ------------------------------------------- */
  --color-ground:           #F2F3F1;
  --color-surface:          #FAFBFA;
  --color-plate:            #FFFFFF;
  --color-ground-inverse:   #10241B;
  --color-surface-inverse:  #17372A;

  --color-text:             #10241B;
  --color-text-secondary:   #41544A;
  --color-text-tertiary:    #5C6E64;
  --color-text-inverse:     #EDF2EE;
  --color-text-inverse-2:   #A9BBB0;

  --color-accent:           #0E6B45;
  --color-accent-hover:     #0A5637;
  --color-accent-pressed:   #08432B;
  --color-accent-border:    #3F8E67;
  --color-accent-tint:      #DCEFE5;
  --color-accent-tint-soft: #F1F8F4;
  --color-accent-tint-mid:  #BCDFCE;   /* G-200, fills only */
  --color-accent-inverse:   #7BE0AE;
  --color-accent-inverse-h: #9AEBC3;
  --color-accent-inverse-p: #5FCE95;

  --color-rule:             #DCE1DD;
  --color-grid:             #E3E8E4;
  --color-rule-inverse:     #2C4438;
  --color-border:           #77857C;
  --color-border-inverse:   #62796D;
  --color-disabled-fill:    #E8EAE8;
  --color-disabled-text:    #667169;

  --color-error:            #A32B22;
  --color-warning:          #8A5410;

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --display-size: 60px;   --display-lh: 64px;
  --h1-size:      40px;   --h1-lh:      44px;
  --h2-size:      36px;   --h2-lh:      42px;
  --h3-size:      20px;   --h3-lh:      28px;
  --body-size:    18px;   --body-lh:    30px;
  --body-sm-size: 15.5px; --body-sm-lh: 25px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space-9: 96px; --space-10: 144px;

  --grid-module:  24px;
  --line-figure:  1.7px;
  --line-measure: 1.2px;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-none: 0;

  --motion-micro:  120ms;
  --motion-state:  220ms;
  --motion-figure: 420ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);

  --page-max:    1600px;
  --gutter:      clamp(20px, 4vw, 64px);
  --measure:     62ch;
  --header-h:    76px;
  --section-pad: var(--space-10);

  --shadow-sm:   0 1px 2px rgba(16, 36, 27, 0.04), 0 4px 12px rgba(16, 36, 27, 0.05);
  --shadow-md:   0 1px 2px rgba(16, 36, 27, 0.05), 0 10px 28px rgba(16, 36, 27, 0.07);
  --shadow-lg:   0 2px 4px rgba(16, 36, 27, 0.06), 0 20px 48px rgba(16, 36, 27, 0.10);
  --shadow-forest: 0 2px 6px rgba(16, 36, 27, 0.18), 0 24px 56px rgba(16, 36, 27, 0.22);
}

@media (max-width: 1279px) {
  :root { --display-size: 48px; --display-lh: 53px; --h2-size: 32px; --h2-lh: 38px; }
}
@media (max-width: 1023px) {
  :root { --display-size: 42px; --display-lh: 46px; --h1-size: 32px; --h1-lh: 38px;
          --h2-size: 28px; --h2-lh: 34px; }
}
@media (max-width: 599px) {
  :root {
    --display-size: 34px; --display-lh: 39px;
    --h1-size: 28px; --h1-lh: 33px;
    --h2-size: 25px; --h2-lh: 31px;
    --h3-size: 18px; --h3-lh: 26px;
    --body-size: 16px; --body-lh: 27px;    /* never below 14px */
    --header-h: 66px;
    --section-pad: var(--space-9);
  }
}

/* ===========================================================================
   BASE
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.t-display { font-weight: 700; font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: -0.03em; }
.t-h1      { font-weight: 700; font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: -0.026em; }
.t-h2      { font-weight: 700; font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: -0.026em; }
.t-h3      { font-weight: 600; font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: -0.015em; }
.t-body    { font-size: var(--body-size); line-height: var(--body-lh); }
.t-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.t-label   { font-weight: 600; font-size: 12.5px; line-height: 17px; }
.t-data    { font-family: var(--font-mono); font-weight: 400; font-size: 12.5px; line-height: 18px; }

.accent-word {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.70em;
  letter-spacing: 0.02em; color: var(--color-accent); white-space: nowrap;
}

.measure   { max-width: var(--measure); }
.secondary { color: var(--color-text-secondary); }
.center    { text-align: center; margin-inline: auto; }

a { color: var(--color-accent); }
.prose a:not(.btn):not(.channel), a.link {
  color: var(--color-accent); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.channel):hover, a.link:hover { color: var(--color-accent-hover); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.on-forest :focus-visible { outline-color: var(--color-accent-inverse); }

/* ===========================================================================
   LAYOUT — full-bleed with a gutter, per the client review
   =========================================================================== */
.bleed {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-pad); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.section:focus { outline: none; }

.eyebrow {
  display: inline-block; font-family: var(--font-mono); font-weight: 500;
  font-size: 11.5px; line-height: 1; letter-spacing: 0.12em;
  color: var(--color-accent); text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.section-head { margin-bottom: var(--space-8); }
.section-head p { margin-top: var(--space-4); color: var(--color-text-secondary); max-width: var(--measure); }
.section-head.center p { margin-inline: auto; }

/* ===========================================================================
   BUTTONS — brand §09.2. Solid primary, outline secondary. No shadow.
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-weight: 600; font-size: 15.5px; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background-color var(--motion-micro) var(--ease-out),
              color var(--motion-micro) var(--ease-out),
              border-color var(--motion-micro) var(--ease-out);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--primary { background: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); }

.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-text); color: var(--color-ground); border-color: var(--color-text); }
.btn--secondary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); color: var(--color-ground); }

.on-forest .btn--primary { background: var(--color-accent-inverse); color: var(--color-ground-inverse); border-color: var(--color-accent-inverse); }
.on-forest .btn--primary:hover, .on-forest .btn--primary:focus-visible { background: var(--color-accent-inverse-h); border-color: var(--color-accent-inverse-h); }
.on-forest .btn--secondary { color: var(--color-text-inverse); border-color: var(--color-border-inverse); }
.on-forest .btn--secondary:hover, .on-forest .btn--secondary:focus-visible { background: var(--color-text-inverse); color: var(--color-ground-inverse); border-color: var(--color-text-inverse); }

.btn--sm { min-height: 44px; padding: 0 var(--space-5); font-size: 15px; }

.skip { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 200; transform: translateY(-250%); }
.skip:focus { transform: none; }

/* ===========================================================================
   HEADER — full-bleed, page-ground colour, and no rule at any scroll
   position.
   =========================================================================== */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-ground);
  border: none; box-shadow: none;
}
.header__inner {
  height: var(--header-h);
  display: grid; align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.header__logo { display: inline-flex; align-items: center; justify-self: start; }
.header__logo img { height: 23px; width: auto; display: block; }

.header__nav { display: none; justify-self: center; }
@media (min-width: 1024px) { .header__nav { display: flex; gap: var(--space-7); align-items: center; } }
.header__nav a {
  position: relative; font-size: 15.5px; font-weight: 400;
  color: var(--color-text); text-decoration: none; padding: var(--space-2) 0;
}
.header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--color-text); opacity: 0;
}
.header__nav a[aria-current="true"] { font-weight: 600; }
.header__nav a[aria-current="true"]::after { opacity: 1; }
.header__nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.header__end { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.header__menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: none; cursor: pointer;
  color: var(--color-text); padding: 0;
}
@media (min-width: 1024px) { .header__menu-btn { display: none; } }
.btn__long { display: inline; }
.btn__short { display: none; }
@media (max-width: 479px) { .btn__long { display: none; } .btn__short { display: inline; } }

.menu {
  display: none; background: var(--color-ground);
  padding: var(--space-2) var(--gutter) var(--space-6);
}
.menu[data-open="true"] { display: block; }
@media (min-width: 1024px) { .menu { display: none !important; } }
.menu a {
  display: flex; align-items: center; min-height: 50px;
  font-size: 17px; color: var(--color-text); text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
}
.menu a[aria-current="true"] { font-weight: 600; }

/* ===========================================================================
   CARDS — the page's main structural unit this round.
   =========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.card--lift { transition: transform var(--motion-state) var(--ease-out), box-shadow var(--motion-state) var(--ease-out); }
.card--lift:hover, .card--lift:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px)  { .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===========================================================================
   FIGURE PLATE
   =========================================================================== */
.plate {
  background: var(--color-plate);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  background-image:
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-module) var(--grid-module);
  background-position: 11px 11px;
}
@media (max-width: 599px) { .plate { padding: var(--space-5); } }
.plate svg { display: block; width: 100%; height: auto; }
.plate__marker {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 11px; letter-spacing: 0.10em; color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
/* Narrow redraws. These selectors must out-specify `.plate svg` and
   `.hero__art svg`, or the block rule wins and both variants render. */
.plate svg.fig-wide, .hero__art svg.fig-wide { display: block; }
.plate svg.fig-narrow, .hero__art svg.fig-narrow { display: none; }
@media (max-width: 767px) {
  .plate svg.fig-wide, .hero__art svg.fig-wide { display: none; }
  .plate svg.fig-narrow, .hero__art svg.fig-narrow { display: block; }
}

/* ===========================================================================
   §1 HERO
   =========================================================================== */
.hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-6); }
.hero__slant {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--color-ground-inverse);
  clip-path: polygon(0 0, 100% 0, 100% 24%, 0 100%);
}
@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 36%, 0 100%); } }

.hero .bleed { position: relative; z-index: 1; }
.hero__copy { text-align: center; max-width: 940px; margin-inline: auto; }
.hero h1 { margin-bottom: var(--space-5); }
.hero__lede { max-width: 62ch; margin-inline: auto; color: var(--color-text-inverse-2); }
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--space-7); }
@media (max-width: 479px) { .hero__actions .btn { width: 100%; } }
.hero__fig { margin-top: var(--space-8); }

/* the eyebrow chip the client asked to keep */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: 999px; box-shadow: var(--shadow-sm);
  padding: 7px var(--space-4); margin-bottom: var(--space-6);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin-top: var(--space-7); min-height: 44px;
  color: var(--color-text-secondary); text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.scroll-cue:hover { color: var(--color-text); }
.scroll-cue svg { width: 22px; height: 22px; animation: nudge 1.8s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); opacity: .75; }
  30%           { transform: translateY(6px); opacity: 1; }
}

/* ===========================================================================
   §2 WHAT YOU GET — figure left, listed points right (client reference)
   =========================================================================== */
.split {
  display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); }
  .split__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.points { margin-top: var(--space-7); display: grid; gap: var(--space-5); }
.point { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.point__tile {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--color-accent-tint-soft);
  border: 1px solid var(--color-rule);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--color-accent);
}
.point h3 { margin-bottom: 2px; }
.point p { color: var(--color-text-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }

/* ===========================================================================
   §3 HOW IT WORKS — a roadmap, split into what you do and what we do
   =========================================================================== */
.lanes { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-7); }
@media (min-width: 768px) { .lanes { grid-template-columns: 2fr 3fr; gap: var(--space-6); } }
.lane {
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-rule); background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.lane--you { background: var(--color-accent-tint-soft); border-color: var(--color-accent-border); }
.lane__count { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent); letter-spacing: .08em; }
.lane h3 { margin-top: var(--space-1); }
.lane p { color: var(--color-text-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); margin-top: var(--space-2); }

.road { position: relative; margin-top: var(--space-8); }
.road__track {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .road__track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
  /* the road itself */
  .road::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 27px;
    height: 2px; background: var(--color-rule);
  }
  .road::after {
    content: ""; position: absolute; left: 10%; top: 27px; height: 2px;
    width: 32%; background: var(--color-accent);
  }
}
.stop { position: relative; text-align: left; }
@media (min-width: 900px) { .stop { text-align: center; } }

.stop__btn {
  display: flex; align-items: center; gap: var(--space-4);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; width: 100%; min-height: 44px;
}
@media (min-width: 900px) { .stop__btn { flex-direction: column; gap: var(--space-3); text-align: center; } }
.stop__dot {
  width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--color-plate); border: 2px solid var(--color-rule);
  font-family: var(--font-mono); font-size: 15px; color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-state) var(--ease-out),
              border-color var(--motion-micro) var(--ease-out),
              background-color var(--motion-micro) var(--ease-out);
}
.stop--you .stop__dot { border-color: var(--color-accent); color: var(--color-accent); }
.stop__btn:hover .stop__dot, .stop__btn:focus-visible .stop__dot { transform: translateY(-3px); }
.stop__btn[aria-expanded="true"] .stop__dot { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; }
.stop__title { font-weight: 600; font-size: 16px; line-height: 22px; }
.stop__who {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; margin-top: 4px;
  color: var(--color-text-tertiary);
}
.stop--you .stop__who { color: var(--color-accent); }
.stop__tip {
  margin-top: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-4);
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--color-text-secondary); text-align: left;
}
@media (min-width: 900px) {
  .stop__tip {
    position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%) translateY(-6px);
    width: min(280px, 78vw); z-index: 20;
    opacity: 0; visibility: hidden;
    transition: opacity var(--motion-state) var(--ease-out), transform var(--motion-state) var(--ease-out), visibility var(--motion-state);
  }
  .stop:hover .stop__tip, .stop__btn:focus-visible + .stop__tip, .stop__btn[aria-expanded="true"] + .stop__tip {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
}
.footnote { margin-top: var(--space-7); color: var(--color-text-tertiary); }
/* the hover instruction is only true on a pointer device — below 900px every
   stop's detail is rendered, so telling a touch user to hover would be wrong */
.hover-hint { display: none; }
@media (min-width: 900px) and (hover: hover) { .hover-hint { display: inline; } }

/* ===========================================================================
   §4 PRICING — one forest plan card, two add-on cards beneath
   =========================================================================== */
.plan {
  background: var(--color-ground-inverse); color: var(--color-text-inverse);
  border-radius: var(--radius-lg); border: none;
  box-shadow: var(--shadow-forest);
  padding: var(--space-8);
  display: grid; gap: var(--space-8); grid-template-columns: 1fr;
}
@media (min-width: 900px) { .plan { grid-template-columns: 1.15fr 1fr; gap: var(--space-9); align-items: center; } }
@media (max-width: 599px) { .plan { padding: var(--space-6); border-radius: var(--radius-md); } }
.plan h3 { color: var(--color-text-inverse); }
.plan__list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.plan__list li {
  display: grid; grid-template-columns: 14px 1fr; gap: var(--space-3);
  align-items: start; font-size: 16.5px; line-height: 26px; color: var(--color-text-inverse);
}
.plan__list .dot {
  width: 7px; height: 7px; border-radius: 50%; margin-top: 10px;
  background: var(--color-accent-inverse); display: block;
}
.plan__price { text-align: left; }
@media (min-width: 900px) {
  .plan__price {
    border-left: 1px solid var(--color-rule-inverse);
    padding-left: var(--space-8);
  }
}
.plan__figure {
  display: block; font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(56px, 7vw, 84px); line-height: 1;
  color: var(--color-accent-inverse);
}
.plan__per { display: block; margin-top: var(--space-2); font-size: 18px; color: var(--color-text-inverse); }
.plan__setup { margin-top: var(--space-4); font-size: 14px; line-height: 22px; color: var(--color-text-inverse-2); }
.plan__terms { margin-top: var(--space-5); font-size: 14px; line-height: 22px; color: var(--color-text-inverse-2); }
.plan__terms a { color: var(--color-accent-inverse); text-decoration: underline; text-underline-offset: .2em; }
.plan__cta { margin-top: var(--space-6); }

.addons-head { margin: var(--space-9) 0 var(--space-5); }
.addon h3 { margin-bottom: var(--space-2); }
.addon p { color: var(--color-text-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.addon__own { margin-top: var(--space-3); color: var(--color-text) !important; font-size: 16px !important; line-height: 26px !important; }
.addon__price {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono); font-size: 19px; color: var(--color-text);
}
.addon__term { display: block; font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; color: var(--color-text-secondary); margin-top: var(--space-1); }

/* ===========================================================================
   §6 WHY TRUST US
   =========================================================================== */
.trust-card__n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--color-accent); display: block; margin-bottom: var(--space-3);
}
.trust-card h3 { margin-bottom: var(--space-2); }
.trust-card p { color: var(--color-text-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }

/* testimonials — horizontally stacked cards, with a lift on hover */
.rail { margin-top: var(--space-8); }
@media (max-width: 899px) {
  .rail__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px);
    gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--space-4); margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .rail__track > * { scroll-snap-align: start; }
}
@media (min-width: 900px) {
  .rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.quote p { font-size: 17px; line-height: 28px; }
.quote__name { margin-top: var(--space-5); font-weight: 600; font-size: 13px; line-height: 18px; }
.quote__since { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; color: var(--color-text-secondary); }
.ship-gate {
  display: inline-block; margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em; font-weight: 500;
  color: var(--color-error); border: 1.5px solid var(--color-error);
  padding: 3px var(--space-2); border-radius: var(--radius-none);
}

/* ===========================================================================
   CHANNELS
   =========================================================================== */
.channels { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.channels--center { justify-content: center; }
.channel {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; color: var(--color-accent); font-size: 16px;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.channel svg { width: 20px; height: 20px; flex: none; }
.on-forest .channel { color: var(--color-accent-inverse); }
@media (max-width: 599px) { .channels { flex-direction: column; gap: var(--space-1); align-items: flex-start; } .channels--center { align-items: center; } }

/* ===========================================================================
   §7 ENQUIRY
   =========================================================================== */
.form-wrap { max-width: 620px; margin-inline: auto; }
.form { margin-top: var(--space-7); text-align: left; }
.field { margin-bottom: var(--space-5); }
.field > label, .fieldset legend { display: block; font-weight: 600; font-size: 12.5px; line-height: 17px; margin-bottom: var(--space-2); padding: 0; }
.field__help { display: block; font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 16px; line-height: 26px;
  color: var(--color-text); background: var(--color-plate);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); min-height: 50px;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-tertiary); }
.field[data-state="error"] input, .field[data-state="error"] textarea { border-color: var(--color-error); border-width: 2px; }
.field__error { display: none; margin-top: var(--space-2); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--color-error); }
.field[data-state="error"] .field__error { display: block; }
.fieldset { border: none; padding: 0; margin: 0 0 var(--space-5); }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-2); }
.radio { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 16px; }
.radio input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn--primary { width: 100%; }
.privacy-line { margin-top: var(--space-4); color: var(--color-text-secondary); text-align: center; }
.response-line { margin-top: var(--space-5); text-align: center; color: var(--color-text-secondary); }

.note {
  background: var(--color-surface); border-left: 3px solid var(--color-error);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  border-radius: var(--radius-none); text-align: left;
}
.note__label { font-weight: 600; color: var(--color-error); display: block; margin-bottom: var(--space-1); }
.note li, .note p { color: var(--color-text); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }
.error-summary { display: none; }
.error-summary[data-visible="true"] { display: block; }

.confirm { text-align: center; padding-block: var(--space-6); }
.confirm h3 { margin-bottom: var(--space-4); }
.confirm p { color: var(--color-text-secondary); max-width: var(--measure); margin-inline: auto; }
[hidden] { display: none !important; }

/* ===========================================================================
   §8 FAQ
   =========================================================================== */
.faq { max-width: 780px; margin-inline: auto; }
.acc-item {
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3); overflow: hidden;
}
.acc-btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); background: none; border: none; cursor: pointer; text-align: left;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-sans); font-weight: 600; font-size: 17.5px; line-height: 26px;
  letter-spacing: -0.012em; color: var(--color-text);
}
.acc-btn:hover { color: var(--color-accent-hover); }
.acc-btn svg { flex: none; width: 22px; height: 22px; color: var(--color-accent); transition: transform var(--motion-state) var(--ease-out); }
.acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* 0fr → 1fr avoids the height:auto class of bugs entirely */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-state) var(--ease-out); }
.acc-btn[aria-expanded="true"] + .acc-panel { grid-template-rows: 1fr; }
.acc-panel__inner { overflow: hidden; }
.acc-panel__inner > div { padding: 0 var(--space-6) var(--space-5); color: var(--color-text-secondary); }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer { background: var(--color-ground-inverse); color: var(--color-text-inverse); }
.footer__inner { padding-block: var(--space-9) var(--space-6); }
.footer__statement { max-width: 22ch; }
.footer__statement .dim { color: var(--color-text-inverse-2); }
.footer__row {
  margin-top: var(--space-9); display: grid; gap: var(--space-6);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 768px) { .footer__row { grid-template-columns: auto 1fr; gap: var(--space-8); } }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: flex-start; }
@media (min-width: 768px) { .footer__links { justify-content: flex-end; } }
.footer a { color: var(--color-text-inverse); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__links a { font-size: 15.5px; }
.footer__label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-inverse-2); display: block; margin-bottom: var(--space-2); }
.footer__contact a { font-size: 17px; }
.footer .channel { color: var(--color-accent-inverse); }

.footer__lockup { margin-top: var(--space-9); }
.footer__lockup img { display: block; width: 100%; height: auto; }
.footer__base {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-inverse);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  align-items: center; justify-content: space-between;
}
.footer__base p, .footer__base a { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--color-text-inverse-2); }
.footer__policies { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* ===========================================================================
   MOTION
   =========================================================================== */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal[data-shown="true"] { opacity: 1; transform: none; transition: opacity var(--motion-figure) var(--ease-out), transform var(--motion-figure) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal[data-shown="true"] { opacity: 1; transform: none; transition: none; }
  .scroll-cue svg { animation: none; }
  .card--lift, .stop__dot, .acc-panel, .acc-btn svg, .stop__tip { transition: none; }
  .card--lift:hover { transform: none; }
  .btn { transition-duration: 120ms; }
}

/* ===========================================================================
   CONTENT-GATE CHROME
   =========================================================================== */
.mock-flag {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--color-warning); border: 1px dashed var(--color-warning);
  padding: 2px 6px; margin-bottom: var(--space-3);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.on-forest .accent-word { color: var(--color-accent-inverse); }

:root { --section-pad: 88px; }        /* client refinement: 104 -> 88 */
@media (max-width: 599px) { :root { --section-pad: 64px; } }   /* was space-8 (72) */
.section-head { margin-bottom: var(--space-7); }
.addons-head { margin: var(--space-8) 0 var(--space-5); }
.rail { margin-top: var(--space-7); }

.plate svg.fig-wide { display: block; }
.plate svg.fig-narrow { display: none; }
@media (max-width: 767px) {
  .plate svg.fig-wide { display: none; }
  .plate svg.fig-narrow { display: block; }
}

.split { grid-template-areas: "head" "media" "points"; }
.split__head   { grid-area: head; }
.split__media  { grid-area: media; }
.split__points { grid-area: points; }
.split__head p { color: var(--color-text-secondary); max-width: var(--measure); }
.split__points .points { margin-top: 0; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "media head" "media points";
    grid-template-rows: auto 1fr;
    align-items: start; row-gap: var(--space-6);
  }
  .split__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .split__points .points { margin-top: var(--space-6); }
}

/* --- §4 · bento. One forest plan card above, two equal tiles beneath. ---- */
.bento { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 820px) { .bento { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.bento__tile { display: flex; flex-direction: column; }
.addon__head { margin-bottom: var(--space-3); }
.addon__kicker {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2);
}
.addon__head h3 { margin-bottom: 0; }
.addon__scope { margin-top: var(--space-2); }
.addon__art {
  margin-top: var(--space-6); margin-bottom: var(--space-2);
  background: var(--color-plate);
  border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);        /* was space-3 / space-4 */
  background-image:
    linear-gradient(to right, var(--color-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);
  background-size: var(--grid-module) var(--grid-module);
  background-position: 7px 7px;
}
.addon__art svg { display: block; width: 100%; height: auto; }
.bento__tile .addon__price { margin-top: auto; }

.lattice {
  margin-top: var(--space-7);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .lattice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lattice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lattice__cell {
  padding: var(--space-6);
  border-right: 1px solid var(--color-accent-border);
  border-bottom: 1px solid var(--color-accent-border);
  background: transparent;
}
@media (max-width: 599px) { .lattice__cell { padding: var(--space-5) var(--space-4); } }
.lattice__n {
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.lattice__cell h3 { margin-bottom: var(--space-2); }
.lattice__cell p { color: var(--color-text-secondary); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); }

.stop { z-index: 1; }
@media (min-width: 900px) {
  .road::before, .road::after { z-index: 0; }
  .road::after { width: 20%; }
}

@media (min-width: 900px) {
  .stop:first-child .stop__tip { left: 0; transform: translateX(0) translateY(-6px); }
  .stop:last-child  .stop__tip { left: auto; right: 0; transform: translateX(0) translateY(-6px); }
  .stop:first-child:hover .stop__tip,
  .stop:first-child .stop__btn:focus-visible + .stop__tip,
  .stop:first-child .stop__btn[aria-expanded="true"] + .stop__tip { transform: translateX(0) translateY(0); }
  .stop:last-child:hover .stop__tip,
  .stop:last-child .stop__btn:focus-visible + .stop__tip,
  .stop:last-child .stop__btn[aria-expanded="true"] + .stop__tip { transform: translateX(0) translateY(0); }
}

@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 100%); } }

.hero__eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent-inverse);
  margin-bottom: var(--space-4);
}
.hero__reassurance {
  margin-top: var(--space-6); font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--color-text-inverse-2); max-width: 52ch; margin-inline: auto;
}
.hero .chip { margin-bottom: var(--space-5); }

/* --- a figure now gets its own heading, because it carries an argument --- */
.fig-head { max-width: 760px; margin: var(--space-9) auto var(--space-6); }
.fig-head p { margin-top: var(--space-3); color: var(--color-text-secondary); }
.hero .fig-head .eyebrow { color: var(--color-accent-inverse); }
.hero .fig-head h2, .hero .fig-head p { color: var(--color-text-inverse); }
.hero .fig-head p { color: var(--color-text-inverse-2); }
.hero__fig { margin-top: 0; }

.fig-caption {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4); font-weight: 600; font-size: 17px; line-height: 26px;
}
.fig-caption .eyebrow { margin-bottom: 0; }

.eyebrow.accent-word {
  font-size: 12.5px; letter-spacing: .1em; text-transform: none;
  font-weight: 600; white-space: nowrap;
}

.lattice--pain .lattice__cell { display: flex; flex-direction: column; }
.pain h3 { margin-bottom: var(--space-3); }
.pain__answer {
  margin-top: auto; font-family: var(--font-sans); font-weight: 600;
  font-size: 16px; line-height: 26px; color: var(--color-accent);
}

.plan__per { display: block; margin-top: var(--space-2); font-size: 18px; color: var(--color-text-inverse-2); }
.plan__billing { display: block; margin-top: var(--space-2); font-size: 18px; line-height: 28px; color: var(--color-text-inverse); }
.plan__setup { margin-top: var(--space-5); font-size: 15px; line-height: 24px; color: var(--color-text-inverse); }
.plan__total { margin-top: var(--space-1); font-size: 15px; line-height: 24px; color: var(--color-text-inverse); font-weight: 600; }
.plan__terms { margin-top: var(--space-5); font-size: 14px; line-height: 22px; color: var(--color-text-inverse-2); }
.vs__proof-label {
  margin: var(--space-8) auto var(--space-5);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}

/* --- §9 · the lighter form --------------------------------------------- */
.radio-col { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.radio-col .radio { min-height: 40px; }
.field__optional {
  font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-tertiary); margin-left: var(--space-2);
}
.fieldset[data-state="error"] legend { color: var(--color-error); }

.hero .fig-head .eyebrow { color: var(--color-accent); }
.hero .fig-head h2 { color: var(--color-text); }
.hero .fig-head p  { color: var(--color-text-secondary); }
.hero .scroll-cue  { color: var(--color-text-secondary); }
.hero .scroll-cue:hover { color: var(--color-text); }

.hero { min-height: calc(100svh - 8px); display: flex; flex-direction: column; justify-content: center; }
.hero > .bleed { width: 100%; }
.hero .scroll-cue { margin-top: var(--space-8); }
.section--tight { padding-top: var(--space-8); }
.fig-head { margin: 0 auto var(--space-6); }
.fig-foot { max-width: 60ch; margin: var(--space-6) auto 0; color: var(--color-text-secondary); }

.hero__slant { clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%); }
@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); } }
.hero__copy { max-width: 900px; }

.hero__slant { clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%); }
@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); } }

#fig-01 .scroll-cue { margin: 0 auto var(--space-6); }
#fig-01 .scroll-cue svg { color: var(--color-text-tertiary); }

.hero { justify-content: flex-start; padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-7); }

.hero__slant { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); }
@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); } }

.hero__slant { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); }
@media (max-width: 1023px) { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); } }
@media (max-width: 599px)  { .hero__slant { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); } }

@media (max-width: 479px) {
  .hero__slant { clip-path: none; }
  .hero { padding-top: calc(var(--header-h) + var(--space-5)); }
  .hero__reassurance { margin-top: var(--space-5); }
}

.hero__top { color: var(--color-text-inverse); }
.hero__top h1, .hero h1 { color: var(--color-text-inverse); }
.hero__lede { color: var(--color-text-inverse-2); }
.hero__top .accent-word { color: var(--color-accent-inverse); }
.hero__eyebrow { color: var(--color-accent-inverse); }
.hero__reassurance { color: var(--color-text-inverse-2); }

.header { background: var(--color-ground-inverse); border: none; box-shadow: none; }
.header__nav a { color: var(--color-text-inverse); }
.header__nav a::after { background: var(--color-accent-inverse); }
.header__nav a[aria-current="true"] { color: var(--color-text-inverse); }
.header__menu-btn { color: var(--color-text-inverse); }
.menu { background: var(--color-ground-inverse); }
.menu a { color: var(--color-text-inverse); border-bottom-color: var(--color-rule-inverse); }

.header__inner {
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  min-width: 0;
}
.header__logo { justify-self: start; flex: 0 0 auto; min-width: 0; }
.header__nav { justify-self: center; min-width: 0; }
.header__end { justify-self: end; gap: var(--space-3); flex: 0 0 auto; }

/* --- P0 #12 · size the logo by width, not height. A long horizontal
       lockup driven by height gets unstable on narrow layouts. --------- */
.header__logo img { width: 142px; height: auto; display: block; }
@media (max-width: 1023px) { .header__logo img { width: 128px; } }
@media (max-width: 599px)  { .header__logo img { width: 114px; } }
@media (max-width: 359px)  { .header__logo img { width: 104px; } }
@media (max-width: 599px) {
  .header__inner { gap: var(--space-3); padding-inline: var(--space-4); }
  .header__end { gap: var(--space-2); }
}

.hero { min-height: 0; display: block; padding: 0; overflow: hidden; }
.hero__top {
  background: var(--color-ground-inverse);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: calc(var(--space-9) + 104px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 104px));
}
.hero__bottom { padding-top: 0; padding-bottom: var(--space-9); margin-top: -64px; position: relative; }
@media (max-width: 1023px) {
  .hero__top { padding-bottom: calc(var(--space-8) + 64px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 64px)); }
  .hero__bottom { margin-top: -40px; }
}
@media (max-width: 599px) {
  .hero__top {
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: calc(var(--space-7) + 28px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
  }
  .hero__bottom { margin-top: -16px; padding-bottom: var(--space-8); }
}
.hero__copy { text-align: center; max-width: 940px; margin-inline: auto; }
.hero__fig { margin-top: 0; }

/* --- P2 #18 · a visual pause after the figure, without another section - */
.hero__closer { max-width: 62ch; margin: var(--space-7) auto 0; }
.hero__closer p { color: var(--color-text-secondary); }
.hero__closer-line { margin-top: var(--space-4); color: var(--color-text) !important; }
#top .scroll-cue { margin: var(--space-7) auto 0; color: var(--color-text-secondary); }
#top .scroll-cue:hover { color: var(--color-text); }

.hero__slant { display: none; }

@media (max-width: 359px) {
  .header__logo, .header__logo img { width: 108px; min-width: 108px; }
  .header__inner .btn--sm { padding: 0 var(--space-4); }
  .header__inner { gap: var(--space-2); }
}

@media (max-width: 359px) {
  :root { --display-size: 30px; --display-lh: 34px; }
  .hero__top { padding-top: calc(var(--header-h) + var(--space-4)); }
  .hero .chip { margin-bottom: var(--space-4); }
  .hero__eyebrow { margin-bottom: var(--space-3); }
  .hero h1 { margin-bottom: var(--space-4); }
  .hero__actions { margin-top: var(--space-5); }
}

.points__group { list-style: none; margin-top: var(--space-5); }
.points__group:first-child { margin-top: 0; }
.points__group .eyebrow { margin-bottom: 0; }

.plan__list .plan__group {
  display: block; grid-template-columns: none;
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--color-rule-inverse);
}
.plan__list .plan__group:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.plan__list .plan__group span {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent-inverse);
}

.footer__sub { margin-top: var(--space-4); max-width: 46ch; color: var(--color-text-inverse-2); }

@media (max-width: 359px) {
  .hero .chip { margin-bottom: var(--space-3); }
  .hero__eyebrow { margin-bottom: var(--space-2); }
  .hero__actions { margin-top: var(--space-4); }
}


.hero__top {
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: calc(var(--space-7) + 104px);
}
.hero__bottom { margin-top: -72px; padding-bottom: var(--space-8); }
@media (max-width: 1023px) {
  .hero__top { padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: calc(var(--space-6) + 64px); }
  .hero__bottom { margin-top: -44px; }
}
@media (max-width: 599px) {
  .hero__top { padding-top: calc(var(--header-h) + var(--space-4)); padding-bottom: calc(var(--space-5) + 28px); }
  .hero__bottom { margin-top: -16px; }
}

.hero__closer { margin-top: var(--space-6); }

.split__head p, .section-head p { max-width: 56ch; }
.section-head.center p { margin-inline: auto; }

.hero__top { padding-top: var(--space-7); }
@media (max-width: 1023px) { .hero__top { padding-top: var(--space-6); } }
@media (max-width: 599px)  { .hero__top { padding-top: var(--space-5); } }

.btn[data-loading="true"] { opacity: 0.72; cursor: progress; }

@media (min-width: 1024px) {
  .split__points .points { margin-top: 0; }
}
.lattice { gap: 1px; background: var(--color-rule); }
.lattice__cell { border: 0; background: var(--color-ground); }

.hero__fig { container: herofig / inline-size; }
.hero__fig svg.fig-wide { max-width: 950px; margin-inline: auto; }
.hero__fig svg.fig-narrow { max-width: 460px; margin-inline: auto; }

@container herofig (max-width: 699px) {
  .hero__fig svg.fig-wide { display: none; }
  .hero__fig svg.fig-narrow { display: block; }
}

.plate svg.fig-single { display: block; width: 100%; height: auto; }
.split__media svg.fig-single { max-width: 520px; margin-inline: auto; }

.compare__fig { container: comparefig / inline-size; margin-bottom: var(--space-8); }
.compare__fig svg.fig-wide { max-width: 1040px; margin-inline: auto; }
.compare__fig svg.fig-narrow { max-width: 460px; margin-inline: auto; }

@container comparefig (max-width: 954px) {
  .compare__fig svg.fig-wide { display: none; }
  .compare__fig svg.fig-narrow { display: block; }
}

#enquiry { position: relative; }
#enquiry > .bleed { position: relative; z-index: 1; }

#enquiry::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 107, 69, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 107, 69, 0.13) 1px, transparent 1px);
  background-size: var(--grid-module) var(--grid-module);
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.85) 30%, transparent 74%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.85) 30%, transparent 74%);
}

@supports not ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))) {
  #enquiry::before { display: none; }
}

.hero__fig svg.fig-wide { max-width: 1280px; }
.compare__fig svg.fig-wide { max-width: 1380px; }

.cmp { margin-top: var(--space-6); }

.cmp__wide { display: none; position: relative; padding-top: 90px; }
.cmp__phone { display: block; }

@media (min-width: 768px) {
  .cmp__wide { display: block; }
  .cmp__phone { display: none; }
}

.ctab {
  width: 100%; border-collapse: collapse;
  background: var(--color-plate);
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  overflow: hidden;
}
.ctab th, .ctab td { text-align: left; vertical-align: middle; }

.ctab thead th {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono); font-weight: 400; font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-tertiary);
  border-bottom: 1.5px solid var(--color-text);
}
.ctab .ctab__p { background: var(--color-accent-tint-soft); text-align: center; }
.ctab thead .ctab__p {
  color: var(--color-accent); border-top: 2px solid var(--color-accent);
  padding-top: var(--space-6);
}
.ctab thead .ctab__p b {
  display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--color-text); margin-top: 2px;
}
.ctab thead .ctab__s { text-align: center; }

.ctab tbody th, .ctab tbody td { padding: var(--space-3) var(--space-5); font-size: 14.5px; }
.ctab tbody tr { border-bottom: 1px solid var(--color-grid); }
.ctab tbody tr:last-child { border-bottom: 0; }
.ctab tbody .ctab__i { font-weight: 500; color: var(--color-text); }
/* the plain-language gloss for the four technical row names. §06.4's
   customer-vocabulary rule, met by explaining rather than by renaming. */
.ctab .ctab__i em {
  display: block; font-style: normal; font-size: 12px; line-height: 18px;
  color: var(--color-text-tertiary); margin-top: 2px; font-weight: 400;
}
.ctab tbody .ctab__p { color: var(--color-accent); font-weight: 600; font-size: 13.5px; }
.ctab tbody .ctab__s {
  text-align: center; color: var(--color-text-secondary);
  font-family: var(--font-mono); font-size: 12.5px; line-height: 18px;
}
.ctab tbody .ctab__s b { display: block; color: var(--color-text); font-weight: 600; font-size: 13px; }

.ctab tfoot .ctab__i, .ctab tfoot .ctab__p, .ctab tfoot .ctab__s { padding: var(--space-5); }
.ctab tfoot tr { border-top: 1.5px solid var(--color-text); }
.ctab tfoot .ctab__i { font-weight: 700; font-size: 16px; }
.ctab tfoot .ctab__p {
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent); font-weight: 700; font-size: 19px; text-align: center;
}
.ctab tfoot .ctab__s {
  text-align: center; font-weight: 700; font-size: 14.5px;
  color: var(--color-text-secondary); line-height: 20px;
}

/* Column widths. The two value columns are fixed so the plan column can be a
   consistent tinted band; the row-name column takes what is left. */
.ctab .ctab__p { width: 132px; }
.ctab .ctab__s { width: 168px; }
@media (max-width: 899px) {
  .ctab .ctab__p { width: 118px; }
  .ctab .ctab__s { width: 150px; }
  .ctab tbody th, .ctab tbody td { padding-inline: var(--space-4); }
  .ctab thead th { padding-inline: var(--space-4); }
}

.cbadge {
  border-radius: 50%; background: var(--color-accent); color: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; flex: none; box-shadow: var(--shadow-md);
}
.cbadge__lead {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-accent-inverse-h);
}
.cbadge__figure { font-weight: 700; font-size: 26px; line-height: 1.08; margin-block: 1px; }
.cbadge__foot {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em;
  color: var(--color-accent-inverse-h);
}

.cbadge--wide {
  position: absolute; z-index: 3;
  width: 108px; height: 108px;
  top: 90px; right: calc(168px + 66px);
  transform: translateX(50%) translateY(-83%);
}
@media (max-width: 899px) {
  .cbadge--wide { right: calc(150px + 59px); width: 96px; height: 96px; }
  .cbadge--wide .cbadge__figure { font-size: 23px; }
}

/* --- phone · the two totals --------------------------------------------- */
.mtot {
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.mtot--plan { background: var(--color-accent-tint-soft); border: 1.5px solid var(--color-accent); }
.mtot--sep { background: var(--color-surface); border: 1px solid var(--color-rule); }
.mtot__txt { flex: 1; min-width: 0; }
.mtot__k {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--color-text-tertiary);
}
.mtot--plan .mtot__k { color: var(--color-accent); }
.mtot__a { display: block; font-size: 28px; font-weight: 700; line-height: 1.15; margin-top: 3px; }
.mtot--plan .mtot__a { color: var(--color-accent); }
.mtot--sep .mtot__a { font-size: 22px; color: var(--color-text-secondary); }
.mtot__n { display: block; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }

.cbadge--phone { width: 78px; height: 78px; }
.cbadge--phone .cbadge__figure { font-size: 20px; }
.cbadge--phone .cbadge__lead, .cbadge--phone .cbadge__foot { font-size: 7.5px; }

/* V/S is a divider as well as a label: hairline, word, hairline. */
.vsdiv { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 2px; }
.vsdiv::before, .vsdiv::after { content: ""; flex: 1; height: 1px; background: var(--color-rule); }
.vsdiv span {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--color-text-tertiary);
}
.cacc {
  margin-top: var(--space-4); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); background: var(--color-plate); overflow: hidden;
}
.cacc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--color-accent);
  background: var(--color-accent-tint-soft);
}
.cacc summary::-webkit-details-marker { display: none; }
.cacc summary::marker { content: ""; }
.cacc summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.cacc__chev { width: 15px; height: 15px; flex: none; transition: transform var(--motion-state) var(--ease-out); }
.cacc[open] .cacc__chev { transform: rotate(180deg); }
.cacc__close { display: none; }
.cacc[open] .cacc__open { display: none; }
.cacc[open] .cacc__close { display: inline; }
.cacc__body { border-top: 1px solid var(--color-rule); }

.mrow { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule); }
.mrow:last-child { border-bottom: 0; }
.mrow__i { padding-inline: var(--space-3); font-size: 14.5px; font-weight: 600; color: var(--color-text); }
.mrow__i em {
  display: block; font-style: normal; font-size: 12px; line-height: 18px;
  font-weight: 400; color: var(--color-text-tertiary); margin-top: 1px;
}
.mrow__pills {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) 0;
}
.pill { border-radius: var(--radius-sm); padding: var(--space-2); display: block; }
.pill__l {
  display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 3px;
}
.pill--plan { background: var(--color-accent-tint-soft); }
.pill--plan .pill__l { color: var(--color-accent); }
.pill--plan .pill__v { display: block; font-size: 13px; font-weight: 600; color: var(--color-accent); }
.pill--sep { background: var(--color-ground); }
.pill--sep .pill__v {
  display: block; font-family: var(--font-mono); font-size: 11.5px; line-height: 17px;
  color: var(--color-text-secondary);
}
.pill--sep .pill__v b { display: block; color: var(--color-text); font-size: 12px; font-weight: 600; }

/* --- the sourcing line, shared by both layouts -------------------------- */
.csrc {
  max-width: 74ch; margin: var(--space-5) auto 0; text-align: center;
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh);
  color: var(--color-text-tertiary);
}

@media print { .cacc__body { display: block; } }
@media (max-width: 767px) {
  .stop__tip {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .road__track { gap: var(--space-6); }
  .stop { padding-bottom: 0; }

  .stop:not(:last-child)::after {
    content: ""; position: absolute; z-index: 0;
    left: 26px; top: 54px; height: calc(100% - 54px + var(--space-6));
    width: 2px; background: var(--color-rule);
  }
  .stop:first-child::after { background: var(--color-accent); }
  .stop__dot { position: relative; z-index: 1; }

  .stop__btn { cursor: default; }
  .stop__btn:hover .stop__dot { transform: none; }
}