/**
 * The one stylesheet for the public legal-pages site: landing index, every published legal
 * document, and the DSA Article 16 report form.
 *
 * Responsibilities:
 * - Carry the MBNXT register (Groupon Design System 1.3, vendored at
 *   `packages/frontend-design-system-mbnxt`) onto a long-form legal reading surface: white
 *   ground, Nunito Sans at 800 for headings, green-600 as the working brand green, blue for
 *   links and form state.
 * - Hold the token block the other four sheets in this estate resolve through.
 * - Style only what the markup already emits. Every selector below hangs off an element,
 *   attribute, or class this app renders today.
 *
 * Constraints:
 * - Values are MBNXT's, cited by token name in the declaration that carries them, and mirror the
 *   OKLCH in `packages/frontend-design-system-mbnxt/colors.css`. Never eyeball a hex off a
 *   screenshot and never invent a shade: a colour that is not in the corpus does not go here.
 * - Anatomy comes from the corpus previews, not from memory. The masthead, breadcrumb, footer,
 *   buttons, inputs, alerts, badges and the landing rows each name their `preview/` file above
 *   the block that builds them.
 * - Light only. MBNXT has no dark register (`DESIGN.md` section 7), so no sheet in this estate
 *   carries a `prefers-color-scheme` block and `color-scheme` stays `light`.
 * - No JavaScript, ever. Every state here is reachable with scripting disabled, except the report
 *   form's own JS-driven states, which are styled from the attributes its renderer sets
 *   (`[aria-invalid]`, `[hidden]`, `.invalid`) and never from a class it would have to add.
 * - Self-contained: no `@import`, no remote font, no third-party host. The CSP at
 *   `config/frontends/frontend-legal-pages-ts/nginx.conf:51` is `font-src 'self' data:`. The
 *   wordmark is an inline `data:` URI used as an alpha mask, so its colour is a token rather
 *   than a second file.
 * - This file is LINKED, never inlined. Inlining it would count its bytes as visible page text
 *   and defeat the empty-shell floor in the build gate.
 */

/* ── The one face ─────────────────────────────────────────────────────────────────────────────
   MBNXT is Nunito Sans and nothing else for UI text (`groupon-design` skill section 2,
   `DESIGN.md` section 3: headings 800, body 400). One variable woff2, byte-identical to
   `@fontsource-variable/nunito-sans@5.3.0`'s own latin file, which is the package the customers
   and docs apps import; it covers every weight this estate uses, 800 headings included, in a
   single request.

   DM Serif Display and JetBrains Mono are RETIRED and their files are deleted. MBNXT keeps DM
   Serif for marketing display copy only and never for UI text, and a legal document is UI text;
   the mono face had one consumer, `.notice-reference` behind the employee login, which now sets
   tabular numerals in the same sans instead of pulling a second family down the wire. */

