/* ============================================================
   Solar Up · The Docket
   Theme layer over scrollcraft.css. Nothing here restyles a
   [data-sc-*] selector: those belong to the engine.

   PALETTE v3 · COLD PORCELAIN — 2 September 2026, chosen from
   ten candidates rendered on the live page.

   The neutrals carry no green at all. That is the whole point of
   this one: put a cold blue-grey under a warm-bright lime and the
   lime reads as a decision, where a green-tinted ground makes it
   the loud end of one family. The footer's navy-petrol is the
   deepest ground the set had, and the only one that does not
   read as "dark green".

     ground   #EEF1F4   cold porcelain
     band     #DCE3E9   the same neutral, one step down
     panel    #F5F7F9   raised surfaces
     deep     #0B1E28   navy-petrol. The footer and the preloader.
     action   #8CE838   the brand lime, unchanged
     text-gn  #2A6D18   green as text, 5.61:1 on the ground

   v2's note, kept because the reasoning still applies:

   The old ground was a warm cream (#F6F4EA) over a greige band
   (#E5E0CF). Both sat on the yellow side of neutral, which put
   them a few degrees from the lime and made the whole page read
   as one slightly dusty hue. Warm neutrals next to a cold-bright
   green is the combination that goes stale.

   v2 runs the neutrals COOL and green-tinted instead, so the
   lime reads as the one saturated thing on a page of quiet
   greens rather than as the loud end of a beige gradient:

     ground   #EFF3EE   cool chalk, a whisper of green
     band     #DDE7DB   sage, replaces the greige
     deep     #0B241A   teal-forest. A real second ground.
     action   #8CE838   the brand lime, unchanged
     text-gn  #2C7016   green as text, 5.45:1 on the ground

   Three grounds on the page now, not two. Chalk carries the
   argument, sage bands the register and the regulatory facts,
   and the teal-forest takes the footer — which is also what
   lets the wordmark sit behind it at plate scale. The parent's
   own forest (#0D2909) still appears exactly once, under the
   commercial handover, because at that moment the argument IS
   "this one belongs to New Ability Energy".
   ============================================================ */

:root {
  /* --- the six roles ---------------------------------------- */
  --sc-canvas:     #EEF1F4;   /* cold porcelain. The page ground.*/
  --sc-surface:    #FFFFFF;   /* card                            */
  --sc-ink:        #0D1418;
  --sc-ink-soft:   #4E5A64;   /* 6.24:1 on porcelain             */
  --sc-accent:     #8CE838;   /* lime. Action only, never text.  */
  --sc-accent-ink: #0D1710;   /* charcoal on lime, not white     */

  --sc-font-display: "Sora", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Satoshi", "Instrument Sans", system-ui, sans-serif;

  /* --- brand extras ----------------------------------------- */
  --su-greige:    #DCE3E9;   /* the band. One step down.        */
  --su-deep:      #0B1E28;   /* navy-petrol. The second ground.  */
  --su-deep-ink:  #E8F0F3;   /* 14.8:1 on the deep ground        */
  --su-deep-soft: #A2B8C0;   /* 8.25:1 on the deep ground        */
  --su-panel:     #F5F7F9;   /* raised surface. The canvas lifted
                                toward white rather than pure #FFF,
                                so a panel still sits in the family. */
  --su-hero:      #8ED462;   /* hero green band, charcoal ink 8.46:1 */
  --su-lime:      #8CE838;
  --su-lime-deep: #2A6D18;   /* green AS TEXT on porcelain, 5.61:1 */
  --su-forest:    #14401C;   /* green as text on the hero band  */
  --su-ink-2:     #1B252A;
  --su-line:      #CCD6DE;
  --su-muted-card:#54606A;   /* 5.69:1 on porcelain             */

  /* the parent's ground, used once, under the handover */
  --nae-ground:   #0D2909;
  --nae-ink:      #F4F1EC;
  --nae-ink-soft: #AEBFA6;
  --nae-accent:   #A1CF72;

  --sc-track-tight: -0.04em;   /* the brand's display tracking  */
  --sc-shadow-color: 205 32% 6%;
  --sc-measure: 60ch;

  --bar-h: 4.75rem;
  --docket-w: 16rem;
  /* Copy stops here on wide screens. The docket is chrome, not an overlay,
     and page copy running under it is the defect the contact sheet caught. */
  --docket-safe: 0rem;
  /* The thumb rail is fixed to the bottom edge below 1280. Anything that
     ends at the bottom of a viewport-height act has to clear it, and the
     hero overflow at 768 was exactly this measurement going missing. */
  --rail-h: 3.9rem;
}
@media (min-width: 1280px) {
  :root { --docket-safe: 13.5rem; --rail-h: 0rem; }
}

/* The one dark ground on the page. `color` is restated because it is
   inherited as a COMPUTED value: redefining the token alone does not
   re-ink text whose colour already resolved on <body>. */
.onforest {
  --sc-canvas:     var(--nae-ground);
  --sc-surface:    #123310;
  --sc-ink:        var(--nae-ink);
  --sc-ink-soft:   var(--nae-ink-soft);
  --sc-accent:     var(--nae-accent);
  --sc-accent-ink: #0B2107;
  --su-line:       rgba(244, 241, 236, .22);
  --su-lime-deep:  var(--nae-accent);
  --su-muted-card: var(--nae-ink-soft);
  color: var(--sc-ink);
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--su-lime); color: var(--sc-accent-ink); }

a { color: var(--su-lime-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--su-lime-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.onforest :where(a, button, summary, input, select, textarea):focus-visible {
  outline-color: var(--nae-accent);
}

h1, h2, h3, h4 {
  font-family: var(--sc-font-display);
  font-weight: 800;
  letter-spacing: var(--sc-track-tight);
  line-height: var(--sc-leading-tight);
  text-wrap: balance;
}
p { text-wrap: pretty; }

.wrap { width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2); margin-inline: auto; }
.measure { max-width: var(--sc-measure); }
.nums { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Buttons. One label per intent, lime fill, charcoal ink.
   ------------------------------------------------------------ */

.btn {
  /* justify-content, and it is not a detail. Without it the label sits
     hard left in any button wider than its text, which on the contact
     form is a 544px stadium with three words in the corner of it. That
     is what read as the button being wrong: not the colour, not the
     radius, the label. */
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem;
  background: var(--su-lime); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 700;
  font-size: var(--sc-t-sm); letter-spacing: -0.01em;
  border: 1px solid transparent; border-radius: var(--sc-r-pill);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out);
  /* Tinted from the accent rather than from neutral grey. A grey shadow
     under a saturated lime reads as dirt on the page. */
  box-shadow: 0 1px 2px rgb(29 74 16 / .22), 0 10px 22px -12px rgb(29 74 16 / .5);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: #9CF04E; transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(29 74 16 / .24), 0 16px 30px -14px rgb(29 74 16 / .58);
  }
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 1.05rem 1.8rem; font-size: var(--sc-t-base); }

.ground .btn--ghost { background: var(--su-panel); border-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) {
  .ground .btn--ghost:hover { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
}
.btn--ghost {
  background: transparent; color: var(--sc-ink);
  border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); border-color: var(--sc-ink); }
}

.runlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--su-lime-deep); font-weight: 700; font-size: var(--sc-t-sm);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
@media (hover: hover) and (pointer: fine) { .runlink:hover { gap: .7rem; } }
.runlink { transition: gap var(--sc-d-fast) var(--sc-ease-out); }

/* ------------------------------------------------------------
   THE PRICE BAR — this build's nav treatment.
   Not a wordmark-and-CTA bar and not a mega menu. The middle
   slot is a live readout: the home the visitor has selected and
   the from-price for it, both re-counting whenever the selector
   moves. The bar reports state.
   ------------------------------------------------------------ */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--sc-4);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--su-line);
}

.bar__mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sc-ink); }
.bar__mark img { width: 34px; height: 34px; border-radius: 8px; display: block; }
.bar__word {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1.32rem; letter-spacing: -0.045em; line-height: 1;
}
.bar__word i { font-style: normal; color: var(--su-lime-deep); }

/* the live readout */
.barstate {
  justify-self: center;
  display: flex; align-items: center; gap: .85rem;
  padding: 0; border: 0; background: none; box-shadow: none;
}
/* The readout. Three silhouettes, the selected one in ink over a lime
   rule, the other two muted. No hover, no cursor, no press: it is a
   status line and it should not invite a click it cannot answer. */
.rstate { display: flex; align-items: center; gap: var(--sc-2); }
.rstate__opt {
  position: relative; display: grid; place-items: center;
  padding: .3rem .5rem .45rem;
  color: var(--su-muted-card);
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.rstate__opt svg { width: 26px; height: 22px; display: block; }
.rstate__opt::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--su-lime);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.rstate__opt[data-on="true"] { color: var(--sc-ink); }
.rstate__opt[data-on="true"]::after { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rstate__opt, .rstate__opt::after { transition-duration: 1ms; }
}

.barstate .pick { background: none; padding: 0; gap: .15rem; }
.barstate .pick__opt {
  position: relative; border-radius: 0; background: none;
  padding: .32rem .1rem; margin-inline: .45rem;
  font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: -.01em;
  color: var(--su-muted-card);
}
.barstate .pick__opt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; background: var(--su-lime);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.barstate .pick__opt[aria-pressed="true"] { background: none; color: var(--sc-ink); }
.barstate .pick__opt[aria-pressed="true"]::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .barstate .pick__opt::after { transition-duration: 1ms; } }
.barstate__from { padding-left: .85rem; margin-left: .35rem; border-left: 1px solid var(--su-line); }
.barstate__price {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1.05rem; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 4.7ch; text-align: right;
}
.barstate__from { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .02em; }

/* the two-state selector, used in the bar and again at full scale in the peak */
.pick { display: inline-flex; padding: 3px; gap: 2px; background: var(--su-greige); border-radius: var(--sc-r-pill); }
.pick__opt {
  appearance: none; border: 0; cursor: pointer; min-width: 0;
  font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-xs);
  padding: .42rem .85rem; border-radius: var(--sc-r-pill);
  background: transparent; color: var(--su-muted-card); white-space: nowrap;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.pick__opt[aria-pressed="true"] { background: var(--sc-ink); color: var(--su-lime); }
@media (hover: hover) and (pointer: fine) {
  .pick__opt:not([aria-pressed="true"]):hover { color: var(--sc-ink); }
}
.pick__opt:active { transform: translateY(1px); }

/* The three zones are PLACED, not merely ordered. The readout is
   display:none below 1280, and a hidden grid item is not a grid item:
   the right group slid up into the middle `auto` track and sat there,
   centred, at every width from 360 to 1279. That is the whole tablet
   range and every phone. Naming the columns makes each zone independent
   of whether its neighbours are showing. */
.bar__left  { grid-column: 1; display: flex; align-items: center; gap: var(--sc-5); min-width: 0; }
.barstate   { grid-column: 2; }
.bar__right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--sc-3); }
.bar__cta { justify-self: end; }
.bar__nav { display: none; align-items: center; }
.barstate { display: none; }  /* placement above survives: grid-column is set separately */
/* Services is a <button> that centres its own label; About and
   Incentives were anchors stretching to the flex line, so their text
   sat on the line box's top edge and the button's on its middle. Same
   box, three different baselines. One display mode and one alignment
   for all three settles it. */
.bar__nav > * {
  display: inline-flex; align-items: center;
  line-height: 1; padding-block: .2rem;
}
.bar__nav a { color: var(--sc-ink); text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .bar__nav a:hover { color: var(--su-lime-deep); } }

/* Three zones, and only the middle one is optional. Each band decides what
   the zones CONTAIN; none of them re-declares the grid, which is what let
   the 1024-1279 rule quietly grow a fifth track and pull the readout off
   the bar's centre line. */

/* --- >= 1280: the full bar, readout included ------------------------- */
@media (min-width: 1280px) {
  .bar__nav { display: flex; gap: var(--sc-5); }
  .barstate { display: flex; }
}

/* --- 1024-1279: nav minimised to three, readout handed down ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar__nav { display: flex; gap: var(--sc-4); }
  .bar__nav a[data-secondary] { display: none; }   /* it lives in the panel */
}

/* --- < 640: mark and panel. The rail has the action. ----------------- */
@media (max-width: 640px) {
  :root { --bar-h: 4.1rem; }
  .bar__left { gap: var(--sc-3); }
  .bar__word { font-size: 1.15rem; }
  .bar__mark img { width: 30px; height: 30px; }
}


/* the phone's thumb rail: the selector, reachable, pinned to the bottom edge */
.thumbrail {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: var(--sc-z-chrome);
  padding: .55rem var(--sc-gutter) calc(.55rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--sc-canvas) 93%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--su-line);
  align-items: center; justify-content: space-between; gap: .75rem;
}
.thumbrail .pick { flex: 1; }
.thumbrail .pick__opt { flex: 1; padding-block: .6rem; font-size: var(--sc-t-sm); }
.thumbrail__price { font-family: var(--sc-font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 1279px) { .thumbrail { display: flex; } }
@media (min-width: 641px) and (max-width: 1279px) {
  /* on a tablet the rail is a centred bar, not a full-bleed strip */
  .thumbrail { justify-content: center; gap: var(--sc-4); }
  .thumbrail .pick { flex: 0 1 26rem; }
  .thumbrail__price { font-size: 1.1rem; }
  .thumbrail::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
  }
}

/* ------------------------------------------------------------
   THE HERO — the price plate.
   A held still. No scrub and no kinetic above the fold: the
   prices ARE the argument, so they are legible in frame one
   rather than two viewport-heights down.
   ------------------------------------------------------------ */

