/* ============================================================
   sections.css - the page below the stage

   Loaded LAST, so where it disagrees with index.css it wins at
   equal specificity. index.css is left intact because the other
   marketing pages still read it; only the index's own sections
   are re-laid-out here.

   WHY EACH SECTION LOOKS DIFFERENT
   The page previously ran heading-centred-above-a-grid seven
   times, which makes a long page read as one section repeated.
   Six layout families now alternate down the page:

     ledger    a rule-divided row of figures        (stats)
     spec      a wide row per item, index + specs   (bots)
     manifesto one large statement, then a credo    (about)
     process   heading column beside a media card   (how it works)
     rail      a label and a line of marks          (powered by)
     table     the free/premium comparison          (plans)
     record    numbered entries with a figure       (results)
     aside     sticky heading beside a list         (faq, kept)

   No two adjacent sections share a family, and no family is a
   three-across grid of equal cards.
   ============================================================ */

/* ── Shared ─────────────────────────────────────────────────
   This used to be one opaque sheet, because the canvas only had to
   show behind the hero. The canvas now runs the length of the page,
   so an opaque sheet here would hide every station below the third
   one. Legibility moved to a per-section scrim instead - see the
   .sec::before rule in stage.css - which keeps the type's contrast
   without hiding the object the section is describing. */
.page-body {
    position: relative;
    z-index: 1;
}

.sec { position: relative; }

/* global.css has a bare `section { max-width: var(--page-max); margin:
   0 auto; padding: ... }`, so EVERY section is capped and centred by
   default. Inside one, .shell then caps and pads again - a 1400px
   section holding a 1400px shell, indented twice, sitting 56px inboard
   of its neighbours. #method and #close were missing from this list
   after a rename (they were #success-stories), which is exactly what
   that looked like on the page.

   index.css also caps some of these individually and adds its own
   horizontal padding. Both jobs now belong to .shell, and leaving
   the old caps in place meant a 1200px section inside a 1400px shell,
   padded twice. Reset at ID specificity because that is the
   specificity the rules being reset were written at.

   #faq keeps its own width: it has no .shell wrapper, because the
   sticky-aside grid IS its layout. */
#bots-showcase,
#about,
#how-it-works,
#plans,
#method,
#close,
#trusted {
    max-width: none;
    margin: 0;
    padding: 0;
    /* index.css centres the heading of every one of these sections.
       Nothing below the stage is centred any more, and a centred
       rule surviving inside a start-aligned grid shows up as text
       that is neither left aligned nor centred. */
    text-align: left;
}
#bots-showcase h2, #about h2, #how-it-works h2,
#plans h2, #method h2, #close h2, #trusted h2,
#plans .plans-intro { text-align: left; }
/* Re-apply the band rhythm the reset above just cleared. */
#bots-showcase,
#about,
#how-it-works,
#plans,
#method { padding-block: clamp(4rem, 9vw, 8.5rem); }

.sec-head {
    display: grid;
    gap: 0.85rem;
    justify-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-head .lede { max-width: 52ch; }

/* A single hairline above a section reads as a chapter break with
   far less weight than a filled band would carry. */
/* A section's top border sits at the top of its PADDING box, and these
   sections carry up to 8.5rem of it. The rule therefore drew a hairline
   roughly a hundred pixels above the heading and a hundred below the
   section before it - touching neither, floating in the gap. The band
   rhythm already separates them; the rule only added a loose line.
   Kept as a class with no border so any stale markup is harmless. */
.sec-rule {}

/* ════════════════════════════════════════════════════════════
   LEDGER  (the figures strip)
   Three numbers on one line with rules between them, not three
   centred cards. Reads as a masthead statistic rather than as a
   feature grid, which is what it actually is.
   ════════════════════════════════════════════════════════════ */
.ledger {
    /* No fill at all. This strip is the handover from the flight to
       the page and it carries the .sec-open scrim ramp, which paints
       behind the element's own background - so any fill here, however
       light, would flatten the ramp back into a hard edge. The two
       rules are enough to read it as a band. */
    background: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ledger-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.ledger-item {
    display: grid;
    gap: 0.3rem;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    border-left: 1px solid var(--border);
}
.ledger-item:first-child { border-left: 0; padding-inline-start: 0; }

.ledger-v {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--step-4);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1;
}
.ledger-k {
    font-size: var(--step--1);
    color: var(--text-quiet);
    line-height: 1.5;
    max-width: 22ch;
}

@media (max-width: 720px) {
    .ledger-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .ledger-item {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 1.25rem 0 0;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        column-gap: 1rem;
    }
    .ledger-item:first-child { border-top: 0; padding-top: 0; }
    .ledger-k { max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   SPEC ROWS  (the two bots)
   Two bots are not a card grid; they are two things to compare.
   Each takes a full-width row: identity on the left, the four
   numbers that define it on the right, a rule between them. Put
   side by side as cards the eye reads them as a menu; stacked as
   rows with aligned spec columns it can actually compare them.
   ════════════════════════════════════════════════════════════ */
.spec-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--border);
    align-items: start;
}
.spec-row:last-of-type { border-bottom: 1px solid var(--border); }

.spec-id { display: grid; gap: 0.9rem; justify-items: start; }

/* The accent is the one blue used everywhere else on the page.
   The two bots are distinguished by their index and their name,
   not by giving each its own colour. */
.spec-index {
    font-family: var(--font-num);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--accent-warm);
}
.spec-name {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}
.spec-bot {
    font-size: var(--step--1);
    color: var(--text-quiet);
    margin: 0;
}
.spec-body {
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--text-muted);
    margin: 0;
    max-width: 62ch;
}

