/* ==========================================================================
   TONE — the page's tonal arc
   ==========================================================================
   Measured before writing this: 81% of the rendered page sat between
   luminance 232 and 255, 16% was the one dark section, and 2.9% of an 8,639px
   page was everything in between. Half the page — from 600px to 5,200px —
   moved through a range of fifteen values. That is not light and airy, it is
   flat: the eye has no reason to register a section change because there is
   no tonal event at the seam, and by the time the dark band arrives it reads
   as a jolt rather than as an arrival.

   The fix is not more colour. It is more STEPS. Four light registers instead
   of three near-identical ones, and a second dark anchor so the page ends on
   a note rather than fading out on paper.

     hero          graded, paper to wash   the opening
     audience      paper                   251
     features      soft                    244 — the cards lift off it by 7
     practice      paper                   251
     finance stack lilac                   246 — the one COOL ground
     FAQ           wash                    242 — the one step down
     closing       night, deeper            18 — the ending

   Nine values across the six light sections, which is v135's band. The
   sections are told apart by alternation and by the one hue change, not by
   a staircase of increasingly dark greys.

   The finance stack used to be the mid-page dark band. It has been turned
   light: its event is now a change of hue rather than of value — the only
   cool ground on a page of warm ones — so the page no longer goes dark in
   the middle and comes back out. That leaves the closing as the single dark
   arrival, which is what it should always have been.

   The light registers had to span more than fourteen values to read as
   different rooms rather than as one long corridor. They span twenty-five
   now, and they alternate rather than drifting toward white.

   Every ground here is warm and keeps ink at #17161C, so nothing loses
   contrast — the darkest light ground is still 12.6:1 under body copy.
   ========================================================================== */

:root{
  /* One more step under paper-soft, and a wash between canvas and it. Both
     warm, both from the same family as the photograph's ground. */
  /* The whole light range, measured against v135 rather than invented.
     ---------------------------------------------------------------------
     v135 puts every ground on the page between luminance 242 and 253 — an
     eleven-value band for the entire document, alternating 246 / 253 and
     dropping to 242 once, at the FAQ. Its cards sit at 246, the SAME value as
     the section behind them, and are told apart by a faint lilac tint and a
     hairline rather than by any step in value.

     This ramp had grown to a 233-value range: features at 225, cards at 251,
     closing at 18. Every correction I made was making the steps larger and
     more legible, which is the opposite of what the design wants. Muted and
     light means differentiation by HUE and by hairline, with value nearly
     flat — not a tonal staircase.

     Back inside v135's band, chroma still held at 5-6. */
  --wash:#F2F1ED;          /* lum 242, chroma 5 — the FAQ, the one step down */
  --paper-soft:#F6F5F1;    /* lum 244, chroma 5 — was 225. Now a whisper. */
  --night-deep:#101017;    /* the closing: a shade under the finance stack */
}

/* --------------------------------------------------------------------------
   The light registers
   -------------------------------------------------------------------------- */

/* The hero was one flat field. A long vertical grade gives the fold somewhere
   to be — the copy sits on the lighter half, the rail on the deeper. */
.hero{
  background:
    radial-gradient(ellipse 39% 43% at 73% 48%,rgba(29,27,196,.075),transparent 68%),
    radial-gradient(ellipse 28% 30% at 14% 75%,rgba(35,122,87,.035),transparent 74%),
    linear-gradient(180deg,var(--paper) 0%,var(--canvas) 58%,var(--wash) 100%);
}

.audience-section{background:var(--paper)}
.features-section{background:var(--paper-soft)}
.practice{background:var(--paper)}
.faq-section{background:var(--wash)}

/* Seams. With real steps between grounds the hairline at each join stops
   doing any work and starts fighting the step. */
.audience-section,
.features-section,
.practice,
.faq-section{border-top:0}

/* --------------------------------------------------------------------------
   The closing, on night
   --------------------------------------------------------------------------
   The page used to end on the same paper it started on, which is why the last
   screenful had nothing to say. It ends on the deepest ground now, one shade
   under the finance stack so the two darks are not the same dark.
   -------------------------------------------------------------------------- */

.closing-section{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(29,27,196,.20),transparent 62%),
    var(--night-deep);
}

.closing-inner{
  border:1px solid rgba(143,140,255,.16);
  background:
    radial-gradient(circle at 84% 42%,rgba(29,27,196,.30),transparent 44%),
    linear-gradient(132deg,rgba(38,36,58,.80),rgba(22,21,32,.80));
  box-shadow:0 40px 120px rgba(0,0,0,.45);
}