.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; }
.hero__bed { position: absolute; inset: 0; }
.hero__bed img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scaleX(-1);
}
/* a scrim only where the text sits, not a full-frame overlay */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12,16,9,.86) 0%, rgba(12,16,9,.82) 40%, rgba(12,16,9,.58) 54%, rgba(12,16,9,.20) 70%, transparent 84%),
    linear-gradient(to top, rgba(12,16,9,.88) 0%, rgba(12,16,9,.66) 30%, rgba(12,16,9,.30) 58%, rgba(12,16,9,.10) 78%, rgba(12,16,9,.28) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2);
  margin-inline: auto;
  padding-block: calc(var(--bar-h) + var(--sc-4)) calc(var(--sc-6) + var(--rail-h));
  color: #FBFAF5;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: .01em;
  padding: .42rem .85rem .42rem .5rem;
  border: 1px solid rgba(251,250,245,.34); border-radius: var(--sc-r-pill);
  background: rgba(12,16,9,.42); color: #FBFAF5;
}
.hero__badge {
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}
.hero__badge img { width: 46px; height: 21px; flex: none; display: block; }
.hero__badge-out { width: 11px; height: 11px; flex: none; opacity: .62; margin-left: .1rem; }
@media (hover: hover) and (pointer: fine) {
  .hero__badge:hover { border-color: rgba(251,250,245,.7); background: rgba(12,16,9,.62); }
  .hero__badge:hover .hero__badge-out { opacity: 1; }
}
.hero h1 {
  font-size: var(--sc-t-2xl); line-height: 1.0; margin: var(--sc-4) 0 var(--sc-3);
  max-width: 13ch; color: #FFFFFF;
}
.hero__lede { font-size: var(--sc-t-base); color: #F1EFE6; max-width: 56ch; margin-bottom: var(--sc-5); }

/* the two prices, as a pair, at display scale */
.plate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); max-width: 58rem; }
@media (max-width: 1100px) { .plate { max-width: 48rem; gap: var(--sc-3); } }
.plate__card {
  position: relative;
  padding: var(--sc-4) var(--sc-4) var(--sc-4);
  border: 1px solid rgba(251,250,245,.26); border-radius: var(--sc-r-lg);
  background: rgba(10,14,8,.62);
  backdrop-filter: blur(6px);
  transition: border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.plate__card[data-live="true"] { border-color: var(--su-lime); background: rgba(10,14,8,.66); }
.plate__name { font-size: var(--sc-t-xs); letter-spacing: .06em; text-transform: uppercase; color: #CFD6C4; }
.plate__price {
  appearance: none; border: 0; background: none; cursor: pointer;
  text-align: left; font-family: var(--sc-font-display);
  display: block; font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.7rem); letter-spacing: -0.05em; line-height: 1;
  margin: .35rem 0 .3rem; color: #FFFFFF; font-variant-numeric: tabular-nums;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .plate__card:hover { cursor: pointer; border-color: rgba(251,250,245,.5); }
  .plate__card:hover .plate__price { color: var(--su-lime); }
}
/* the live card is the answer to "which one am I looking at", so it says so */
.plate__card[data-live="true"]::after {
  content: "Selected"; position: absolute; top: .62rem; right: .95rem;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime);
}
.plate__price:focus-visible { outline-offset: 4px; }
.plate__price { transition: color var(--sc-d-fast) var(--sc-ease-out); }
/* The land option has no price, on purpose. It gets the same slot at a size
   the sentence can live in, so the row still reads as three comparable
   choices rather than two prices and a gap. */
.plate__price--words,
.barstate__price.is-words,
.thumbrail__price.is-words,
.figs__v.is-words,
.pkgcard__price--words {
  font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem);
  letter-spacing: -.03em; line-height: 1.1;
}
.plate__card--words .plate__spec b { font-size: .95rem; }
.barstate__price.is-words { font-size: .9rem; min-width: 0; }
.thumbrail__price.is-words { font-size: .8rem; }
.figs__price .figs__v.is-words { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.plate__terms { font-size: var(--sc-t-xs); color: #C9D0BE; }
.plate__spec { display: flex; gap: .9rem; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid rgba(251,250,245,.18); }
.plate__spec b { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: 1rem; letter-spacing: -.03em; color: #FFF; }
.plate__spec span { font-size: var(--sc-t-xs); color: #C9D0BE; }
.plate__flag {
  position: absolute; top: -.7rem; left: var(--sc-5);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--su-lime); color: var(--sc-accent-ink);
  padding: .22rem .55rem; border-radius: var(--sc-r-pill);
}
.hero__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin-top: var(--sc-5); }
.hero__note { font-size: var(--sc-t-sm); color: #E4E2D6; max-width: 34ch; }
.hero__note .runlink { color: var(--su-lime); }

@media (max-width: 1023px) {
  /* The hero has to fit the fold with its CTA on it, and it now carries three
     options rather than two. Each card compacts to two lines: the label, then
     the price and the figures on one row. The bar's height is added to the top
     padding so the endorsement badge is not clipped by it. */
  .hero__in { padding-block: calc(var(--bar-h) + var(--sc-3)) calc(var(--sc-4) + var(--rail-h)); }
  .hero__badge { font-size: 11px; padding: .3rem .7rem .3rem .4rem; }
  .hero__badge img { width: 34px; height: 16px; }
  .hero h1 { font-size: var(--sc-t-xl); max-width: 18ch; margin-block: var(--sc-3) var(--sc-2); }
  .hero__lede { font-size: var(--sc-t-sm); max-width: 52ch; margin-bottom: var(--sc-4); line-height: 1.5; }

  .plate { grid-template-columns: 1fr; gap: .5rem; }
  .plate__card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; column-gap: .8rem; row-gap: .15rem;
    padding: .7rem .9rem .75rem; border-radius: var(--sc-r-md);
  }
  .plate__name { grid-column: 1 / -1; font-size: 9.5px; letter-spacing: .05em; }
  .plate__price { grid-column: 1; font-size: 1.65rem; margin: 0; }
  .plate__price--words { font-size: 1.05rem; }
  .plate__terms { display: none; }        /* the label already says it */
  .plate__spec {
    grid-column: 2; margin: 0; padding: 0; border-top: 0;
    gap: .7rem; align-self: center;
  }
  .plate__spec b { font-size: .85rem; }
  .plate__spec span { font-size: 9px; }
  .plate__card--words .plate__spec b { font-size: .8rem; }
  .plate__flag { top: -.5rem; left: .9rem; font-size: 8.5px; padding: .15rem .42rem; }

  .hero__foot { margin-top: var(--sc-4); gap: var(--sc-3); }
  .hero__note { font-size: var(--sc-t-xs); max-width: 30ch; }
}

/* ------------------------------------------------------------
   ACT 2 — the distrust. A register, in normal flow.

   The predecessor stacked four absolutely positioned layers in
   one 21rem box and dissolved between them on pinned scroll
   progress. Two of them were lit at once through most of the
   act, so the question being read printed over the one before
   it — the defect in the contact sheet. Holding the frame for
   2.8 viewport-heights to deliver four sentences was the other
   half of it: the descent stopped and the reader could not make
   it start again.

   Every row now owns its own space in flow. There is no stage,
   no pin, no progress-driven opacity, and no absolute position
   anywhere in the act, so an overlap is not something that was
   fixed here — it is a state the markup cannot express. What is
   left of the motion is a staggered rise on entry, which runs
   once and which a fast reader outruns without noticing.
   ------------------------------------------------------------ */

.asked { padding-block: clamp(4rem, 8vw, 8rem); background: var(--su-greige); }
/* The register is the one docket-reserving block that also runs on the
   service pages, and those have no docket. Unscoped, the reserve left
   13.5rem of nothing down the right of every one of them. */
.asked__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
body:has(.docket) .asked__in { padding-right: var(--docket-safe); }
@media (min-width: 1000px) {
  .asked__in { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .asked__lead { position: sticky; top: calc(var(--bar-h) + 3rem); }
}
.asked__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0 0 var(--sc-3);
}
.asked__lead h2 { font-size: var(--sc-t-xl); margin: 0; max-width: 20ch; }
.asked__note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--su-muted-card); max-width: 34ch; }

.asked__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--su-line); }
.asked__row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sc-4);
  padding: clamp(1.25rem, 2.6vw, 2rem) 0;
  border-bottom: 1px solid var(--su-line);
}
.asked__n {
  font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-sm);
  color: var(--su-lime-deep); letter-spacing: 0; padding-top: .28em;
}
.asked__q {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); line-height: 1.08;
  margin: 0 0 .6rem; max-width: 22ch;
}
.asked__a { font-size: var(--sc-t-base); color: var(--su-ink-2); max-width: 56ch; margin: 0; line-height: 1.55; }
@media (max-width: 560px) {
  .asked__row { grid-template-columns: 2.1rem minmax(0, 1fr); gap: var(--sc-3); }
  .asked__q { font-size: 1.28rem; }
}

/* ------------------------------------------------------------
   ACT 3 — what's in it. The scrub.
   ------------------------------------------------------------ */

/* The kit act's scrim, as a sibling of the copy rather than a background on
   it: the verification pass hides the cue element and everything inside it to
   photograph the frame underneath, so a scrim living on .kit protected nothing
   the probe could see.

   It is CREAM, not dark. This brand is committed light, and the engine derives
   its own scrims from --sc-canvas for exactly that reason. Making this act
   white-on-dark gave the page two dark grounds and blunted the one that is
   supposed to mean something: the handover to the parent company. */
.kit-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(246,244,234,.97) 0%, rgba(246,244,234,.93) 26%,
    rgba(246,244,234,.62) 44%, rgba(246,244,234,.16) 62%, transparent 76%);
}
.kit { position: absolute; inset: auto 0 0 0; padding: 0 var(--sc-gutter) var(--sc-7); }
.kit__in { width: min(var(--sc-maxw), 100%); margin-inline: auto; color: var(--sc-ink); padding-right: var(--docket-safe); }
.kit__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0 0 var(--sc-2);
}
.kit h2 { font-size: var(--sc-t-2xl); color: var(--sc-ink); max-width: 15ch; margin-bottom: var(--sc-3); }
.kit__lede { font-size: var(--sc-t-base); color: var(--su-ink-2); max-width: 54ch; margin: 0 0 var(--sc-4); line-height: 1.55; }
/* the battery line leads the list, so it is the one that is set */
.kit__list li:first-child {
  background: var(--su-lime); border-color: transparent; color: var(--sc-accent-ink); font-weight: 700;
}
.kit__list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.kit__list li {
  font-size: var(--sc-t-sm); font-weight: 600;
  padding: .5rem .95rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--su-line); background: var(--sc-surface);
  color: var(--su-ink-2);
}
.kit__note { margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--su-muted-card); max-width: 46ch; }

/* ------------------------------------------------------------
   THE SILENCE. One line on cream. Authored, not left over.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ACT 4 — THE PEAK. The choice.
   The page stops moving and starts responding.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   THE PEAK's parts: the array drawing and the figure set.
   ------------------------------------------------------------ */

.roof {
  position: relative; margin: 0;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--sc-5);
  background: color-mix(in oklab, var(--su-greige) 70%, var(--sc-canvas));
  border: 1px solid var(--su-line); border-radius: var(--sc-r-lg);
  overflow: hidden;
}
.roof__plane {
  width: var(--plane-w, 82%);
  aspect-ratio: var(--plane-ar, 5 / 3);
  transform: perspective(900px) rotateX(52deg) rotateZ(-24deg);
  transform-style: preserve-3d;
  transition: width var(--sc-d-slow) var(--sc-ease-out),
              transform var(--sc-d-slow) var(--sc-ease-out);
}
.roof__plane[data-mount="ground"] {
  transform: perspective(1100px) rotateX(64deg) rotateZ(-18deg);
}
.roof__grid { display: grid; gap: 3%; width: 100%; height: 100%; }
.roof__p {
  border-radius: 1.5px;
  background: linear-gradient(150deg, #26417A 0%, #16233F 58%, #101A2E 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset;
  opacity: 0; transform: translateZ(-14px) scale(.86);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 42ms);
}
.roof__p[data-on="1"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .roof__plane { transition-duration: 1ms; }
  .roof__p { transition-duration: 1ms; transition-delay: 0ms; transform: none; }
}
.roof__tag {
  position: absolute; left: var(--sc-4); bottom: var(--sc-4);
  padding: .4rem .8rem; border-radius: var(--sc-r-pill);
  background: var(--sc-surface); border: 1px solid var(--su-line);
  font-size: var(--sc-t-xs); font-weight: 700; color: var(--sc-ink);
  box-shadow: var(--sc-e1);
}

.figs__row[hidden] { display: none; }
.figs__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: var(--sc-4); padding-bottom: .5rem;
  border-bottom: 1px solid var(--su-line);
}
.figs__k { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.figs__v {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: var(--sc-t-xl); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--sc-ink);
}
.figs__v small { font-size: .5em; font-weight: 700; letter-spacing: -.01em; color: var(--su-muted-card); margin-left: .18em; }

.figs__spec { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.figs__spec li { font-size: var(--sc-t-sm); color: var(--su-ink-2); display: flex; gap: .6rem; }
.figs__spec li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em;
  border-radius: 2px; background: var(--su-lime);
}
.figs__spec li:first-child { font-weight: 700; color: var(--sc-ink); }

.figs__assess {
  font-size: var(--sc-t-sm); color: var(--su-muted-card); max-width: 52ch;
  padding-left: var(--sc-3); border-left: 2px solid var(--su-lime); margin: 0;
}