/* Two columns of definition pairs. A dl, because that is what a
   spec sheet is, and a screen reader then reads term and value as
   a pair instead of as two unrelated strings. */
.spec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.75rem;
}
.spec-list > div {
    padding: 1rem 1.25rem 1rem 0;
    border-top: 1px solid var(--border);
}
.spec-list > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.spec-list dt {
    font-size: var(--step--1);
    color: var(--text-quiet);
    margin-bottom: 0.3rem;
}
.spec-list dd {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--step-0);
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.spec-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
}
.spec-link i { font-size: 0.72em; transition: transform var(--dur-fast) var(--ease-out); }
.spec-link:hover i { transform: translateX(4px); }

@media (max-width: 900px) {
    .spec-row { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 520px) {
    .spec-list { grid-template-columns: minmax(0, 1fr); }
    .spec-list > div { padding-right: 0; }
    .spec-list > div:nth-child(2) { border-top: 1px solid var(--border); padding-top: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   MANIFESTO  (about)
   One statement at display size carrying the whole section, then
   three commitments as rule-divided rows. No centred heading, no
   stat cards: the claim is the layout.
   ════════════════════════════════════════════════════════════ */
.manifesto-lead {
    max-width: 20ch;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.manifesto-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.manifesto-cols p {
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--text-muted);
    margin: 0 0 1rem;
}
.manifesto-cols p:last-child { margin-bottom: 0; }

.credo {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.credo li {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: baseline;
    padding-block: 1.15rem;
    border-bottom: 1px solid var(--border);
}
.credo .credo-k {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--step-1);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.credo .credo-v {
    font-size: var(--step-0);
    color: var(--text-muted);
    line-height: 1.55;
}

@media (max-width: 760px) {
    .manifesto-cols { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .manifesto-lead { max-width: 100%; }
    .credo li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   PROCESS  (how it works)
   The step carousel is unchanged - it works and it is the only
   interactive thing on the page. What changes is that its heading
   stops sitting centred above it and takes a column beside it, so
   this section does not open the same way as the one before.
   ════════════════════════════════════════════════════════════ */
.process {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.process-head { display: grid; gap: 0.85rem; justify-items: start; }
.process-head .lede { font-size: var(--step-0); max-width: 34ch; }

@media (max-width: 980px) {
    .process { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   RAIL  (powered by)
   A label and a line of marks. This section is a footnote, so it
   gets a footnote's weight: no display heading, no tagline
   paragraph, tight vertical padding.
   ════════════════════════════════════════════════════════════ */
.rail {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.rail-label { line-height: 1.6; }
.rail-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.75rem, 5vw, 3.5rem);
}
.rail-marks img {
    /* Set on height, not width: the five marks have five different
       aspect ratios, and matching their widths would make the square
       ones tower over the wordmarks. */
    height: 30px;
    width: auto;
    /* In colour, at nearly full strength. They were desaturated to a
       common grey on the theory that five brand palettes in a row is
       noise - which is true of a wall of logos and false of five, and
       it cost the page the only non-blue colour on it above the fold.
       Grey marks on a dark blue ground read as disabled.

       A small lift instead of a filter: these are dark-ish PNGs and
       they sit on near-black, so the brightness is what makes them
       legible, not the saturation. */
    filter: brightness(1.12);
    opacity: 0.9;
    transition: opacity var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
}
.rail-marks img:hover { opacity: 1; filter: brightness(1.25); }

@media (max-width: 700px) {
    .rail { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    .rail-marks { gap: 1.75rem; }
    .rail-marks img { height: 24px; }
}

/* ════════════════════════════════════════════════════════════
   PLANS
   The table stays a table - a feature comparison is tabular data
   and anything else is decoration. What it gains is a priced
   header, so the row you are reading has a number attached to it.
   ════════════════════════════════════════════════════════════ */
.plans-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}
.plans-note {
    font-size: var(--step--1);
    color: var(--text-quiet);
    line-height: 1.65;
    margin: 1.25rem 0 0;
    max-width: 40ch;
}
.plan-table { width: 100%; border-collapse: collapse; }
.plan-table th, .plan-table td {
    padding: 0.95rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-size: var(--step--1);
}
.plan-table th:first-child, .plan-table td:first-child {
    text-align: left;
    padding-left: 0;
    color: var(--text-primary);
    font-size: var(--step-0);
    font-weight: 500;
}
.plan-table thead th {
    border-bottom-color: var(--border-hover);
    padding-bottom: 1.1rem;
    vertical-align: bottom;
}
.plan-tier {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-quiet);
    margin-bottom: 0.35rem;
}
.plan-price {
    display: block;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-size: var(--step-2);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
.plan-price small {
    font-size: var(--step--1);
    font-weight: 400;
    color: var(--text-quiet);
    letter-spacing: 0;
}
.plan-table tbody tr:last-child td { border-bottom: 0; }
.plan-yes { color: var(--accent-blue); }
.plan-no  { color: var(--text-quiet); }

@media (max-width: 900px) {
    .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ════════════════════════════════════════════════════════════
   RECORD  (backtest results)
   Numbered entries. Each leads with the figure the entry is about
   rather than with a quotation mark: these are research results,
   and styling them as testimonial blockquotes was the page's one
   genuinely misleading piece of design.
   ════════════════════════════════════════════════════════════ */
.record {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.record > li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
    border-bottom: 1px solid var(--border);
    align-items: start;
}
.record-n {
    font-family: var(--font-num);
    font-size: var(--step--1);
    color: var(--text-quiet);
    padding-top: 0.35rem;
}
/* Was monospace, because every entry used to lead with a figure like
   "20-day / 1.0x ATR". The entries lead with words now, and mono on a
   two-word phrase reads as a code identifier rather than a heading. */
.record-fig {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.1;
    display: block;
}
.record-sub {
    display: block;
    font-size: var(--step--1);
    color: var(--accent-warm);
    margin-top: 0.4rem;
}
.record-txt {
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--text-muted);
    margin: 0;
}
.record-src {
    display: block;
    font-size: var(--step--1);
    color: var(--text-quiet);
    margin-top: 0.6rem;
}
.record-disc {
    font-size: var(--step--1);
    color: var(--text-quiet);
    line-height: 1.65;
    margin: 1.5rem 0 0;
    max-width: 68ch;
}

@media (max-width: 820px) {
    .record > li { grid-template-columns: 2rem minmax(0, 1fr); }
    .record-txt-cell { grid-column: 2; }
}
@media (max-width: 560px) {
    /* Monospace at --step-3 puts "20-day / 1.0x ATR" within a few
       pixels of the right edge on a 390pt phone. The figure steps
       down; the paragraph beside it does not need to. */
    .record-fig { font-size: var(--step-2); }
}

/* ════════════════════════════════════════════════════════════
   FAQ
   Kept as it is - a sticky heading beside a divided list is
   already the right shape for it. Only the heading order is
   corrected, in the markup.
   ════════════════════════════════════════════════════════════ */

/* ── Screen-reader-only ─────────────────────────────────────
   The plans table needs a caption to say what it compares, and a
   caption is redundant to anyone who can see the heading beside
   it. Clip rather than display:none, which would take it out of
   the accessibility tree along with the layout. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Step index (inside .process-head) ──────────────────────
   Numbered from a counter rather than from typed digits, so the
   numbering cannot drift out of step with the list if a step is
   ever added or removed. */
.step-index {
    list-style: none;
    counter-reset: stepi;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: 0;
    border-top: 1px solid var(--border);
    width: 100%;
}
.step-index li { counter-increment: stepi; border-bottom: 1px solid var(--border); }

.step-index button {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: var(--step--1);
    color: var(--text-quiet);
    transition: color var(--dur-fast) var(--ease-out);
}
.step-index button::before {
    content: counter(stepi, decimal-leading-zero);
    font-family: var(--font-num);
    color: var(--text-quiet);
    transition: color var(--dur-fast) var(--ease-out);
}
.step-index button:hover { color: var(--text-muted); }

/* Active step. Colour alone would not carry it for a viewer who
   cannot distinguish the blue, so the weight changes too. */
.step-index button.is-on { color: var(--text-primary); font-weight: 600; }
.step-index button.is-on::before { color: var(--accent-warm); }

.step-index button:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    /* Beside the card it is an index; above the card it would be a
       second copy of the content the card already shows. */
    .step-index { display: none; }
}

/* ── FAQ alignment ──────────────────────────────────────────
   The FAQ was capped at 1080px and centred while every section
   above it runs to the 1400px shell, so its left edge sat ~190px
   inboard of theirs: the one place on the page where the margin
   visibly moves. It now shares the shell's width and padding, and
   the answer column is capped instead, which keeps the measure
   readable without moving the margin. */
#faq.faq-block {
    max-width: var(--page-max);
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
    grid-template-columns: minmax(240px, 320px) minmax(0, 820px);
}

@media (max-width: 900px) {
    /* index.css already collapses the FAQ to one column here; it needs
       the explicit zero minimum for the same reason as every other
       fallback above. */
    #faq.faq-block { grid-template-columns: minmax(0, 1fr); }
    .faq-block .faq-aside { position: static; }
}

/* ── Carousel shrink chain ──────────────────────────────────
   Moving the step card into a grid track changed what its
   containing block is. As a block child of the section it was
   simply as wide as the section; as a flex item inside a grid
   track its automatic minimum size is its min-content width,
   which is the widest step, and it stopped shrinking below that.
   At 500px it pushed the page's scroll width to 646.

   min-width: 0 down the chain restores the shrinking. The wrapper
   already has overflow: hidden, which is what clips the steps that
   are off to the side; without a zero minimum that clipping never
   got the chance to apply. */
.steps-layout,
.steps-card,
.steps-content-side,
.steps-wrapper,
.steps-inner { min-width: 0; }

/* And the auto margins have to go. index.css centres .steps-layout
   with `margin: 0 auto`, which was right when it was a block child of
   the section. A GRID item with auto inline margins is not stretched
   to its track - it is sized fit-content, which resolves to its
   min-content width when that exceeds the track. That is the whole
   646px: the track was correct at 460 and the item ignored it.

   An explicit width and no auto margin puts it back on the track. The
   card and the step wrapper both already clip, so the steps that are
   off to the side stay clipped rather than widening the page. */
.process .steps-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* ── Method CTA ─────────────────────────────────────────────
   The simulators are the one place on this page that can give a
   visitor a number, so the entry that points at them gets real
   buttons rather than a text link. Same pair of button styles as
   the hero: one accent, one radius scale, nothing new invented
   for a single section. */
.record-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
/* The hero buttons are sized for a hero. In a body list they would
   shout, so they step down one notch and keep everything else. */
.record-cta .btn-solid,
.record-cta .btn-ghost {
    font-size: var(--step--1);
    padding: 0.8em 1.4em;
}

/* The qualifier under the premium price. Small and quiet, but it has
   to be in the header cell rather than a footnote: a price with the
   unit attached somewhere else is the shape of a misleading price. */
/* The asterisk. Warm, because it is a label rather than something to
   click, and superscript so it never widens the price's line box. */
.plan-star {
    color: var(--accent-warm);
    font-family: var(--font-body);
    font-weight: 600;
}
.plan-price .plan-star {
    font-size: 0.5em;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.12em;
}

/* The footnote. A two-column grid rather than an inline asterisk, so the
   text block hangs off the marker instead of wrapping back underneath
   it. */
.plan-foot {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.4rem;
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-quiet);
    max-width: 46ch;
}
.plan-foot strong { color: var(--text-primary); font-weight: 600; }

/* ── The closing band ───────────────────────────────────────
   Sits over the live corridor, so it is deliberately taller than it
   needs to be: the lower half is empty on purpose and the candles are
   what fills it. */
#close.sec-close {
    /* The bottom padding IS the window onto the chart, so it is
       deliberate space rather than slack. It has to be tall enough that
       the chart is on screen for a decent stretch of scrolling: at the
       very bottom of the document only ~500px of this section sits
       above the footer, and the copy takes most of that. */
    padding-block: clamp(5rem, 12vw, 8rem) clamp(11rem, 30vw, 22rem);
}
.close-inner {
    position: relative;
    display: grid;
    justify-items: start;
    gap: clamp(0.9rem, 2vw, 1.4rem);
}

/* The copy carries its own scrim.

   Opening the section's scrim far enough to light the chart also let
   candles run straight through this paragraph. The two wants are not
   the same want, so they get separate scrims: the section's stays open
   for the chart, and this one keeps the words readable wherever the
   chart happens to be behind them.

   A soft ellipse rather than a panel - a filled box with an edge would
   read as a card pasted over the chart. Sized explicitly so the
   transparent stop lands inside the element and the halo ends by
   fading rather than by stopping. */
.close-inner::before {
    content: '';
    position: absolute;
    inset: -35% -30% -30% -45%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 64% 62% at 34% 50%,
        rgba(10, 15, 30, 0.94) 0%,
        rgba(10, 15, 30, 0.84) 36%,
        rgba(10, 15, 30, 0.44) 62%,
        rgba(10, 15, 30, 0.12) 80%,
        transparent 93%);
}
.close-title { max-width: 18ch; }
.close-body { max-width: 48ch; }
.close-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}


/* The credo figures. Enumeration, so they take the warm accent like
   every other number that names a thing rather than links to one. */
.credo .credo-k { color: var(--accent-warm); }