@font-face {
  font-family: "Nunito Sans Variable";
  src: url("/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ── The second face, and the only one ─────────────────────────────────────────────────────────
   Caveat, for ONE line: the note beside the hero drawing (owner ask, 2026-09-15). It is a
   margin note in the page's own voice, so it is set in a hand rather than in the UI face, and
   Caveat is the hand that stays legible at the 15px that note is set at. One variable woff2,
   byte-identical to `@fontsource-variable/caveat@5.3.0`'s latin file (the package is a
   devDependency of this app so the copy is reproducible, exactly as the sans above).

   It is NOT a token and NOT available to the rest of the sheet. The 2026-08-29 ruling that
   retired DM Serif Display and JetBrains Mono stands: UI text, and every word of a legal
   document, is Nunito Sans. This face may only ever dress a decorative aside, and it is
   `aria-hidden` where it is used, so nothing a reader must understand depends on it.
   It costs one extra request of 73 KB, deferred by `font-display: swap`: the note renders in
   the sans first and swaps, and it sits beside a 940px illustration that costs more. */
@font-face {
  font-family: "Caveat Variable";
  src: url("/fonts/caveat-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────────────────────────────
   Every value is MBNXT's, named in the declaration that carries it. The hex is the human-readable
   mirror of the OKLCH in `packages/frontend-design-system-mbnxt/colors.css`, converted from that
   file rather than read off an artboard, and it agrees with `DESIGN.md` section 2's own published
   hex for each one.

   The custom-property NAMES are this app's and predate the conversion. They stay: the other four
   sheets and the print block in `legal-document.css` resolve through them, so a rename would be
   a sweep with no design in it. What changed is every VALUE. */

:root {
  color-scheme: light;

  --primary: #007c1f;          /* MBNXT green-600, `--color-primary`. The working brand green.
                                  green-600 is forked upstream (groupon-design skill section 6):
                                  the package and the wordmark SVG say #007C1F, compiled
                                  groupon.com CSS says #017c1f. This is package-side work, so it
                                  takes the package's literal. Never eyeball a third value. */
  --primary-dark: #006e1b;     /* MBNXT green-700, `--background-color-primary-hover`. */
  --primary-hover: #006118;    /* MBNXT --color-green-800, --btn-primary-hover
                                   (colors_and_type.css:160). The button family's own hover
                                   fill; --primary-dark stays for non-button hover/background. */

  --paper: #ffffff;            /* MBNXT white, `--background-color-body`. The page ground. */
  --paper-deep: #eeeeee;       /* MBNXT neutral-50, `--background-color-secondary`. */
  --surface: #ffffff;          /* MBNXT white: cards, the masthead, form controls. */

  --ink: #111827;              /* MBNXT neutral-900, `--text-color-body`. */
  --ink-muted: #70747d;        /* MBNXT neutral-500, `--text-color-muted`. 4.68:1 on white. */
  /* MBNXT neutral-600, "subdued labels and supporting text". The footer sits on neutral-50, where
     --ink-muted measures 4.04:1 and misses AA; this is the same role one stop darker, 5.69:1. */
  --ink-subtle: #585d68;

  /* A card's container border is black/15 and a form field's is black/25: two different tokens,
     and `spec/_token-value-map.md` section 2 is explicit that confusing them makes inputs vanish
     into cards. The DS black is #0b111e, a near-black navy, never #000. */
  --line: rgba(11, 17, 30, 0.15);  /* MBNXT black/15, card and container border,
                                       spec/_token-value-map.md section 2 */
  --line-soft: #e7e8e9;            /* MBNXT specialDark-50, `--border-color-separator`, the
                                       lighter in-card divider. */
  --line-strong: #c0c5cf;          /* MBNXT neutral-200, the footer's own top rule. */
  /* MBNXT `--color-black-alpha-50`, not the corpus input border black/25: black/25 measures
     1.75:1 on white and a control boundary needs 3:1 (WCAG 1.4.11); black/50 measures 3.3:1.
     The skill (section 6) says contrast is checked, never inherited from the brand. */
  --field-border: rgba(11, 17, 30, 0.5);

  /* MBNXT --color-blue-500. colors.css resolves --text-color-hyperlink to blue-600; blue-500
     follows the skill section 6 fork and the docs-ts precedent (07e, 2026-08-29). 4.53:1 on
     white. */
  --link: #0077d9;
  --brand-mark: #007c1f;       /* MBNXT green-600: the wordmark, never recoloured. */
  /* Focus and checked are BLUE, never green: `spec/anti-patterns.md:23-25` is explicit that green
     is the CTA colour and blue is the inputs/links/form-state colour. Buttons carry their own
     ring instead (`spec/ui/button.md:43`, black/75), which is the one place the corpus differs. */
  --focus: #006bc3;            /* MBNXT blue-600, `--color-info`. */

  /* The mobile masthead's ground. Below the DS lg breakpoint the header is a green bar with a
     white wordmark, the shape `preview/page-header-mobile.html` takes. The DESKTOP masthead is
     white and takes `--surface`, so this token is the mobile bar and the employee controls in
     `legal-notices.css` that fill with the brand green. */
  --brand-bar: #006e1b;        /* MBNXT --color-green-700, preview/page-header-mobile.html:11 */
  --on-brand: #ffffff;         /* White on green-600 measures 5.38:1. */
  --on-brand-line: rgba(255, 255, 255, 0.36); /* MBNXT --color-white-alpha-36 */
  --on-brand-cta-ink: #006e1b; /* MBNXT green-700 on a white pill sitting on the bar. */

  /* Alert, `yellow-subtle` variant (`preview/alert.html:44`). The corpus pairs yellow-50 with
     yellow-800 #b06f1b, which measures 3.79:1 and misses AA for the archived banner's 15px text.
     This app enforces WCAG 2.2 AA (`src/app/__tests__/views.axe.test.tsx` plus a browser run), so
     the ink steps one stop to yellow-900, 4.91:1, still an MBNXT token. Recorded as a deviation. */
  --warn-bg: #fff5e9;          /* MBNXT yellow-50, `--background-color-warning-subtle`. */
  --warn-line: #fed8a8;        /* MBNXT yellow-200, `--border-color-warning-subtle`. */
  --warn-ink: #975f18;         /* MBNXT yellow-900. */

  --danger: #cc3b3b;           /* MBNXT red-700, `--border-color-danger`: the invalid boundary. */
  --danger-ink: #b33434;       /* MBNXT red-800, `--text-color-danger`: the message. 6.07:1. */
  --danger-bg: #ffeded;        /* MBNXT red-50, `--background-color-danger-subtle`. */
  --ok-bg: #e5f3e9;            /* MBNXT green-50, `--background-color-primary-subtle`. */
  --ok-line: #cce8d3;          /* MBNXT green-100. */

  --font-body: "Nunito Sans Variable", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  /* Both aliases resolve to the one face. The names stay so no selector in the four sibling
     sheets breaks; the faces behind them are gone (see the @font-face note above). */
  --font-display: var(--font-body);
  --font-mono: var(--font-body);

  /* MBNXT radius scale (`DESIGN.md` section 5, mapped by RENDERED px per
     `spec/_token-value-map.md` section 1, which is the file that says to map by px not by name). */
  --radius-control: 8px;       /* `--radius-xs`: inputs, small buttons, alerts. */
  --radius-card: 12px;         /* `--radius-sm`: cards, panels. */
  --radius-sheet: 16px;        /* `--radius-m`: large cards, the landing row groups. */
  --radius-pill: 999px;        /* every button, every badge. */

  /* MBNXT composed shadows, `colors_and_type.css:369-371`. The black is 8,14,28. */
  --shadow-card: 0px 1px 8px -3px rgba(8, 14, 28, 0.3);      /* --shadow-sm-black */

  /* MBNXT spacing: every step a multiple of the 4px base unit (`DESIGN.md` section 5). */
  --sp-2xs: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.75rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;

  /* THIS SITE HAS EXACTLY THREE WIDTHS, and these two tokens are two of them. Anything that sets
     its own is drift (owner order, 2026-09-01: one standardized document width). It used to have
     five: the chrome ran at two widths and the reading column at four, one per page kind, so no
     two pages lined up with each other or with the bar above them.

     THE FRAME. What the masthead pill and the footer's contents stop at, both, the acquisition
     site's own container (`Nav.tsx`'s `max-w-[1472px]`), so the two public sites frame their
     pages identically. */
  --shell: 92rem;                  /* 1472px */

  /* The frame's two insets, so the masthead and the footer line their contents up by construction
     rather than by two people picking numbers. `--frame-inset` is the band's own side padding and
     `--frame-pad` is the padding inside the masthead pill; the footer has no pill, so it subtracts
     both to land its first element on the same vertical as the wordmark above it. Both step up
     with the viewport, matching the acquisition nav's `px-3 sm:px-6 lg:px-8` and its pill's
     `px-3 sm:px-4`, IN THE PIXELS those classes resolve to over there. That site's root is 14px
     and this one's is 16px, so a rem copy of the same classes sat 2px wider on every side and
     made the bar the one thing on the two sites that did not line up (measured 2026-09-10). */
  --frame-inset: 10.5px;
  --frame-pad: 10.5px;

  /* The rail itself, written once: what a full-width element lines up with. Subtracting both
     insets is what lands its first pixel on the same vertical as the wordmark in the pill above,
     rather than a few pixels off it, which is the sort of miss nobody can name but everybody
     sees. Used by the footer's row and by the two employee tools. */
  --frame-rail: min(100% - 2 * (var(--frame-inset) + var(--frame-pad)), var(--shell) - 2 * var(--frame-pad));

  /* THE READING COLUMN, one measure for every page the public reads: the landing index, a legal
     document, the report form and the 404 body. Unlike the frame it is a MEASURE, not a
     container, and 40rem is the one number here that was measured rather than chosen: it runs the
     corpus's real paragraphs at 70-76 characters a line, averaging 73, in the face the site
     actually ships. The pages that used to sit at 52rem and 44rem now sit here, which costs them
     nothing and is what makes the site read as one document set.

     The third width is the employee tools' (see `#notices-page` further down); they are not
     documents and do not use this. */
  --sheet: 40rem;

  /* The Groupon wordmark, regenerated verbatim from `LogoFull`'s path in
     `apps/frontend-customers-ts/src/components/header/HeaderLogo.tsx` (viewBox 0 0 133 22, the
     legacy asset). Used as an alpha MASK, so only the path's coverage matters and its colour is
     whatever the element is set to: green-600 on the white desktop masthead and in the footer,
     white on the green mobile bar. One asset, never a recoloured second copy, and never a
     wordmark rebuilt from a font. */

  /* The chevron every row ends with, drawn from `preview/list-group-item.html:29`'s own path (the
     same 24x24 "m8 2 10 10L8 22" the corpus uses for every forward chevron) and used as an alpha
     mask, so a row needs no extra markup and the glyph's colour stays a token. */
  --chevron: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTggMiAxMCAxMEw4IDIyIi8+PC9zdmc+");

  --wordmark: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzMiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAxMzMgMjIiIGZpbGw9Im5vbmUiPjxwYXRoIGQ9Ik0yMS4yMzAzIDkuNTExNjdDMjEuMjU5NSA5Ljk4MDc1IDIxLjI4OTcgMTAuNDQ4NyAyMS4yODk3IDEwLjg4ODZDMjEuMjg5NyAxMy4yMzA4IDIwLjcwNTggMTUuMjIwOCAxOS41MDg4IDE2Ljk3NjlDMTguNTE5MiAxOC40MTE1IDE3LjE5NzEgMTkuNTg0MyAxNS42NTU4IDIwLjM5NDdDMTQuMTE0NSAyMS4yMDUxIDEyLjQwMDEgMjEuNjI4OSAxMC42NTk1IDIxLjYyOThDNy41OTI5IDIxLjYyOTggNC45OTM0NSAyMC40ODkxIDIuOTQ5NzkgMTguMzIyNEMwLjk5MTU1MyAxNi4yNDQ2IDAgMTMuNjY4NCAwIDEwLjU5NUMwIDcuNzI2MzMgMS4xMDk0MSA1LjA5Mjc1IDMuMTUzMDcgMy4wNzIzM0M1LjE5NzgxIDEuMDUzIDcuNzY4MDcgMCAxMC43MTY4IDBDMTUuMTU2NiAwIDE5LjAzOTUgMi43MjI0MiAyMC43MDQ4IDcuMTcxNjdIMTQuOTIyQzEzLjYzNzQgNS44MjYxNyAxMi4yOTMzIDUuMTUyMzMgMTAuNjU4NCA1LjE1MjMzQzcuNjIyMDkgNS4xNTIzMyA1LjIyNzAxIDcuNjM5NjcgNS4yMjcwMSAxMC42MjQzQzUuMjI3MDEgMTMuOTMxNyA3Ljc5NjE4IDE2LjQ3NzUgMTAuNjU4NCAxNi40Nzc1QzEyLjU4NjMgMTYuNDc3NSAxNC4zMDg5IDE1LjQ4MyAxNS4zMzA3IDEzLjY2NzNIOS40MDI5OVY5LjUxMTY3SDIxLjIzMDNaTTMyLjgyNjEgMTQuMDc3OUwzNy45MDcyIDIxLjIxOTJIMzEuNjI4MUwyNy42NTY0IDE0LjUxNjdWMjEuMjE5MkwyMi41NzU0IDIxLjIyMDNWMC40MDk1SDI5LjQ2NzZDMzEuNjU3MiAwLjQwOTUgMzMuMzIyNSAwLjU1NTc1IDM0LjcyMzggMS41NTI0MkMzNi41NjQyIDIuODM5NDIgMzcuNTI3NiA0LjgwMTMzIDM3LjUyNzYgNy4zNzY0MkMzNy41Mjg3IDEwLjc0MjMgMzUuNzc1OSAxMy4yNTc4IDMyLjgyNjEgMTQuMDc3OVpNMzIuMzg3MSA3LjQ5MzQyQzMyLjM4NzEgNS43NjY1OCAzMS4zMDY5IDUuMDYzNSAyOS4wNTc4IDUuMDYzNUgyNy42NTY0VjEwLjAxSDI4LjY0OTFDMzEuMTYwOSAxMC4wMSAzMi4zODcxIDkuMzY1NDIgMzIuMzg3MSA3LjQ5MzQyWk0xMjcuODk0IDAuNDA5NVYxMS45NzA4TDEyMC4yNzEgMC40MDk1SDExNS42ODdWMjEuMjIwM0gxMjAuNzY3VjkuNjMwODNMMTI4LjUwNiAyMS4yMjE0SDEzMi45NzRWMC40MDk1SDEyNy44OTRaTTExMS40NzkgMy4xMDM3NUMxMTMuNTgyIDUuMTgxNTggMTE0LjY5MyA3Ljg0NTUgMTE0LjY5MyAxMC42ODQ5QzExNC42OTMgMTMuNjY5NSAxMTMuNjQgMTYuMzMzNCAxMTEuNjg0IDE4LjM1MzhDMTA5LjY2OSAyMC40NjA5IDEwNi45MjIgMjEuNjAyOCAxMDQuMDMyIDIxLjYwMjhDMTAwLjk2NSAyMS42MDI4IDk4LjMzNjggMjAuNDkxMyA5Ni4yOTMxIDE4LjMyNDZDOTQuMzM1OSAxNi4yNDY4IDkzLjM0MjIgMTMuNjcxNyA5My4zNDIyIDEwLjU5NzJDOTMuMzQyMiA3LjcyNzQyIDk0LjQ1MTYgNS4wOTI3NSA5Ni40OTUzIDMuMDczNDJDOTguNTQgMS4wNTQwOCAxMDEuMTA5IDAuMDMwMzMzNSAxMDQuMDYgMC4wMzAzMzM1QzEwNi44MzcgMC4wMzAzMzM1IDEwOS40NjQgMS4xMTM2NyAxMTEuNDc5IDMuMTAzNzVaTTEwOS40MzUgMTAuNjU0NkMxMDkuNDM1IDcuNjEwNDIgMTA3LjAxMSA1LjE4MTU4IDEwNC4wOSA1LjE4MTU4QzEwMC45OTUgNS4xODE1OCA5OC41NzAzIDcuNjEwNDIgOTguNTcwMyAxMC42NTQ2Qzk4LjU3MDMgMTMuOTMyOCAxMDEuMTcgMTYuNDQ5MyAxMDQuMDMzIDE2LjQ0OTNDMTA3LjAxMSAxNi40NDkzIDEwOS40MzUgMTQuMDQ4NyAxMDkuNDM1IDEwLjY1NDZaTTU2LjQ1MjYgMy4xMDM3NUM1OC41NTU3IDUuMTgxNTggNTkuNjY2MiA3Ljg0NTUgNTkuNjY2MiAxMC42ODQ5QzU5LjY2NjIgMTMuNjY5NSA1OC42MTQxIDE2LjMzMzQgNTYuNjU4IDE4LjM1MzhDNTQuNjQyNSAyMC40NjA5IDUxLjg5NyAyMS42MDI4IDQ5LjAwNTYgMjEuNjAyOEM0NS45MzkxIDIxLjYwMjggNDMuMzEwNCAyMC40OTEzIDQxLjI2NjggMTguMzI0NkMzOS4zMDk2IDE2LjI0NjggMzguMzE3IDEzLjY3MTcgMzguMzE3IDEwLjU5NzJDMzguMzE3IDcuNzI3NDIgMzkuNDI2NCA1LjA5Mjc1IDQxLjQ3MTEgMy4wNzM0MkM0My41MTU5IDEuMDU0MDggNDYuMDg1IDAuMDMwMzMzNSA0OS4wMzU5IDAuMDMwMzMzNUM1MS44MDk1IDAuMDMwMzMzNSA1NC40MzcgMS4xMTM2NyA1Ni40NTI2IDMuMTAzNzVaTTU0LjQwNzggMTAuNjU0NkM1NC40MDc4IDcuNjEwNDIgNTEuOTgzNSA1LjE4MTU4IDQ5LjA2MyA1LjE4MTU4QzQ1Ljk2NzIgNS4xODE1OCA0My41NDI5IDcuNjEwNDIgNDMuNTQyOSAxMC42NTQ2QzQzLjU0MjkgMTMuOTMyOCA0Ni4xNDI0IDE2LjQ0OTMgNDkuMDA0NiAxNi40NDkzQzUxLjk4NDYgMTYuNDQ5MyA1NC40MDc4IDE0LjA0ODcgNTQuNDA3OCAxMC42NTQ2Wk05Mi42NzI5IDcuNDA1NjdDOTIuNjcyOSAxMC4wOTg4IDkxLjQ0NTYgMTIuMzIyOSA4OS4zNzI4IDEzLjU4MDdDODguMDU3OSAxNC4zNzA0IDg2LjQyMTkgMTQuNTE2NyA4NC4yNjA0IDE0LjUxNjdIODIuNzk5NVYyMS4yMTkyTDc3LjcxODUgMjEuMjIwM1YwLjQwOTVIODQuNjEwN0M4Ni43OTkzIDAuNDA5NSA4OC40NjQ1IDAuNTU1NzUgODkuODY2OSAxLjU1MjQyQzkxLjcwODQgMi44Mzk0MiA5Mi42NzI5IDQuODAxMzMgOTIuNjcyOSA3LjQwNTY3Wk04Ny41MzEzIDcuNDkzNDJDODcuNTMxMyA1Ljc2NjU4IDg2LjQ1MTEgNS4wNjM1IDg0LjIwMiA1LjA2MzVIODIuODU5VjEwLjAxSDgzLjc5MjJDODYuMzA1MSAxMC4wMSA4Ny41MzEzIDkuMzY1NDIgODcuNTMxMyA3LjQ5MzQyWk03MS4xNzIzIDEzLjIyOTdDNzEuMTcyMyAxNS42IDcwLjMyNTcgMTYuNzcxMSA2OC41NDM3IDE2Ljc3MTFDNjYuODIxMiAxNi43NzExIDY2LjA5MDIgMTUuNTcwOCA2Ni4wOTAyIDEzLjIyOTdWMC40MDk1SDYwLjk3ODlWMTMuNDM0NEM2MC45Nzg5IDE4LjY0NTMgNjMuODEwOCAyMS41NDEgNjguNTEzNCAyMS41NDFDNzMuMTU2NSAyMS41NDEgNzYuMjUyMyAxOC41MjcyIDc2LjI1MjMgMTMuNDM0NFYwLjQwOTVINzEuMTcyM1YxMy4yMjk3WiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==");
}

/* ── Reset, only what this markup needs ───────────────────────────────────────────────────── */

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

/* The report form's script shows and hides panels, rows and buttons with the hidden attribute
   alone. Anything given display:flex/grid below would otherwise ignore it. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1rem;
  /* text-base 16 / 24. MBNXT relaxes body to a 1.5 multiplier and tightens headings to ~1.2
     (`DESIGN.md` section 3); this page used 1.65 to carry a serif register that is now gone. */
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  text-rendering: optimizeLegibility;
}

/* Visually hidden, still announced. Used by the wordmark's accessible name in both mastheads. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Masthead ─────────────────────────────────────────────────────────────────────────────────
   ONE masthead across the public estate: this is the green pill bar
   `apps/frontend-merchant-acquisition-ts` carries at merchants.groupon.com (its `Nav.tsx` on the
   green surface), rebuilt here in this app's own class names because that app renders with
   Tailwind and this one is forbidden utilities in markup (`HOW_TO_PROGRAM.md`). Owner order,
   2026-09-01: the two sites must read as one product at the top of the page.

   Every value below is that bar's, MEASURED on it and written in px (2026-09-10): the 57px pill
   with 8.75px/14px padding, the 112x24 wordmark and its own logo asset, the 24px label behind a
   white/18 rule, the 13px/600/0.06em uppercase links at 8.75px/7px with 21px between them, the
   menu centred between the lockup and the right-hand group, the white/30 locale pill, the 11px
   "Login" treatment the sibling gives its account control, and the white call to action with green ink. Not in
   rem: the acquisition site's Tailwind classes resolve on a 14px root and this sheet's on 16px, so
   the first cut, a rem copy of the same classes, rendered a 60px bar with 40px links and read as
   a different product from the one it was copied from. Two of the colours are NOT this estate's
   MBNXT tokens and are declared as their own below, with the reason.

   Three deliberate differences from the source, all stated rather than hidden:

   1. THE LABEL IS NOT A SERIF. "Merchants" is set in DM Serif Display over there. This app deleted
      that font on 2026-08-29 (owner ruling, decision log 07e: one self-hosted Nunito Sans and
      nothing else), and re-adding a whole face for one word on a public legal page would undo it.
      "Legal" takes the estate's own 800 weight at the same 24px size instead.
   2. THE BAR IS IN FLOW, not fixed. Over there it floats above the page as you scroll; here it
      would sit on top of the legal text a reader is working through.
   3. THE LINKS ARE FULL WHITE. Over there a menu link rests at white/74 and brightens on hover,
      which on this green measures about 3.2:1, under AA for 13px text. A legal page is the one
      page that has to pass, so every link here stays white (4.5:1) and the hover, the current
      page and an open group take the white/10 wash the sibling's own Login control uses instead.

   The previous masthead was the MBNXT site header: a white full-width bar with a green wordmark,
   turning green only below 991px. That mobile-green rule is gone with it, because the bar is now
   green at every width. */

/* The acquisition nav's own two greens. They are NOT this estate's `--primary` (MBNXT green-600,
   #007c1f) and are not interchangeable with it: they are the values that make this bar and that
   one the same object. `--primary` still owns every other green on the page. */
:root {
  --nav-green: #008a22;
  --nav-green-ink: #006e2e;
}

@media (min-width: 40em) {
  :root {
    --frame-inset: 21px;
    --frame-pad: 14px;
  }
}

@media (min-width: 64em) {
  :root {
    --frame-inset: 28px;
  }
}

/* 7px above the pill, 10.5px from 640px: the sibling's own `top` offset (`0.5rem`, then
   `sm:0.75rem`, on its 14px root), and the same below so the breadcrumb keeps its distance. */
.masthead {
  flex: none;
  padding: 7px var(--frame-inset);
}

@media (min-width: 40em) {
  .masthead {
    padding-top: 10.5px;
    padding-bottom: 10.5px;
  }
}

/* The pill. `flex-wrap` and `min-height` rather than a fixed height: on a phone the employee rail
   is two more links that cannot shrink, and without wrapping the row is wider than the viewport
   and the whole document scrolls sideways. */
.masthead-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 14px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 8.75px var(--frame-pad);
  border-radius: var(--radius-pill);
  background: var(--nav-green);
  box-shadow: 0 16px 42px rgba(0, 110, 46, 0.22);
  color: var(--on-brand);
}

/* The wordmark is an alpha mask painted in `currentColor`, so one asset serves the masthead and
   the footer. 133x22 is the LogoFull viewBox's own ratio: it is not rescaled to taste. */
.wordmark {
  display: block;
  width: 8.3125rem;                /* 133px */
  height: 1.375rem;                /* 22px */
  background-color: currentColor;
  -webkit-mask-image: var(--wordmark);
  mask-image: var(--wordmark);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* In the bar the wordmark is the sibling's: its own logo asset (`public/images/groupon-logo.svg`,
   the file `apps/frontend-merchant-acquisition-ts` and the investor site paint) in its own 112x24
   box, so the two bars carry one drawing of the mark. `LogoFull` above is a lighter, wider cut of
   the same word; it stays on the footer, which is the MBNXT corpus's own. */
.masthead-brand .wordmark {
  width: 112px;
  height: 24px;
  -webkit-mask-image: url("/images/groupon-logo.svg");
  mask-image: url("/images/groupon-logo.svg");
  -webkit-mask-position: center;
  mask-position: center;
}

.masthead-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10.5px;
  color: var(--on-brand);
  text-decoration: none;
}