/* THE PEAK.
   The old `.choice` centred everything down the middle: a centred heading,
   a centred lede, a centred control, and then a two-column grid under it.
   On a 1440 frame that left two empty gutters beside a narrow ribbon and a
   band of nothing above, which is the "space is not being used" note. The
   heading also asked "Where do you live?" of a control that asks how many
   bedrooms there are, so the question and the answer were about different
   things.

   Now: one heading across the top, then two columns that both carry load.
   Left is the control, the array it draws, and why the price is the price.
   Right is the money and the specification. Nothing is centred except the
   panel itself inside the frame. */

.peak {
  display: grid; align-items: center; height: 100%;
  padding: calc(var(--bar-h) + var(--sc-4)) var(--sc-gutter) calc(var(--sc-5) + var(--rail-h));
  background: var(--sc-canvas);
}
.peak__in {
  width: min(var(--sc-maxw), 100%); margin-inline: auto;
  padding-right: var(--docket-safe);
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
}

.peak__head { display: grid; gap: var(--sc-2); max-width: 46rem; }
.peak__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0;
}
.peak__head h2 { font-size: var(--sc-t-2xl); margin: 0; max-width: 16ch; }
.peak__lede { color: var(--sc-ink-soft); max-width: 52ch; margin: 0; }

.peak__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.peak__left { display: grid; gap: var(--sc-4); align-content: start; }
.peak__right { display: grid; gap: var(--sc-4); align-content: start; }

.peak__pick .pick { padding: 4px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.peak__pick .pick__opt { font-size: var(--sc-t-base); padding: .72rem .5rem; font-weight: 700; }

.peak__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); }
.peak__pair .figs__row { padding-bottom: .45rem; }
.peak__more { margin: 0; }
.peak .figs__reason { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 44ch; margin: 0; }
.peak .figs__price { border-bottom: 1px solid var(--su-line); }
.peak .figs__price:has(.is-words) {
  grid-template-columns: 1fr;
  gap: .2rem;
}
.peak .figs__price:has(.is-words) .figs__k { order: -1; }
.peak .figs__price .figs__v.is-words {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  line-height: 1.04; text-align: left; max-width: 16ch;
}
.peak .figs__price .figs__v { font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4rem); }
.peak .figs__spec { margin-top: .2rem; }

/* the array drawing sizes to its column instead of dictating the layout */
.peak .roof { margin: 0; width: 100%; }

@media (max-width: 1023px) {
  .peak__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  .peak__head h2 { font-size: var(--sc-t-xl); }
  /* the drawing is the first thing to go: it is a diagram of a fact the
     two figures beside it already state, and the frame is fixed height */
  .peak .roof { display: none; }
  .peak .figs__reason { max-width: none; }
}
@media (max-width: 720px) {
  .peak { padding-top: calc(var(--bar-h) + var(--sc-3)); }
  .peak__in { gap: var(--sc-4); }
  .peak__grid { gap: var(--sc-4); }
  .peak__left, .peak__right { gap: var(--sc-3); }
  .peak__pick .pick__opt { font-size: var(--sc-t-sm); padding: .7rem .35rem; }
  .peak .figs__price .figs__v { font-size: 2.4rem; }
  .peak__head h2 { font-size: 1.7rem; }
  .peak__lede { display: none; }             /* the bar and the docket show it moving */
  .peak .figs__reason { display: none; }     /* said in full on the package page */
  .peak .figs__assess { font-size: var(--sc-t-xs); }
  .peak .figs__spec { gap: .42rem; }
}

/* ------------------------------------------------------------
   ACT 5 — the method. A lateral rail.
   The heading is the first item and the note is the last, which
   is what gives the rail enough width to actually travel.
   ------------------------------------------------------------ */

.rail { display: flex; align-items: stretch; gap: var(--sc-5); padding-inline: var(--sc-gutter); height: 100%; }
.rail > * { flex: none; }
.rail__intro { width: min(26rem, 76vw); display: grid; align-content: center; gap: var(--sc-4); }
.rail__intro h2 { font-size: var(--sc-t-2xl); max-width: 13ch; }
.rail__intro p { color: var(--sc-ink-soft); max-width: 34ch; }
.stage {
  width: min(23rem, 74vw);
  display: grid; align-content: start; gap: var(--sc-4);
  align-self: center;
  padding: var(--sc-5); border: 1px solid var(--su-line); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e1);
  opacity: var(--settle-o, 1); transform: translateY(var(--settle-y, 0));
}
.stage img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-md); }
.stage__n { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-sm); color: var(--su-lime-deep); letter-spacing: 0; }
.stage h3 { font-size: var(--sc-t-lg); margin: 0; }
.stage p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; }
.rail__end { width: min(20rem, 70vw); display: grid; align-content: center; gap: var(--sc-4); }
.rail__end p { font-size: var(--sc-t-lg); font-family: var(--sc-font-display); font-weight: 800; letter-spacing: var(--sc-track-tight); line-height: 1.1; }

/* ------------------------------------------------------------
   ACT 6 — the range, and the handover. The only dark ground.
   ------------------------------------------------------------ */

.comm { position: absolute; inset: 0; display: grid; align-items: end; }
.comm__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(9,22,7,.93) 0%, rgba(9,22,7,.91) 44%, rgba(9,22,7,.78) 54%, rgba(9,22,7,.34) 68%, rgba(9,22,7,.06) 80%, transparent 88%),
    linear-gradient(to top, rgba(9,22,7,.88) 0%, rgba(9,22,7,.42) 26%, rgba(9,22,7,.08) 52%, transparent 72%);
}
.comm__in {
  position: relative; z-index: 2;
  width: min(var(--sc-maxw), 100% - var(--sc-gutter)*2); margin-inline: auto;
  padding-bottom: var(--sc-7); color: var(--nae-ink);
}
.comm__col { max-width: min(37rem, 46%); }
@media (max-width: 900px) { .comm__col { max-width: 100%; } }
.comm h2 { font-size: var(--sc-t-2xl); color: #FFF; max-width: 12ch; margin-bottom: var(--sc-4); }
.comm__lede { font-size: var(--sc-t-lg); color: #F2F0E8; max-width: 36ch; margin-bottom: var(--sc-5); }
.comm__specs { list-style: none; margin: 0 0 var(--sc-6); padding: 0; display: grid; gap: .55rem; max-width: 34ch; }
.comm__specs li { font-size: var(--sc-t-sm); color: #F4F1EC; display: flex; gap: .65rem; }
.comm__specs li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 2px; background: var(--nae-accent); }

/* the handover plate: the moment the page belongs to the parent */
.handover {
  display: inline-grid; gap: var(--sc-3);
  padding: var(--sc-5); border-radius: var(--sc-r-lg);
  border: 1px solid rgba(244,241,236,.26); background: rgba(11,33,7,.72);
  backdrop-filter: blur(8px); max-width: 34rem;
}
.handover__k { font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--nae-ink-soft); }
.handover p { font-size: var(--sc-t-base); color: var(--nae-ink); margin: 0; }
.handover .runlink { color: var(--nae-accent); }

/* ------------------------------------------------------------
   ACT 7 — the ground. Incentives, in a document register.
   ------------------------------------------------------------ */

.ground { padding-block: clamp(3.5rem, 6vw, 6.5rem); background: var(--su-greige); }
.ground > .wrap { padding-right: var(--docket-safe); }
/* One rule for this block. There used to be two, both unscoped, three
   hundred lines apart, and the later one silently governed the only
   element on the site that carries the class: the heading was the
   smaller size, the measure was 52ch not 62ch, and the h2 kept its
   default margin on top of the grid gap, which is where the hole
   between the heading and the line under it came from. */
.ground__head {
  display: grid; gap: var(--sc-3);
  max-width: 62ch; margin-bottom: var(--sc-6);
}
/* A step below the frame above it, deliberately. That heading is the
   argument; this one introduces the register behind it, and two display
   lines at the same weight, one after the other, is what made the pair
   read as the same section twice in the first place. A sentence also
   takes a wider measure than the 20ch a two-word heading wants. */
.ground__head h2 {
  font-size: var(--sc-t-xl); max-width: 30ch; text-wrap: balance; margin: 0;
}
.ground__head p { margin: 0; color: var(--su-muted-card); max-width: 58ch; }
.ground__kick {
  font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--su-muted-card); margin: 0 0 var(--sc-2);
}
.ground__foot {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 1000px) {
  .ground__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.ground__close {
  display: grid; gap: var(--sc-4); align-content: space-between;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-left: 2px solid var(--su-lime);
}
/* The scrub act gives .fin__closer a lime rule down its left edge. In the
   band the block already has one, so the inner rule is taken back off. */
.ground__close .fin__closer {
  font-size: var(--sc-t-base); color: var(--su-ink-2); margin: 0;
  line-height: 1.65; max-width: 52ch;
  padding-left: 0; border-left: 0;
}
.ground__close .fin__verified { margin: 0; }
.ground__close .fin__act { margin: 0; }
.ground__workh {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0 0 var(--sc-4);
}
.ground__work {
  padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: var(--sc-r-lg);
  background: var(--su-panel); border: 1px solid var(--su-line);
}
.worklist { list-style: none; margin: 0 0 var(--sc-4); padding: 0; display: grid; gap: var(--sc-4); }
.worklist li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sc-3); }
.worklist h4 { font-size: var(--sc-t-base); margin: 0 0 .25rem; font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -.02em; }
.worklist p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; line-height: 1.6; max-width: 48ch; }
.worklist li { padding-bottom: var(--sc-2); }
.ground__work .fin__closer { font-size: var(--sc-t-sm); color: var(--su-ink-2); padding-top: var(--sc-4); border-top: 1px solid var(--su-line); margin: 0; }
.ground__work .fin__act { margin-top: var(--sc-4); }
.ground__reads { padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--su-line); }
.regs { display: grid; gap: 0; border-top: 1px solid var(--su-line); }
.reg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-5);
  align-items: baseline; padding: var(--sc-3) 0; border-bottom: 1px solid var(--su-line);
  text-decoration: none; color: inherit;
}
.reg h3 { font-size: var(--sc-t-base); font-weight: 800; margin: 0 0 .3rem; }
.reg p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; max-width: 62ch; }
.reg__topic { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--su-lime-deep); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .reg:hover h3 { color: var(--su-lime-deep); } }
@media (max-width: 620px) { .reg { grid-template-columns: 1fr; gap: .35rem; } }

/* ------------------------------------------------------------
   ACT 8 — the close. The docket lands.
   No spotlight. No magnet. The chrome becomes the form.
   ------------------------------------------------------------ */

.close { display: grid; place-items: end center; height: 100%; padding: calc(var(--bar-h) + var(--sc-3)) var(--sc-gutter) var(--sc-9); background: var(--sc-canvas); }
.close__in { width: min(58rem, 100%); text-align: center; display: grid; gap: var(--sc-5); justify-items: center; }
.close h2 { font-size: var(--sc-t-2xl); max-width: 17ch; margin: 0; }
.close__h { font-size: var(--sc-t-xl); max-width: 22ch; }
.close p { color: var(--sc-ink-soft); max-width: 44ch; margin: 0; }
.close__slot { width: min(58rem, 100%); min-height: 17rem; }

/* ------------------------------------------------------------
   THE DOCKET — the signature move, in two shapes.

   FLOATING it is a progress rail: a narrow column standing in the
   right margin, one row per line of the request, each row a tick
   that draws itself as the scroll writes that line. It carries no
   figures and no action. The previous version was a 21rem panel
   showing every value and a button, which is a summary the reader
   has not asked for yet, and it was eating a fifth of the page's
   width on every act it passed. At 9.75rem the same idea costs a
   third of that, and the width it gives back goes to the content.

   LANDED it un-pins at the close, travels into the stage, and
   becomes the document it has been assembling: the values arrive,
   the incentives arrive, and the action arrives with them.
   ------------------------------------------------------------ */

.docket {
  text-align: left;
  position: fixed; z-index: calc(var(--sc-z-chrome) - 1);
  right: var(--sc-4); bottom: var(--sc-5);
  width: var(--docket-w);
  background: var(--su-panel);
  border: 1px solid var(--su-line); border-radius: var(--sc-r-lg);
  box-shadow: 0 18px 44px hsl(var(--sc-shadow-color) / .16), var(--sc-edge);
  overflow: hidden;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
.docket[hidden] { display: none; }

.docket__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .7rem 1.05rem .55rem;
}
.docket__title {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--su-ink-2);
}
.docket__count { font-size: var(--sc-t-xs); color: var(--su-muted-card); font-variant-numeric: tabular-nums; }

/* the progress the rail is reporting, as a line rather than a sentence */
.docket__meter { height: 2px; margin: 0 1.05rem; background: var(--su-line); border-radius: 2px; overflow: hidden; }
.docket__meter span {
  display: block; height: 100%; width: 20%;
  background: var(--su-lime); border-radius: 2px;
  transition: width 620ms var(--sc-ease-out);
}

.docket__body { padding: .35rem 1.05rem .8rem; display: grid; }
/* Short: the rows sit at their natural height and the card is as tall as
   its five lines, not as tall as the margin it stands in. */
.docket:not(.docket--landed) .dline { padding: .46rem 0; }

.dline {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem; align-items: center;
  padding: .62rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--su-line) 55%, transparent);
}
.dline:last-child { border-bottom: 0; }

