/* ==========================================================================
 * FantasyStakes - public marketing site (fantasystakesapp.com)
 * WEB-1a - reconciled to the approved visual POR
 *
 * VISUAL AUTHORITY: spec/fantasystakes_por_mobile_website.html
 * (sha256 2cbb57582511d6775453e3c0eb7d7ba738e8c5a7278ccbeff6a5e1ba94f28106)
 *
 * Every token below is the POR's own value. The POR is a single-column,
 * mobile-first, centred composition on near-black, with an ivory/gold lockup, a
 * 760px measure, 22px card radii, hairline section rules and one solid-gold
 * pill. WEB-1 built a wider two-column editorial layout from the written brief
 * because the POR was not available; this file replaces that layout with the
 * POR's, and keeps every engineering property WEB-1 certified.
 *
 * THREE DELIBERATE DEPARTURES FROM THE POR SOURCE, each recorded where it
 * occurs below and none of them visual:
 *
 *   1. px sizes are expressed in rem at the same rendered size. The POR is
 *      authored in px, which pins type against a reader's browser font-size
 *      setting. Same pixels at default settings, but they now scale.
 *   2. The topbar keeps a navigation disclosure. The POR topbar carries only a
 *      brand and one gold link; the locked brief requires four section links,
 *      and WEB-1 certified the mobile disclosure. It is styled as the POR
 *      topbar rather than removed.
 *   3. The FAQ keeps a small gold open/close marker. The POR hides the native
 *      one and leaves no affordance at all.
 *
 * Still no framework, no webfont, no remote request. The POR names Inter first
 * and loads nothing, so it renders in the system font for anyone without Inter
 * installed; that stack is reproduced exactly rather than "fixed" by adding a
 * font download the CSP forbids and the POR never had.
 * ========================================================================== */

/* -- POR tokens ---------------------------------------------------------- */
:root {
  /* Foundation - POR values, load-bearing. */
  --bg:     #0b0b0a;
  --ivory:  #f3eddc;
  --muted:  #b8ad8e;
  --gold:   #c8a24d;
  --gold2:  #e0bd68;

  /* POR structure. `--line` is gold-derived; the section and FAQ rules are the
     far fainter white hairlines the POR uses to separate without drawing. */
  --line:       rgba(224, 189, 104, .22);
  --hairline:   rgba(255, 255, 255, .05);
  --hairline-2: rgba(255, 255, 255, .06);
  --card-line:  rgba(224, 189, 104, .14);
  --card-fill:  linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012));
  --num-fill:   rgba(200, 162, 77, .12);
  --num-line:   rgba(224, 189, 104, .26);

  /* POR ink ramp. Body copy is warmer and lighter than WEB-1's muted tan. */
  --ink:        var(--ivory);
  --ink-body:   #d7cfb8;   /* section copy      - 12.4:1 on --bg */
  --ink-lede:   #ddd4bc;   /* hero lede         - 13.3:1 */
  --ink-card:   #cfc6ae;   /* card copy         - 11.4:1 */
  --ink-fine:   #9c927b;   /* footer fine print -  6.4:1 */
  --ink-link:   #b7ad96;   /* footer links      -  8.3:1 */
  --on-gold:    #11100c;   /* text on a gold fill - 7.9:1 */

  --max: 760px;
  --radius: 22px;
  --topbar-h: 62px;

  /* The POR names Inter first and never loads it. Reproduced verbatim: with
     Inter installed the page is the POR exactly; without it, the system UI
     font, which is what the POR itself renders as on most machines. */
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale - POR values converted px -> rem at a 16px base. */
  /* The POR sets 12vw here, and at 12vw "FANTASYSTAKES" is wider than a
     390px phone: the POR page itself clips the final S. "FANTASYSTAKES" is
     8.57em wide at this weight and tracking, so 10.1vw is the largest
     coefficient that still fits inside the 20px gutters at 320px and up.
     Same intent - the wordmark as large as the viewport allows - actually
     honoured. preview_check.mjs measures it at every viewport. */
  --t-brand:      clamp(2rem, 10.1vw, 4.75rem);      /* 32 -> 76 */
  --t-descriptor: clamp(1.0625rem, 4.7vw, 1.4375rem);/* 17 -> 23 */
  --t-hero:       clamp(2rem, 8.6vw, 3.5rem);        /* 32 -> 56, see .hero h1 */
  --t-lede:       clamp(1.125rem, 4.7vw, 1.4375rem); /* 18 -> 23 */
  --t-h2:         clamp(1.875rem, 8vw, 2.875rem);    /* 30 -> 46 */
  --t-close:      clamp(2.25rem, 9vw, 3.625rem);     /* 36 -> 58 */
  --t-quote:      clamp(1.5rem, 7vw, 2.25rem);       /* 24 -> 36 */
  --t-body:       1.125rem;   /* 18 */
  --t-card:       1rem;       /* 16 */
  --t-card-title: 1.375rem;   /* 22 */
  --t-step-title: 1.1875rem;  /* 19 */
  --t-summary:    1.125rem;   /* 18 */
  --t-eyebrow:    .75rem;     /* 12 */
  --t-fine:       .8125rem;   /* 13 */
}

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

