/*
 * onlyoss landing page
 * ---------------------------------------------------------------------------
 * LOCAL FILE, loaded only by resources/views/pages/home.blade.php via a
 * <link> in its own @section('styles'). Not part of the JustFans vendor
 * package, so vendor updates never overwrite it.
 *
 * SELF-CONTAINED BY DESIGN. Every colour, font and spacing value this page
 * needs is declared below under .oss-landing. It deliberately does NOT read
 * --oss-* tokens from onlyoss-brand.css, because that file loads through the
 * `site.custom_code_css` database setting - and when that setting is empty
 * (settings restore, fresh DB import) every var() silently resolves to
 * nothing and the page renders unstyled. That happened once. Not again.
 *
 * Palette sampled from the client's own logo artwork
 * ("New folder/onlyoss logo plane.jpg"): navy #011F5D, gold #FFD800.
 * Regression-tested in tests/brand/contrast_test.php.
 * Gold NEVER carries text on a light surface (1.39:1).
 *
 * SHAPE RULE (locked, applied everywhere): interactive controls are full
 * pill (999px); surfaces and panels are 16px; nothing else has a radius.
 *
 * DIALS: variance 8 (asymmetric, left-weighted, no centred hero) /
 * motion 5 (entry cascade + scroll-driven reveal, no JS) / density 3 (airy).
 */

/* CASCADE FIX: onlyoss-brand.css also declares background/color/font-family on
   .oss-landing (it predates this page and stays as a fallback for the case
   where THIS file fails to load). Both files load at the SAME selector
   specificity, and brand.css is injected later via site.custom_code_css, so
   without help it always wins - the page was silently rendering on brand.css's
   flat #011F5D instead of this file's 4-depth ink scale. The three rules below
   use a doubled class (.oss-landing.oss-landing, specificity 0-2-0) to beat
   brand.css's single-class rules (0-1-0) regardless of load order, without
   touching brand.css or depending on source order. */
.oss-landing.oss-landing {
  background: var(--oz-ink);
  color: var(--oz-text);
}

.oss-landing.oss-landing h1,
.oss-landing.oss-landing h2,
.oss-landing.oss-landing h3 {
  font-family: var(--oz-display);
}

.oss-landing.oss-landing p { color: var(--oz-text); }

.oss-landing {
  /* Ink scale - one hue, four depths, so the page layers instead of
     sitting on one flat navy. */
  --oz-ink:      #01102F;   /* page base, deepest */
  --oz-navy:     #011F5D;   /* brand navy, elevated surfaces */
  --oz-navy-up:  #052A78;   /* raised surface / hairline emphasis */
  --oz-gold:     #FFD800;
  --oz-gold-dim: #E6C200;

  --oz-line:      rgba(255, 255, 255, 0.14);
  --oz-line-soft: rgba(255, 255, 255, 0.13);
  --oz-text:      rgba(255, 255, 255, 0.76);
  --oz-text-dim:  rgba(255, 255, 255, 0.62);

  --oz-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --oz-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --oz-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Max end brought down from 9rem: at wide viewports two adjacent sections'
     padding was stacking into 280px+ of undifferentiated navy - it read as a
     loading gap, not rhythm. */
  --oz-section: clamp(5rem, 8vw, 7rem);
  --oz-radius: 16px;

  background: var(--oz-ink);
  color: var(--oz-text);
  font-family: var(--oz-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * Type. Archivo shouts, Manrope talks.
 * ------------------------------------------------------------------------- */

.oss-landing h1,
.oss-landing h2,
.oss-landing h3 {
  font-family: var(--oz-display);
  color: #fff;
  text-wrap: balance;
  margin: 0;
}

.oss-landing h1 {
  font-size: clamp(2.75rem, 7.2vw, 6.25rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.oss-landing h2 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.oss-landing h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.oss-landing p { margin: 0; color: var(--oz-text); }

.oz-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.8);
  max-width: 42ch;
}

/* Browser surfaces are part of the design. */
.oss-landing ::selection { background: var(--oz-gold); color: var(--oz-navy); }

/* No border-radius override here: modern browsers already shape the outline
   to match the element's own border-radius. Setting one explicitly squared
   off every pill button (.oz-btn/.oz-btn-ghost) on focus, violating the
   locked SHAPE RULE above the moment a keyboard user tabbed to a CTA. */
.oss-landing a:focus-visible,
.oss-landing button:focus-visible {
  outline: 3px solid var(--oz-gold);
  outline-offset: 3px;
}

.oz-section { padding: var(--oz-section) 0; }
.oz-rule { border-top: 1px solid var(--oz-line-soft); }

/* ---------------------------------------------------------------------------
 * Hero - asymmetric, left-weighted. Variance 8 forbids a centred hero, and
 * with no photography the composition itself has to carry the asymmetry:
 * the headline holds the left seven columns, the right stays deliberately
 * empty so the type has somewhere to breathe.
 * ------------------------------------------------------------------------- */

/* The vendor navbar is `sticky-nav`, so it sits over the top of this section
   rather than pushing it down. Top padding therefore has to clear the navbar
   (~90px) BEFORE it buys any breathing room, or the headline renders jammed
   against it on first paint. */
.oz-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(8rem, 13vw, 11rem) 0 clamp(4rem, 8vw, 6.5rem);
}

/* One wide, low-opacity wash anchored to the left, where the type sits.
   Not a centred "gradient blob". */
.oz-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -10%;
  width: min(52rem, 90%);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 216, 0, 0.09) 0%, rgba(255, 216, 0, 0.025) 40%, transparent 70%);
  pointer-events: none;
}