.dline__tick {
  flex: none; width: 17px; height: 17px; border-radius: 5px;
  display: grid; place-items: center;
  border: 1.5px solid var(--su-line); background: transparent;
  color: var(--sc-accent-ink);
  transition: background 320ms var(--sc-ease-out), border-color 320ms var(--sc-ease-out),
              transform 320ms var(--sc-ease-out);
}
.dline__tick svg { width: 11px; height: 11px; display: block; }
/* the check draws itself rather than appearing */
.dline__tick path {
  stroke-dasharray: 16; stroke-dashoffset: 16;
  transition: stroke-dashoffset 380ms var(--sc-ease-out) 120ms;
}
.dline[data-written="1"] .dline__tick {
  background: var(--su-lime); border-color: var(--su-lime);
}
.dline[data-written="1"] .dline__tick path { stroke-dashoffset: 0; }

.dline__k {
  font-size: var(--sc-t-xs); color: var(--su-muted-card);
  transition: color 320ms var(--sc-ease-out);
}
.dline[data-written="1"] .dline__k { color: var(--sc-ink); font-weight: 600; }
.dline__v { display: none; }

@media (prefers-reduced-motion: reduce) {
  .dline__tick, .dline__tick path, .dline__k, .docket__meter span { transition-duration: 1ms; }
}

/* floating: the rail is the whole thing */
.docket:not(.docket--landed) .docket__foot,
.docket:not(.docket--landed) .docket__state { display: none; }

.docket__hint { font-size: var(--sc-t-xs); line-height: 1.5; color: var(--su-muted-card); margin: 0; }
.docket__ask {
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  letter-spacing: -.045em; line-height: 1; margin: 0;
}
.docket__fine { font-size: 10.5px; color: var(--su-muted-card); margin: 0; }

.docket__win { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.docket__win li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem; align-items: baseline;
  padding-bottom: .6rem; border-bottom: 1px solid var(--su-line);
}
.docket__win li:last-child { border-bottom: 0; padding-bottom: 0; }
.docket__win b {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1.4rem; letter-spacing: -.035em; color: var(--sc-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.docket__win span { font-size: var(--sc-t-xs); color: var(--su-muted-card); line-height: 1.45; }

/* the fields the form still carries, and the two on contact.html */
.field { display: grid; gap: .3rem; }
.field label { font-size: var(--sc-t-xs); font-weight: 600; color: var(--su-ink-2); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--sc-t-sm);
  padding: .65rem .8rem; border-radius: var(--sc-r-md);
  border: 1px solid var(--su-line); background: var(--sc-canvas); color: var(--sc-ink);
  width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--su-lime-deep); outline-offset: 1px; }
.field input::placeholder { color: color-mix(in oklab, var(--su-muted-card) 72%, transparent); }
.docket .btn { width: 100%; justify-content: center; }

/* ---- LANDED --------------------------------------------------------
   Two columns of the same height, each distributing its own content
   over that height, so the card has one top edge and one bottom edge
   rather than a full column beside a half-empty one. Wider than it
   was, because the right-hand copy was setting at about 26 characters
   and reading as a column of fragments. */
.docket--landed {
  position: static; right: auto; bottom: auto;
  width: 100%; box-shadow: 0 26px 70px hsl(var(--sc-shadow-color) / .18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-areas: "head head" "body foot";
  align-items: stretch;
}
.docket--landed .docket__head {
  grid-area: head; padding: 1rem 1.5rem .9rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  border-bottom: 1px solid var(--su-line); background: var(--su-greige);
}
.docket--landed .docket__title { font-size: var(--sc-t-sm); }
.docket--landed .docket__meter { display: none; }

.docket--landed .docket__body {
  grid-area: body; padding: 1.15rem 1.5rem 1.35rem;
  align-content: space-between; gap: .1rem;
}
.docket--landed .dline {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem; padding: .62rem 0;
  border-bottom: 1px solid var(--su-line);
}
.docket--landed .dline:last-child { border-bottom: 0; }
.docket--landed .dline__k { font-size: var(--sc-t-sm); }
.docket--landed .dline__v {
  display: block; font-size: var(--sc-t-sm); font-weight: 700;
  color: var(--sc-ink); text-align: right; font-variant-numeric: tabular-nums;
}

.docket--landed .docket__foot {
  grid-area: foot; padding: 1.15rem 1.5rem 1.35rem;
  border-left: 1px solid var(--su-line);
  display: grid; align-content: space-between; gap: 1rem;
}
.docket--landed .docket__jump {
  margin: 0; padding: 1.05rem 1.8rem; font-size: var(--sc-t-base);
}

@media (max-width: 760px) {
  .docket--landed { grid-template-columns: 1fr; grid-template-areas: "head" "body" "foot"; }
  .docket--landed .docket__foot { border-left: 0; border-top: 1px solid var(--su-line); }
}

/* below 1280 the thumb rail already reports state and the margin is gone */
@media (max-width: 1279px) { .docket:not(.docket--landed) { display: none; } }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

/* The footer is the page's third ground and the only place the
   wordmark is allowed to be the size it wants to be. Same device the
   parent uses: the mark bleeds off the bottom-right corner at plate
   scale, low contrast, rotated a few degrees off true, behind
   everything. Set in the display face rather than placed as an image,
   because "solarup" is a wordmark before it is a logo and type scales
   without a raster to run out of. */
.foot {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(4.5rem, 7vw, 8rem) var(--sc-6);
  background: var(--su-deep); color: var(--su-deep-ink);
  border-top: 0;
  --su-line: rgba(232, 240, 243, .16);
}
.foot__plate {
  position: absolute; right: -1.5%; bottom: -14%;
  z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(9rem, 28vw, 26rem); line-height: .78; letter-spacing: -.06em;
  color: rgba(232, 240, 243, .085);
  transform: rotate(-4deg); transform-origin: 100% 100%;
  white-space: nowrap;
}
.foot__plate i { font-style: normal; color: rgba(140, 232, 56, .22); }
.foot__inner { position: relative; z-index: 1; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)); gap: var(--sc-6); align-items: start; }
.foot__mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--su-deep-ink); margin-bottom: var(--sc-3); }
.foot__mark img { width: 32px; height: 32px; border-radius: 8px; }
.foot__word { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.045em; }
.foot__word i { font-style: normal; color: var(--su-lime); }
.foot p { font-size: var(--sc-t-sm); color: var(--su-deep-soft); max-width: 38ch; line-height: 1.5; }
.foot h4 { font-size: var(--sc-t-xs); letter-spacing: .07em; text-transform: uppercase; color: rgba(232, 240, 243, .55); margin: 0 0 var(--sc-2); font-weight: 700; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.foot ul a { color: var(--su-deep-ink); text-decoration: none; font-size: var(--sc-t-sm); }
.foot__base a { color: var(--su-deep-ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot ul a:hover, .foot__base a:hover { color: var(--su-lime); text-decoration: underline; }
}
.foot__grid { padding-bottom: var(--sc-7); }
.foot__base { margin-top: 0; padding-top: var(--sc-4); border-top: 1px solid var(--su-line); display: flex; flex-wrap: wrap; gap: var(--sc-4); justify-content: space-between; }
.foot__base p { font-size: var(--sc-t-xs); margin: 0; color: var(--su-deep-soft); }
:where(.foot) :where(a):focus-visible { outline-color: var(--su-lime); }
@media (max-width: 780px) {
  .foot__grid { grid-template-columns: 1fr; gap: var(--sc-5); }
  /* Stacked columns leave a tall empty right edge and the plate wants it,
     but the footer's bottom padding is reserved for the thumb rail: bleed
     the plate off the right only, never off the bottom, or the rail eats
     the half of the word that carries the lime. */
  /* One column means the links run the full height of the footer, so
     there is no clear space left for the plate to sit in: at top:46% it
     ran straight through "MORE" and the four links under it. Dropped to
     the base rule, where the only thing it crosses is the two lines of
     fine print, and taken down in weight so it reads as a watermark
     rather than as a second layer of text. Still never off the bottom:
     the footer's bottom padding is the thumb rail's, and bleeding into
     it costs the half of the word that carries the lime. */
  .foot__plate {
    right: -9%; bottom: 8%; top: auto;
    font-size: clamp(6rem, 24vw, 12rem);
    transform: rotate(-5deg);
    color: rgba(232, 240, 243, .07);
  }
  .foot__plate i { color: rgba(140, 232, 56, .18); }
}
@media (max-width: 1279px) { .foot { padding-bottom: calc(var(--sc-5) + var(--rail-h)); } }

/* ------------------------------------------------------------
   Sub-pages. Same floor, document register.
   ------------------------------------------------------------ */

.page { padding-top: var(--bar-h); }
.phead { padding-block: var(--sc-8) var(--sc-6); }
.phead__kick { font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--su-lime-deep); }
.phead h1 { font-size: var(--sc-t-2xl); margin: var(--sc-3) 0 var(--sc-4); max-width: 20ch; }
.phead__lede { font-size: var(--sc-t-lg); color: var(--su-ink-2); max-width: 52ch; }
.pmedia { margin-block: var(--sc-6); }
.pmedia img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--sc-r-lg); }
.pmedia figcaption { margin-top: .7rem; font-size: var(--sc-t-xs); color: var(--su-muted-card); }
.prose { max-width: var(--sc-measure); padding-bottom: var(--sc-8); }
.prose h2 { font-size: var(--sc-t-xl); margin: var(--sc-7) 0 var(--sc-4); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sc-4); }
.prose sup a { font-size: .7em; color: var(--su-lime-deep); text-decoration: none; padding: 0 .12em; }

.pkgpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--sc-7); align-items: start; padding-bottom: var(--sc-9); }
.pkgcard { position: sticky; top: calc(var(--bar-h) + var(--sc-4)); border: 1px solid var(--su-line); border-radius: var(--sc-r-lg); background: var(--sc-surface); padding: var(--sc-5); display: grid; gap: var(--sc-4); box-shadow: var(--sc-e1); }
.pkgcard__price { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pkgcard__terms { font-size: var(--sc-t-xs); color: var(--su-muted-card); }
.specrow { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-4); padding: .6rem 0; border-bottom: 1px solid var(--su-line); font-size: var(--sc-t-sm); }
.specrow b { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.specrow span { color: var(--su-muted-card); }
@media (max-width: 900px) { .pkgpage { grid-template-columns: 1fr; } .pkgcard { position: static; } }

.srcs { margin-top: var(--sc-7); padding-top: var(--sc-4); border-top: 1px solid var(--su-line); }
.srcs h2 { font-size: var(--sc-t-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--su-ink-2); margin: 0 0 var(--sc-3); }
.srcs ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.srcs li { font-size: var(--sc-t-xs); color: var(--su-muted-card); }
.srcs a { color: var(--su-lime-deep); }

.formgrid { display: grid; gap: var(--sc-4); max-width: 34rem; }
.formgrid__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
@media (max-width: 560px) { .formgrid__two { grid-template-columns: 1fr; } }
.formnote { font-size: var(--sc-t-sm); color: var(--su-muted-card); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* visually hidden, still announced */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* ------------------------------------------------------------
   Phone bands.
   A left-hand column of density covers nothing when the copy
   spans the full width, which is every photographic act below
   900px. taste.md's band shape, reaching high because the copy
   itself is tall on a phone.

   These live at the end of the file on purpose: the desktop
   .comm__scrim is defined further up at equal specificity, and
   an earlier media query loses to it.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Weighted to the bottom half, where the price cards sit and where the
     cards carry their own backdrop anyway. The top of the frame is left
     open so the unit, the board-formed wall and the light on it are all
     still a photograph rather than a dark rectangle. The heading and the
     lede buy their contrast back with a shadow instead of a wash, which
     costs the picture nothing. */
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(10,15,8,.90) 0%, rgba(10,15,8,.82) 30%, rgba(10,15,8,.60) 52%,
      rgba(10,15,8,.38) 72%, rgba(10,15,8,.26) 100%);
  }
  .hero h1, .hero__lede, .hero__note {
    text-shadow: 0 1px 2px rgba(8,12,6,.55), 0 2px 22px rgba(8,12,6,.85);
  }
  .comm__scrim {
    background: linear-gradient(to top,
      rgba(9,22,7,.95) 0%, rgba(9,22,7,.93) 58%, rgba(9,22,7,.88) 78%,
      rgba(9,22,7,.66) 92%, rgba(9,22,7,.38) 100%);
  }
  .kit-scrim {
    background: linear-gradient(to top,
      rgba(246,244,234,.98) 0%, rgba(246,244,234,.96) 48%,
      rgba(246,244,234,.82) 70%, rgba(246,244,234,.34) 90%, transparent 100%);
  }
}


/* ------------------------------------------------------------
   The phone menu.
   Navigation between PAGES, not jumps within the scroll, so the
   one-shot grammar's single entry point is intact.
   ------------------------------------------------------------ */
.bar__menu {
  display: none; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  background: transparent; border: 1px solid var(--su-line);
  border-radius: var(--sc-r-pill); color: var(--sc-ink); cursor: pointer;
}
.bar__menu svg { width: 17px; height: 12px; display: block; }
.bar__menu:active { transform: translateY(1px); }

/* A small mega menu, not a stack of links. Three groups, because
   the site has three: what you can buy, what pays for part of it,
   and who we are. It opens below the bar at every width where the
   nav has been minimised, and it is the same panel on a phone as
   on a laptop so there is one thing to maintain and one thing to
   learn. Its columns collapse to rows under 720px; nothing in it
   is ever more than one tap deep. */
/* The services panel. Same parts as the phone panel, anchored under the
   bar rather than spanning it, and only ever two groups wide. */
.bar__nav-btn {
  display: inline-flex; align-items: center; gap: .34rem;
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--sc-t-sm); font-weight: 500;
  color: var(--sc-ink); padding: .2rem 0;
}
.bar__nav-btn svg { width: 10px; height: 6px; opacity: .55; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.bar__nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .bar__nav-btn:hover { color: var(--su-lime-deep); } }