html {
  /* `clip` rather than `hidden`: it prevents horizontal overflow without
     creating a scroll container, which would break the sticky topbar. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  /* POR: one gold wash from above the fold, centred. No image, no bytes. */
  background:
    radial-gradient(circle at 50% -10%, rgba(200, 162, 77, .12), transparent 28rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-underline-offset: 3px; }

/* Focus is VISIBLE EVERYWHERE and is never removed. */
:focus { outline: 2px solid var(--gold2); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; border-radius: 4px; }

/* Anchor jumps have to clear the sticky topbar. */
[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }

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

/* -- Utilities ----------------------------------------------------------- */
/* POR: a 760px measure with 20px gutters, 28px from 700px up. */
.wrap { width: min(100%, var(--max)); margin: 0 auto; padding: 0 20px; }

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

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--gold); color: var(--on-gold); font-weight: 800;
  padding: .7rem 1.1rem; border-radius: 0 0 12px 12px; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); }

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold2); font-weight: 800; font-size: var(--t-eyebrow);
}

.copy { margin: 18px 0 0; color: var(--ink-body); font-size: var(--t-body); }

/* -- Buttons (POR) ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 800; line-height: 1.2;
  text-decoration: none; text-align: center;
  /* POR: full-width stacked on a phone, intrinsic from 700px up. */
  width: min(100%, 320px);
  transition: background-color .18s ease, border-color .18s ease;
}
.btn--primary {
  background: var(--gold); color: var(--on-gold);
  box-shadow: 0 10px 28px rgba(200, 162, 77, .18);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--gold2); }
.btn--secondary {
  border-color: var(--line); color: var(--ivory); background: rgba(255, 255, 255, .02);
}
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--gold2); }

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* -- Topbar (POR) -------------------------------------------------------- *
 * POR geometry exactly: 62px, blurred near-black, one faint white hairline.
 * The POR carries a brand and a single gold link; this adds the five locked
 * section links behind a disclosure, which is why the toggle exists. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px);
  background: rgba(11, 11, 10, .82);
  border-bottom: 1px solid var(--hairline);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: var(--topbar-h); gap: 16px;
}
.mini-brand {
  font-weight: 900; letter-spacing: .02em; font-size: 1rem;
  text-decoration: none; order: 1; margin-right: auto;
}
.mini-brand .fantasy { color: var(--ivory); }
.mini-brand .stakes  { color: var(--gold); }

/* The POR's right-hand call to action: a gold text link, not a filled pill. */
.mini-link {
  text-decoration: none; color: var(--gold2); font-weight: 700; font-size: .875rem;
  order: 2; padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.mini-link:hover, .mini-link:focus-visible { color: var(--ivory); }

.nav__toggle {
  order: 3; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ivory); cursor: pointer;
}
/* Restated because an author `display` rule outranks the UA rule behind
   `hidden`; without this a reader with no JavaScript would see a dead button. */
.nav__toggle[hidden] { display: none; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top:  5.5px; }

.nav {
  display: block; order: 4; flex: 0 0 100%; width: 100%;
  padding: 4px 0 12px;
  border-top: 1px solid var(--hairline);
}
/* COLLAPSED STATE IS AN ATTRIBUTE, NOT `hidden`. The HTML rendering spec gives
   `[hidden]` `display: none !important`, so a panel closed that way could not
   be re-shown as a desktop row by any author rule - a reader who opened the
   menu on a phone and rotated into a tablet layout would lose it entirely. */
