/* Eventide "Operator Energy" — Modern Practice Growth Scorecard.
   HYBRID WARMTH re-skin, 2026-08-06 PM. Justin approved the warm editorial
   hybrid homepage (eventideaw-site `css/operator-energy.css`) and rejected the
   cold/flat treatment, so this page now speaks the same vocabulary:

     · VOICE     Palatino serif for anything Eventide says — headline, step
                 titles, choice labels, score, tier. Sans is the apparatus:
                 counters, group labels, buttons, small print.
     · PAPER     cream/bright-paper sheets, near-square 4px document radii,
                 hairline + dashed `--oe-rule` separators, ruled rows. Borders
                 carry the structure; there are no floating white cards.
     · TEAL      deep-teal ground lit by one amber key light. Gradients and glow
                 carry the depth — no borders, no card shadows.
   A component belongs to one material or the other; nothing mixes them.

   ZERO FONT REQUESTS. The display voice is a face the reader already has, and
   the apparatus is the system sans, so the page downloads no font at all — the
   Newsreader/Plus Jakarta `@import` this file used to open with is deleted.
   `tests/growth-visual-contract.test.js` pins the stack.

   PALETTE: every value below is the LIVE eventideaw.com brand palette
   (eventideaw-site/DESIGN.md frontmatter). No hue outside that set may appear
   in this file — the contract test scans every hex literal against the allowed
   set and fails the build on a stray colour. The single documented exception is
   the semantic error red; see `--oe-error`.
   Do not hard-code colours in new rules: add or reuse a token. */

:root {
  --oe-teal: #0D3B4A;
  --oe-teal-light: #11485A;
  --oe-midnight: #082B36;
  /* Two papers, as on the hybrid: cream is the page-level paper, bright paper
     is the sheet a document is actually printed on. */
  --oe-cream: #F6F5F1;
  --oe-sheet: #FDFCF8;
  --oe-card: #FFFFFF;
  /* Bright amber carries amber on dark grounds, in the key light, and inside
     filled tiles; burnt amber is the deeper accent (top ticks, gradient ends). */
  --oe-amber: #F0A452;
  --oe-amber-deep: #B5641E;
  /* On-teal type, warm rather than cool: heading cream, body cream, mist muted.
     These are the hybrid's three on-teal tokens, not new greys. */
  --oe-warm: #F4EFE3;
  --oe-warm-body: #EDE7DA;
  --oe-mist: #A3C2C6;
  --oe-ink: #14323C;
  --oe-muted: #4F6670;
  /* Two paper rules: `line` is the incumbent hairline, `rule` is the letter
     layer's rule — the one that draws the dashed separators. */
  --oe-line: #E3DCCE;
  --oe-rule: #D8CFBC;
  /* Control boundaries need 3:1 against white, which neither paper hairline can
     reach; this teal-derived line is the boundary colour for real controls.
     The hybrid homepage puts `--oe-rule` on its ghost button; this page does
     not, because its own review pinned 3:1 on every control boundary. */
  --oe-line-strong: rgba(13, 59, 74, .55);
  /* The selected row's warm wash — the amber key light landing on paper. */
  --oe-tint: rgba(240, 164, 82, .12);
  /* DOCUMENTED EXCEPTION — the one hue outside the brand set. Burnt amber tops
     out near 4.0:1 on cream at body size, so it cannot carry error text, and an
     amber "error" would be indistinguishable from the brand accent. */
  --oe-error: #a3302a;
  --oe-error-line: rgba(163, 48, 42, .4);
  --oe-error-wash: rgba(163, 48, 42, .06);
  /* Letter-layer geometry: 4px on documents and cards, 7px on buttons. */
  --oe-radius-doc: 4px;
  --oe-radius-btn: 7px;
  --oe-shadow: 0 34px 68px -34px rgba(8, 43, 54, .9);
  --oe-display: Palatino, 'Palatino Linotype', 'Book Antiqua', 'URW Palladio L', Georgia, serif;
  --oe-sans: Avenir, 'Segoe UI', system-ui, sans-serif;
  --oe-ease: cubic-bezier(.2, .75, .2, 1);
  --oe-on-dark: var(--oe-warm);
  --oe-on-dark-body: var(--oe-warm-body);
  --oe-on-dark-soft: var(--oe-mist);
  /* Rules on the teal ground are amber, not tinted cream — the key light draws
     them, the way it does on the hybrid's teal folds. */
  --oe-on-dark-line: rgba(240, 164, 82, .3);
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--oe-midnight);
  /* The key light. One amber source enters high on the RIGHT, behind the dawn
     ring, and a second pools at the foot of the page. Both are deliberately
     spent before they reach the copy column on the left: that column carries
     body text, and lifting its ground would cost the contrast the warm on-teal
     tokens clear on flat #082B36. Fixed-size gradients only — no parallax, no
     scroll coupling. */
  background-image:
    radial-gradient(72rem 42rem at 88% -12%, rgba(240, 164, 82, .26), transparent 60%),
    radial-gradient(48rem 18rem at 52% 106%, rgba(240, 164, 82, .15), transparent 72%),
    radial-gradient(58rem 40rem at 2% 0%, var(--oe-teal-light), transparent 66%),
    linear-gradient(180deg, var(--oe-teal) 0%, var(--oe-midnight) 56%);
  background-repeat: no-repeat;
  color: var(--oe-on-dark-body);
  font-family: var(--oe-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* `button,.btn{display:inline-flex}` outranks the UA `[hidden]{display:none}`
   rule, so `start.hidden = true` would otherwise leave the CTA on screen. */
[hidden] { display: none !important; }

.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;
}