/* The property's name beside the wordmark, inside the same link as it is over there (the link is
   named "Groupon Legal home" for a screen reader, and both children are decoration to it), behind
   the sibling's white/18 rule at its 10.5px on either side. Not a second logo, and not a shouty
   uppercase label. */
.masthead-tag {
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 10.5px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 24px;                 /* the acquisition nav's own label size */
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The site's own menu, the store's rows, in the sibling site's own nav-item treatment: 13px
   semibold uppercase at 0.06em, 8.75px by 7px, 21px between items, and the whole thing centred in
   the room between the lockup and the right-hand group (a natural-width middle child of the bar's
   `space-between` over there; a `flex: 1` child centring its contents here, which lands on the
   same pixel and still wraps to a row of its own on a phone). A group opens a white panel under
   its button, the shape the acquisition site's dropdowns take.

   A ROW IS TEXT WITH A RULE UNDER IT, NEVER A FILLED CHIP (owner ruling 2026-09-10). Until that
   date hover and the current row painted a translucent white bubble behind the words, which is
   the investor and careers sites' treatment for a BUTTON, not for a nav row, and made this one
   bar read as a different component from the other two. The rule below is investor's own,
   matched property by property: a 1px line inset to the row's own padding, scaling out from the
   centre over 200ms.

   ONE THING IS DELIBERATELY NOT COPIED FROM INVESTOR: it dims an inactive row to 74% of the
   ground's ink. White at 74% over green-600 measures 3.17:1, which fails WCAG AA for 13px text,
   and this app is the one with an axe WCAG 2.2 gate in its own suite. Rows here stay full white
   (5.38:1, the figure the token block at the top of this file records) and the RULE alone
   carries hover and the current page. */
.masthead-menu {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 21px;
}

.masthead-menu a,
.masthead-menu-group > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5.25px;
  padding: 8.75px 7px;
  border: 0;
  background: transparent;
  color: var(--on-brand);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* The rule itself. Inset to the row's own 7px padding so it underlines the words and not the
   gap beside them, and scaled from the centre so hover reads as the line being drawn. */
.masthead-menu a::after,
.masthead-menu-group > button::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  height: 1px;
  background: var(--on-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease-out;
}

.masthead-menu a:hover::after,
.masthead-menu-group > button:hover::after,
.masthead-menu a[aria-current="page"]::after,
.masthead-menu-group > button[aria-expanded="true"]::after {
  transform: scaleX(1);
}

/* Somebody who has asked for less motion gets the rule, not the drawing of it. */
@media (prefers-reduced-motion: reduce) {
  .masthead-menu a::after,
  .masthead-menu-group > button::after {
    transition: none;
  }
}

.masthead-menu-group {
  position: relative;
}

.masthead-menu-caret {
  display: block;
  width: 5.25px;
  height: 5.25px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.masthead-menu-panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 50;
  margin-top: 0.75rem;
  width: min(320px, calc(100vw - 2rem));
  padding: 0.5rem;
  border: 1px solid rgba(28, 13, 51, 0.1);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(28, 13, 51, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.masthead-menu-panel a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  white-space: normal;
}

.masthead-menu-panel a:hover,
.masthead-menu-panel a[aria-current="page"] {
  background: var(--paper, #f6f5f1);
  color: var(--brand-600, #006e2e);
}

.masthead-menu-panel a small {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(28, 13, 51, 0.64);
}

/* The menu editor page: one tab per menu the site's chrome reads, then the shared editor on this
   site's paper. The tab strip is the page's own, not a component: two buttons and a rule. */
#menu-page .menu-page-tabs {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.5rem;
  border-bottom: 1px solid var(--line);
}

#menu-page .menu-page-tab {
  margin-bottom: -1px;
  padding: 0.5rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
}

#menu-page .menu-page-tab:hover {
  color: var(--ink);
}

#menu-page .menu-page-tab[aria-selected="true"] {
  border-bottom-color: var(--primary);
  color: var(--ink);
}