.svc {
  position: fixed; top: calc(var(--bar-h) + var(--sc-3)); left: 0; right: 0;
  z-index: calc(var(--sc-z-chrome) - 1);
  display: none; pointer-events: none;
}
.svc[data-open="1"] { display: block; }
.svc__in {
  pointer-events: auto;
  width: min(40rem, calc(100% - var(--sc-gutter) * 2));
  margin-left: var(--sc-gutter);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-5);
  padding: var(--sc-5);
  background: var(--su-panel);
  border: 1px solid var(--su-line);
  border-radius: var(--sc-r-lg);
  box-shadow: 0 22px 48px hsl(var(--sc-shadow-color) / .16);
  animation: mega-in 200ms var(--sc-ease-out) both;
}
@media (prefers-reduced-motion: reduce) { .svc__in { animation-duration: 1ms; } }
@media (max-width: 1023px) { .svc { display: none !important; } }

.mega {
  position: fixed; inset: calc(var(--bar-h) + var(--sc-3)) var(--sc-gutter) auto; z-index: calc(var(--sc-z-chrome) - 1);
  display: none;
  background: var(--su-panel);
  border: 1px solid var(--su-line);
  border-radius: var(--sc-r-lg);
  box-shadow: 0 24px 48px hsl(var(--sc-shadow-color) / .16);
  max-height: calc(100svh - var(--bar-h) - var(--sc-5)); overflow-y: auto; overscroll-behavior: contain;
}
.mega[data-open="1"] { display: block; animation: mega-in 240ms var(--sc-ease-out) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mega[data-open="1"] { animation-duration: 1ms; } }

.mega__in {
  width: min(var(--sc-maxw), 100% - var(--sc-4) * 2); margin-inline: auto;
  padding-block: var(--sc-5);
  display: grid; gap: var(--sc-5) var(--sc-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.mega__in--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mega__in--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mega__h {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0 0 .3rem;
}
.mega__note { font-size: var(--sc-t-xs); color: var(--su-muted-card); margin: 0 0 var(--sc-3); }
.mega__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--su-line); }
.mega__list li { border-bottom: 1px solid var(--su-line); }
.mega__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-3);
  padding: .62rem 0; text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: var(--sc-t-sm); letter-spacing: -.02em; line-height: 1.3;
}
.mega__list a em {
  font-style: normal; font-family: var(--sc-font-text); font-weight: 500;
  font-size: var(--sc-t-xs); color: var(--su-muted-card); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .mega__list a:hover { color: var(--su-lime-deep); }
  .mega__list a:hover em { color: var(--su-lime-deep); }
}
.mega__act {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4);
  padding-top: var(--sc-4); border-top: 1px solid var(--su-line);
}
.mega__act p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; }
.mega__act a[href^="tel"] { color: var(--sc-ink); text-decoration: none; font-weight: 600; }

@media (max-width: 860px) {
  .mega__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mega__in { grid-template-columns: 1fr; gap: var(--sc-4); padding-bottom: calc(var(--sc-5) + var(--rail-h)); }
  .mega__note { display: none; }        /* on a phone the group titles carry it */
  .mega__list a { font-size: var(--sc-t-base); padding: .7rem 0; }
  .mega__act .btn { width: 100%; justify-content: center; }
}

@media (max-width: 1279px) {
  .bar__menu { display: inline-flex; justify-self: end; }
}
@media (max-width: 640px) {
  .bar__cta { display: none; }    /* the thumb rail carries the action here */
}

/* ------------------------------------------------------------
   ACT 6 — paying for it.
   Replaced the commercial handover, which now lives on its own
   page. Cream band over the warm sunset clip: the page's grounds
   stay light the whole way, so the greige incentives band under
   this act reads as a continuation rather than a cut.
   ------------------------------------------------------------ */

.fin-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(246,244,234,.97) 0%, rgba(246,244,234,.95) 44%,
      rgba(246,244,234,.72) 60%, rgba(246,244,234,.22) 78%, transparent 90%),
    linear-gradient(to top, rgba(246,244,234,.86) 0%, rgba(246,244,234,.42) 26%, transparent 52%);
}
.fin { position: absolute; inset: 0; display: grid; align-items: center; padding-inline: var(--sc-gutter); padding-block: calc(var(--bar-h) + var(--sc-4)) calc(var(--sc-4) + var(--rail-h)); }
.fin__in { width: min(var(--sc-maxw), 100%); margin-inline: auto; padding-right: var(--docket-safe); }
.fin__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--su-lime-deep); margin-bottom: var(--sc-3);
}
.fin h2 { font-size: var(--sc-t-xl); max-width: 20ch; margin: 0 0 var(--sc-3); color: var(--sc-ink); }
.fin__lede { font-size: var(--sc-t-base); color: var(--su-ink-2); max-width: 52ch; margin: 0 0 var(--sc-5); }

/* THE INCENTIVES.

   The band ran two narrow columns down the left quarter of a 1440 frame
   because the register and the work list were sharing a grid sized for the
   register alone. The register is full width now and leads with the figure,
   because the figure is the argument; the work list and the close sit under
   it as a pair.

   Every figure is the source's own published wording and carries a link to
   it. None of them says what a given address will receive. */

/* in the scrub frame: four figures, two across, names underneath */
.schemes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-4) var(--sc-5); max-width: 46rem;
}
.schemes .scheme {
  display: grid; gap: .1rem;
  padding: var(--sc-3) 0 0; border-top: 1px solid var(--su-line);
  grid-template-columns: 1fr;
}
.scheme__fig {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem);
  letter-spacing: -.04em; line-height: 1; color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}
.scheme h3 { font-size: var(--sc-t-sm); margin: .35rem 0 0; letter-spacing: -.02em; }
.scheme__who { font-size: var(--sc-t-xs); color: var(--su-muted-card); margin: .1rem 0 0; }
.fin__verified { font-size: var(--sc-t-xs); color: var(--su-muted-card); margin: var(--sc-4) 0 0; }
@media (max-width: 620px) { .schemes { grid-template-columns: 1fr; } }

/* in the band: the full register, full width, figure first */
.schemes--full {
  display: grid; grid-template-columns: 1fr; gap: 0;
  max-width: none; margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--su-line);
}
.schemes--full .scheme {
  display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  gap: var(--sc-4) clamp(2rem, 4.5vw, 4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 0; border-bottom: 1px solid var(--su-line);
  align-items: start;
}
.schemes--full .scheme__lead { display: grid; gap: .15rem; align-content: start; }
.scheme__n {
  font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-xs);
  color: var(--su-lime-deep); letter-spacing: .04em;
}
.schemes--full .scheme__fig { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.scheme__figk { font-size: var(--sc-t-xs); color: var(--su-muted-card); line-height: 1.4; max-width: 26ch; }
.schemes--full .scheme h3 { font-size: var(--sc-t-lg); margin: 0; max-width: 30ch; }
/* text-decoration rather than a box-shadow rule: these headlines wrap to
   two and three lines, and a shadow only underlines the last one. */
.scheme__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--su-lime-deep) 45%, transparent);
  text-decoration-thickness: 1.5px; text-underline-offset: .17em;
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              text-decoration-color var(--sc-d-fast) var(--sc-ease-out);
}
.scheme__link[data-ext]::after { content: "\00A0\2197"; font-size: .78em; opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  .scheme__link:hover { color: var(--su-lime-deep); text-decoration-color: var(--su-lime); }
  .scheme__link[data-ext]:hover::after { opacity: 1; }
}
/* The figure says how big the lever is. This says what the lever is worth,
   which is the part a homeowner can actually picture. It is arithmetic from
   the published factor, not a savings claim, and it never mentions a bill. */
.scheme__impact {
  margin: .55rem 0 0; padding-top: .55rem;
  border-top: 1px solid var(--su-line);
  font-size: var(--sc-t-xs); line-height: 1.5; color: var(--su-ink-2);
  max-width: 30ch;
}
.schemes--full .scheme__who {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: .3rem 0 .6rem;
}
.scheme__body { font-size: var(--sc-t-base); color: var(--su-ink-2); margin: 0; max-width: 76ch; line-height: 1.6; }
.scheme__src {
  white-space: nowrap; font-size: var(--sc-t-xs); font-weight: 600;
  color: var(--su-lime-deep); text-decoration: underline; text-underline-offset: .16em;
}
@media (max-width: 760px) {
  .schemes--full .scheme { grid-template-columns: 1fr; gap: var(--sc-2); }
  .schemes--full .scheme__lead { grid-template-columns: auto auto; align-items: baseline; gap: .55rem; }
  .scheme__figk { grid-column: 1 / -1; max-width: none; }
  .schemes--full .scheme h3 { font-size: var(--sc-t-base); margin-top: .4rem; }
}

.fin__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin: var(--sc-4) 0 0; }

.fin__cards { list-style: none; margin: 0 0 var(--sc-4); padding: 0; display: grid; gap: var(--sc-3); max-width: 44rem; }
.fin__cards li {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: var(--sc-4); row-gap: 0;
  padding-bottom: var(--sc-3); border-bottom: 1px solid var(--su-line);
}
.fin__cards li:last-child { border-bottom: 0; padding-bottom: 0; }
.fin__n {
  font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-sm);
  color: var(--su-lime-deep); font-variant-numeric: tabular-nums; padding-top: .2rem;
}
.fin__cards h3 { grid-column: 2; font-size: var(--sc-t-base); margin: 0 0 .3rem; }
.fin__cards p { grid-column: 2; font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; max-width: 54ch; }
.fin__closer {
  font-size: var(--sc-t-sm); color: var(--su-ink-2); max-width: 50ch; margin: 0;
  padding-left: 1rem; border-left: 2px solid var(--su-lime);
}
@media (max-width: 900px) {
  .fin-scrim {
    background: linear-gradient(to top,
      rgba(246,244,234,.98) 0%, rgba(246,244,234,.96) 62%,
      rgba(246,244,234,.80) 82%, rgba(246,244,234,.30) 100%);
  }
  .fin { align-items: end; padding-bottom: calc(var(--sc-6) + 3.5rem); }
  .fin h2 { font-size: var(--sc-t-xl); }
  .fin__lede { font-size: var(--sc-t-base); margin-bottom: var(--sc-4); }
  .fin__cards { gap: var(--sc-3); }
  .fin__cards li { grid-template-columns: 1.8rem minmax(0, 1fr); gap: var(--sc-3); padding-bottom: var(--sc-3); }
  .fin__cards h3 { font-size: var(--sc-t-base); }
  .fin__closer { display: none; }   /* the incentives band says it again, below */
}

/* ------------------------------------------------------------
   Incentive posts.
   The parent build's structure, because these pieces are doing
   the same job on the same regulatory material: full-bleed hero,
   a sticky contents rail on the left, numbered sections.
   ------------------------------------------------------------ */

.posthead { padding-block: var(--sc-7) var(--sc-5); }
.posthead h1 { font-size: var(--sc-t-2xl); max-width: 22ch; margin: 0; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: var(--sc-4);
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--su-muted-card);
}
.post-meta span:not(:last-child)::after { content: " ·"; margin-left: .4rem; }

.post-hero { margin: 0 0 var(--sc-7); }
.post-hero img { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 760px) { .post-hero img { aspect-ratio: 3 / 2; } }
@media (max-width: 1023px) { .hero__bed img { object-position: 31% 50%; } }
@media (max-width: 640px) { .hero__bed img { object-position: 34% 50%; } }
@media (max-width: 400px) {
  .hero h1 { margin-block: var(--sc-2) var(--sc-2); }
  .hero__lede { margin-bottom: var(--sc-3); }
  .hero__foot { margin-top: var(--sc-3); gap: var(--sc-2); }
  .hero__foot .btn--lg { padding-block: .85rem; }
  .hero__note { max-width: 100%; }
  .plate__card { padding: .7rem var(--sc-3); }
}

.sect { padding-bottom: var(--sc-9); }
.post-tech { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1000px) {
  .post-tech { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .post-tech__toc { position: sticky; top: calc(var(--bar-h) + 2rem); }
}
.post-tech__toc h2 {
  font-family: var(--sc-font-text); font-weight: 700;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--su-muted-card); margin: 0 0 .9rem;
}
.post-tech__toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--su-line); }
.post-tech__toc li { border-bottom: 1px solid var(--su-line); }
.post-tech__toc ol a {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .5rem;
  padding: .55rem 0; font-size: .8125rem; line-height: 1.35;
  color: var(--su-muted-card); text-decoration: none;
}
.post-tech__toc ol a span { color: var(--su-line); font-variant-numeric: tabular-nums; font-size: .6875rem; padding-top: .12rem; }
@media (hover: hover) and (pointer: fine) { .post-tech__toc ol a:hover { color: var(--sc-ink); } }
.post-tech__toc ol a[aria-current] { color: var(--su-lime-deep); font-weight: 700; }
.post-tech__toc ol a[aria-current] span { color: var(--su-lime-deep); }
.post-tech__cta { margin-top: var(--sc-5); }
.post-tech__cta .btn { width: 100%; justify-content: center; }
@media (max-width: 999px) { .post-tech__cta { display: none; } }

.post-tech__body { max-width: 44rem; }
.post-tech__body .lede {
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--su-ink-2);
  padding-bottom: var(--sc-5); border-bottom: 1px solid var(--su-line); margin: 0;
}
.post-tech__body h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.12;
  margin: clamp(2.25rem, 6vh, 3.5rem) 0 var(--sc-4);
  scroll-margin-top: calc(var(--bar-h) + 2rem);
}
.post-tech__body .prose { max-width: 42rem; padding-bottom: 0; }
.post-tech__body .prose p { margin: 0 0 var(--sc-4); }
.post-tech__body .prose p:last-child { margin-bottom: 0; }