/* The honeypot must never be visible: bots fill it, humans never see it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

img { max-width: 100%; height: auto; }
a { color: var(--oe-amber); }

:focus-visible {
  outline: 3px solid var(--oe-amber);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Amber only reaches 1.9:1 against paper, so the ring switches to teal (11:1+)
   wherever the surface underneath it is a light working surface. */
.assessment-shell :focus-visible,
.result-shell :focus-visible { outline-color: var(--oe-teal); }

/* ---------- shell ---------- */

.growth-nav,
main,
.growth-footer { width: min(100% - 2rem, 68rem); margin-inline: auto; }

.growth-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 0 .5rem;
}

/* The lockup ships with its own dark plate; the near-square chip makes that
   edge read as an intentional brand mark instead of a mismatched rectangle. */
.growth-brand {
  display: block; border-radius: var(--oe-radius-doc); overflow: hidden;
  line-height: 0; border: 1px solid var(--oe-on-dark-line);
}
.growth-brand img { display: block; width: auto; height: 56px; }

.growth-nav-note {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oe-on-dark-soft); white-space: nowrap;
}

.growth-footer {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .85rem;
  border-top: 1px solid var(--oe-on-dark-line); margin-top: 3rem;
  padding: 1.5rem 0 3rem;
}
.growth-footer a { color: var(--oe-on-dark-soft); text-decoration: none; }
.growth-footer a:hover { color: var(--oe-amber); text-decoration: underline; }

/* ---------- intro (teal material) ---------- */

.growth-intro {
  display: grid; gap: 2.5rem; align-items: center;
  padding: 2rem 0 3rem;
}

/* The page keeps ONE uppercase eyebrow and it lives here, in the hero — the
   single exception the hybrid's law grants. Every other head on this page is a
   serif title or a ruled letterhead row. */
.eyebrow {
  margin: 0 0 1.1rem; color: var(--oe-amber);
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}

.growth-intro h1 {
  margin: 0 0 1.15rem;
  font-family: var(--oe-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.4vw, 4.05rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--oe-on-dark);
}
/* The letter layer's emphasis: an italic serif clause in amber, inside the
   sentence rather than stacked above it. Amber-bright on the teal ground is
   7.19:1, so the warmth costs nothing in legibility. */
.growth-intro h1 em {
  font-style: italic;
  color: var(--oe-amber);
}

.lede {
  margin: 0 0 1.75rem; max-width: 34rem;
  font-size: clamp(1.04rem, 2.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--oe-on-dark-body);
}

/* Three paper tags laid on the teal ground — the cream material appearing on
   the dark fold before the sheet does, so the two halves of the page are
   visibly one document. */
.trust-list {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 2rem; padding: 1.35rem 0 0; list-style: none;
  border-top: 1px solid var(--oe-on-dark-line);
}
/* Flat and small on purpose. A raised, button-sized cream rectangle sitting
   directly above the amber CTA reads as a second control — these are printed
   tags, so they carry no shadow and no button geometry. */