.nav[data-open="false"] { display: none; }
.nav__link {
  display: block; padding: 12px 2px;
  color: var(--ink-link); font-weight: 700; font-size: var(--t-card);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--ivory); }

/* -- Hero (POR) ---------------------------------------------------------- *
 * Full viewport below the topbar, vertically centred, everything on the centre
 * line: wordmark lockup, descriptor, headline, lede, calls to action. */
.hero {
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  display: flex; align-items: center;
  padding: 52px 0 54px;
  border-top: 0;
}
.lockup { text-align: center; margin-bottom: 32px; }
.brand {
  margin: 0;
  font-size: var(--t-brand); line-height: .92; letter-spacing: .015em;
  font-weight: 950; text-transform: uppercase;
}
.brand .fantasy { color: var(--ivory); }
.brand .stakes  { color: var(--gold); text-shadow: 0 0 24px rgba(200, 162, 77, .14); }
.descriptor {
  margin: 16px 0 0; color: var(--muted);
  font-size: var(--t-descriptor); letter-spacing: .01em; font-weight: 650;
}

.hero__copy { text-align: center; margin: 0 auto; max-width: 650px; }
/* The POR tagline is three short lines at up to 68px. The locked headline is
   one long sentence, so the ceiling comes down and the line-height comes up a
   fraction - the POR's typographic voice at a length it was not set for. */
.hero h1 {
  margin: 0;
  font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.03em; font-weight: 900;
}
.hero h1 .gold { color: var(--gold2); }
.lede { margin: 24px auto 0; max-width: 560px; color: var(--ink-lede); font-size: var(--t-lede); }
.trust {
  margin: 26px 0 0;
  font-family: var(--font-num); font-size: var(--t-fine);
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}

/* -- Sections (POR) ------------------------------------------------------ */
.section { padding: 56px 0; border-top: 1px solid var(--hairline); }
.section h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em; }

/* -- Cards and the gold pill (POR) --------------------------------------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
.card {
  background: var(--card-fill);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 22px;

  /* PARALLEL CONSTRUCTION, HELD STRUCTURALLY RATHER THAN BY COPY LENGTH.
   *
   * The two cards carry a heading and a paragraph of different lengths - one
   * wraps to two lines where the other takes one - so in normal flow their
   * chip rows and their closing lines landed 32px apart at every desktop
   * width. Matching them by trimming a sentence would hold only until the next
   * copy edit.
   *
   * The five parts are grid rows and the BODY COPY IS THE ONLY ONE ALLOWED TO
   * GROW, so it absorbs the difference: the chip row and the closing line are
   * then a fixed distance from the bottom of the card, and `.card-grid`
   * already stretches both cards to a single height. Rows are auto-placed in
   * source order - pill, heading, body, chips, closing line - which is what
   * `test_the_two_cards_are_structurally_parallel` pins.
   *
   * Margins are left on the children rather than replaced by `row-gap`: grid
   * items do not collapse margins, but every adjacent pair here already has a
   * zero on one side, so the POR's spacing rhythm survives the change exactly.
   */
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
}
.card h3 { margin: 0; color: var(--ivory); font-size: var(--t-card-title); }
.card p  { margin-top: 10px; font-size: var(--t-card); color: var(--ink-card); }

/* The POR pill: SOLID gold, a category label. Not an odds chip.
 *
 * `.card .pill` IS IN THE SELECTOR LIST ON PURPOSE. The pill is a <p>, and
 * `.card p` above it is more specific than a bare `.pill`, so without this the
 * label inherits the card's light body colour and renders near-invisible gold
 * on gold. */
.pill,
.card .pill {
  display: inline-flex; align-items: center;
  color: var(--on-gold); background: var(--gold2);
  border-radius: 999px; padding: 6px 10px;
  font-weight: 850; font-size: var(--t-eyebrow); line-height: 1.2;
  letter-spacing: .02em;
  margin: 0 0 14px;
  /* Grid blockifies its items, turning this `inline-flex` into `flex` - which
     would stretch a shrink-to-fit label the full width of the card. */
  justify-self: start;
}