#menu-page .menu-page-blurb {
  max-width: 60ch;
  margin: 1.5rem 0 0;
  color: var(--ink-muted);
}

#menu-page .menu-page-editor {
  max-width: 900px;
  margin-top: 1rem;
}

/* The footer menu is edited in columns, so its editor needs the room the bar's does not. */
#menu-page [id$="legal_footer"] .menu-page-editor {
  max-width: none;
}

/* Everything that lives at the right end, so the gap between them is the sibling site's tighter
   one rather than the bar's own. */
.masthead-actions {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

/* Below the width where all three parts fit one line, the pill is a CENTRED COLUMN rather than a
   wrapped row. `flex-wrap` alone put the brand on the left of a line the menu had already grown
   across (`.masthead-menu` is `flex: 1 1 auto`), so between 520 and 768 the bar read as three
   pieces thrown at three different edges with a hole in the middle. Measured on this app: the
   three parts first share one line at 820px, and below it the wrapped row was 101px tall at 768
   and 132px at 375 while looking accidental at both. A column is the same height and deliberate.
   Nothing at 820 and above is touched. */
@media (max-width: 51.24em) {
  .masthead-bar {
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }

  .masthead-brand,
  .masthead-menu,
  .masthead-actions {
    flex: none;
    justify-content: center;
  }

  /* `.masthead-actions` pushes itself to the far end with `margin-left: auto`, which is what
     holds the row together at full width and what kept this group pinned to the right edge of a
     centred column. */
  .masthead-actions {
    margin-left: 0;
  }
}

/* The call to action: white pill, green ink, the label in the uppercase micro-type the sibling
   site uses for its own, at its 8.75px by 17.5px. */
.masthead-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8.75px 17.5px;
  border: 1px solid var(--on-brand);
  border-radius: var(--radius-pill);
  background: var(--on-brand);
  color: var(--nav-green-ink);
  font-size: 0.6875rem;            /* 11px */
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.masthead-cta:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--nav-green-ink);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────────────────────────
   `preview/breadcrumb.html:15-26`, default variant: an ordered list at 13/600 with an 18px line,
   links underlined at a 2px offset in neutral-500 darkening to neutral-900 on hover, the current
   page a plain `aria-current` span in neutral-500, and the separator a 10px chevron in its OWN
   `<li>` between them. Aligned to the sheet below it, not to the wider chrome rail, so a document
   reads as one column from its trail down to its last clause. */