.postfoot {
  margin-top: var(--sc-8); padding-top: var(--sc-5);
  border-top: 1px solid var(--su-line);
}
.postfoot h2 { margin-top: 0; }
.postfoot .btn { margin-right: .6rem; margin-top: .4rem; }

/* ------------------------------------------------------------
   The bill upload
   ------------------------------------------------------------ */

.field__hint { font-size: var(--sc-t-xs); color: var(--su-muted-card); margin: 0; line-height: 1.5; }
.upload input[type="file"] {
  padding: .9rem; border: 1px dashed var(--su-line); background: var(--sc-surface);
  border-radius: var(--sc-r-md); font-size: var(--sc-t-sm); width: 100%; cursor: pointer;
}
.upload input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; font-size: var(--sc-t-xs);
  margin-right: .8rem; padding: .45rem .9rem; cursor: pointer;
  border: 1px solid var(--su-line); border-radius: var(--sc-r-pill);
  background: var(--su-greige); color: var(--sc-ink);
}
.upload input[type="file"]:hover { border-color: var(--su-lime-deep); }
.upload__list { font-size: var(--sc-t-xs); margin: 0; color: var(--su-lime-deep); font-weight: 600; }
.upload__list[data-state="over"] { color: #B8402C; }

/* The finance act's copy column. The cue lives here rather than on the
   full-bleed block, so the contrast probe measures the frame under the TEXT
   rather than the bright sky beside it. */
.fin__col { max-width: min(48rem, 62%); }
@media (max-width: 900px) { .fin__col { max-width: 100%; } }

/* ============================================================
   THE PRELOADER.

   The overlay is the site's own deepest ground held for a beat,
   not a different screen in front of the site. The lockup stands
   in it: the real mark placed as-is, and the wordmark set in the
   display face exactly as the bar and the footer set it. Brand
   colour rises through the wordmark from the bottom, the lockup
   settles, and the overlay dissolves.

   Solar Up has no vector master, so nothing here is a redrawn
   logo. --fill is registered in docket.js so it interpolates;
   unregistered it would jump and the colour would arrive in one
   frame instead of rising.
   ============================================================ */

.pre {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  pointer-events: none;
  background:
    radial-gradient(56vmax 56vmax at 26% 32%,
      color-mix(in oklab, var(--su-lime) 6%, transparent) 0%, transparent 62%),
    var(--su-deep);
  opacity: 1;
  transition: opacity 660ms var(--sc-ease-out);
}
.pre[data-state="out"] { opacity: 0; }

.pre__lockup {
  display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.15rem);
  transform: scale(.975);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pre[data-state="fill"] .pre__lockup,
.pre[data-state="out"] .pre__lockup { transform: scale(1); }

.pre__mark {
  width: clamp(2.6rem, 6vw, 4.4rem); height: auto;
  border-radius: clamp(.6rem, 1.4vw, 1rem);
  display: block;
  opacity: .28;
  transition: opacity 1200ms var(--sc-ease-out);
}
.pre[data-state="fill"] .pre__mark,
.pre[data-state="out"] .pre__mark { opacity: 1; }

/* the wordmark, twice: a held-back copy, and the brand copy over it
   under a mask that rises */
.pre__word {
  position: relative; display: block;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(2.4rem, 7.5vw, 5.2rem);
  letter-spacing: -.055em; line-height: 1;
}
.pre__word i { font-style: normal; }
.pre__word-base { color: rgba(232, 240, 243, .2); }
.pre__word-fill {
  position: absolute; inset: 0;
  color: var(--su-deep-ink);
  --fill: 0%;
  -webkit-mask-image: linear-gradient(to top,
    #000 0%, #000 var(--fill), transparent calc(var(--fill) + 16%), transparent 100%);
          mask-image: linear-gradient(to top,
    #000 0%, #000 var(--fill), transparent calc(var(--fill) + 16%), transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: --fill 1350ms cubic-bezier(0.65, 0, 0.35, 1);
}
.pre__word-fill i { color: var(--su-lime); }
.pre[data-state="fill"] .pre__word-fill,
.pre[data-state="out"] .pre__word-fill { --fill: 118%; }

/* Reduced motion: no overlay at all. A full-screen panel that has to be
   waited out is exactly what a motion sensitivity does not want, and the
   page underneath is already complete. The script returns before it builds
   anything; this is the belt to that braces. */
@media (prefers-reduced-motion: reduce) { .pre { display: none; } }

/* ============================================================
   THE SERVICE PAGES.

   These were a page head, one picture and a column of prose beside
   a sticky spec card: a spec sheet, not a page that sells. They are
   built from four surfaces now, and every service page uses the same
   four so there is one thing to maintain: a full-bleed plate that
   carries the price in the first frame, a stat band, a numbered
   process grid, and a close. Between them sit the sections that
   argue in the order a buyer actually asks: what is it, why is it
   that price, what comes off that price, who builds it, and what am
   I still worried about.
   ============================================================ */

.sales { display: block; }

/* --- the plate ------------------------------------------------------ */
.shero {
  position: relative; overflow: clip;
  min-height: min(88svh, 60rem);
  display: grid; align-items: end;
}
.shero__bed { position: absolute; inset: 0; }
.shero__bed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.shero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,14,18,.92) 0%, rgba(8,14,18,.74) 34%,
      rgba(8,14,18,.40) 60%, rgba(8,14,18,.16) 82%, rgba(8,14,18,.30) 100%),
    linear-gradient(105deg, rgba(8,14,18,.62) 0%, rgba(8,14,18,.30) 42%, transparent 72%);
}
.shero__in {
  position: relative; z-index: 2;
  width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2);
  margin-inline: auto;
  padding-block: calc(var(--bar-h) + var(--sc-6)) clamp(2.5rem, 5vw, 4.5rem);
  color: #FBFCFD;
}
.shero__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--su-lime); margin: 0 0 var(--sc-3);
}
.shero h1 {
  font-size: var(--sc-t-3xl); line-height: .98; letter-spacing: -.045em;
  margin: 0 0 var(--sc-4); max-width: 15ch; color: #FFF;
}
.shero__lede { font-size: var(--sc-t-lg); color: #E4EAEE; max-width: 46ch; margin: 0 0 var(--sc-6); }
.shero__act {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-top: var(--sc-5); border-top: 1px solid rgba(251,252,253,.28);
}
.shero__price { display: grid; gap: .15rem; margin: 0; }
.shero__price span { font-size: var(--sc-t-xs); letter-spacing: .06em; text-transform: uppercase; color: #C3CFD6; }
.shero__price b {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.2rem); letter-spacing: -.05em; line-height: 1;
  color: #FFF; font-variant-numeric: tabular-nums;
}
.shero__price--words b { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.035em; max-width: 14ch; }
.shero__terms { font-size: var(--sc-t-sm); color: #C3CFD6; margin: var(--sc-4) 0 0; }

@media (max-width: 760px) {
  .shero { min-height: min(92svh, 48rem); }
  .shero h1 { font-size: var(--sc-t-2xl); max-width: 17ch; }
  .shero__lede { font-size: var(--sc-t-base); margin-bottom: var(--sc-5); }
  .shero__in { padding-bottom: calc(var(--sc-5) + var(--rail-h)); }
  .shero__act { gap: var(--sc-4); }
  .shero__act .btn { width: 100%; justify-content: center; }
}

/* --- the stat band -------------------------------------------------- */
.statband { background: var(--su-deep); color: var(--su-deep-ink); }
.statband__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 0;
}

/* The rule sits between two cells, so it needs room on BOTH sides of
   it. The old version had padding on the right of every cell and none
   on the left, so each value after the first started hard against the
   line to its own left. Rule on the leading edge of every cell but the
   first, and the same space either side of it. */
.stat {
  display: grid; gap: .34rem; align-content: center;
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
  padding-inline-end: clamp(1.25rem, 2.4vw, 2.25rem);
}
.stat + .stat {
  border-left: 1px solid rgba(232,240,243,.14);
  padding-inline-start: clamp(1.25rem, 2.4vw, 2.25rem);
}
.stat__k {
  font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--su-deep-soft);
}
.stat__v {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); letter-spacing: -.035em; line-height: 1.08;
  text-wrap: balance;
  /* the label sits tight to the figure it names; the note is a second
     thought and takes its own air */
  margin-top: .1rem;
}
.stat__note {
  font-size: var(--sc-t-xs); line-height: 1.45; color: var(--su-deep-soft);
  margin-top: .2rem;
}
@media (max-width: 860px) {
  .statband__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the leading-edge rule has to be recomputed per row, not per cell */
  .stat + .stat { border-left: 0; padding-inline-start: 0; }
  .stat:nth-child(2n) {
    border-left: 1px solid rgba(232,240,243,.14);
    padding-inline-start: clamp(1.25rem, 4vw, 2rem);
  }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(232,240,243,.14); }
  .stat:nth-child(-n+2) { padding-bottom: clamp(1.6rem, 4vw, 2.2rem); }
  .stat:nth-child(n+3) { padding-top: clamp(1.6rem, 4vw, 2.2rem); }
}

/* --- the sections --------------------------------------------------- */
.sect { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sect--band { background: var(--su-greige); }
.sect--close { background: var(--sc-canvas); }
.sect__hd { display: grid; gap: var(--sc-3); max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sect__kick {
  font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--su-lime-deep); margin: 0;
}
.sect__hd h2 { font-size: var(--sc-t-2xl); margin: 0; max-width: 20ch; }
.sect__hd p { color: var(--sc-ink-soft); margin: 0; }
.sect__act { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin: clamp(2rem, 4vw, 3rem) 0 0; }

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.split__copy { display: grid; gap: var(--sc-4); align-content: start; }
.split__copy h2 { font-size: var(--sc-t-xl); margin: 0; max-width: 18ch; }
.split__copy .figs__spec { gap: .7rem; }
.split__copy .figs__spec li { font-size: var(--sc-t-base); }
.split__note { font-size: var(--sc-t-sm); color: var(--su-muted-card); max-width: 48ch; margin: 0; }
.split__fig { margin: 0; }
.split__fig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-lg); display: block; }

.prosewide { display: grid; }
.twocol { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.twocol p { margin: 0; font-size: var(--sc-t-base); color: var(--su-ink-2); line-height: 1.65; }
.prosewide__last {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding-top: var(--sc-4);
  border-top: 1px solid var(--su-line);
  font-size: var(--sc-t-base); color: var(--su-ink-2); line-height: 1.65; max-width: 78ch;
}

/* --- the process grid ----------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.step { display: grid; gap: .5rem; align-content: start; }
.step img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-md); display: block; margin-bottom: .35rem; }
.step__n { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-sm); color: var(--su-lime-deep); }
.step h3 { font-size: var(--sc-t-base); margin: 0; letter-spacing: -.02em; }
.step p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; line-height: 1.55; }

/* --- the other options ---------------------------------------------- */
.othergrid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.othercard {
  display: grid; gap: .3rem; align-content: start;
  padding: .8rem; border: 1px solid var(--su-line); border-radius: var(--sc-r-lg);
  background: var(--su-panel); text-decoration: none; color: var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.othercard img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sc-r-md); display: block; margin-bottom: .45rem; }
.othercard__k { font-size: var(--sc-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--su-muted-card); }
.othercard__n { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -.03em; }
.othercard__p { font-size: var(--sc-t-sm); color: var(--su-lime-deep); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .othercard:hover { border-color: var(--su-lime-deep); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .othercard { transition-duration: 1ms; } .othercard:hover { transform: none; } }

/* --- the close ------------------------------------------------------ */
.sclose { display: grid; gap: var(--sc-4); max-width: 62ch; }
.sclose h2 { font-size: var(--sc-t-2xl); margin: 0; max-width: 20ch; }
.sclose p { color: var(--sc-ink-soft); margin: 0; }

/* the register is shared with the home page but sits in a .sect here */
.sect .asked__in { padding-right: 0; }


/* ============================================================
   THE PROOF BLOCK — recent work, then the accreditations.

   Two sections that always run together and always on these two
   grounds: photographs on the deep, marks on the canvas. Deep first
   because a lit install on a dark page reads as a photograph; the
   same frames on the canvas read as grey rectangles on a grey page.
   ============================================================ */

.sect--deep {
  background: var(--su-deep);
  color: var(--su-deep-ink);
}
.sect--deep .sect__kick { color: var(--su-lime); }
.sect--deep .sect__hd h2 { color: var(--su-deep-ink); }
.sect--deep .sect__hd p { color: var(--su-deep-soft); }

/* -------------------------------------------------------- work -- */

/* The heading takes the measure; the arrows sit on its last baseline
   so the pair reads as belonging to the strip below rather than to
   the section as a whole. */
.work__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sc-5);
}
.work .sect__hd { margin-bottom: 0; }
.work__ctl { display: flex; gap: .5rem; flex: none; padding-bottom: .35rem; }
.work__arw {
  appearance: none; cursor: pointer;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--su-deep-ink);
  border: 1px solid color-mix(in oklab, var(--su-deep-ink) 26%, transparent);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.work__arw svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .work__arw:hover { background: var(--su-lime); border-color: var(--su-lime); color: var(--su-deep); }
}
.work__arw:active { transform: translateY(1px); }