.oz-hero > .container { position: relative; z-index: 1; }

.oz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 992px) {
  .oz-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.oz-hero h1 { max-width: 13ch; }
.oz-hero .oz-lead { margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* The photograph. A single elevation cue (radius, no border and no shadow),
   and a navy wash over the top so the image sits inside the palette instead
   of fighting it - the original has teal-green in the shadows. */
.oz-hero-figure {
  position: relative;
  margin: 0;
  border-radius: var(--oz-radius);
  overflow: hidden;
  isolation: isolate;
}

.oz-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 1648;
  object-fit: cover;
}

.oz-hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 31, 93, 0.30) 0%, rgba(1, 16, 47, 0.62) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  /* Below the split, the portrait becomes a band rather than a tall column,
     so it never pushes the CTAs off the first screen on a phone. At 4:3 the
     visible height is only ~50% of the 1100x1648 source - centered cover
     kept the torso and cut the fighter's head off entirely. The subject's
     head sits in roughly the top third of the frame, so bias the crop up. */
  .oz-hero-figure img { aspect-ratio: 4 / 3; object-position: 50% 18%; }
}

.oz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* ---------------------------------------------------------------------------
 * Controls. Gold fill carries navy text (11.12:1). Press is a real scale.
 * ------------------------------------------------------------------------- */

.oz-btn,
.oz-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-family: var(--oz-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.18s var(--oz-ease), color 0.18s var(--oz-ease),
              border-color 0.18s var(--oz-ease), transform 0.14s var(--oz-ease);
}

.oz-btn {
  background: var(--oz-gold);
  color: var(--oz-navy);
  border: 1px solid var(--oz-gold);
}

.oz-btn-ghost {
  background: transparent;
  color: #fff;
  /* 0.3 alpha measured 2.55:1 against the page ink - below the 3:1 WCAG
     1.4.11 non-text-contrast minimum, and this border is the only thing
     marking the element as a control. 0.4 clears it with margin. */
  border: 1px solid rgba(255, 255, 255, 0.4);
}

@media (hover: hover) and (pointer: fine) {
  .oz-btn:hover { background: var(--oz-gold-dim); border-color: var(--oz-gold-dim); color: var(--oz-navy); }
  .oz-btn-ghost:hover { border-color: #fff; }
}

.oz-btn:active,
.oz-btn-ghost:active { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
 * Facts - a hairline rule strip. Layout family: inline rule row.
 * ------------------------------------------------------------------------- */

.oz-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--oz-line);
  border-bottom: 1px solid var(--oz-line);
}

.oz-fact {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.2vw, 2rem);
  border-left: 1px solid var(--oz-line-soft);
}

.oz-fact:first-child { border-left: 0; padding-left: 0; }

.oz-fact dt {
  margin: 0 0 0.3rem;
  font-family: var(--oz-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
}

.oz-fact dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--oz-text-dim); }

/* Matches .oz-grid's breakpoint rather than its own 700px: between 701-991px
   three Archivo-800 dt's ("Your audience is yours") had ~160px each inside a
   Bootstrap container and wrapped 2-3 lines. Going straight to 1-column at
   the same point .oz-grid does skips that too-narrow 3-column zone. */