.trust-list li {
  background: var(--oe-cream); color: var(--oe-teal);
  border-radius: var(--oe-radius-doc);
  padding: .34rem .65rem;
  font-size: .78rem; font-weight: 600; letter-spacing: -.005em;
}

.reassurance {
  margin: 1.15rem 0 0; max-width: 32rem;
  font-size: .85rem; color: var(--oe-on-dark-soft);
}

/* ---------- dawn ring (decorative, aria-hidden) ---------- */

/* Decoration must not push the start action off a phone screen, so the ring
   stays small until there is a second column to put it in. */
.dawn-ring {
  position: relative; justify-self: center;
  width: min(13rem, 52vw); aspect-ratio: 1; max-width: 100%;
}
/* The key light pooled behind the ring, so the mark sits IN the light rather
   than being outlined on top of it. */
.dawn-ring::before {
  content: ''; position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 164, 82, .22), transparent 62%);
}
/* Warmed: each ring is an amber gradient arc masked to a hairline annulus, not
   a flat outline. `mask` only reads the alpha channel, so the colour inside it
   is a shape declaration, not a palette entry — it is written from the brand
   teal all the same. */
.dawn-ring .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 208deg,
    rgba(240, 164, 82, 0) 0%,
    rgba(240, 164, 82, .95) 22%,
    rgba(181, 100, 30, .8) 42%,
    rgba(163, 194, 198, .45) 62%,
    rgba(240, 164, 82, 0) 84%);
  -webkit-mask: radial-gradient(farthest-side, rgba(8, 43, 54, 0) calc(100% - 1.5px), rgba(8, 43, 54, 1) calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, rgba(8, 43, 54, 0) calc(100% - 1.5px), rgba(8, 43, 54, 1) calc(100% - 1.5px));
}
.dawn-ring .ring-b { inset: 14%; transform: rotate(58deg); }
.dawn-ring .ring-c { inset: 28%; transform: rotate(-42deg); }
.dawn-ring .dawn-sun {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, var(--oe-amber), var(--oe-amber-deep) 80%);
  box-shadow: 0 0 4.5rem rgba(240, 164, 82, .5);
}
.dawn-ring .dawn-line {
  position: absolute; left: 2%; right: 2%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 164, 82, .7), var(--oe-warm-body), rgba(240, 164, 82, .7), transparent);
  opacity: .8;
}

/* ---------- working sheets (paper material) ---------- */

/* Bright paper, near-square, hairline-ruled, with the letter layer's 3px amber
   top tick — the documented mark for a sheet that carries an action. Not a
   left rail: a thick coloured left border is the category default this
   vocabulary refuses. */