/* The line that closes BOTH cards - the claim the chips above it illustrate.
 *
 * BOTH SELECTORS FOR THE SAME REASON AS `.pill` ABOVE: these are <p> elements,
 * and `.card p` is more specific than a bare class, so a single-class rule
 * would lose its colour and size to the card's body copy. */
.card__note,
.card .card__note {
  margin-top: 14px;
  color: var(--gold2); font-size: var(--t-fine); font-weight: 800;
}

/* -- Quote / highlight (POR) --------------------------------------------- *
 * The POR's signature emphasis block, used for the lines the brief calls
 * closes. Gold rule on the left, gold wash falling away to the right. */
.quote {
  padding: 26px 24px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(200, 162, 77, .09), transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-top: 26px;
}
.quote strong {
  display: block;
  font-size: var(--t-quote); line-height: 1.1; color: var(--ivory); font-weight: 900;
}

/* -- Steps (POR) --------------------------------------------------------- *
 * A numbered list on hairlines, not a row of cards. */
.steps { display: grid; gap: 14px; margin-top: 28px; }
.step {
  display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--hairline);
}
.num {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--num-fill); border: 1px solid var(--num-line);
  color: var(--gold2); font-weight: 900;
}
.step h3 { margin: 0; font-size: var(--t-step-title); }
.step p  { margin: 5px 0 0; font-size: var(--t-card); color: var(--ink-body); }

/* -- FAQ (POR) ----------------------------------------------------------- *
 * Hairline rows, no boxes. `<details>` so it is keyboard operable and readable
 * with JavaScript off. */
.faq details { border-top: 1px solid var(--hairline-2); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--hairline-2); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  cursor: pointer; font-weight: 800; font-size: var(--t-summary);
  color: var(--ivory); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* DEPARTURE FROM THE POR, DELIBERATE. The POR hides the native marker and puts
   nothing in its place, which leaves a disclosure with no visible affordance -
   readable, but not discoverable. This is the smallest possible replacement. */
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-num); font-size: 1.25rem; line-height: 1;
  color: var(--gold); font-weight: 400;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { font-size: var(--t-card); margin-top: 10px; color: var(--ink-body); }

/* -- Closing call to action (POR) ---------------------------------------- */
.close {
  text-align: center;
  padding: 68px 0 76px;
  border-top: 1px solid var(--hairline);
  background: radial-gradient(circle at 50% 50%, rgba(200, 162, 77, .12), transparent 22rem);
}
.close h2 { font-size: var(--t-close); line-height: 1.04; letter-spacing: -.025em; }
.close p { max-width: 520px; margin-left: auto; margin-right: auto; }
.close .tagline {
  /* `auto` SIDE MARGINS, NOT `0`. `.close p` above gives the closing copy a
     520px measure and centres it with auto margins; this rule is more specific
     and its shorthand was resetting those margins to zero, which left a 520px
     box pinned to the left of a 704px column. `text-align: center` then centred
     the words inside that box rather than inside the section - 92px left of
     true centre at every desktop width, close enough to look intentional. */
  margin: 22px auto 0;
  font-size: var(--t-lede); font-weight: 800; color: var(--gold2);
}

/* -- Restrained sportsbook motifs ---------------------------------------- *
 * Odds chips, a standings strip and credit figures. Subordinate to the POR
 * furniture above: outlined rather than filled, so the solid gold `.pill`
 * stays the only saturated gold shape on the page. Each block is labelled
 * `role="img"` so a screen reader is told what the illustration shows instead
 * of reading a column of stray numbers. */
/* ONE CHIP TREATMENT, BOTH CARDS. The markets and the pool names used to be
   drawn differently - gold against a quiet grey - which read as two different
   kinds of thing sitting in the same template. The `.chip--quiet` modifier
   went with the difference; nothing selects it any more. */