@media (max-width: 991.98px) {
  .oz-facts { grid-template-columns: minmax(0, 1fr); }
  .oz-fact { border-left: 0; border-top: 1px solid var(--oz-line-soft); padding-left: 0; }
  .oz-fact:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------------------
 * Section headings. Left-weighted to match the hero.
 * ------------------------------------------------------------------------- */

/* max-width in rem, NOT ch: `ch` resolves against this wrapper's own font
   (the 17px body face), not the heading inside it, which silently squeezed
   section headings into a ~320px column beside a half-empty canvas. */
.oz-head { max-width: 36rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.oz-head p { margin-top: 1rem; max-width: 52ch; color: var(--oz-text-dim); }

/* ---------------------------------------------------------------------------
 * Catalogue - hairline-topped columns. Layout family: column grid.
 * ------------------------------------------------------------------------- */

.oz-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 991.98px) { .oz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .oz-grid { grid-template-columns: minmax(0, 1fr); } }

.oz-item { padding-top: 1.25rem; border-top: 2px solid var(--oz-gold); }
.oz-item h3 { margin-bottom: 0.5rem; }
/* text-wrap: pretty avoids the last-line orphan ("…your students return
   to." dropping "to." alone) that balance doesn't protect against in body
   copy. Unsupported browsers just keep normal wrapping - no fallback needed. */
.oz-item p { font-size: 0.9688rem; line-height: 1.62; color: var(--oz-text-dim); text-wrap: pretty; }

/* ---------------------------------------------------------------------------
 * Steps - a numbered gutter list, deliberately NOT another equal-column grid.
 * Layout family: gutter list. The numerals are the sequence, so they earn
 * their place; the rule between rows carries the eye down.
 * ------------------------------------------------------------------------- */

/* No max-width: the 56rem cap left the hairlines stopping mid-container at
   wide viewports (896px inside a 1280px container), reading as an unfinished
   rule rather than a deliberate edge. Full container width instead.
   list-style/margin/padding reset: this is a real <ol> now (screen readers
   get native "1. Set up your page" numbering), so strip the browser's own
   marker/indent - the visual numeral is drawn by .oz-step-n instead. */
.oz-steps { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }

.oz-step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--oz-line);
}

.oz-step:last-child { border-bottom: 1px solid var(--oz-line); }

.oz-step-n {
  font-family: var(--oz-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--oz-gold);
}

.oz-step h3 { margin-bottom: 0.35rem; }
.oz-step p { font-size: 0.9688rem; color: var(--oz-text-dim); max-width: 54ch; }