.assessment-shell,
.result-shell {
  background: var(--oe-sheet);
  color: var(--oe-ink);
  border: 1px solid var(--oe-rule);
  border-top: 3px solid var(--oe-amber-deep);
  border-radius: var(--oe-radius-doc);
  box-shadow: var(--oe-shadow);
  padding: clamp(1.35rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

/* The letterhead: the step count sits on the left, the rail runs out to the
   right, and a 2px teal rule closes the row. DOM order is visual order — the
   count is read before the bar, as it is written. */
.assessment-progress {
  display: flex; align-items: center; gap: clamp(.9rem, 2.4vw, 1.5rem);
  border-bottom: 2px solid var(--oe-teal);
  padding-bottom: .8rem;
  margin-bottom: clamp(1.4rem, 3.2vw, 2rem);
}
.progress-copy {
  margin: 0; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oe-muted); white-space: nowrap;
}
.progress-track {
  flex: 1 1 auto; height: 4px; background: var(--oe-line); overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 16.6667%;
  background: linear-gradient(90deg, var(--oe-amber-deep), var(--oe-amber));
  transition: width 280ms var(--oe-ease);
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset[data-step] > legend {
  padding: 0; margin-bottom: .4rem;
  font-family: var(--oe-display); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.12;
  letter-spacing: -.014em; color: var(--oe-teal);
}
fieldset[data-step] > legend:focus-visible { outline-offset: 6px; }

.step-help {
  margin: 0 0 1.6rem; font-size: .95rem; line-height: 1.6;
  color: var(--oe-muted); max-width: 54ch;
}

/* ---------- choices as ruled rows ---------- */

.choice-group { margin: 0 0 1.9rem; }
.group-label {
  padding: 0; margin-bottom: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oe-muted);
}

/* The letter layer's ruled list, not a grid of floating cards: one 2px teal
   rule at the head and a dashed separator under every row. */
.choices {
  display: grid; gap: 0;
  border-top: 2px solid var(--oe-teal);
}

/* The whole row is the label, so the whole row is the tap target. The native
   radio stays in the accessibility tree — it is restyled, never replaced. */
.choice {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem;
  margin: 0; padding: .85rem .35rem; min-height: 3.25rem;
  border-bottom: 1px dashed var(--oe-rule);
  font-family: var(--oe-display); font-size: 1.05rem; line-height: 1.35;
  color: var(--oe-ink); cursor: pointer;
  transition: background-color 180ms var(--oe-ease), color 180ms var(--oe-ease);
}
/* The row rule wipes in on a compositor-only transform; animating a width
   would relayout the pseudo-element on every frame. */
.choice::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--oe-amber-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--oe-ease);
}
.choice:hover { background: rgba(240, 164, 82, .07); }
.choice:hover::after { transform: scaleX(1); }
.choice:focus-within { outline: 3px solid var(--oe-teal); outline-offset: 1px; }

.choice input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: 1.3rem; height: 1.3rem; margin: 0; flex: 0 0 auto;
  /* 3.2:1 against the white face — a custom control's boundary is the only
     thing that says "this is a control", so it cannot be a faint hairline. */
  border: 2px solid var(--oe-line-strong); border-radius: 50%; background: var(--oe-card);
  transition: border-color 180ms var(--oe-ease), background-color 180ms var(--oe-ease), box-shadow 180ms var(--oe-ease);
}
/* Shape, not hue: an empty ring becomes a filled dot, so the selected state is
   still legible in greyscale or with a colour-vision deficiency. */
.choice input[type=radio]:checked {
  border-color: var(--oe-teal); background: var(--oe-teal);
  box-shadow: inset 0 0 0 4px var(--oe-card);
}
/* Three redundant cues on selection — the filled dot, the warm key-light wash,
   and the amber rule struck under the row. */
.choice:has(input[type=radio]:checked) {
  background: var(--oe-tint); color: var(--oe-teal); font-weight: 600;
}
.choice:has(input[type=radio]:checked)::after { transform: scaleX(1); }

/* ---------- text fields ---------- */

.field-label {
  display: block; margin: 0 0 .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oe-muted);
}

.field-input {
  width: 100%; padding: .8rem .85rem; margin-bottom: 1.25rem;
  font-family: var(--oe-display); font-size: 1.05rem;
  color: var(--oe-ink); background: var(--oe-card);
  border: 1px solid var(--oe-line-strong); border-radius: var(--oe-radius-doc);
  /* A field is a ruled blank on a document, not a full-bleed bar: capped so the
     measure of the value typed into it stays readable on a wide sheet. */
  max-width: 32rem;
  transition: border-color 180ms var(--oe-ease), box-shadow 180ms var(--oe-ease);
}
.field-input:hover { border-color: var(--oe-ink); }
.field-input-narrow { max-width: 8rem; }
.field-input[aria-invalid="true"] { border-color: var(--oe-error); box-shadow: 0 0 0 3px rgba(163, 48, 42, .14); }
.choice-group[aria-invalid="true"] .choice { border-bottom-color: rgba(163, 48, 42, .55); }

.step-error {
  margin: 0; min-height: 0; color: var(--oe-error); font-size: .9rem; font-weight: 700;
}
.step-error:not(:empty) { margin: .35rem 0 0; }

.step-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--oe-sans); font-size: .95rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.005em;
  min-height: 48px; padding: .85rem 1.6rem;
  border-radius: var(--oe-radius-btn); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background-color 220ms var(--oe-ease), color 220ms var(--oe-ease), border-color 220ms var(--oe-ease), transform 220ms var(--oe-ease);
}
/* Deep teal on bright amber = 7.19:1 — the hybrid's own button pairing. */
.btn-primary { background: var(--oe-amber); color: var(--oe-midnight); }
/* Hover lifts the amber toward the sheet rather than inventing a new hue,
   which also raises the ink-on-amber contrast rather than lowering it. */