.odds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip { white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; padding: 6px 8px;
  border-radius: 12px; border: 1px solid var(--card-line);
  background: rgba(200, 162, 77, .07);
  color: var(--gold2);
  font-family: var(--font-num); font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ledger { margin-top: 20px; }
.ledger__row {
  display: grid; grid-template-columns: 1.5rem 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; font-size: var(--t-card);
  border-bottom: 1px solid var(--hairline);
}
.ledger__pos { font-family: var(--font-num); color: var(--ink-fine); font-variant-numeric: tabular-nums; }
.ledger__val { font-family: var(--font-num); color: var(--gold2); font-variant-numeric: tabular-nums; }
.ledger__row--lead .ledger__pos { color: var(--gold); }

.figures { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
.figure {
  border: 1px solid var(--card-line); border-radius: 16px;
  background: var(--card-fill);
  padding: 16px 18px;
}
.figure__k { font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-fine); }
.figure__v {
  margin-top: 4px;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 800; color: var(--gold2);
}
.figure__n { font-size: var(--t-fine); color: var(--ink-fine); }

/* -- Footer -------------------------------------------------------------- *
 * UTILITY ONLY. Two rows: the five destinations, and the contractual line
 * beside the copyright. The brand restatement, the descriptor, the claim and
 * the credit disclaimer that used to sit between them were the reason a legal
 * block read as one more content section directly under the closing call to
 * action - and every one of them says something the page has already said.
 *
 * WHAT MAY NEVER LEAVE THIS BLOCK is the Yahoo attribution: the string is
 * fixed by the Yahoo API Access and Use Agreement and is asserted character
 * for character on every page. The virtual-credit disclaimer moved rather than
 * vanished - it is the first paragraph of the Virtual credits section and an
 * FAQ answer on the homepage, and its own clause in the Terms. */
.footer {
  padding: 18px 0 22px;
  color: var(--ink-fine); font-size: var(--t-fine);
  border-top: 1px solid var(--hairline);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.footer__links a { text-decoration: none; color: var(--ink-link); font-weight: 700; font-size: var(--t-fine); }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--ivory); text-decoration: underline; }
.footer__bottom {
  margin-top: 0; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
}
/* The Yahoo attribution is a contractual string. It states a data source and
   nothing else - no mark, no logo, no endorsement language. */
.attribution a { color: var(--ink-link); }

/* -- Legal and content pages --------------------------------------------- */
.doc { padding: 44px 0 56px; }
.doc h1 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em; }
.doc h2 { font-size: var(--t-card-title); margin-top: 40px; }
.doc p { margin-top: 16px; color: var(--ink-body); font-size: var(--t-card); }
.doc ul { margin-top: 16px; }
.doc li {
  position: relative; padding-left: 18px; margin-top: 8px;
  color: var(--ink-body); font-size: var(--t-card);
}
.doc li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.doc code { font-family: var(--font-num); font-size: .875em; color: var(--gold2); }
.doc__stamp {
  margin-top: 18px; padding: 18px 20px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(200, 162, 77, .09), transparent);
  color: var(--ink-body); font-size: var(--t-card);
}
.doc__stamp strong { color: var(--gold2); }

/* -- The POR's one breakpoint -------------------------------------------- *
 * 700px: wider gutters, two-up cards, intrinsic buttons. Everything else is
 * fluid by clamp, which is why the POR needs no other. */
@media (min-width: 700px) {
  .wrap { padding: 0 28px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .figures { grid-template-columns: repeat(3, 1fr); }
  .btn { width: auto; }
}

/* The navigation disclosure is the one thing the POR does not have, so it is
   the one thing needing a breakpoint of its own: at 900px the five links fit
   beside the brand and the toggle goes away. */
@media (min-width: 900px) {
  /* THE ONE PLACE THE 760px MEASURE IS RELAXED, and only for the bar's inner
     row. The wordmark, five section links and the demo link do not fit inside
     760px at any readable size, and a wrapped topbar is a 110px bar that
     pushes the hero down the page. The bar itself is already full-bleed, so
     widening its row changes nothing about the POR composition below it; every
     other `.wrap` on the site keeps the POR measure. */
  .topbar .wrap { width: min(100%, 1120px); }
  .nav,
  .nav[data-open="false"] {
    display: flex; align-items: center; gap: 20px;
    order: 2; flex: 0 1 auto; width: auto; margin: 0 auto 0 8px;
    padding: 0; border-top: 0;
  }
  /* The list itself has to become the row. `.nav` going flex only lays out its
     single <ul> child; without this the five links stay stacked and the topbar
     grows to three times its height. */
  .nav ul { display: flex; align-items: center; gap: 20px; }
  .mini-brand { margin-right: 0; }
  .mini-link { order: 3; }
  .nav__link { padding: 4px 0; border-bottom: 0; font-size: .875rem; white-space: nowrap; }
  .nav__toggle { display: none; }
}