.crumb {
  width: min(100% - 2rem, var(--sheet));
  margin: var(--sp-lg) auto 0;
  padding: var(--sp-2xs) 0;
}

.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;            /* text-xs 13/18 */
  line-height: 1.125rem;
  font-weight: 600;
}

.crumb li {
  display: inline-flex;
  align-items: center;
}

.crumb a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;              /* --radius-xxs, the corpus's own focus-ring radius here */
}

.crumb a:hover {
  color: var(--ink);
}

.crumb-sep {
  margin-left: var(--sp-xs);
  padding-right: var(--sp-xs);
  color: #8a8e98;                  /* MBNXT neutral-400, the separator's own step */
}

.crumb-sep svg {
  display: block;
  width: 10px;
  height: 10px;
}

.crumb-here {
  color: var(--ink-muted);
}

/* Below this width a long document title wraps the trail onto three lines and buries the way back
   to the index that is supposed to orient a lost reader. The trail collapses to the back link, not
   to where you are: "where am I" is already answered by the page's own <h1>, "how do I leave" is not. */
@media (max-width: 34em) {
  /* Two class selectors, so this beats `.crumb li`'s own `display: inline-flex` (0,1,1) rather
     than losing to it: the separator is a list item now, and a bare `.crumb-sep` (0,1,0) left a
     chevron dangling after the back link with nothing behind it. */
  .crumb .crumb-sep,
  .crumb .crumb-here {
    display: none;
  }
}