/* Full-bleed, and a real scroller: overflow-x means the wheel, a
   trackpad, a touch drag, Tab and the arrow keys all work before a
   line of JavaScript runs. The drift is added on top of that, not
   instead of it. The mask is what lets the strip run off both edges
   without a hard cut where the section ends. */
.work__track {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0 var(--sc-gutter);
  display: flex; gap: clamp(.75rem, 1.4vw, 1.15rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  /* No scroll-behavior: smooth here. It applies to every programmatic
     write, so the drift's per-frame scrollLeft += 0.22 started a fresh
     smooth animation sixty times a second and each one cancelled the
     last: net movement, zero. The arrows ask for smooth explicitly
     instead, which is the only place it was ever wanted. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4.5rem, #000 calc(100% - 4.5rem), transparent 100%);
}
.work__track::-webkit-scrollbar { display: none; }
.work__track:focus-visible { outline: 2px solid var(--su-lime); outline-offset: 6px; }

/* One height across the strip, width left to each frame's own aspect.
   Cropping all eleven to a single rectangle would flatten the shoot:
   the tall ones are tall because the stack is, and the wide ones are
   wide because the run is. */
.wcard { flex: none; }
.wcard figure { margin: 0; display: grid; gap: .7rem; }
.wcard img {
  display: block;
  height: clamp(13.5rem, 32vh, 22rem); width: auto;
  border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--su-deep-ink) 8%, transparent);
  object-fit: cover;
}
.wcard figcaption {
  font-size: var(--sc-t-xs); line-height: 1.4; color: var(--su-deep-soft);
  max-width: 30ch;
}
.work__note {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  font-size: var(--sc-t-xs); line-height: 1.6;
  color: color-mix(in oklab, var(--su-deep-soft) 82%, transparent);
  max-width: 62ch;
}

@media (max-width: 700px) {
  /* Nothing to point at: a thumb is already the control, and two
     buttons at this width cost more room than they return. */
  .work__ctl { display: none; }
  .work__top { display: block; }
  .work__track {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  }
}

/* ------------------------------------------------- accreditations -- */

/* Four across, so seven marks make two rows and each is large enough
   to read rather than merely to recognise. auto-fit put all seven on
   one line and turned every one of them into a stamp. */
.accred__grid {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 940px) { .accred__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .accred__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Only at two columns do two of the seven names wrap. Holding the
     second line there keeps every credential on one baseline across
     the row; at three and four columns nothing wraps and reserving it
     would leave a gap under every name instead. */
  .accred__body { min-height: 2.2rem; }
}

/* No padding here. The white margin around each mark is cut into the
   file itself, where it can be measured per mark, rather than added
   in CSS where it would be the same for a circle and for a 3.4:1
   wordmark. A hairline, not the parent site's shadow: that page
   floats these tiles on a dark ground, and this one does not. */
.accred__tile {
  display: block;
  background: var(--sc-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--sc-r-sm);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.accred__tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.accred__body {
  display: block; margin-top: .95rem;
  font-size: .8125rem; line-height: 1.35; font-weight: 600;
  letter-spacing: -.005em; color: var(--sc-ink);
}
.accred__cred {
  display: block; margin-top: .18rem;
  font-size: .75rem; line-height: 1.35; color: var(--su-muted-card);
}
.accred__note {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  font-size: var(--sc-t-xs); line-height: 1.6;
  color: var(--su-muted-card); max-width: 62ch;
}
/* Both headings are plain sentences, so they take a wider measure than
   the 20ch the section default sets for a stacked display line. */
.work .sect__hd h2, .accred .sect__hd h2 { max-width: 26ch; text-wrap: balance; }

/* The docket is a floating rail on the home page only, and it floats
   over whatever the section puts under it. Sections that carry text to
   the right edge reserve for it; the strip does not, because a strip
   that keeps moving under a card is not a collision. What it does
   instead is dissolve early on that side, so the frames go out under
   the rail rather than behind it.

   Scoped to the page that actually has one: --docket-safe is a root
   token, so an unscoped reserve would leave 13.5rem of nothing on the
   right of every service page too. */
body:has(.docket) .work__top,
body:has(.docket) .accred > .wrap { padding-right: var(--docket-safe); }
@media (min-width: 1280px) {
  body:has(.docket) .work__track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4.5rem, #000 calc(100% - 15rem), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4.5rem, #000 calc(100% - 15rem), transparent 100%);
  }
}

/* The chevron belongs to Services, but the gap after it is measured
   from the arrow rather than from the word, which reads as a wider
   space before About than between About and Incentives. Half the
   arrow back evens the three out optically. */
.bar__nav-btn { margin-inline-end: -.4rem; }

/* --- the brand roster ----------------------------------------------- */

/* Built on the accreditation band's shape rather than beside it: an
   identical tile, then who and what underneath. Two sections of
   third-party marks on one page have to look like two of the same
   thing, or they read as a scatter of borrowed branding. */
.brandrow {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
}
.brandcard { display: block; }

/* The white margin around each mark is cut into the file, where it can
   be measured per mark, rather than added here where it would be the
   same for a 6.6:1 wordmark and a 2:1 lockup. Every mark is trimmed to
   its own ink and scaled to cover the same AREA of its tile, which is
   what "the same size" has to mean when the shapes differ this much. */
.brandcard__tile {
  display: grid; place-items: center;
  background: var(--sc-surface);
  border: 1px solid var(--su-line);
  border-radius: var(--sc-r-sm);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.brandcard__tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Still dashed, because these are not the three partners. But it keeps
   the white ground: the marks in it have to sit on what the other three
   sit on, or a Tesla wordmark on greige reads as a different set. */
.brandcard--any .brandcard__tile { border-style: dashed; }

.brandcard__n {
  display: block; margin-top: .95rem;
  font-size: .8125rem; line-height: 1.35; font-weight: 600;
  letter-spacing: -.005em; color: var(--sc-ink);
}
.brandcard__k {
  display: block; margin-top: .18rem;
  font-size: .75rem; line-height: 1.35; color: var(--su-lime-deep); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.brandcard--any .brandcard__k { color: var(--su-muted-card); }
.brandcard__note {
  display: block; margin-top: .35rem;
  font-size: var(--sc-t-xs); line-height: 1.45; color: var(--su-muted-card);
}

.brands__note {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  font-size: var(--sc-t-xs); line-height: 1.6; color: var(--su-muted-card);
  max-width: 62ch;
}
.brands .sect__hd h2 { max-width: 22ch; }

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


/* ============================================================
   PHONE — the two acts that cannot be pinned here.

   scrollcraft's isMobile() is (hover:none and pointer:coarse) OR
   max-width 860px, and data-sc-act-mobile="flow" hands both of these
   sections back to normal document flow at that threshold. What
   follows is the layout they need once nothing is pinning them.

   Kept at 860px to match the engine exactly. A mismatch here is worse
   than either value: the section would flow while still styled for a
   stage, or the reverse.
   ============================================================ */

@media (max-width: 860px) {

  /* --- the method, was a lateral pan --------------------------------
     Six cards on one horizontal rail is a good idea at 1440 and an
     impossible one at 390: the rail is wider than the viewport, so
     every card is clipped at both edges and the CTA at the end of it
     never arrives on screen at all. Stacked, it is the same six cards
     in the same order, reading downward. */
  .sc-act--flowed .rail,
  [data-sc-act-mobile="flow"] .rail {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--sc-6);
    height: auto;
    padding-block: clamp(3rem, 9vw, 4.5rem);
  }
  [data-sc-act-mobile="flow"] .rail > * { width: auto; max-width: none; }
  [data-sc-act-mobile="flow"] .rail__intro,
  [data-sc-act-mobile="flow"] .rail__end { width: auto; }
  [data-sc-act-mobile="flow"] .rail__intro h2 { max-width: 16ch; }
  [data-sc-act-mobile="flow"] .stage { width: auto; }
  /* the rail's closing line and its button are the section's CTA, and
     the button is what was running off the right edge */
  [data-sc-act-mobile="flow"] .rail__end .btn { width: 100%; justify-content: center; }

  /* --- the close, was a pin -----------------------------------------
     The heading and the docket together are taller than a phone
     viewport, so pinning pushed the heading off the top and clipped
     the docket at the bottom. Unpinned they simply stack and scroll,
     and the docket still FLIPs into its slot on the way in. */
  [data-sc-act-mobile="flow"] .close {
    height: auto; place-items: stretch;
    padding-block: clamp(3rem, 9vw, 4.5rem) clamp(3.5rem, 10vw, 5rem);
  }
  [data-sc-act-mobile="flow"] .close__in { text-align: left; justify-items: stretch; }
  [data-sc-act-mobile="flow"] .close h2,
  [data-sc-act-mobile="flow"] .close__h { max-width: 18ch; }
  [data-sc-act-mobile="flow"] .close__slot { min-height: 0; }
}


/* ============================================================
   THE REBATE CHECKER

   Five questions on the deep ground, because this is the one place on
   the page that asks the reader to do something rather than read
   something, and it should not look like the sections either side of
   it.

   The card is light on that ground for the same reason the
   accreditation tiles are: a form wants a surface, and a form floating
   on a dark page reads as a graphic rather than as something you can
   put your hand on.
   ============================================================ */

/* Two columns from 1024: the argument on the left, the thing you use on
   the right. Stacked, the card sat under a heading with half the page
   empty beside it. */
.rc__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1024px) {
  .rc__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .rc__side { position: sticky; top: calc(var(--bar-h) + var(--sc-5)); }
}
.rc__hd { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.rc__card {
  /* The section sets a light ink for the deep ground, and the card is a
     light surface sitting on it. Without resetting the ink here every
     element inside that does not name its own colour inherits near-white
     onto white: the headings, the figures and the option labels all went
     invisible while the body copy, which does set a colour, stayed. */
  color: var(--sc-ink);
  background: var(--sc-surface);
  border-radius: var(--sc-r-lg);
  overflow: hidden;
  max-width: 46rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / .18), 0 24px 60px -28px rgb(0 0 0 / .5);
}

/* --- progress ------------------------------------------------------- */
/* A hairline, not a widget. It is the only thing telling the reader how
   much of this is left, so it earns its 3px and nothing more. */
.rc__bar { display: block; height: 3px; background: var(--su-greige); position: relative; }
.rc__barfill {
  display: block; height: 100%; width: 20%;
  background: var(--su-lime);
  transition: width var(--sc-d-base) var(--sc-ease-out);
}
@media (prefers-reduced-motion: reduce) { .rc__barfill { transition-duration: 1ms; } }

/* --- the form ------------------------------------------------------- */
.rc__form { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.rc__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.rc__legend { display: block; padding: 0; width: 100%; }
.rc__kick {
  display: block;
  font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--su-muted-card); margin-bottom: var(--sc-2);
}
.rc__q {
  display: block;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -.035em; line-height: 1.1; color: var(--sc-ink);
  max-width: 22ch; text-wrap: balance;
}

.rc__opts { display: grid; gap: .5rem; margin-top: clamp(1.25rem, 3vw, 1.75rem); }

/* The whole row is the target, not a 16px circle beside it. The input
   stays in the accessibility tree and keeps its keyboard behaviour; it
   is the box that is painted. */
.rc__opt { display: block; cursor: pointer; }
.rc__opt input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.rc__optbox {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--su-line); border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}
.rc__optlabel { font-size: var(--sc-t-base); color: var(--sc-ink); line-height: 1.3; }
.rc__tick {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--su-line); display: grid; place-items: center;
  color: transparent; background: var(--sc-surface);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
.rc__tick svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) {
  .rc__opt:hover .rc__optbox { border-color: var(--su-muted-card); }
}
.rc__opt input:focus-visible + .rc__optbox {
  outline: 2px solid var(--su-lime-deep); outline-offset: 2px;
}
.rc__opt input:checked + .rc__optbox {
  border-color: var(--sc-ink); background: var(--su-panel);
}
.rc__opt input:checked + .rc__optbox .rc__tick {
  background: var(--su-lime); border-color: var(--su-lime); color: var(--su-deep);
}

.rc__help {
  margin: var(--sc-4) 0 0;
  font-size: var(--sc-t-xs); line-height: 1.55; color: var(--su-muted-card);
  max-width: 54ch;
}

.rc__nav {
  display: flex; gap: var(--sc-3); align-items: center;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}
.rc__next { margin-left: auto; }

/* --- the read-out --------------------------------------------------- */
.rc__out { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.rc__out:focus { outline: none; }
.rc__outhd { display: grid; gap: var(--sc-2); margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.rc__outhd h3 {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -.035em; line-height: 1.1; margin: 0; max-width: 20ch;
}

.rc__list { list-style: none; margin: 0; padding: 0; display: grid; }
.rc__item {
  /* Wide enough for "100 / 60 / 15%", which is the longest figure any
     of the six schemes prints. */
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sc-4);
  padding: var(--sc-4) 0; border-top: 1px solid var(--su-line);
}
.rc__item:first-child { border-top: 0; padding-top: 0; }
.rc__fig {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1.2rem; letter-spacing: -.04em; line-height: 1.15;
  font-variant-numeric: tabular-nums; text-wrap: balance;
}
.rc__item[data-state="no"] .rc__fig { color: var(--su-muted-card); }
.rc__item[data-state="note"] .rc__fig { color: var(--su-muted-card); font-size: 1.05rem; }
.rc__name { font-size: var(--sc-t-base); font-weight: 700; margin: 0 0 .2rem; }
.rc__item[data-state="no"] .rc__name { color: var(--su-muted-card); }
.rc__why { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--su-muted-card); margin: 0; }
.rc__state {
  display: inline-block; margin-bottom: .35rem;
  font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.rc__item[data-state="yes"]  .rc__state { color: var(--su-lime-deep); }
.rc__item[data-state="no"]   .rc__state { color: var(--su-muted-card); }
.rc__item[data-state="note"] .rc__state { color: var(--su-muted-card); }

/* The package sits on the panel rather than in the list: it is the one
   line here that is an answer rather than a condition. */
.rc__pkg {
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border-radius: var(--sc-r-md); background: var(--su-panel);
  border: 1px solid var(--su-line);
}
.rc__pkgkick {
  font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--su-muted-card); margin: 0 0 var(--sc-2);
}
.rc__pkgname {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); letter-spacing: -.035em;
  margin: 0 0 .3rem; line-height: 1.1;
}
.rc__pkgprice { font-size: var(--sc-t-base); margin: 0 0 .4rem; font-weight: 600; }
.rc__pkgwhy { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--su-muted-card); margin: 0; }
.rc__pkglink { display: inline-block; margin-top: var(--sc-3); font-size: var(--sc-t-sm); }