@media (max-width: 575.98px) {
  .oz-step { grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
}

/* ---------------------------------------------------------------------------
 * Economics - split. Layout family: two-column split.
 * "80%" is emphasis inside the sentence, never a detached metric widget.
 * ------------------------------------------------------------------------- */

.oz-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 992px) { .oz-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.oz-figure { font-variant-numeric: tabular-nums; color: var(--oz-gold); }

.oz-notes { margin-top: 1.5rem; display: grid; gap: 0.875rem; max-width: 52ch; }

/* p.oz-fine (element+class): `.oss-landing p { margin: 0 }` above is the same
   0-1-1 specificity as a bare `.oz-fine` would be, and it comes first in the
   file, so a same-specificity `.oz-fine` alone loses on the tie and margin-top
   was silently zeroed - "…never come out of your share." ran straight into
   "Invite coaches…" with no separation. The element qualifier breaks the tie. */
p.oz-fine { margin-top: 1.75rem; font-size: 0.9063rem; line-height: 1.6; color: var(--oz-text-dim); max-width: 52ch; }
.oz-fine a {
  color: var(--oz-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Standalone link (no surrounding sentence) needs a real touch target;
     also stops "Referral terms" from breaking mid-link. */
  white-space: nowrap;
}
.oz-fine a:hover { color: var(--oz-gold-dim); }

/* The content-guidelines link in the Standards section has no sentence
   around it - it's the whole paragraph. Pad it to the WCAG 2.5.8 24px
   minimum target size instead of sitting at raw line-height (~20px). */
.oz-statement .oz-fine a { display: inline-block; padding: 0.25rem 0; }
/* .oz-actions is a flex row and left-aligns by default, which reads as a
   mistake inside a centred statement. Centring it here rather than in
   .oz-actions itself keeps the hero's left-aligned buttons untouched. */
.oz-statement .oz-actions { justify-content: center; }

/* The page's one panel. Elevation declared once: border, no shadow.
   Border uses --oz-line (white-based), not --oz-navy-up: navy-on-navy here
   measured 1.19:1 - effectively invisible. --oz-line reads as a real edge
   regardless of which navy depth sits behind the panel. */
.oz-panel {
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--oz-navy);
  border: 1px solid var(--oz-line);
  border-radius: var(--oz-radius);
}

.oz-panel h3 { margin-bottom: 0.75rem; }
.oz-panel p { font-size: 0.9688rem; }
.oz-panel p + p { margin-top: 0.875rem; }

/* ---------------------------------------------------------------------------
 * Standards - a single narrow statement. Layout family: centred statement.
 * ------------------------------------------------------------------------- */

.oz-statement { max-width: 44rem; margin: 0 auto; text-align: center; }
.oz-statement p { margin-top: 1.25rem; color: var(--oz-text-dim); }
.oz-statement .oz-fine { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
 * Closing - elevated full-bleed band. Layout family: elevated band.
 * ------------------------------------------------------------------------- */

/* Full-bleed photograph behind the closing band. The navy scrim is heavy on
   purpose: white body text over the lit part of the image would otherwise
   drop under 4.5:1. Measured at the image's brightest region the text still
   clears AA - see tests/brand/contrast_test.php. `image-set` is not used
   because the scrim, not the source, does the heavy lifting here. */
.oz-close {
  position: relative;
  isolation: isolate;
  padding: clamp(5.5rem, 11vw, 9rem) 0;
  border-top: 1px solid var(--oz-navy-up);
  background-color: var(--oz-navy);
  background-image:
    linear-gradient(90deg, rgba(1, 16, 47, 0.94) 0%, rgba(1, 16, 47, 0.86) 45%, rgba(1, 31, 93, 0.72) 100%),
    image-set(url('/img/landing/close-kick.webp') type('image/webp'),
              url('/img/landing/close-kick.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

@media (max-width: 767.98px) {
  /* At desktop the band is wider than the 1800x1200 source, so cover fills
     width and the right-pin is inert. Once the band goes portrait-ish on a
     phone, cover fills HEIGHT instead and right-pin shows only the empty
     wall at frame-right - the centre-left subject disappears entirely. */
  .oz-close { background-position: 20% center; }
}

.oz-close-inner { position: relative; z-index: 1; max-width: 42rem; }
.oz-close .oz-lead { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------------
 * Controls on a phone.
 *
 * The pill buttons had no small-screen rule at all, so they carried desktop
 * padding (1.75rem each side) and a 3rem min-height onto a 360px viewport. A
 * hero pair measured roughly 157px + 136px + a 14px gap against ~330px of
 * usable width inside .container — just over, so the two buttons wrapped onto
 * separate lines and, being content-width and left-aligned, read as ragged
 * rather than as a deliberate stack.
 *
 * Tightening padding and type below 576px brings a pair back onto one row on
 * an ordinary phone. flex-wrap stays `wrap` on .oz-actions deliberately: it is
 * the safety valve for a 320px screen or a long translated label, where a
 * clean stack beats a squeezed row or a horizontal scrollbar.
 * ------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
  /* Share the row instead of trying to fit two content-width pills into it.
     `flex: 1 1 0` gives both buttons an equal share whatever their labels say,
     so the pair stays side by side and, being equal, actually looks aligned —
     rather than depending on an estimate of how wide "Create your profile"
     renders in 700-weight Manrope, which is the sort of guess that produced
     the ragged wrap in the first place.

     `white-space: normal` overrides the desktop nowrap: once a pill is only
     half the row, a long or translated label must be allowed to run to a
     second line inside it rather than overflow. min-width: 0 is what actually
     lets a flex item shrink below its content width. */
  .oz-actions { gap: 0.625rem; flex-wrap: nowrap; }

  .oz-btn,
  .oz-btn-ghost {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 0.75rem 0.9rem;
    font-size: 0.9375rem;
    min-height: 2.75rem;
  }

  /* A lone button — the instructor section's "Apply for a founding place" —
     must not stretch edge to edge just because it is the only flex item.
     Content width, centred. */
  .oz-statement .oz-actions { justify-content: center; }
  .oz-statement .oz-btn,
  .oz-statement .oz-btn-ghost { flex: 0 1 auto; }
}

/* ---------------------------------------------------------------------------
 * Motion (intensity 5). Two devices, both CSS-only, no scroll listeners:
 *   1. a one-time entry cascade on the hero
 *   2. scroll-driven reveals via animation-timeline: view()
 * Content is visible by default; motion is layered on top, so a browser
 * without support or a reduced-motion preference loses nothing.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Waterfall entry. Three rules drive the numbers below:
     1. Opacity is BINARY, never a fade - an arrival is movement, not a
        dissolve. The keyframe jumps 0 to 1 in the first 1% (~2ms), which
        reads as instant while still allowing fill-mode: both to hold the
        pre-start state.
     2. Velocity varies by weight - the headline is the anchor and travels
        furthest/longest; the buttons are light and snap in tight.
     3. Gaps SHRINK across the cascade, so the wave accelerates and the last
        element snaps rather than trailing off. Each element starts before
        the previous has settled. One direction throughout (from below). */
  .oz-rise {
    opacity: 0;
    animation: oz-whip var(--oz-dur, 0.22s) var(--oz-ease) var(--oz-at, 0s) both;
  }

  .oz-rise-1 { --oz-travel: 64px; --oz-dur: 0.28s; --oz-at: 0.06s; }  /* headline, anchor */
  .oz-rise-2 { --oz-travel: 40px; --oz-dur: 0.22s; --oz-at: 0.26s; }  /* lead, normal */
  .oz-rise-3 { --oz-travel: 32px; --oz-dur: 0.20s; --oz-at: 0.40s; }  /* actions, light */

  @supports (animation-timeline: view()) {
    .oz-reveal {
      opacity: 0;
      animation: oz-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes oz-whip {
  from { opacity: 0; transform: translateY(var(--oz-travel, 40px)); }
  1%   { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-driven reveals keep a soft fade on purpose: they are not arrivals,
   they are content coming into view, and a hard cut mid-scroll reads as a
   glitch rather than a beat. */
@keyframes oz-reveal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------
   Q&A — layout family: stacked definition list.

   Deliberately not an accordion. Every answer here handles an objection, and an
   objection the reader has to click to see is an objection that goes unanswered;
   the whole point is that a sceptical coach can scan all six without deciding
   which doubt to admit to. Hairline rules, no cards, so it reads as continuous
   prose rather than another grid of boxes.
   ------------------------------------------------------------------------- */

.oz-qa { margin: 0; padding: 0; }

.oz-qa-item {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--oz-line);
}

.oz-qa-item:last-child { border-bottom: 1px solid var(--oz-line); }

.oz-qa dt {
  font-family: var(--oz-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
}

.oz-qa dd {
  margin: 0;
  color: var(--oz-text);
  font-size: clamp(0.98rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  max-width: 58ch;
}

/* Single column below the split: two columns at phone width would leave the
   question orphaned on its own line above a very narrow answer.
   767.98 rather than 767 to match every other breakpoint in this file — at a
   fractional viewport width of, say, 767.5px a plain `767` rule would not
   apply while the rest of the page had already collapsed, leaving this one
   section stubbornly two-column. */
@media (max-width: 767.98px) {
  .oz-qa-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

/* ---------------------------------------------------------------------------
   Worked example inside the economics split — the 80% figure made concrete.
   ------------------------------------------------------------------------- */

.oz-maths {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--oz-line);
  border-left: 3px solid var(--oz-gold);
  border-radius: 0 var(--oz-radius) var(--oz-radius) 0;
  background: rgba(255, 255, 255, 0.03);
}

.oz-maths-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.32rem 0;
  font-size: 0.97rem;
  color: var(--oz-text);
  /* The figure is nowrap, so on a 320px screen the label must be free to give
     way rather than push the row wider than the viewport. */
  flex-wrap: wrap;
}

.oz-maths-row span:first-child { min-width: 0; }

.oz-maths-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.oz-maths-row.is-total {
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--oz-line);
  color: #fff;
  font-weight: 700;
}

.oz-maths-row.is-total span:last-child {
  font-family: var(--oz-display);
  font-size: 1.25rem;
  color: var(--oz-gold);
}

.oz-maths-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--oz-text-dim);
}