/* ── Focus ────────────────────────────────────────────────────────────────────────────────────
   Blue, never green: `spec/anti-patterns.md:23-25` reserves green for CTAs and prices and makes
   blue the inputs/links/form-state colour. blue-600 measures 5.40:1 on white. Buttons and the
   breadcrumb link carry the button family's own black/75 ring instead (see the masthead block
   above); `.crumb a:focus-visible` there beats this rule on specificity. */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── The reading column ───────────────────────────────────────────────────────────────────────
   MBNXT's foundation is a clean white canvas (`DESIGN.md` section 1), so the page's own content
   sits directly on it: no sheet, no border, no shadow. The card treatment moves to the things
   that are genuinely grouped, which on this site is the landing page's row groups.

   Column width is set on <body>, not on <main>, so every rail on the page lines up by
   construction rather than by three copies of one number. */

main {
  width: min(100% - 2rem, var(--sheet));
  margin: var(--sp-xl) auto var(--sp-3xl);
}

/* THE THREE EMPLOYEE TOOLS TAKE THE WHOLE FRAME, not the reading column and not a width of their
   own (owner, 2026-09-01). None is a document: the register is a table holding seven answers
   per notice, the editor is an authoring desk with a rich-text canvas and a rail beside it, and
   the menu tool lays the footer out in the columns it will render as. All three were unusable in
   a 40rem column and all three have more to show than a 76rem one gave them.

   Taking `--frame-rail` rather than a number means their content starts and ends exactly where
   the masthead's does, so a table reads as part of the page rather than as a panel floating in
   it. The register's own column arithmetic (`legal-notices.css`) had 1216px to seat seven columns
   and now has up to 1424px, so it only gets easier; below that width it scrolls, as it always
   has. */