.btn-primary:hover { background: color-mix(in srgb, var(--oe-amber) 82%, var(--oe-sheet)); transform: translateY(-1px); }
/* The hybrid puts `--oe-rule` on its secondary button; on paper that measures
   ~1.3:1, and this page's review pinned every control boundary at 3:1. The
   ghost button therefore keeps the teal-derived boundary. */
.btn-ghost { background: transparent; color: var(--oe-teal); border-color: var(--oe-line-strong); }
.btn-ghost:hover { border-color: var(--oe-teal); background: rgba(13, 59, 74, .05); }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* The intro CTA sits in the key light, so it carries the glow a lit object
   would cast rather than a card shadow. */
.growth-intro .btn-primary { box-shadow: 0 14px 38px -10px rgba(240, 164, 82, .38); }

/* Hanging indent, NOT flex: the consent copy contains inline <a> links, and a
   flex container would promote each link and text run to its own flex item,
   squeezing the paragraph into a narrow column. */
.check {
  display: block; position: relative; padding-left: 1.9rem;
  margin: 1.15rem 0 0; max-width: 82ch;
  font-size: .82rem; font-weight: 400; line-height: 1.55; color: var(--oe-muted);
}
.check input[type=checkbox] { position: absolute; left: 0; top: .2rem; width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--oe-teal); }
.check a { color: var(--oe-teal); text-underline-offset: 3px; }

/* The failure panel is a sheet on the sheet, marked by a top tick in the
   semantic red rather than the brand amber. */
.error:not(:empty) {
  margin: 1.6rem 0 0; padding: 1.1rem 1.25rem;
  border: 1px solid var(--oe-error-line); border-top: 3px solid var(--oe-error);
  border-radius: var(--oe-radius-doc);
  background: var(--oe-error-wash);
}
.error-text { margin: 0 0 1rem; color: var(--oe-error); font-size: .95rem; font-weight: 700; }
.error-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.assessment-reassurance {
  margin: 1.85rem 0 0; padding-top: 1.25rem; border-top: 1px dashed var(--oe-rule);
  font-size: .82rem; color: var(--oe-muted);
}

/* ---------- result: the operator action map ---------- */

.score-summary {
  display: grid; gap: 1.75rem; align-items: center;
  padding-bottom: 2rem; border-bottom: 1px dashed var(--oe-rule);
}

/* Decorative only — the score is repeated as real text beside it. The arc is a
   warm sweep: burnt amber at twelve o'clock brightening to amber as it fills,
   then the paper rule for the remainder. */
.score-ring {
  position: relative; justify-self: start;
  width: 8.75rem; height: 8.75rem; border-radius: 50%;
  background: conic-gradient(var(--oe-amber-deep) 0%, var(--oe-amber) var(--pct, 0%), var(--oe-line) 0);
  box-shadow: 0 20px 42px -28px rgba(181, 100, 30, .8);
}
.score-ring::after {
  content: ''; position: absolute; inset: .8rem;
  border-radius: 50%; background: var(--oe-sheet);
}

.score-copy h1 {
  margin: 0 0 .5rem; font-family: var(--oe-display); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.12;
  letter-spacing: -.014em; color: var(--oe-teal);
}
.score-value {
  margin: 0 0 1rem; font-size: .95rem; color: var(--oe-muted);
  display: flex; align-items: baseline; gap: .5rem;
}
.score-value strong {
  font-family: var(--oe-display); font-size: clamp(3rem, 7vw, 4.25rem); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; color: var(--oe-teal);
  font-variant-numeric: tabular-nums;
}
.score-tier { margin: 0 0 1rem; }
/* The tier reads as a named grade in the display voice, seated on the mist
   ground the retoken approved: teal on mist = 6.37:1. */