/* The three sit on one line and were aligned three different ways: the
   button on its own box, the link on a border-bottom, and "start again"
   on a text-decoration with its own offset, so the two underlines ran at
   different heights. Centre the row, and give the reset the link's own
   treatment rather than an approximation of it. */
.rc__act {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sc-3) var(--sc-5);
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}
.rc__again {
  appearance: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--sc-t-sm); font-weight: 700;
  color: var(--su-muted-card);
  border: 0; border-bottom: 1px solid currentColor; padding: 0 0 1px;
  line-height: inherit;
}
@media (hover: hover) and (pointer: fine) { .rc__again:hover { color: var(--sc-ink); } }

.rc__pkgspec { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; gap: .3rem; }
.rc__pkgspec li {
  position: relative; padding-left: 1.05rem;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--su-ink-2);
}
.rc__pkgspec li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--su-lime);
}
.rc__pkgterms {
  margin: var(--sc-3) 0 0;
  font-size: var(--sc-t-xs); line-height: 1.55; color: var(--su-muted-card);
}

/* The postcode field. One input, sized to the four digits it takes,
   because a full-width box invites a street address. */
.rc__field { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.rc__field input {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  width: 6.5ch; padding: .5rem .65rem; text-align: center;
  color: var(--sc-ink); background: var(--sc-surface);
  border: 1px solid var(--su-line); border-radius: var(--sc-r-md);
}
.rc__field input::placeholder { color: var(--su-line); }
.rc__field input:focus-visible { outline: 2px solid var(--su-lime-deep); outline-offset: 2px; border-color: var(--sc-ink); }
.rc__field input[aria-invalid="true"] { border-color: #B4432F; }
.rc__err { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: #B4432F; }

.rc__fine {
  margin: 0;
  font-size: var(--sc-t-xs); line-height: 1.6;
  color: var(--su-deep-soft); max-width: 48ch;
}

/* The question takes focus when a step opens so a screen reader hears
   what is being asked rather than the first option in isolation. It is a
   heading, not a control, and the visible ring belongs on whatever the
   reader tabs to next. */
.rc__q:focus { outline: none; }

/* .btn sets its own display, which beats the attribute. */
.rc__nav [hidden] { display: none; }

/* All five questions are in the markup, because with no script that is
   the whole form: five labelled radio groups and a submit that goes to
   the contact page. Separated from each other, then, rather than stacked
   into one undifferentiated column of radios.

   With a script they are hidden BEFORE first paint rather than after it,
   or the reader sees five questions and then watches four disappear. The
   html.js class is set in the head; data-rc-stepped is set by the
   checker once it knows it can drive the form. */
.rc__form .rc__step + .rc__step { margin-top: clamp(2rem, 4vw, 3rem); }
html.js .rc__step { display: none; }
html.js [data-rc-stepped] .rc__step { display: block; }
html.js [data-rc-stepped] .rc__step[hidden] { display: none; }
[data-rc-stepped] .rc__form .rc__step + .rc__step { margin-top: 0; }

@media (max-width: 560px) {
  .rc__item { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .rc__nav { flex-direction: column-reverse; align-items: stretch; }
  .rc__next, .rc__back { margin-left: 0; width: 100%; justify-content: center; }
}


/* --- the about page's two additions ---------------------------------- */

/* One pull quote, and only one: the argument has a single line a reader
   should be able to repeat to somebody else, and a second would mean
   neither was it. */
.pull {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-left: clamp(1.1rem, 2.5vw, 1.75rem);
  border-left: 3px solid var(--su-lime);
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  letter-spacing: -.035em; line-height: 1.2;
  color: var(--sc-ink); max-width: 26ch; text-wrap: balance;
}

.vals { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px)  { .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.val { display: grid; gap: .45rem; align-content: start; }
.val__n {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: var(--sc-t-sm); color: var(--su-lime-deep); letter-spacing: 0;
}
.val h3 { font-size: var(--sc-t-lg); margin: 0; max-width: 24ch; text-wrap: balance; }
.val p { font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; line-height: 1.6; max-width: 46ch; }

/* The form's submit. Full width is right on a phone, where the button is
   a thumb target and the column is narrow. On a desktop form column it
   produces a 544px stadium with three words in the middle of it, which is
   a lot of lime for one instruction. Sized to its label above 560, and
   left, where the fields start. */
.formgrid > .btn { justify-self: start; }
@media (max-width: 560px) { .formgrid > .btn { justify-self: stretch; width: 100%; } }


/* ============================================================
   THE SIGNATURE

   One soft field of light, fixed to the viewport, driven by
   signature.js. Two lobes: a cool one that fades as the page
   travels and a warm one that arrives, so the change is a shift in
   temperature rather than a lamp being turned up.

   Fixed, not scrolled, and behind everything: the sections that
   paint their own ground cover it completely, which is the point.
   The light lives in the open passages between them.

   Defaults are set here rather than only in the script, so a page
   whose script has not run yet renders the low state instead of a
   flash of nothing.
   ============================================================ */
:root { --sig-y: 82%; --sig-a: .05; --sig-warm: 0; }

.sig {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; contain: strict;
  background:
    radial-gradient(120% 78% at 78% var(--sig-y),
      rgb(140 232 56 / calc(var(--sig-a) * 0.55)) 0%,
      rgb(140 232 56 / 0) 62%),
    radial-gradient(150% 96% at 16% calc(var(--sig-y) + 14%),
      rgb(120 176 214 / calc(var(--sig-a) * (1 - var(--sig-warm)) * 0.9)) 0%,
      rgb(120 176 214 / 0) 58%),
    radial-gradient(140% 90% at 62% calc(var(--sig-y) - 8%),
      rgb(226 196 138 / calc(var(--sig-a) * var(--sig-warm) * 0.75)) 0%,
      rgb(226 196 138 / 0) 60%);
  transition: none;
}

/* Everything the reader is here for sits above the light.

   Only the two static ancestors are listed. This rule used to name the
   chrome as well, and setting `position: relative` on elements that were
   already `position: fixed` dropped every one of them into normal flow:
   the quote card left the bottom right corner and rendered at the top of
   the document, and the preloader stopped covering the page at all,
   which read as it never running. The bar, the docket, the thumb rail,
   the two menus and the preloader all carry their own position and their
   own z-index. Do not restate either here. */
main, footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --sig-y: 58%; --sig-a: .095; --sig-warm: .5; }
}

/* The peak's picker takes the bar's three houses. It is still a real
   control here, so the label stays beside the icon rather than being
   hidden behind a tooltip: this is where the choice is actually made,
   and a silhouette alone is a guess at that size. */
.pick--icons .pick__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem .95rem;
}
.pick--icons .pick__opt svg { width: 22px; height: 19px; flex: none; }
.pick--icons .pick__lab { white-space: nowrap; }
@media (max-width: 720px) {
  /* At three across on a phone the labels are what break the row, so
     they go and the silhouettes carry it. The words stay in the
     accessible name and the tooltip. */
  .pick--icons .pick__lab {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .pick--icons .pick__opt { padding: .6rem .5rem; }
  .pick--icons .pick__opt svg { width: 24px; height: 21px; }
}

/* The form's own reply. Not a toast: a toast on a form somebody has
   just spent two minutes on is a message that leaves before they have
   finished reading it. */
.formnote {
  margin: var(--sc-4) 0 0; padding: var(--sc-4);
  border-radius: var(--sc-r-md); border: 1px solid var(--su-line);
  background: var(--su-panel);
  font-size: var(--sc-t-sm); line-height: 1.6; color: var(--su-ink-2);
}
.formnote[data-kind="bad"] { border-color: #B4432F; }
.formnote a { color: var(--su-lime-deep); font-weight: 600; }


/* ============================================================
   THE INCENTIVES INDEX

   The parent's journal shape: one lead with its photograph, a named
   series, then numbered rows. Six identical cards print six things of
   equal weight and give a reader no way in; a lead and an order give
   them both.
   ============================================================ */

.jcard {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  text-decoration: none; color: inherit;
}
@media (min-width: 860px) { .jcard { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; } }
.jcard__img { display: block; border-radius: var(--sc-r-lg); overflow: hidden; background: var(--su-greige); }
.jcard__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform var(--sc-d-slow) var(--sc-ease-out); }
.jcard__body { display: grid; gap: .55rem; align-content: center; }
.jcard__meta { font-size: var(--sc-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--su-lime-deep); font-weight: 700; }
.jcard__t {
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: var(--sc-t-xl); letter-spacing: -.035em; line-height: 1.12;
  max-width: 24ch; text-wrap: balance;
}
.jcard__d { font-size: var(--sc-t-base); color: var(--su-muted-card); line-height: 1.6; max-width: 52ch; }
@media (hover: hover) and (pointer: fine) {
  .jcard:hover .jcard__img img { transform: scale(1.03); }
  .jcard:hover .jcard__t { color: var(--su-lime-deep); }
}
@media (prefers-reduced-motion: reduce) { .jcard__img img { transition: none; } }

.jlabel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-3);
  margin-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: var(--sc-3);
  border-bottom: 1px solid var(--su-line);
}
.jlabel b { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -.03em; }
.jlabel span { font-size: var(--sc-t-sm); color: var(--su-muted-card); }

.jlist { display: grid; }
.jrow {
  display: grid; align-items: baseline;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: .2rem var(--sc-4);
  padding: var(--sc-5) 0; border-bottom: 1px solid var(--su-line);
  text-decoration: none; color: inherit;
}
/* Every cell placed. Auto-placement with two row-spanning children put
   the title in the third column and the reading time in the second, so
   the row read right to left. */
.jrow__n  { grid-column: 1; grid-row: 1 / 3; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-sm); color: var(--su-lime-deep); letter-spacing: 0; }
.jrow__t  { grid-column: 2; grid-row: 1; font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-lg); letter-spacing: -.03em; line-height: 1.2; text-wrap: balance; }
.jrow__d  { grid-column: 2; grid-row: 2; font-size: var(--sc-t-sm); color: var(--su-muted-card); line-height: 1.6; max-width: 62ch; margin-top: .3rem; }
.jrow__go { grid-column: 3; grid-row: 1; font-size: var(--sc-t-xs); color: var(--su-muted-card); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .jrow:hover .jrow__t { color: var(--su-lime-deep); } }
@media (max-width: 620px) {
  .jrow { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .jrow__go { grid-column: 2; grid-row: 3; margin-top: .45rem; }
}

/* --- the thank-you page ---------------------------------------------- */

.next { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; }
.next__step {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sc-4);
  padding: var(--sc-5) 0; border-top: 1px solid var(--su-line);
}
.next__step:first-child { border-top: 0; padding-top: 0; }
/* Placed, not auto-placed. The heading took column 2 and the paragraph
   then fell into the next free cell, which is column 1: the body copy
   ran down the narrow date column while two thirds of the row sat
   empty. The same mistake the incentive rows had. */
.next__when { grid-column: 1; grid-row: 1; font-size: var(--sc-t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--su-lime-deep); font-weight: 700; padding-top: .3rem; }
.next__step h2 { grid-column: 2; grid-row: 1; font-size: var(--sc-t-lg); margin: 0 0 .35rem; max-width: 24ch; }
.next__step p  { grid-column: 2; grid-row: 2; font-size: var(--sc-t-sm); color: var(--su-muted-card); margin: 0; line-height: 1.6; max-width: 58ch; }
@media (max-width: 620px) {
  .next__step { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .next__when { grid-column: 1; grid-row: 1; padding-top: 0; }
  .next__step h2 { grid-column: 1; grid-row: 2; }
  .next__step p  { grid-column: 1; grid-row: 3; }
}

.thanks__more { margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--su-line); }
.thanks__h { font-size: var(--sc-t-xl); margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.thanks__grid { display: grid; gap: var(--sc-4); }
@media (min-width: 700px)  { .thanks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .thanks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.thanks__card {
  display: grid; gap: .35rem; align-content: start;
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid var(--su-line); border-radius: var(--sc-r-md);
  background: var(--sc-surface); text-decoration: none; color: inherit;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.thanks__card .thanks__k { font-size: var(--sc-t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--su-lime-deep); font-weight: 700; }
.thanks__card b { font-family: var(--sc-font-display); font-weight: 800; font-size: var(--sc-t-base); letter-spacing: -.02em; line-height: 1.25; }
.thanks__card span:last-child { font-size: var(--sc-t-sm); color: var(--su-muted-card); line-height: 1.55; }
@media (hover: hover) and (pointer: fine) {
  .thanks__card:hover { border-color: var(--sc-ink); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .thanks__card { transition: none; } }
.thanks__fine { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-size: var(--sc-t-sm); color: var(--su-muted-card); }