body:has(#notices-page),
body:has(#legal-admin-page),
body:has(#menu-page),
body:has(.legal-landing) {
  --sheet: var(--frame-rail);
}

/* Their breadcrumb renders INSIDE `<main>`, and `--frame-rail` carries a percentage, which every
   element resolves against its OWN container: one level in, the rail measures itself against main
   instead of the page and insets the trail by another 48px. So the trail simply fills its parent,
   which is already the rail. */
body:has(#notices-page) .crumb,
body:has(#legal-admin-page) .crumb,
body:has(#menu-page) .crumb {
  width: 100%;
}

/* Every route is React-rendered, so the page's chrome hangs off the mount point rather than off
   <body> directly. Same column stack, one level in. */
#root,
#root > .ant-app {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* ── Site footer ──────────────────────────────────────────────────────────────────────────────
   ONE footer across the public estate: this is `apps/frontend-investor-ts`'s `Footer.tsx`
   (investor.groupon.com), rebuilt here in this app's own class names because that app renders
   with Tailwind and this one is forbidden utilities in markup (`HOW_TO_PROGRAM.md`). Owner order,
   2026-09-14: the two sites must read as one product at the bottom of the page as well as the top.

   Every value below is that footer's, MEASURED on it and written in px. NOT in rem: the investor
   site's root is 14px (`globals.css:233`) and this sheet's is 16px, so a rem copy of its Tailwind
   classes would render every gap and every pad 14% too large. That is the same trap the masthead
   block above records, and the same answer.

   The link COLUMNS are not in this file at all: they are the store's rows (`legal_footer`, edited
   on `/menu`), one column per top-level group, and per MARKET, which is the one thing this footer
   does that the investor's does not. What stays here is everything that is not a link: the
   tagline, the call to action, the lockup, the trademark line and the employee account control.

   Two deliberate differences from the source, both stated rather than hidden:

   1. THE TAGLINE IS NOT A SERIF, and neither is the lockup's label. Both are set in DM Serif
      Display over there. This app deleted that font on 2026-08-29 (owner ruling, decision log
      07e: one self-hosted Nunito Sans and nothing else), and re-adding a whole face for two
      lines of a public legal page would undo it. They take the estate's own 800 weight at the
      same sizes instead, exactly as `.masthead-tag` already does.
   2. THE FRAME IS THIS SITE'S. Over there the footer's contents stop at 1440px with their own
      side padding; here they stop at `--frame-rail`, so the footer's first pixel lands on the
      same vertical as the wordmark in the masthead pill above it. This site has exactly three
      widths (see the token block) and a fourth one for the footer alone would be the kind of
      miss nobody can name but everybody sees. */

.site-footer {
  flex: none;
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* 70px above and 42px below, 84px above from 640px: the source's `pt-20 pb-12 sm:pt-24` in the
   pixels those classes resolve to on its own root. The rail is this site's (difference 2). */
.site-footer-inner {
  width: var(--frame-rail);
  margin: 0 auto;
  padding: 70px 0 42px;
}

@media (min-width: 40em) {
  .site-footer-inner {
    padding-top: 84px;
  }
}

/* The first row: the tagline block, then the link columns. One column until the source's own `lg`,
   where it becomes its 1.05fr / 0.95fr split. */
.site-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 35px;
  padding-bottom: 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid var(--line-soft);
}

@media (min-width: 64em) {
  .site-footer-top {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* 800 rather than the source's regular serif (difference 1), at its own clamp and measure. */
.footer-tagline {
  display: block;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}

/* The source's own call to action: 12px semibold uppercase at 0.14em, green ink going to body ink
   on hover, its arrow nudging 1.75px right with it. */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 17.5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary-dark);
  text-decoration: none;
}

.footer-cta:hover {
  color: var(--ink);
}

.footer-cta-arrow {
  flex: none;
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}

.footer-cta:hover .footer-cta-arrow {
  transform: translateX(1.75px);
}

/* Groupon's social profiles for this market, under the call to action: a row of marks, no
   headings and no text. Sized to the call to action above it (18px marks against its 12px cap
   height) and coloured like the column links, so the pitch reads as one block rather than as a
   band bolted under it. The marks come from the estate's shared catalog, so nothing here knows
   which platforms exist. */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: inline-flex;
  color: var(--ink-subtle);
  transition: color 0.2s;
}

.footer-social a:hover {
  color: var(--primary-dark);
}

.footer-social-mark {
  width: 18px;
  height: 18px;
}

/* The source fixes this at two columns, then four. Here the column COUNT is editorial and varies
   by market, so the row fills itself instead: `auto-fit` collapses the tracks nothing was saved
   into, and three columns read as three equal columns rather than three quarters of a row. */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 28px;
}

@media (min-width: 64em) {
  .footer-columns {
    width: 100%;
    justify-self: end;
  }
}

/* A heading, so the links under it are a named group to a screen reader, at the source's 11px
   semibold uppercase rather than this sheet's 800 heading rule. */
.footer-column-heading {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.footer-column-links {
  display: flex;
  flex-direction: column;
  gap: 10.5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* neutral-600, not this sheet's link blue: a footer column is a list of destinations, not prose
   with links in it, and the source sets them in muted body ink. 5.69:1 on white. */
.footer-column-links a {
  font-size: 13px;
  color: var(--ink-subtle);
  text-decoration: none;
}

.footer-column-links a:hover {
  color: var(--primary-dark);
}

/* The closing bar: the lockup, the trademark line, the employee account control. Below 640px the
   source stacks them and lifts the trademark line to the top; so does this. */
.site-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 21px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-subtle);
}

.footer-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10.5px;
  color: var(--brand-mark);
  text-decoration: none;
}

/* The site's name beside the wordmark, inside the same link as it is, behind the source's own
   rule at 10.5px on either side. 800 rather than a serif (difference 1), like `.masthead-tag`. */
.footer-brand-tag {
  padding-left: 10.5px;
  border-left: 1px solid var(--line);
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* neutral-600, not the page's neutral-500 muted ink: 11px is the source's size and this sentence
   is meant to be read, so the ink takes the stop that measures 5.69:1 rather than 4.04:1. */
.footer-note {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--ink-subtle);
}

@media (max-width: 39.99em) {
  .site-footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  /* First in the stack, and no basis of its own: in a column the row's `flex: 1 1 16rem` would be
     a 16rem TALL box, which opened a hand's width of nothing under the trademark line. */
  .footer-note {
    order: -1;
    flex: none;
  }
}

/* ── Type ─────────────────────────────────────────────────────────────────────────────────────
   `preview/type-headings.html` + `spec/_token-value-map.md` section 3. One family, and every
   heading is Extra Bold 800: that is the whole of MBNXT's heading rule (`DESIGN.md` section 3,
   "Headings are always Extra Bold"). Sizes are the ramp's exact px/line-height pairs, so nothing
   here is clamped against the viewport any more. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 800;
  /* A heading over a 70-character measure rags badly on its own; one declaration fixes it for
     every heading in the corpus at once. */
  text-wrap: balance;
}

h1 {
  font-size: 2rem;                 /* text-h1 32 / 38 / 800 */
  line-height: 2.375rem;
  margin: 0 0 var(--sp-sm);
}

h2 {
  font-size: 1.5rem;               /* text-h2 24 / 29 / 800 */
  line-height: 1.8125rem;
  margin: var(--sp-2xl) 0 var(--sp-md);
}

h3 {
  /* 20/26, not the 20/24 `preview/type-headings.html:12` shows: the line height was corrected in
     the repo and `spec/_token-value-map.md:76` carries the fix. Spec wins for a token value. */
  font-size: 1.25rem;              /* text-h3 20 / 26 / 800 */
  line-height: 1.625rem;
  margin: var(--sp-xl) 0 var(--sp-sm);
}

h4,
h5,
h6 {
  font-size: 1.125rem;             /* text-h4 18 / 22 / 800 */
  line-height: 1.375rem;
  margin: var(--sp-lg) 0 var(--sp-xs);
}