.tier-chip {
  display: inline-block; padding: .35rem .85rem; border-radius: var(--oe-radius-doc);
  background: var(--oe-mist); color: var(--oe-teal);
  font-family: var(--oe-display); font-style: italic; font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.15rem); letter-spacing: -.01em;
}
/* What Eventide says is set in the voice; the apparatus line under it is not. */
.score-note {
  margin: 0 0 .7rem; font-family: var(--oe-display);
  font-size: clamp(1.02rem, 2.2vw, 1.12rem); line-height: 1.55;
  color: var(--oe-ink); max-width: 52ch;
}
.score-constraint { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--oe-muted); max-width: 60ch; }

/* Three ruled beats, not three cards. Mobile hangs them off a 2px teal spine;
   the desktop up-shift below rotates the same construction into columns. */
.action-map {
  display: grid; gap: 0;
  margin: clamp(1.75rem, 3.4vw, 2.4rem) 0 0; padding: 0; list-style: none;
  counter-reset: action;
  border-left: 2px solid var(--oe-teal);
}
.action-step {
  position: relative; padding: 1.15rem 0 1.15rem 1.4rem;
  border-bottom: 1px dashed var(--oe-rule);
}
.action-step:last-child { border-bottom: 0; }
/* Amber lives in the numbered tile (deep teal on amber = 7.19:1), never in the
   small label: burnt amber text on paper is ~4.2:1 and this page ships no
   small amber text at all. */
.action-step::before {
  counter-increment: action; content: counter(action);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; margin-bottom: .7rem; border-radius: var(--oe-radius-doc);
  background: var(--oe-amber); color: var(--oe-midnight);
  font-family: var(--oe-sans); font-size: .8rem; font-weight: 700;
}
.action-label {
  margin: 0 0 .35rem; font-family: var(--oe-display); font-style: italic;
  font-size: 1rem; line-height: 1.2; color: var(--oe-teal);
}
.action-copy { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--oe-muted); max-width: 34ch; }

.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.75rem, 3.4vw, 2.4rem); }
.result-privacy {
  margin: 1.85rem 0 0; padding-top: 1.25rem; border-top: 1px dashed var(--oe-rule);
  font-size: .82rem; color: var(--oe-muted);
}

/* ---------- motion ---------- */

/* Opacity and transform only, on three moments: intro exit, step entry, result
   entry. Nothing is parallaxed and nothing loops. */
.growth-intro { transition: opacity 200ms var(--oe-ease), transform 200ms var(--oe-ease); }
.growth-intro.is-exiting { opacity: 0; transform: translateY(-8px); }

.step-enter { animation: oe-rise 240ms var(--oe-ease) both; }
@keyframes oe-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* The row already draws a focus ring via :focus-within; suppress the inner
   control's ring so keyboard users see one clear indicator, not two. */
.choice input[type=radio]:focus-visible { outline: none; }

/* ---------- layout up-shifts ---------- */

/* Two-up choices once there is room, so a whole decision still fits one
   viewport instead of forcing a scroll through a single tall column. Fixed at
   two columns rather than auto-fit: the dashed gutter between them is drawn by
   nth-child, and that only holds if the column count is known. */
@media (min-width: 48rem) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3.4vw, 2.75rem); }
  .choice:nth-child(even) { border-left: 1px dashed var(--oe-rule); padding-left: clamp(1rem, 2vw, 1.5rem); }
  .choice:nth-child(even)::after { left: clamp(1rem, 2vw, 1.5rem); width: calc(100% - clamp(1rem, 2vw, 1.5rem)); }
}

@media (min-width: 48rem) {
  .score-summary { grid-template-columns: auto 1fr; gap: 2.75rem; }
  /* The spine rotates: one continuous 2px teal rule across the head, dashed
     separators between the beats. */
  .action-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 0; border-top: 2px solid var(--oe-teal);
  }
  .action-step {
    border-bottom: 0; border-left: 1px dashed var(--oe-rule);
    padding: 1.35rem clamp(1rem, 2vw, 1.5rem) .4rem;
  }
  .action-step:first-child { border-left: 0; padding-left: 0; }
}

@media (min-width: 62rem) {
  .growth-nav, main, .growth-footer { width: min(100% - 4rem, 68rem); }
  .growth-intro { grid-template-columns: 1.15fr .85fr; padding: 3rem 0 4.5rem; }
  .dawn-ring { width: min(21rem, 30vw); }
  .assessment-shell, .result-shell { padding: clamp(2.5rem, 4vw, 3.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}