.closing-section .section-label{color:var(--night-quiet)}
.closing-section .label-stones i{background:var(--night-quiet)}
.closing-section .label-stones i:nth-child(3){background:#8F8CFF}
.closing-section h2{color:var(--night-text)}
.closing-section h2 em{color:#B9B7FF}
.closing-section .closing-inner>p{color:var(--night-muted)}
.closing-section small{color:var(--night-quiet)}

.closing-balance{border-left-color:rgba(255,255,255,.12)}
.closing-balance span{color:var(--night-quiet)}
.closing-balance span i{background:#8F8CFF}
.closing-balance strong,
.closing-balance [data-ending-balance]{color:#B9B7FF}
.closing-balance p{color:var(--night-text)}
.closing-balance small{color:var(--night-quiet)}

/* The quiet button was drawn for paper: a near-white fill with ink on it. */
.closing-section .button-quiet{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
  color:var(--night-text);
}
.closing-section .button-quiet:hover{background:rgba(255,255,255,.11)}
.closing-section .button-primary{
  background:#3E3CE0;
  color:#FFF;
  box-shadow:0 14px 34px rgba(29,27,196,.42);
}
.closing-section .button-primary:hover{background:#514FE8}
.closing-section a:focus-visible{outline-color:#8F8CFF}

/* Anything inherited that still assumes paper. */
.closing-section .closing-inner *{border-color:rgba(255,255,255,.12)}

/* --------------------------------------------------------------------------
   The footer follows the closing down rather than snapping back to paper.
   --------------------------------------------------------------------------
   The inherited rules here are two and three classes deep — `.footer-main
   nav strong`, `.footer-main>div>p` — so single-class overrides lose to them
   and the text stayed at paper inks on a night ground. Matched depth, not
   !important.
   -------------------------------------------------------------------------- */

.site-footer{background:var(--night-deep);border-top:1px solid rgba(255,255,255,.07)}
.site-footer{color:var(--night-muted)}
.site-footer .footer-main>div>p,
.site-footer .footer-main nav a{color:var(--night-muted)}
.site-footer .footer-main nav a:hover{color:var(--night-text)}
.site-footer .footer-main nav strong{color:var(--night-quiet)}
.site-footer .brand,
.site-footer .brand span{color:var(--night-text)}
.site-footer .brand-mark i{background:var(--night-quiet)}
.site-footer .brand-mark i:nth-child(3){background:#6E6BFF}
.site-footer .footer-bottom{border-top-color:rgba(255,255,255,.07)}
.site-footer .footer-bottom span{color:var(--night-quiet)}
.site-footer a:focus-visible{outline-color:#8F8CFF}

@media (max-width:820px){
  .hero{background:
    radial-gradient(ellipse 60% 30% at 70% 30%,rgba(29,27,196,.07),transparent 70%),
    linear-gradient(180deg,var(--paper) 0%,var(--canvas) 62%,var(--wash) 100%)}
}

/* --------------------------------------------------------------------------
   The closing composition, restated for the dark ground
   --------------------------------------------------------------------------
   theme.css builds this block figure-first, at clamp(52px,16vw,264px). That
   was the right call when the page was one long light field and nothing on it
   reached a scale anyone would remember — the figure was the only climax
   available. The section is the deepest ground on the page now, so it does not
   need a 230px number to be an ending; the number just shouts over the
   sentence that earns it, and at that size mono's full-width punctuation sets
   "$0.00" as "$0 . 00" across half the viewport.

   Same correction as the product screens: the sentence leads, the figure is
   the evidence under it.
   -------------------------------------------------------------------------- */

.closing-inner h2{order:2}
.closing-inner>p{order:3}
.closing-inner .closing-balance{order:4}
.closing-inner .closing-actions{order:5}

.closing-inner h2{
  max-width:18ch;
  margin-inline:auto;
  /* Came down with the rest of the scale. At 86px this was the largest thing
     on the page by a wide margin — it shouted the ending rather than arriving
     at it, and it is the one heading a visitor reads having already read
     everything else. */
  font-size:clamp(36px,3.6vw,54px);
  font-weight:510;
  line-height:.99;
  letter-spacing:-.045em;
}
.closing-inner>p{margin-inline:auto}

/* The figure, at proof scale and set in the sans so the decimal point sits
   next to the digits rather than in a cell of its own. */
.closing-balance{
  margin:38px auto 6px;
  padding:22px 34px 20px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(143,140,255,.20);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.closing-inner [data-ending-balance]{
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(40px,4.4vw,60px);
  line-height:1.04;
  letter-spacing:-.035em;
}
.closing-balance>span{margin-top:8px;font-size:11.5px}
.closing-inner .closing-actions{margin-top:30px}