p,
li {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Older documents mark their jump targets with <a name="..."> and no href, often wrapping a
   whole heading. That is an anchor, not a link: it must not read as one. */
a:not([href]) {
  color: inherit;
  text-decoration: none;
}

/* Jump targets inside a document's own table of contents. */
:target {
  scroll-margin-top: var(--sp-lg);
}

#legal-document :target {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: -0.35rem 0 0 color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: 2px;
}

/* ── Landing index ────────────────────────────────────────────────────────────────────────────
   No table exists in the corpus for a list of documents, so the row vocabulary is
   `preview/list-group-item.html:10-21` + `spec/ui/list-group-item.md`: one bordered group at
   radius-m, rows of 14px/16px with a black/15 hairline between them, a bold 15px label, an
   optional badge, and an 18px chevron in neutral-400 on the right. */

/* ── The landing hero ─────────────────────────────────────────────────────────────────────────
   Reporting content is the one thing anybody comes here to DO, so it opens the page as a band of
   its own: the headline, one sentence of what happens next, the button, and the illustration
   beside them. Two columns from 60em, stacked below it.

   Everything here is keyed to a class this page's own JSX carries. The rules this replaces were
   written against the markup's SHAPE (`main:has(> nav[aria-label])`,
   `main > p:has(> a[href="/report/"])`), so moving one element restyled the page silently. */

.legal-hero {
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
  padding: var(--sp-xl) 0 var(--sp-2xl);
}

@media (min-width: 60em) {
  .legal-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-2xl);
  }
}

/* Display 3 (`DESIGN.md` section 3): 40/48/800, the site's front-door step. It grows one stop at
   the two-column width, where the headline has a column of its own to fill. */
.legal-hero h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (min-width: 60em) {
  .legal-hero h1 {
    font-size: 3.25rem;
  }
}

.legal-hero-text p {
  margin: var(--sp-md) 0 0;
  max-width: 34ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* The button. The masthead's pill inverted: the brand green filled, white ink, the same uppercase
   micro-type, so the two calls to action on the page read as one control in two places. */
.legal-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-lg);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  background: var(--primary-dark);
  color: var(--on-brand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.legal-hero-cta:hover {
  background: var(--primary);
  color: var(--on-brand);
}

.legal-hero-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.legal-hero-cta:hover .legal-hero-arrow {
  transform: translateX(1.75px);
}

.legal-hero-art {
  position: relative;
  min-width: 0;
}

.legal-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* The aside beside the picture. Set in this site's ONE face (the 2026-08-29 ruling left a single
   self-hosted Nunito Sans here and deleted the display and mono faces), tilted and italic so it
   reads as an annotation rather than as another sentence of the page. */
.legal-hero-note {
  margin: 0;
  /* Caveat runs small for its point size, so this is larger than the 0.9375rem it replaced and
     lands at about the same x-height on screen. No italic: the face is already slanted by hand,
     and a synthetic oblique on top of it smears. */
  font-family: "Caveat Variable", "Segoe Script", "Bradley Hand", cursive;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-muted);
  text-align: center;
}

/* Under the picture on a phone, tucked beside its lower-right corner once there is room. The
   picture gives up its last 14% so the note has somewhere to sit that is neither on top of the
   drawing nor against the frame's edge. */
@media (min-width: 60em) {
  .legal-hero-art img {
    width: 86%;
  }

  .legal-hero-note {
    position: absolute;
    right: 0;
    bottom: 18%;
    /* 13ch was measured against the italic sans this line used to be set in. Caveat's advance is
       narrower, so the same 13ch came out 134px and broke the note over three ragged lines.
       Widened until it settles on two, and balanced so the two are even. */
    max-width: 17ch;
    text-wrap: balance;
    transform: rotate(-4deg);
    text-align: left;
  }
}

/* ── The corpus band ──────────────────────────────────────────────────────────────────────────
   The documents, under a rule that separates them from the hero. */

.legal-corpus {
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--line);
}

.legal-corpus > h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.legal-corpus-lede {
  margin: var(--sp-sm) 0 var(--sp-xl);
  max-width: 60ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Each row group is a card; its market heading sits ABOVE the card rather than inside it, because
   a list group has no header slot in the corpus and inventing one is how a component drifts. */
.legal-index section {
  margin-bottom: var(--sp-xl);
}

.legal-index h3 {
  margin: 0 0 var(--sp-sm);
  font-size: 1.125rem;             /* text-h4 18 / 22 / 800 */
  line-height: 1.375rem;
}

.legal-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--surface);
  overflow: hidden;
}

.legal-index li + li {
  border-top: 1px solid var(--line);
}

/* The link wraps BOTH the title and the status badge, so the whole visible row is one click
   target: a `display:flex` anchor is a block-level box spanning the row, and browsers hit-test an
   anchor's whole box, gap included, not only where its children paint. */
.legal-index li a {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 0.875rem var(--sp-md);  /* py-3.5 px-4, preview/list-group-item.html:11 */
  color: var(--ink);
  text-decoration: none;
}

.legal-index li a:hover {
  background: var(--paper-deep);
}

/* The chevron. Drawn as a mask off the preview's own path so the row needs no extra markup, and
   so its colour is a token like every other glyph on this site.

   Every rule in this block is scoped to the landing nav's own `.legal-index` class, never to
   `nav[aria-label]` and never to `main > nav[aria-label]`. Three navs on this site carry a label:
   this one, the breadcrumb, and the masthead employee rail, and `/notices` and `/legal-documents`
   render their breadcrumb INSIDE `<main>`. Both looser selectors therefore reach the breadcrumb
   and paint list-group hairlines and chevrons into it, which is exactly what they did. */
.legal-index li a::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 18px;
  height: 18px;
  background-color: #8a8e98;       /* MBNXT neutral-400, preview/list-group-item.html:20 */
  -webkit-mask-image: var(--chevron);
  mask-image: var(--chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The label wrapper is what flexes (`preview/list-group-item.html:15`, `.body { flex: 1 }`), so
   the badge and the chevron are pushed to the row's trailing edge without either of them carrying
   an auto margin that would fight the other for the free space. */
.legal-index-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;            /* 15 / 700, preview/list-group-item.html:16 */
  font-weight: 700;
}

/* Below this width the longer titles no longer fit beside the chevron, and half the rows would
   wrap while the other half did not. Every row stacks instead, so the list keeps one rhythm. */
@media (max-width: 34em) {
  .legal-index li a {
    flex-wrap: wrap;
  }

  .legal-index li a::after {
    margin-left: auto;
  }
}


/* The mark on a document row: it sits before the title, so the row reads as a document rather
   than as a link with a chevron. Neutral, not brand green: a list of twelve rows painted green
   is a list nobody can scan. */
.legal-index-glyph {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--primary);
}