@charset "UTF-8";

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: css/tokens.css
   ========================================================================== */
/* ==========================================================================
   FORTUNE AIRLINES CASINO — tokens.css  (the skin)
   Single source of truth for palette, type, spacing, radii, shadow, motion
   and layout tokens. Re-skin the entire site by editing the values here,
   then rebuild (node scratchpad/build.js). Kept separate for skinnability.
   ========================================================================== */

:root {

  /* --- Palette (the design spec, from the client brand-guide screenshot) ---------
     Rules: never #000, never #FFF. Gold = borders/ornament/headings/CTA fill,
     never body copy. Gold CTA fill takes navy text. Burgundy max 2x per page.
     Cyan is an accent only (progress, LIVE dots, focus ring) — never a bg. */
  --fa-bg:            #060F1F;  /* page backdrop, darkest                    */
  --fa-bg-2:          #0B123B;  /* midnight blue — section base, CTA text    */
  --fa-panel:         #0E1A33;  /* card / panel surface                      */
  --fa-panel-2:       #142244;  /* raised panel, table stripe                */
  --fa-graphite:      #1C2541;  /* matte graphite: inputs, inactive, tiles   */
  --fa-line:          #24345C;  /* hairline divider on dark                  */
  --fa-gold:          #D4AF37;  /* champagne gold — primary accent           */
  --fa-gold-hi:       #F0D584;  /* gold highlight / bevel top                */
  --fa-gold-dim:      #A8842A;  /* gold shadow / bevel bottom                */
  --fa-ivory:         #F5EBD4;  /* warm ivory — primary text                 */
  --fa-ivory-dim:     #C9BFA6;  /* secondary text                            */
  --fa-muted:         #8A93A8;  /* tertiary text, labels                     */
  --fa-teal:          #0B3D46;  /* deep aviation teal (art tie-in)           */
  --fa-cyan:          #00B4D8;  /* aero-ice accent: progress, live, focus    */
  --fa-burgundy:      #A7472D;  /* HOT badges, urgent promos ONLY            */
  --fa-green:         #2E9E6B;  /* success, "no wagering", online dot        */

  /* Support shades derived from the palette (not new hues) */
  --fa-gold-deep:     #8A6E1F;  /* metallic button border (the design spec recipe)   */
  --fa-gold-mid:      #B8912F;  /* metallic gradient trough                  */
  --fa-gold-lo:       #E3C25E;  /* metallic gradient foot                    */
  --fa-gold-edge:     #C49A45;  /* teal-button gold border (the design spec)         */
  --fa-burgundy-hi:   #C25A3C;  /* burgundy bevel top                        */
  --fa-teal-hi:       #12545F;  /* teal hover                                */
  --fa-paper:         #F1E7D0;  /* boarding-pass ivory paper (the design specA)      */
  --fa-paper-ink:     #27383B;  /* text on the paper ticket                  */
  --fa-silver:        #C6CBD6;  /* rank 2 chip                               */
  --fa-bronze:        #B0763F;  /* rank 3 chip                               */

  /* --- Gold alpha ramp ---------------------------------------------------
     Every gold hairline on the page comes from here, so the whole build
     shifts together if the client re-tunes the accent strength. */
  --fa-gold-a08: rgba(212, 175, 55, .08);
  --fa-gold-a12: rgba(212, 175, 55, .12);
  --fa-gold-a22: rgba(212, 175, 55, .22);  /* panel border   — the design spec */
  --fa-gold-a30: rgba(212, 175, 55, .30);  /* card border    — the design spec */
  --fa-gold-a35: rgba(212, 175, 55, .35);  /* outer frame    — the design spec */
  --fa-gold-a45: rgba(212, 175, 55, .45);
  --fa-gold-a60: rgba(212, 175, 55, .60);
  --fa-hi-a06:   rgba(240, 213, 132, .06); /* inner bevel highlight    */

  /* Scrim stops — the navy the overlays fade to (matches --fa-bg) */
  --fa-scrim-1: rgba(6, 15, 31, .94);
  --fa-scrim-2: rgba(6, 15, 31, .78);
  --fa-scrim-3: rgba(6, 15, 31, .55);
  --fa-scrim-4: rgba(6, 15, 31, .15);

  /* --- Font stacks (the design spec) --------------------------------------------
     Two families only, no script face. Loaded from Google Fonts with
     display=swap + preconnect in <head>. Local fallbacks per the design spec. */
  --fa-font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --fa-font-ui:      "Montserrat", system-ui, -apple-system, Arial, sans-serif;

  /* --- Letter-spacing scale (Cinzel wants .06em-.12em, labels .14em) ----- */
  --fa-ls-tight:  .04em;
  --fa-ls:        .06em;   /* display default */
  --fa-ls-wide:   .10em;   /* nav, buttons    */
  --fa-ls-wider:  .12em;   /* provider lines, node labels */
  --fa-ls-label:  .14em;   /* small UI labels, badges     */
  --fa-ls-widest: .18em;   /* hero eyebrow    */

  /* --- Fluid type scale --------------------------------------------------
     clamp(min, fluid, max). Mins are the 375px reading, maxes the 1440px. */
  --fa-fs-hero:    clamp(40px, 5.2vw, 76px);  /*  H1 "CITIES OF / LUCK"   */
  --fa-fs-display: clamp(30px, 3.4vw, 46px);  /*  "150%",  "EUR75,000"  */
  --fa-fs-stat:    clamp(24px, 2.4vw, 34px);  /* B miles,  balance      */
  --fa-fs-h2:      clamp(19px, 1.5vw, 24px);  /* section titles             */
  --fa-fs-h3:      clamp(16px, 1.2vw, 20px);  /* panel sub-heads            */
  --fa-fs-h4:      clamp(13px, 1vw, 15px);    /* card titles                */
  --fa-fs-lead:    clamp(14px, 1.05vw, 15px); /* hero paragraph             */
  --fa-fs-body:    14px;
  --fa-fs-sm:      13px;
  --fa-fs-xs:      11.5px;
  --fa-fs-label:   10.5px;                    /* small UI label, .14em      */
  --fa-fs-micro:   9px;                       /* luggage-stamp badges       */

  --fa-lh-tight:  .95;   /* hero H1 (the design spec) */
  --fa-lh-head:   1.15;
  --fa-lh-body:   1.6;

  /* --- Spacing scale (4px base). The design is DENSE — the design spec forbids
         airy whitespace. Prefer the low end of this scale. ---------------- */
  --fa-s-1:  4px;
  --fa-s-2:  8px;
  --fa-s-3: 12px;
  --fa-s-4: 16px;
  --fa-s-5: 20px;
  --fa-s-6: 24px;
  --fa-s-7: 32px;
  --fa-s-8: 40px;
  --fa-s-9: 48px;

  --fa-gap-sec:   16px;                        /* between sections: 14-20px */
  --fa-gap-grid:  14px;                        /* between cards in a grid   */
  --fa-pad-panel: clamp(14px, 1.5vw, 22px);    /* inside a .fa-panel        */
  --fa-pad-frame: clamp(12px, 1.6vw, 20px);    /* frame inner gutter        */

  /* --- Radii. the design spec: nothing more rounded than 12px. ------------------- */
  --fa-r-xs:     4px;
  --fa-r-sm:     6px;
  --fa-r:        8px;    /* card default   */
  --fa-r-lg:    10px;    /* panel / frame  */
  --fa-r-xl:    12px;    /* hard ceiling   */
  --fa-r-pill: 999px;
  --fa-r-circle: 50%;

  /* --- Shadows ---------------------------------------------------------- */
  --fa-sh-sm:    0 2px 8px rgba(0, 0, 0, .28);
  --fa-sh:       0 4px 14px rgba(0, 0, 0, .35);   /* the design spec button drop */
  --fa-sh-lg:    0 10px 30px rgba(0, 0, 0, .45);
  --fa-sh-panel: inset 0 1px 0 var(--fa-hi-a06), 0 6px 20px rgba(0, 0, 0, .32);
  --fa-sh-btn:   inset 0 1px 0 rgba(255, 255, 255, .55),
                 inset 0 -1px 0 rgba(0, 0, 0, .25);
  --fa-glow-gold: 0 0 0 3px rgba(212, 175, 55, .16), 0 0 18px rgba(212, 175, 55, .34);
  --fa-glow-cyan: 0 0 12px rgba(0, 180, 216, .45);

  /* --- Motion ------------------------------------------------------------
     All neutralised under prefers-reduced-motion (section 23). */
  --fa-t-fast: 120ms;
  --fa-t:      200ms;   /* the design spec hover      */
  --fa-t-slow: 220ms;   /* the design spec card hover */
  --fa-ease:     cubic-bezier(.4, 0, .2, 1);
  --fa-ease-out: cubic-bezier(.17, .67, .16, 1);  /* the design spec wheel spin */
  --fa-spin-dur: 4200ms;                          /* the design spec            */
  --fa-lift:    -4px;   /* card hover lift */
  --fa-lift-btn: -3px;  /* button hover lift */

  /* --- Layout ------------------------------------------------------------ */
  --fa-maxw:      1440px;   /* content column, centred (the design spec) */
  --fa-header-h:  68px;     /* sticky header (the design spec)           */
  --fa-ring-w:    2px;      /* focus ring width  (the design spec)      */
  --fa-ring-off:  2px;      /* focus ring offset (the design spec)      */
  --fa-notch:     10px;     /* Art-Deco corner cut (the design spec)     */
  --fa-snap-card: 74vw;     /* mobile snap-rail card width ()  */

  /* Button text that must stay CONSTANT across themes (the gold CTA is always
     bright; teal/burgundy CTAs stay dark accents) — intentionally NOT
     overridden in the light block below. */
  --fa-btn-ink:       #0B123B;  /* navy text on the gold CTA          */
  --fa-btn-on-accent: #F5EBD4;  /* ivory text on teal / burgundy CTAs */

  color-scheme: dark;
}

/* ==========================================================================
   LIGHT THEME — champagne-on-cream. Applied when the footer theme toggle sets
   <html data-theme="light"> (persisted). Dark (the :root above) stays the brand
   default. Overrides ONLY surface / text / accent colours; spacing, type,
   radii, shadow, scrim and the metallic-button golds are shared, so the gold
   CTA stays bright and premium on both themes.
   ========================================================================== */
:root[data-theme="light"] {
  /* surfaces: midnight navy -> warm champagne cream, with real hierarchy so
     crisp near-white cards lift off the deeper cream page */
  --fa-bg:       #ECE3D0;   /* page backdrop — a clear warm cream          */
  --fa-bg-2:     #E2D7BE;   /* deeper cream: section bases, badges, drawer */
  --fa-panel:    #FEFDFA;   /* crisp near-white card/panel surface         */
  --fa-panel-2:  #F6F0E2;   /* raised panel / table stripe                */
  --fa-graphite: #EBE2CE;   /* matte inputs / inactive tiles              */
  --fa-line:     #CFC09A;   /* visible warm hairline                      */

  /* gold retuned for contrast on cream (headings / accents / borders) */
  --fa-gold:     #8A6E1F;
  --fa-gold-hi:  #A8842A;
  --fa-gold-dim: #6E571A;

  /* text: warm ivory -> navy ink */
  --fa-ivory:     #1B2440;
  --fa-ivory-dim: #454E69;
  --fa-muted:     #5E677F;

  /* accents deepened so they read on a light background */
  --fa-cyan:     #0A7C9C;
  --fa-burgundy: #963C24;
  --fa-green:    #1D7449;

  --fa-hi-a06:   rgba(90, 70, 15, .05);

  /* soft WARM shadows/glows — the dark theme's near-black drops read heavy and
     dirty on cream. This retunes every component that uses a shadow token. */
  --fa-sh-sm:     0 1px 4px rgba(60, 45, 15, .10);
  --fa-sh:        0 3px 10px rgba(60, 45, 15, .12);
  --fa-sh-lg:     0 10px 28px rgba(60, 45, 15, .14);
  --fa-sh-panel:  0 1px 2px rgba(60, 45, 15, .05), 0 12px 30px rgba(60, 45, 15, .07);
  --fa-sh-btn:    inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .08);
  --fa-glow-gold: 0 0 0 3px rgba(212, 175, 55, .14), 0 0 16px rgba(212, 175, 55, .22);
  --fa-glow-cyan: 0 0 12px rgba(10, 124, 156, .32);

  color-scheme: light;
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: css/00-base.css
   ========================================================================== */
/* ==========================================================================
   FORTUNE AIRLINES CASINO — 00-base.css
   Dark design system: tokens, reset, page frame, typography, primitives.

   Implements the design spec (theme) and  (engineering rules).
   Theme: dark midnight-navy + champagne gold. Class prefix: fa-

   LOAD ORDER: this file first, then section stylesheets, then main.css.
   Section builders compose ONLY the primitives below plus their own
   scoped `.fa-<section>__*` rules. Do not redefine a primitive.

   CONTENTS
     1.  Design tokens (:root)
     2.  Modern reset
     3.  Focus ring, selection, scrollbar
     4.  Page frame (1440 column + gold outer frame)
     5.  Typography scale
     6.  Utilities (sr-only, icon, media, tnum, visibility)
     7.  Primitive: .fa-panel
     8.  Primitive: .fa-card
     9.  Primitive: .fa-sec        (numbered section header)
     10. Primitive: .fa-btn        (metallic / notched CTA)
     11. Primitive: .fa-link
     12. Primitive: .fa-badge      (luggage stamp)
     13. Primitive: .fa-chip
     14. Primitive: .fa-grid       (responsive grid + snap collapse)
     15. Primitive: .fa-rail       (snap carousel + arrows)
     16. Primitive: .fa-progress
     17. Primitive: .fa-deco-rule
     18. Primitive: .fa-stat
     19. Primitive: .fa-medallion
     20. Primitive: .fa-tabs
     21. Primitive: .fa-scrim
     22. Breakpoints 1280 / 1024 / 768 / 375
     23. prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

/* Design tokens now live in css/tokens.css — edit that one file to re-skin,
   then rebuild. build.js concatenates it ahead of this sheet. */


/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors must clear the 68px sticky header. */
  scroll-padding-top: calc(var(--fa-header-h) + var(--fa-s-3));
}

body {
  min-height: 100vh;
  background: var(--fa-bg);
  color: var(--fa-ivory);
  font-family: var(--fa-font-ui);
  font-size: var(--fa-fs-body);
  font-weight: 400;
  line-height: var(--fa-lh-body);
  /* `clip` not `hidden`: guards the design spec's "no horizontal page scroll"
     without breaking the sticky header. Rails still scroll internally. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Media defaults: block-level, never overflow, never distort. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

/* Form controls inherit the type system instead of the UA's. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

/* Long words (game titles, city names) must not blow out a card. */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--fa-lh-head);
  font-size: inherit;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

a { color: inherit; text-decoration: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* `hidden` must beat any display we set on tab panels / drawers. */
[hidden] { display: none !important; }

/* <details>-based disclosures ( Read more,  mobile footer). */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Decorative <hr> never uses the UA border. */
hr { border: 0; height: 1px; background: var(--fa-line); }

address { font-style: normal; }


/* ==========================================================================
   3. FOCUS RING · SELECTION · SCROLLBAR
   ========================================================================== */

/* the design spec: visible focus-visible ring, 2px cyan, 2px offset, on EVERY
   interactive element. Specificity (0,1,0) — primitives below never
   override `outline`, so this always wins.
   NOTE: clip-path clips outlines, which is why .fa-btn draws its notched
   metal on a ::before layer and keeps its own box unclipped. */
:focus-visible {
  outline: var(--fa-ring-w) solid var(--fa-cyan);
  outline-offset: var(--fa-ring-off);
  border-radius: var(--fa-r-xs);
}

/* Kill the UA ring only where :focus-visible is supported and has replaced it. */
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--fa-gold);
  color: var(--fa-bg-2);
  text-shadow: none;
}

/* Thin brand scrollbar (the design spec — gold on navy, never grey OS default). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--fa-gold-dim) var(--fa-bg-2);
}

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track {
  background: var(--fa-bg-2);
  border-radius: var(--fa-r-pill);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fa-gold-dim), #6E561B);
  border: 2px solid var(--fa-bg-2);
  border-radius: var(--fa-r-pill);
}

::-webkit-scrollbar-thumb:hover { background: var(--fa-gold); }

::-webkit-scrollbar-corner { background: var(--fa-bg-2); }


/* ==========================================================================
   4. PAGE FRAME
   the design spec: content column max 1440px, centred, page background --fa-bg.
   The site sits in a thin gold outer frame with a soft inner highlight,
   rounded 10px at the OUTERMOST container only.
   ========================================================================== */

/* .fa-frame — the single outermost container. One per page, wraps header,
   main and footer. Owns the 1440px cap, the gold hairline and the radius. */
.fa-frame {
  position: relative;
  max-width: var(--fa-maxw);
  margin-inline: auto;
  background: var(--fa-bg);
  border: 1px solid var(--fa-gold-a35);
  border-radius: var(--fa-r-lg);
  /* soft inner highlight + seat the frame on the backdrop */
  box-shadow: inset 0 0 0 1px var(--fa-hi-a06), 0 0 40px rgba(0, 0, 0, .55);
  /* Clip the sticky header's blur to the rounded corners. */
  overflow: clip;
}

/* .fa-main — the vertical stack of sections. Owns the 14-20px section
   rhythm (the design spec) so no section needs its own outer margin. */
.fa-main {
  display: flex;
  flex-direction: column;
  gap: var(--fa-gap-sec);
  padding: var(--fa-gap-sec) var(--fa-pad-frame);
}

/* .fa-main--flush — for a full-bleed first child (the hero): kills the top
   padding so the hero photograph touches the frame edge. */
.fa-main--flush { padding-top: 0; }

/* ...but a sub-page whose first child is a bordered .fa-panel (not the homepage's
   full-bleed hero) would sit cramped against the header/compliance strip — give
   that first panel a top gap. The homepage hero is .fa-bleed, so it stays flush. */
.fa-main--flush > .fa-panel:first-child { margin-top: var(--fa-s-6); }

/* .fa-wrap — inner gutter for content that sits inside a full-bleed
   section (e.g. hero copy against the frame edge). */
.fa-wrap {
  width: 100%;
  padding-inline: var(--fa-pad-frame);
}

/* .fa-bleed — cancels .fa-main's side padding for one section that must
   run edge to edge inside the frame (hero photograph). */
.fa-bleed {
  margin-inline: calc(var(--fa-pad-frame) * -1);
}


/* ==========================================================================
   5. TYPOGRAPHY SCALE
   Display = Cinzel, uppercase, letter-spaced. UI = Montserrat.
   Gold is for headings and ornament — never body copy (the design spec).
   ========================================================================== */

/* .fa-display — hero-scale Cinzel.  H1 only. */
.fa-display {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-hero);
  line-height: var(--fa-lh-tight);
  letter-spacing: var(--fa-ls);
  text-transform: uppercase;
  color: var(--fa-gold);
}

/* .fa-h1 / .fa-h2 / .fa-h3 / .fa-h4 — Cinzel heading ramp.
   Apply to the semantic tag; heading LEVEL is chosen by the section, the
   class only sets size, so a visual h2 can be an <h3> where nesting needs it. */
.fa-h1,
.fa-h2,
.fa-h3,
.fa-h4 {
  font-family: var(--fa-font-display);
  line-height: var(--fa-lh-head);
  text-transform: uppercase;
  letter-spacing: var(--fa-ls);
  color: var(--fa-gold);
}

.fa-h1 { font-weight: 700; font-size: var(--fa-fs-display); }
.fa-h2 { font-weight: 600; font-size: var(--fa-fs-h2); }
.fa-h3 { font-weight: 600; font-size: var(--fa-fs-h3); letter-spacing: var(--fa-ls-wide); }
.fa-h4 { font-weight: 600; font-size: var(--fa-fs-h4); letter-spacing: var(--fa-ls-wide); color: var(--fa-ivory); }

/* .fa-eyebrow — Cinzel kicker above a display line.  "FLY TO". */
.fa-eyebrow {
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: var(--fa-ls-widest);
  text-transform: uppercase;
  color: var(--fa-ivory);
}

/* .fa-label — the small UI label. the design spec: Montserrat 600, 10-11px,
   uppercase, .14em, --fa-muted. Used above every value in the build. */
.fa-label {
  display: block;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-muted);
}

/* .fa-label--gold / --ivory — same metrics, raised emphasis. */
.fa-label--gold  { color: var(--fa-gold); }
.fa-label--ivory { color: var(--fa-ivory-dim); }

/* .fa-lead — the intro paragraph.  hero copy. */
.fa-lead {
  font-size: var(--fa-fs-lead);
  line-height: 1.55;
  color: var(--fa-ivory-dim);
}

/* .fa-body / .fa-sm / .fa-xs — Montserrat running text ramp. */
.fa-body { font-size: var(--fa-fs-body); line-height: var(--fa-lh-body); color: var(--fa-ivory-dim); }
.fa-sm   { font-size: var(--fa-fs-sm);   line-height: 1.55;              color: var(--fa-ivory-dim); }
.fa-xs   { font-size: var(--fa-fs-xs);   line-height: 1.5;               color: var(--fa-muted); }

/* .fa-fine — legal / small print.  illustrative-outcome line,  terms. */
.fa-fine {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--fa-muted);
}

/* Colour utilities — text only. Never paint body copy gold. */
.fa-t-gold     { color: var(--fa-gold); }
.fa-t-gold-hi  { color: var(--fa-gold-hi); }
.fa-t-ivory    { color: var(--fa-ivory); }
.fa-t-dim      { color: var(--fa-ivory-dim); }
.fa-t-muted    { color: var(--fa-muted); }
.fa-t-cyan     { color: var(--fa-cyan); }
.fa-t-green    { color: var(--fa-green); }
.fa-t-center   { text-align: center; }
.fa-t-right    { text-align: right; }

/* .fa-clamp — truncate to N lines.  review bodies clamp to 6. */
.fa-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--fa-lines, 3);
  line-clamp: var(--fa-lines, 3);
  overflow: hidden;
}


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

/* .fa-sr-only — visually hidden, still announced. Use for the accessible
   name of icon-only controls and for skip links. */
.fa-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .fa-skip — the skip-to-content link, first focusable element on the page.
   Off-screen until focused, then it lands over the sticky header (which is
   z-index 50 in parts/01-header.css) so it is never covered. Uses the gold
   metallic palette rather than .fa-btn: .fa-btn clip-paths its notched
   corners, and a clip-path would crop the :focus-visible outline that is the
   only thing telling a keyboard user the link is there. */
.fa-skip {
  position: absolute;
  top: 0;
  left: var(--fa-s-3);
  z-index: 100;
  transform: translateY(-120%);
  display: inline-block;
  padding: 10px 18px;
  background: var(--fa-gold);
  color: var(--fa-bg-2);
  font: 600 var(--fa-fs-sm) / 1 var(--fa-font-ui);
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fa-gold-dim);
  border-radius: 0 0 var(--fa-r-xs) var(--fa-r-xs);
  transition: transform var(--fa-t-fast) var(--fa-ease);
}

.fa-skip:focus,
.fa-skip:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fa-skip { transition: none; }
}

/* .fa-icon — every inline SVG from the <symbol> sprite. Inherits colour via
   currentColor, so an icon recolours with its parent. the design spec: no emoji. */
.fa-icon {
  display: inline-block;
  width: var(--fa-icon-size, 1em);
  height: var(--fa-icon-size, 1em);
  flex: none;
  fill: currentColor;
  stroke: none;
  vertical-align: middle;
  pointer-events: none;
}

.fa-icon--sm { --fa-icon-size: 14px; }
.fa-icon--md { --fa-icon-size: 20px; }
.fa-icon--lg { --fa-icon-size: 28px; }
.fa-icon--xl { --fa-icon-size: 40px; }

/* .fa-media — fixed-ratio image box. the design spec demands explicit width/height
   on every <img> to prevent CLS; this reserves the box as well so a slow or
   missing image never shifts the grid. */
.fa-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--fa-ratio, 16 / 9);
  background: var(--fa-graphite);
  border-radius: inherit;
}

.fa-media > img,
.fa-media > picture > img,
.fa-media > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fa-focal, center);
}

.fa-media--16x9 { --fa-ratio: 16 / 9; }
.fa-media--4x3  { --fa-ratio: 4 / 3; }
.fa-media--3x4  { --fa-ratio: 3 / 4; }
.fa-media--1x1  { --fa-ratio: 1 / 1; }

/* .fa-tnum — tabular figures. MANDATORY on every live counter ( countdown,
    ENDS IN) so ticking digits cannot shift layout. */
.fa-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* .fa-stack — vertical flow with a token gap. Saves a scoped rule in most
   panels. Set --fa-stack-gap to override. */
.fa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fa-stack-gap, var(--fa-s-3));
}

/* .fa-row — horizontal flow, wraps by default. */
.fa-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fa-row-gap, var(--fa-s-3));
}

.fa-row--nowrap  { flex-wrap: nowrap; }
.fa-row--between { justify-content: space-between; }
.fa-row--center  { justify-content: center; }

/* .fa-dot — status dot. --live pulses cyan ( LIVE), --on is green. */
.fa-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: var(--fa-r-circle);
  background: var(--fa-muted);
}

.fa-dot--live { background: var(--fa-cyan); box-shadow: var(--fa-glow-cyan); }
.fa-dot--on   { background: var(--fa-green); }


/* ==========================================================================
   7. PRIMITIVE — .fa-panel
   The section container. the design spec: "Every section is a bordered panel."
   background --fa-panel, 1px gold @22%, radius 10px.
   ========================================================================== */

.fa-panel {
  position: relative;
  background: var(--fa-panel);
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r-lg);
  padding: var(--fa-pad-panel);
  box-shadow: var(--fa-sh-panel);
}

/* .fa-panel--flush — no padding. For panels whose first child is full-bleed
   art (the hero, the route map plate). */
.fa-panel--flush { padding: 0; overflow: hidden; }

/* .fa-panel--tight — half padding, for dense strips. */
.fa-panel--tight { padding: var(--fa-s-3); }

/* .fa-panel--raised — the lighter surface, for a panel sitting ON a panel. */
.fa-panel--raised { background: var(--fa-panel-2); }

/* .fa-panel--inset — a sub-panel nested inside a section panel.
    "YOUR PROGRESS",  "YOUR STATUS". Graphite, softer border, no shadow. */
.fa-panel--inset {
  background: var(--fa-graphite);
  border-color: var(--fa-gold-a12);
  border-radius: var(--fa-r);
  box-shadow: none;
}

/* .fa-panel--deco — adds the double-border treatment from the design spec: a second
   gold hairline inset 4px. Used by the hero bonus panel and the wheel face. */
.fa-panel--deco::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--fa-gold-a30);
  border-radius: calc(var(--fa-r-lg) - 3px);
  pointer-events: none;
}

/* .fa-panel--glass — translucent + blur, for panels over photography
   (hero bonus panel, sticky header). */
.fa-panel--glass {
  background: rgba(11, 18, 59, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* .fa-panel--warm — the warm-dark footer surface (the design spec). */
.fa-panel--warm {
  background: linear-gradient(180deg, #0F1730 0%, #0A1124 100%);
}


/* ==========================================================================
   8. PRIMITIVE — .fa-card
   The repeating tile: destinations, games, promos, news, crew, reviews.
   the design spec: 1px gold border 30% -> 100% on hover; lift 4px; 220ms.
   ========================================================================== */

.fa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;                       /* lets cards shrink inside a grid */
  background: var(--fa-panel-2);
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r);
  overflow: hidden;
  transition:
    transform var(--fa-t-slow) var(--fa-ease),
    border-color var(--fa-t-slow) var(--fa-ease),
    box-shadow var(--fa-t-slow) var(--fa-ease);
}

/* Hover/focus-within so keyboard users get the same affordance. */
.fa-card:hover,
.fa-card:focus-within {
  transform: translateY(var(--fa-lift));
  border-color: var(--fa-gold);
  box-shadow: var(--fa-sh-lg);
}

/* .fa-card__body — padded content well beneath the media. */
.fa-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-2);
  padding: var(--fa-s-3);
  flex: 1 1 auto;                     /* equal-height cards in a grid row */
}

/* .fa-card__foot — pinned bottom row, for the always-present PLAY NOW CTA. */
.fa-card__foot {
  margin-top: auto;
  padding-top: var(--fa-s-2);
}

/* .fa-card__over — absolutely positioned layer over the media, for the
   hover PLAY NOW overlay () and pinned badges. Not a hover-only
   affordance on its own: the real button stays in .fa-card__foot. */
.fa-card__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--fa-t-slow) var(--fa-ease);
  pointer-events: none;
}

.fa-card:hover .fa-card__over,
.fa-card:focus-within .fa-card__over { opacity: 1; }

/* .fa-card--graphite — matte tile (reward tiles, countdown tiles, crew). */
.fa-card--graphite { background: var(--fa-graphite); }

/* .fa-card--glow — subtle radial gold glow behind a character cutout (). */
.fa-card--glow {
  background:
    radial-gradient(120% 80% at 50% 100%, var(--fa-gold-a12) 0%, transparent 62%),
    var(--fa-graphite);
}

/* .fa-card--art — the card background IS artwork ( promo banners).
   Pair with a .fa-scrim child; the design spec requires the navy scrim for 4.5:1. */
.fa-card--art {
  background-color: var(--fa-panel);
  background-size: cover;
  background-position: var(--fa-focal, center);
  background-repeat: no-repeat;
  min-height: 148px;
  justify-content: flex-end;
}

/* .fa-card--flat — opts out of the hover lift. For static/informational
   cards (trust badges, boarding pass) that are not links. */
.fa-card--flat:hover,
.fa-card--flat:focus-within {
  transform: none;
  border-color: var(--fa-gold-a30);
  box-shadow: none;
}

/* .fa-card--paper — the ONE deliberately light surface: the ivory paper
   boarding pass of the design specA. Dark text on ivory; never gold text here. */
.fa-card--paper {
  background: var(--fa-paper);
  color: var(--fa-paper-ink);
  border-color: rgba(39, 56, 59, .22);
}

.fa-card--paper .fa-label { color: rgba(39, 56, 59, .62); }

/* .fa-card__link — the stretched hit area. Put it inside a .fa-card and the
   whole card becomes clickable while the visible CTA keeps its own label. */
.fa-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ==========================================================================
   9. PRIMITIVE — .fa-sec
   The numbered section header from the design spec:

     ( 4 )  GLOBAL ROUTE MAP ─────────────────  VIEW ALL DESTINATIONS →
            Explore cities, unlock rewards

   Flat markup, four grid cells on row 1; the subtitle spans row 2 under the
   title so it aligns with the title, not the circled number.
   ========================================================================== */

.fa-sec {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  column-gap: var(--fa-s-3);
  row-gap: 2px;
  margin-bottom: var(--fa-s-4);
}

/* .fa-sec__num — a REAL element (the design spec), 24px, 1px gold ring, Cinzel 600.
   Numbers run 1..N in DOM order. aria-hidden: it is ornament, not content. */
.fa-sec__num {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--fa-gold);
  border-radius: var(--fa-r-circle);
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--fa-gold);
}

/* .fa-sec__icon — occupies the same cell as __num, for the sections that
   lead with a pictogram instead of a number ( aircraft icon). */
.fa-sec__icon {
  grid-area: 1 / 1;
  --fa-icon-size: 22px;
  color: var(--fa-gold);
}

.fa-sec__title {
  grid-area: 1 / 2;
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: var(--fa-fs-h2);
  line-height: 1.1;
  letter-spacing: var(--fa-ls);
  text-transform: uppercase;
  color: var(--fa-gold);
}

/* .fa-sec__rule — the thin gold rule that fills the remaining width.
   Decorative: keep it aria-hidden. */
.fa-sec__rule {
  grid-area: 1 / 3;
  height: 1px;
  min-width: 20px;
  background: linear-gradient(90deg, var(--fa-gold-a60), var(--fa-gold-a12));
}

/* .fa-sec__link — the optional right-hand "VIEW ALL … →" link. */
.fa-sec__link {
  grid-area: 1 / 4;
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-1);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fa-gold);
  transition: color var(--fa-t) var(--fa-ease);
}

.fa-sec__link .fa-icon { --fa-icon-size: 12px; transition: transform var(--fa-t) var(--fa-ease); }
.fa-sec__link:hover { color: var(--fa-gold-hi); }
.fa-sec__link:hover .fa-icon { transform: translateX(3px); }

/* .fa-sec__sub — Montserrat subtitle, muted, aligned under the title. */
.fa-sec__sub {
  grid-area: 2 / 2 / auto / span 3;
  font-size: var(--fa-fs-xs);
  line-height: 1.4;
  color: var(--fa-muted);
}

/* .fa-sec--plain — no circled number: title starts at column 1. */
.fa-sec--plain { grid-template-columns: auto 1fr auto; }
.fa-sec--plain .fa-sec__title { grid-area: 1 / 1; }
.fa-sec--plain .fa-sec__rule  { grid-area: 1 / 2; }
.fa-sec--plain .fa-sec__link  { grid-area: 1 / 3; }
.fa-sec--plain .fa-sec__sub   { grid-area: 2 / 1 / auto / span 3; }


/* ==========================================================================
   10. PRIMITIVE — .fa-btn
   Every CTA on the page. the design spec gold metallic recipe, reproduced in CSS —
   the baked-text button PNGs are barred by the design spec

   STRUCTURE NOTE (important): the notched Art-Deco clip-path lives on a
   ::before layer, not on the button box. clip-path would otherwise clip the
   :focus-visible outline, breaking the design spec The outer drop shadow is a
   filter on the button so it follows the notched silhouette (box-shadow on
   the clipped layer would be cut away).
   ========================================================================== */

.fa-btn {
  position: relative;
  z-index: 0;                                  /* contains the pseudo layers */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-2);
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--fa-ivory);
  background: transparent;
  border: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35));
  transition:
    transform var(--fa-t) var(--fa-ease),
    filter var(--fa-t) var(--fa-ease),
    color var(--fa-t) var(--fa-ease);
  -webkit-tap-highlight-color: transparent;
}

/* The metal: fill + bevel + notched corners. */
.fa-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--fa-btn-bg, var(--fa-graphite));
  border: 1px solid var(--fa-btn-bd, var(--fa-line));
  box-shadow: var(--fa-btn-inset, none);
  clip-path: polygon(
    var(--fa-notch) 0,
    100% 0,
    100% calc(100% - var(--fa-notch)),
    calc(100% - var(--fa-notch)) 100%,
    0 100%,
    0 var(--fa-notch)
  );
  transition:
    background var(--fa-t) var(--fa-ease),
    border-color var(--fa-t) var(--fa-ease);
}

/* The shimmer sweep. the design spec: hover only, never looping. */
.fa-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(
    var(--fa-notch) 0,
    100% 0,
    100% calc(100% - var(--fa-notch)),
    calc(100% - var(--fa-notch)) 100%,
    0 100%,
    0 var(--fa-notch)
  );
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 255, 255, .40) 50%,
    transparent 62%);
  opacity: 0;
  pointer-events: none;
}

.fa-btn .fa-icon { --fa-icon-size: 15px; }

.fa-btn:hover {
  transform: translateY(var(--fa-lift-btn));
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .48));
}

.fa-btn:active { transform: translateY(-1px); }

/* --- .fa-btn--gold — primary. the design spec recipe verbatim. Navy text always. -- */
.fa-btn--gold {
  --fa-btn-bg: linear-gradient(180deg, #F0D584 0%, #D4AF37 45%, #B8912F 55%, #E3C25E 100%);
  --fa-btn-bd: var(--fa-gold-deep);
  --fa-btn-inset: var(--fa-sh-btn);
  color: var(--fa-btn-ink);
  /* The shimmer/sheen ::after sweeps translateX(±120%). The button's clip-path
     hides it VISUALLY but not from the scroll box, so it briefly raises an
     x-scrollbar (page for the header CTA, dialog for the modal submit).
     overflow:hidden clips the scroll box too, so every gold-button effect ends
     ON the button. Does NOT clip the button's own drop-shadow glow (filter). */
  overflow: hidden;
}

.fa-btn--gold:hover {
  --fa-btn-bg: linear-gradient(180deg, #F7E3A6 0%, #E2BF46 45%, #C79E34 55%, #EFD277 100%);
}

/* Restrained one-shot shimmer, gold only. */
.fa-btn--gold:hover::after { animation: fa-shimmer 720ms var(--fa-ease) 1; }

@keyframes fa-shimmer {
  from { opacity: 0; transform: translateX(-120%); }
  35%  { opacity: 1; }
  to   { opacity: 0; transform: translateX(120%); }
}

/* --- .fa-btn--teal — secondary. the design spec: #0B3D46 / ivory / gold border. --- */
.fa-btn--teal {
  --fa-btn-bg: var(--fa-teal);
  --fa-btn-bd: var(--fa-gold-edge);
  color: var(--fa-btn-on-accent);
}

.fa-btn--teal:hover { --fa-btn-bg: var(--fa-teal-hi); --fa-btn-bd: var(--fa-gold); }

/* --- .fa-btn--ghost — the design spec LOGIN: 1px gold border, transparent, ivory. - */
.fa-btn--ghost {
  --fa-btn-bg: transparent;
  --fa-btn-bd: var(--fa-gold-a45);
  color: var(--fa-ivory);
  filter: none;                                /* no drop shadow on an outline */
}

.fa-btn--ghost:hover {
  --fa-btn-bg: var(--fa-gold-a08);
  --fa-btn-bd: var(--fa-gold);
  color: var(--fa-gold-hi);
  filter: none;
}

/* --- .fa-btn--burgundy — urgent only. the design spec allows burgundy at most 2x
       per page:  CLAIM BONUS and  HOT badge. Do not add a third. ------- */
.fa-btn--burgundy {
  --fa-btn-bg: linear-gradient(180deg, var(--fa-burgundy-hi) 0%, var(--fa-burgundy) 55%, #8E3A24 100%);
  --fa-btn-bd: #6F2C1B;
  --fa-btn-inset: inset 0 1px 0 rgba(255, 255, 255, .22);
  color: var(--fa-btn-on-accent);
}

.fa-btn--burgundy:hover { --fa-btn-bg: linear-gradient(180deg, #D06949 0%, #B85238 55%, #9C4028 100%); }

/* --- Size + width modifiers ---------------------------------------------- */

/* .fa-btn--sm — in-card CTA (PLAY NOW, CLAIM NOW). Smaller notch to match. */
.fa-btn--sm {
  --fa-notch: 7px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 11px;
  gap: var(--fa-s-1);
}

.fa-btn--sm .fa-icon { --fa-icon-size: 12px; }

/* .fa-btn--lg — hero primary. */
.fa-btn--lg {
  --fa-notch: 12px;
  min-height: 52px;
  padding: 0 30px;
  font-size: 14px;
}

/* .fa-btn--block — fills its container. */
.fa-btn--block { display: flex; width: 100%; }

/* Disabled / spent state.  turns the wheel button into "SPIN USED". */
.fa-btn:disabled,
.fa-btn[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
  filter: none;
  color: var(--fa-muted);
  --fa-btn-bg: var(--fa-graphite);
  --fa-btn-bd: var(--fa-line);
  --fa-btn-inset: none;
}

.fa-btn:disabled::after,
.fa-btn[aria-disabled="true"]::after { animation: none; opacity: 0; }


/* ==========================================================================
   11. PRIMITIVE — .fa-link
   The gold text link with a chevron: "EXPLORE DESTINATIONS ›", "READ MORE →",
   "Learn more about VIP". Distinct from .fa-sec__link, which is grid-placed.
   ========================================================================== */

.fa-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-1);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-sm);
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-gold);
  transition: color var(--fa-t) var(--fa-ease);
}

.fa-link .fa-icon { --fa-icon-size: 13px; transition: transform var(--fa-t) var(--fa-ease); }
.fa-link:hover { color: var(--fa-gold-hi); }
.fa-link:hover .fa-icon { transform: translateX(3px); }

/* .fa-link--caps — uppercase, letter-spaced variant. */
.fa-link--caps {
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
}

/* .fa-link--quiet — muted until hover. For footer columns and terms links. */
.fa-link--quiet { color: var(--fa-ivory-dim); font-weight: 400; }
.fa-link--quiet:hover { color: var(--fa-gold); }

/* .fa-link--underline — grows a 1px gold underline from the centre, 200ms.
   the design spec header nav behaviour. */
.fa-link--underline { position: relative; }

.fa-link--underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--fa-gold);
  transform: scaleX(0);
  transition: transform var(--fa-t) var(--fa-ease);
}

.fa-link--underline:hover::after,
.fa-link--underline[aria-current]::after { transform: scaleX(1); }


/* ==========================================================================
   12. PRIMITIVE — .fa-badge
   The luggage-stamp badge. the design spec: rotated 4deg, 1px border, uppercase
   9px .14em. NEW is green, HOT is burgundy, VIP is gold.
   The 4deg rotation is static ornament, not motion — it survives
   prefers-reduced-motion.
   ========================================================================== */

.fa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  font-family: var(--fa-font-ui);
  font-weight: 700;
  font-size: var(--fa-fs-micro);
  line-height: 1;
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--fa-r-xs);
  background: var(--fa-bg-2);
  transform: rotate(-4deg);
  /* the soft double edge that sells the rubber-stamp look */
  box-shadow: 0 0 0 1px rgba(6, 15, 31, .55), var(--fa-sh-sm);
}

.fa-badge--new { color: var(--fa-green); }
.fa-badge--hot { color: var(--fa-burgundy-hi); }
.fa-badge--vip { color: var(--fa-gold); }

/* .fa-badge--pin — parks the stamp at the top-right of a positioned parent
   (a .fa-card or .fa-media). */
.fa-badge--pin {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-2);
  z-index: 2;
}

/* .fa-badge--flat — no rotation, for tight rows where 4deg would collide. */
.fa-badge--flat { transform: none; }


/* ==========================================================================
   13. PRIMITIVE — .fa-chip
   Small pill labels: news categories, fact pills (), miles prices (),
   leaderboard rank chips (), payment marks ().
   ========================================================================== */

.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-1);
  padding: 4px 10px;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.4;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fa-ivory-dim);
  background: var(--fa-graphite);
  border: 1px solid var(--fa-line);
  border-radius: var(--fa-r-pill);
}

.fa-chip .fa-icon { --fa-icon-size: 12px; }

/* Tone modifiers. */
.fa-chip--gold  { color: var(--fa-btn-ink); background: var(--fa-gold); border-color: var(--fa-gold-deep); }
.fa-chip--ghost { color: var(--fa-gold); background: var(--fa-gold-a08); border-color: var(--fa-gold-a30); }
.fa-chip--cyan  { color: var(--fa-cyan); background: rgba(0, 180, 216, .10); border-color: rgba(0, 180, 216, .38); }
.fa-chip--green { color: var(--fa-green); background: rgba(46, 158, 107, .10); border-color: rgba(46, 158, 107, .38); }

/* Leaderboard rank chips —  ranks 1-3 get gold / silver / bronze.
   Square-ish so they read as rank plates, not tags. */
.fa-chip--rank {
  justify-content: center;
  min-width: 24px;
  padding: 3px 6px;
  border-radius: var(--fa-r-xs);
  font-family: var(--fa-font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--fa-bg-2);
}

.fa-chip--rank-1 { background: var(--fa-gold);   border-color: var(--fa-gold-deep); }
.fa-chip--rank-2 { background: var(--fa-silver); border-color: #8E96A5; }
.fa-chip--rank-3 { background: var(--fa-bronze); border-color: #85562C; }

/* .fa-chip--sm — 9px, for dense rows. */
.fa-chip--sm { padding: 2px 7px; font-size: var(--fa-fs-micro); }


/* ==========================================================================
   14. PRIMITIVE — .fa-grid
   The responsive card grid. Column count is a custom property so a section
   sets it inline or in its scoped rule, and the step-down at 1280 / 1024 is
   handled here once instead of in twelve section files.

   Defaults follow the the design spec pattern 6 -> 4 -> 3 -> snap-scroll.
   ========================================================================== */

.fa-grid {
  display: grid;
  gap: var(--fa-gap-grid);
  grid-template-columns: repeat(var(--fa-cols, 3), minmax(0, 1fr));
  align-items: stretch;
}

/* .fa-grid--snap — the design spec: at <=760px the grid becomes a
   horizontal snap rail with 74vw cards instead of squeezing further.
   The @media block lives in section 22 with the other breakpoints. */


/* ==========================================================================
   15. PRIMITIVE — .fa-rail
   The always-horizontal snap carousel:  rewards rail, D class ladder on
   mobile. Arrow buttons are real <button>s with accessible names (the design spec
   is explicit: give them aria-label, do not hide them from screen readers).
   ========================================================================== */

.fa-rail { position: relative; }

/* .fa-rail__track — the scroll container. */
.fa-rail__track {
  display: flex;
  gap: var(--fa-gap-grid);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--fa-s-1);
  /* room so the lift/glow on a snapped item is not clipped by the scroller */
  padding-block: var(--fa-s-1);
}

/* .fa-rail__item — one slide. Width comes from --fa-rail-item so a section
   can set its own without redefining the primitive. */
.fa-rail__item {
  flex: 0 0 var(--fa-rail-item, 200px);
  min-width: 0;
  scroll-snap-align: start;
}

/* .fa-rail__btn — the round gold chevron control. */
.fa-rail__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-top: -17px;
  color: var(--fa-bg-2);
  background: linear-gradient(180deg, var(--fa-gold-hi), var(--fa-gold));
  border: 1px solid var(--fa-gold-deep);
  border-radius: var(--fa-r-circle);
  box-shadow: var(--fa-sh);
  cursor: pointer;
  transition: background var(--fa-t) var(--fa-ease), transform var(--fa-t) var(--fa-ease);
}

.fa-rail__btn .fa-icon { --fa-icon-size: 15px; }
.fa-rail__btn:hover { background: var(--fa-gold-hi); transform: scale(1.06); }

.fa-rail__btn--prev { left: calc(var(--fa-s-3) * -1); }
.fa-rail__btn--next { right: calc(var(--fa-s-3) * -1); }

/* Scrolled to an end: JS sets [disabled] so the control reads as spent. */
.fa-rail__btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

/* .fa-rail--edge — fades the track's edges so a cut-off card reads as
   "more this way" rather than as a broken layout. */
.fa-rail--edge .fa-rail__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}


/* ==========================================================================
   16. PRIMITIVE — .fa-progress
   the design specB: 6px, track --fa-graphite, fill gold->cyan at N%, caption under.
   Also  VIP status (37%) and  stage progress (75/100).

   Percentage is passed as --fa-pct. The element carries the real ARIA
   role/values; the caption is visible text, so the bar is never colour-only.
   ========================================================================== */

.fa-progress {
  position: relative;
  height: var(--fa-progress-h, 6px);
  background: var(--fa-graphite);
  border-radius: var(--fa-r-pill);
  overflow: visible;                /* lets __mark ride outside the track */
}

.fa-progress__fill {
  display: block;
  height: 100%;
  width: var(--fa-pct, 0%);
  max-width: 100%;
  background: linear-gradient(90deg, var(--fa-gold) 0%, var(--fa-cyan) 100%);
  border-radius: var(--fa-r-pill);
  box-shadow: 0 0 10px rgba(0, 180, 216, .35);
  transition: width 600ms var(--fa-ease);
}

/* .fa-progress__mark — the small aircraft riding the fill's leading edge
   (the design specB). Decorative: aria-hidden. */
.fa-progress__mark {
  position: absolute;
  top: 50%;
  left: var(--fa-pct, 0%);
  --fa-icon-size: 16px;
  color: var(--fa-gold-hi);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, .6));
  transition: left 600ms var(--fa-ease);
  pointer-events: none;
}

/* .fa-progress__cap — the "1,250 / 2,500" caption. Sits OUTSIDE the bar. */
.fa-progress__cap {
  margin-top: var(--fa-s-1);
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-muted);
  font-variant-numeric: tabular-nums;
}

/* .fa-progress--thick — 10px, for the VIP status bar. */
.fa-progress--thick { --fa-progress-h: 10px; }

/* .fa-progress--gold — flat gold fill, no cyan, for stage bars in  */
.fa-progress--gold .fa-progress__fill {
  background: linear-gradient(90deg, var(--fa-gold-dim), var(--fa-gold-hi));
  box-shadow: none;
}


/* ==========================================================================
   17. PRIMITIVE — .fa-deco-rule
   The Art-Deco divider: a gold hairline that fades out at both ends with a
   small diamond at the centre. Separates blocks inside a panel.
   Always decorative — mark it aria-hidden.
   ========================================================================== */

.fa-deco-rule {
  position: relative;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--fa-gold-a45) 22%,
    var(--fa-gold-a45) 78%,
    transparent 100%);
  margin-block: var(--fa-s-4);
}

.fa-deco-rule::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: var(--fa-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* .fa-deco-rule--plain — no diamond. */
.fa-deco-rule--plain::after { display: none; }

/* .fa-deco-rule--flush — no vertical margin, when the parent owns the gap. */
.fa-deco-rule--flush { margin-block: 0; }

/* .fa-deco-rule--vert — the vertical twin, for splitting columns in a row. */
.fa-deco-rule--vert {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin-block: 0;
  margin-inline: var(--fa-s-4);
  background: linear-gradient(180deg, transparent, var(--fa-gold-a45) 30%, var(--fa-gold-a45) 70%, transparent);
}


/* ==========================================================================
   18. PRIMITIVE — .fa-stat
   Label-over-value block. B CURRENT MILES 1,250 ·  PRIZE POOL EUR75,000 ·
    miles balance ·  countdown tiles ·  bonus panel.
   Values are Cinzel gold with tabular figures so live counters cannot shift.
   ========================================================================== */

.fa-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fa-stat__label {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-muted);
}

.fa-stat__value {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-stat);
  line-height: 1.05;
  letter-spacing: var(--fa-ls);
  color: var(--fa-gold);
  font-variant-numeric: tabular-nums;
}

.fa-stat__sub {
  font-size: var(--fa-fs-xs);
  line-height: 1.4;
  color: var(--fa-ivory-dim);
}

/* .fa-stat--lg — the headline figure ( "150%",  "EUR75,000"). */
.fa-stat--lg .fa-stat__value { font-size: var(--fa-fs-display); }

/* .fa-stat--sm — inline figures in dense rows ( YOUR PROGRESS). */
.fa-stat--sm .fa-stat__value { font-size: var(--fa-fs-h3); }

/* .fa-stat--center / --ivory — alignment and tone. */
.fa-stat--center { align-items: center; text-align: center; }
.fa-stat--center .fa-stat__value { justify-content: center; }
.fa-stat--ivory .fa-stat__value { color: var(--fa-ivory); }

/* .fa-stat--tile — the boxed variant: graphite plate with gold digits.
    countdown HRS/MIN/SEC. Fixed min-width + tabular-nums = no tick shift. */
.fa-stat--tile {
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-1);
  min-width: 56px;
  padding: var(--fa-s-2) var(--fa-s-1);
  text-align: center;
  background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r-sm);
}

.fa-stat--tile .fa-stat__value { justify-content: center; font-size: var(--fa-fs-h2); }
.fa-stat--tile .fa-stat__label { order: 2; font-size: var(--fa-fs-micro); }


/* ==========================================================================
   19. PRIMITIVE — .fa-medallion
   The circular gold-ringed icon holder.  VIP perks (56px),  How it
   works (64px), D class-ladder nodes,  stage nodes.
   Size via --fa-med; state via the modifiers.
   ========================================================================== */

.fa-medallion {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--fa-med, 56px);
  height: var(--fa-med, 56px);
  color: var(--fa-gold);
  background:
    radial-gradient(circle at 50% 35%, var(--fa-gold-a12), transparent 70%),
    var(--fa-graphite);
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-circle);
  transition:
    border-color var(--fa-t) var(--fa-ease),
    box-shadow var(--fa-t) var(--fa-ease),
    color var(--fa-t) var(--fa-ease);
}

.fa-medallion .fa-icon { --fa-icon-size: 55%; }

.fa-medallion--sm { --fa-med: 40px; }
.fa-medallion--lg { --fa-med: 64px; }

/* .fa-medallion--active — the current node: gold ring + gold glow (D). */
.fa-medallion--active {
  border-color: var(--fa-gold);
  box-shadow: var(--fa-glow-gold);
}

/* .fa-medallion--done — a completed stage (). Green tick tone. */
.fa-medallion--done {
  color: var(--fa-green);
  border-color: rgba(46, 158, 107, .55);
}

/* .fa-medallion--locked — inactive: graphite fill, muted icon (D, ).
   ALWAYS pair with a padlock icon and a text state — the design spec forbids
   conveying state by colour alone. */
.fa-medallion--locked {
  color: var(--fa-muted);
  background: var(--fa-graphite);
  border-color: var(--fa-line);
  box-shadow: none;
}


/* ==========================================================================
   20. PRIMITIVE — .fa-tabs
    Flight Challenge: PRIZE POOL | LEADERBOARD. Real role="tablist" with
   arrow-key support wired in main.js. Selected state is driven by
   aria-selected, so the DOM stays the source of truth.
   ========================================================================== */

.fa-tabs { display: flex; flex-direction: column; gap: var(--fa-s-4); }

.fa-tabs__list {
  display: flex;
  gap: var(--fa-s-5);
  border-bottom: 1px solid var(--fa-line);
}

.fa-tabs__tab {
  position: relative;
  padding: 0 0 var(--fa-s-2);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-xs);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-muted);
  cursor: pointer;
  transition: color var(--fa-t) var(--fa-ease);
}

.fa-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--fa-gold);
  transform: scaleX(0);
  transition: transform var(--fa-t) var(--fa-ease);
}

.fa-tabs__tab:hover { color: var(--fa-ivory-dim); }

.fa-tabs__tab[aria-selected="true"] { color: var(--fa-gold); }
.fa-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }

/* .fa-tabs__panel — one per tab. Hide the inactive ones with the `hidden`
   attribute, not a class, so it works before main.js runs. */
.fa-tabs__panel { display: block; }


/* ==========================================================================
   21. PRIMITIVE — .fa-scrim
   Image overlays. the design spec is explicit that raw photography fails contrast: a
   scrim is REQUIRED under every piece of text that sits on art.
   Drop as a sibling <span aria-hidden="true"> inside a positioned parent.
   ========================================================================== */

.fa-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* default = the  card treatment */
  background: linear-gradient(0deg, rgba(6, 15, 31, .95), transparent 70%);
}

/* .fa-scrim--bottom — explicit alias of the default ( city cards, ). */
.fa-scrim--bottom {
  background: linear-gradient(0deg, rgba(6, 15, 31, .95), transparent 70%);
}

/* .fa-scrim--hero — the design spec desktop hero gradient, verbatim. Protects the
   left copy block while keeping the characters on the right visible. */
.fa-scrim--hero {
  background: linear-gradient(90deg,
    var(--fa-scrim-1) 0%,
    var(--fa-scrim-2) 34%,
    var(--fa-scrim-4) 60%,
    var(--fa-scrim-3) 100%);
}

/* .fa-scrim--vert — the design spec <=768px: the hero overlay becomes vertical. */
.fa-scrim--vert {
  background: linear-gradient(180deg,
    rgba(6, 15, 31, .30) 0%,
    rgba(6, 15, 31, .82) 52%,
    rgba(6, 15, 31, .96) 100%);
}

/* .fa-scrim--copy — the design spec: the promo banners have a warm CREAM clear zone,
   not navy. Gold/ivory text on cream fails 4.5:1, so this navy wash over the
   copy side is mandatory, not decorative. */
.fa-scrim--copy {
  background: linear-gradient(90deg,
    rgba(6, 15, 31, .30) 0%,
    rgba(11, 18, 59, .86) 46%,
    rgba(11, 18, 59, .95) 100%);
}

/* .fa-scrim--heavy — for art with no clear zone at all
   (the assets guide flags private-jet-weekend.png as needing this). */
.fa-scrim--heavy { background: rgba(6, 15, 31, .78); }

/* .fa-scrim--dim — the  hover dim behind the centred PLAY NOW overlay. */
.fa-scrim--dim { background: rgba(6, 15, 31, .62); }

/* .fa-scrim--top — protects a chip pinned at the top of an image (). */
.fa-scrim--top {
  background: linear-gradient(180deg, rgba(6, 15, 31, .80), transparent 46%);
}


/* ==========================================================================
   22. BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375 (the design spec)
   Verified widths. No horizontal PAGE scroll at any of them; only .fa-rail
   and .fa-grid--snap scroll horizontally, by design.
   ========================================================================== */

/* --- Visibility helpers. Use sparingly: prefer one DOM, restyled. -------- */
.fa-only-desk   { display: revert; }
.fa-only-mobile { display: none; }

/* --- <=1280 : six-up grids step to four ---------------------------------- */
@media (max-width: 1280px) {
  .fa-grid {
    grid-template-columns: repeat(var(--fa-cols-1280, var(--fa-cols, 3)), minmax(0, 1fr));
  }

  :root { --fa-gap-grid: 12px; }
}

/* --- <=1024 : four-up grids step to three; nav collapses (the design spec) ------- */
@media (max-width: 1024px) {
  .fa-grid {
    grid-template-columns: repeat(var(--fa-cols-1024, var(--fa-cols-1280, var(--fa-cols, 3))), minmax(0, 1fr));
  }

  .fa-frame { border-radius: var(--fa-r); }

  /* Rail arrows move inside the track — there is no outside gutter left. */
  .fa-rail__btn--prev { left: var(--fa-s-1); }
  .fa-rail__btn--next { right: var(--fa-s-1); }
}

/* --- <=760 : grids marked --snap become horizontal snap rails (the design spec) --
       74vw cards, scroll-snap-align:start. Deliberately 760, not 768: the design spec all name 760 as the switch, so 768px still shows the
       3-up grid. */
@media (max-width: 760px) {
  .fa-grid--snap {
    display: flex;
    gap: var(--fa-gap-grid);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--fa-pad-frame);
    /* bleed to the frame edge so the rail reads as scrollable */
    margin-inline: calc(var(--fa-pad-panel) * -1);
    padding-inline: var(--fa-pad-panel);
    padding-block: var(--fa-s-1);
  }

  .fa-grid--snap > * {
    flex: 0 0 var(--fa-snap-card);
    scroll-snap-align: start;
  }
}

/* --- <=768 : the mobile switch ------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --fa-gap-sec: 14px;
    --fa-fs-body: 13.5px;
  }

  .fa-grid {
    grid-template-columns: repeat(var(--fa-cols-768, var(--fa-cols-1024, var(--fa-cols-1280, var(--fa-cols, 2)))), minmax(0, 1fr));
  }

  /* The section header stops trying to fit four cells on one line: the
     "VIEW ALL" link drops to its own row and the rule keeps the title
     company. */
  .fa-sec {
    grid-template-columns: auto 1fr;
    row-gap: var(--fa-s-1);
  }

  /* Numbered header on mobile: number/icon in col 1, TITLE explicitly in col 2.
     Without this the title auto-placed into the rule's explicit cell (1/2) and
     the decorative beaded rule rendered ON TOP of the title — the "stripe over
     the text". The rule has no room beside a title at this width, so hide it. */
  .fa-sec__title { grid-area: 1 / 2; }
  .fa-sec__rule { display: none; }
  .fa-sec__sub  { grid-area: 2 / 1 / auto / span 2; }
  .fa-sec__link { grid-area: 3 / 1 / auto / span 2; justify-self: start; }
  .fa-sec--plain .fa-sec__title { grid-area: 1 / 1; }
  .fa-sec--plain .fa-sec__rule  { grid-area: 1 / 2; }
  .fa-sec--plain .fa-sec__sub   { grid-area: 2 / 1 / auto / span 2; }
  .fa-sec--plain .fa-sec__link  { grid-area: 3 / 1 / auto / span 2; }

  /* On mobile the number sits above, not beside, when the title wraps. */
  .fa-sec__title { font-size: clamp(17px, 4.6vw, 20px); }

  .fa-only-desk   { display: none; }
  .fa-only-mobile { display: revert; }

  .fa-deco-rule--vert {
    width: 100%;
    height: 1px;
    margin-inline: 0;
    margin-block: var(--fa-s-3);
    background: linear-gradient(90deg, transparent, var(--fa-gold-a45) 30%, var(--fa-gold-a45) 70%, transparent);
  }
}

/* --- <=375 : the narrowest verified width -------------------------------- */
@media (max-width: 375px) {
  :root {
    --fa-pad-frame: 10px;
    --fa-pad-panel: 12px;
    --fa-gap-grid:  10px;
    --fa-snap-card: 82vw;
  }

  .fa-frame { border-radius: var(--fa-r-sm); }

  /* Buttons must not push the layout wider than the viewport. */
  .fa-btn {
    padding: 0 16px;
    font-size: 12px;
    white-space: normal;              /* allow a two-word CTA to wrap */
    min-height: 40px;
  }

  .fa-btn--lg { min-height: 46px; padding: 0 20px; font-size: 13px; }

  .fa-stat--tile { min-width: 48px; }

  .fa-tabs__list { gap: var(--fa-s-4); }
}


/* ==========================================================================
   23. REDUCED MOTION (the design spec)
   Disables every transform and animation. Static ornamental rotation
   (.fa-badge's 4deg stamp tilt) is intentionally preserved — it is a shape,
   not motion — but every hover lift, sweep, slide and spin is neutralised.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  html { scroll-behavior: auto; }

  .fa-rail__track,
  .fa-grid--snap { scroll-behavior: auto; }

  /* No lifts, no slides, no scale — on any state of any primitive. */
  .fa-card:hover,
  .fa-card:focus-within,
  .fa-btn:hover,
  .fa-btn:active,
  .fa-rail__btn:hover,
  .fa-medallion:hover {
    transform: none !important;
  }

  .fa-link:hover .fa-icon,
  .fa-sec__link:hover .fa-icon,
  .fa-progress__mark {
    transform: none !important;
  }

  .fa-progress__mark { transform: translate(-50%, -50%) !important; }

  /* Underlines and tab indicators appear instantly instead of growing. */
  .fa-link--underline::after,
  .fa-tabs__tab::after { transition: none !important; }

  /* The button shimmer never runs. */
  .fa-btn::after { animation: none !important; opacity: 0 !important; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/01-header.css
   ========================================================================== */
/* ==========================================================================
   01-HEADER — the design spec
   Sticky header, centre nav, LOGIN + GET BOARDING PASS, mobile drawer.

   Composes the the design guide primitives .fa-btn (--gold / --ghost / --block),
   .fa-link (--underline), .fa-icon and .fa-sr-only. Nothing shared is
   redefined; every rule below is scoped to .fa-01-header*, with the two
   documented exceptions noted at the foot of the file.

   RAW VALUES USED HERE, AND WHY (the design guide rule 2 allows a literal that
   the design spec quotes for this section alone):
     rgba(11,18,59,.92)      the design spec header fill — deliberately NOT
                             .fa-panel--glass, which is .86
     rgba(212,175,55,.25)    the design spec "bottom border 1px gold at 25% alpha";
                             the alpha ramp has .22 and .30, not .25
     12.5px                  the design spec nav size
     11px                    the content guide  compliance-strip size
   ========================================================================== */


/* ==========================================================================
   1. STICKY SHELL
   The <header> is the sticky element and is exactly --fa-header-h tall, so
   html{scroll-padding-top} in 00-base.css stays correct for the seven
   in-page nav anchors. The compliance strip is therefore a sibling, not a
   child — a taller sticky box would push every anchored section under it.

   position:sticky + z-index makes this a stacking context, so the drawer
   and scrim z-indexes below are local to the header.
   ========================================================================== */

.fa-01-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* The glass bar. backdrop-filter sits HERE and not on .fa-01-header, so it
   never becomes the containing block for the drawer's positioning. */
.fa-01-header__bar {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0,1fr), not 1fr: the nav track must be allowed to shrink below
     its min-content width. Combined with .fa-frame's overflow:clip that
     makes a too-narrow bar fail by clipping, never by widening the page. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(var(--fa-s-2), 1vw, var(--fa-s-4));
  height: var(--fa-header-h);
  padding-inline: var(--fa-pad-frame);
  /* the design spec literals */
  background: rgba(11, 18, 59, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, .25);
}

/* Scrolled state, set by the shared stickyHeader initialiser past 40px.
   Deepens the drop only — the height never changes, so nothing shifts. */
.fa-01-header.is-stuck .fa-01-header__bar {
  box-shadow: var(--fa-sh);
}


/* ==========================================================================
   2. BRAND
   the design spec: winged gold wordmark, 40px tall, links to index.html.
   The asset is 1400x320 (4.375:1) — 175px wide at 40px — so it is the
   single widest fixed item in the bar and scales down with the viewport to
   keep the nav from overflowing. Explicit width/height attributes plus the
   intrinsic ratio mean the reserved box is exact: no CLS.
   ========================================================================== */

.fa-01-header__brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.fa-01-header__logo {
  width: auto;
  height: clamp(28px, 2.78vw, 40px);   /* 40px at >=1440 (the design spec) */
}


/* ==========================================================================
   3. CENTRE NAV
   the design spec: Montserrat 600, 12.5px, uppercase, .1em, ivory-dim; hover -> gold
   plus a 1px gold underline growing from the centre in 200ms.

   The underline, its centre origin and its 200ms are all inherited from
   .fa-link--underline — this file only sets the type. Size and gap are
   fluid so seven long labels shrink smoothly instead of hitting a cliff.
   ========================================================================== */

.fa-01-header__nav {
  min-width: 0;
  justify-self: center;
}

.fa-01-header__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(7px, 1.1vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fa-01-header__item { min-width: 0; }

.fa-01-header__navlink {
  font-weight: 600;
  font-size: clamp(10px, 0.87vw, 12.5px);   /* 12.5px at >=1440 (the design spec) */
  letter-spacing: var(--fa-ls-wide);        /* .10em (the design spec) */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fa-ivory-dim);               /* 9.7:1 on the header fill */
}

.fa-01-header__navlink:hover { color: var(--fa-gold); }

/* Keyboard parity: the focus ring is the primary affordance (00-base.css
   owns it and is never overridden), but the underline should answer to the
   keyboard exactly as it answers to the pointer. */
.fa-01-header__navlink:focus-visible { color: var(--fa-gold); }
.fa-01-header__navlink:focus-visible::after { transform: scaleX(1); }

/* Active page. The build marks the nav item whose data-nav matches the current
   page's navKey with aria-current="page" + .is-current. The centred underline
   is already shown by 00-base.css's .fa-link--underline[aria-current]; this
   just lifts the label to gold so the current section reads as selected. */
.fa-01-header__navlink.is-current { color: var(--fa-gold); }


/* ==========================================================================
   4. ACTIONS — LOGIN + GET BOARDING PASS + hamburger
   .fa-btn exposes no padding or type knob, so per the design guide rule 1 these
   are tuned on a scoped companion class rather than by touching .fa-btn.
   The metal, the notch and the shimmer all stay with the primitive.
   ========================================================================== */

.fa-01-header__actions {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
  justify-self: end;
}

.fa-01-header__btn {
  padding-inline: clamp(12px, 1.25vw, 22px);
  font-size: clamp(11px, 0.9vw, 13px);
}

/* the design spec: GET BOARDING PASS stays visible below the collapse but compresses
   to BOARD NOW at <=1024. display:none (not opacity/width) so the hidden
   label is excluded from the accessible name. */
.fa-01-header__cta-short { display: none; }


/* ==========================================================================
   5. HAMBURGER
   Hidden above the collapse breakpoint. 42px box clears the 44px-ish touch
   target guidance while fitting the 68px bar.
   ========================================================================== */

.fa-01-header__burger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--fa-gold);
  background: transparent;
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-sm);
  cursor: pointer;
  transition:
    background-color var(--fa-t) var(--fa-ease),
    border-color var(--fa-t) var(--fa-ease),
    color var(--fa-t) var(--fa-ease);
}

.fa-01-header__burger:hover {
  background: var(--fa-gold-a08);
  border-color: var(--fa-gold);
  color: var(--fa-gold-hi);
}


/* ==========================================================================
   6. DRAWER + SCRIM
   the design spec: a full-height drawer from the right.

   Both are absolutely positioned inside the sticky header rather than fixed.
   The header is pinned at the viewport top whenever the drawer can be
   opened, so the result is visually identical to fixed, and it sidesteps
   two footguns: .fa-frame's `overflow:clip` and the containing block that
   backdrop-filter would create. The runtime also locks page scrolling while
   the drawer is open.

   Closed state uses visibility:hidden, which removes the drawer's links
   from the tab order without needing JS to manage tabindex.
   ========================================================================== */

.fa-01-header__scrim {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--fa-scrim-2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--fa-t) var(--fa-ease),
    visibility 0s linear var(--fa-t);
}

.fa-01-header__scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.fa-01-header__drawer {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: var(--fa-s-4);
  width: min(320px, 86vw);
  height: 100vh;
  height: 100dvh;
  padding: var(--fa-s-4) var(--fa-s-5) var(--fa-s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fa-bg-2);
  border-left: 1px solid var(--fa-gold-a30);
  box-shadow: var(--fa-sh-lg);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--fa-t) var(--fa-ease),
    visibility 0s linear var(--fa-t);
}

.fa-01-header__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.fa-01-header__drawertop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-3);
  min-height: 42px;
}

.fa-01-header__emblem {
  width: 30px;
  height: 30px;
}

.fa-01-header__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--fa-gold);
  background: transparent;
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-sm);
  cursor: pointer;
  transition:
    background-color var(--fa-t) var(--fa-ease),
    border-color var(--fa-t) var(--fa-ease),
    color var(--fa-t) var(--fa-ease);
}

.fa-01-header__close:hover {
  background: var(--fa-gold-a08);
  border-color: var(--fa-gold);
  color: var(--fa-gold-hi);
}

.fa-01-header__drawerlist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fa-01-header__drawerlink {
  display: block;
  padding: var(--fa-s-3) 0;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-sm);
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
  border-bottom: 1px solid var(--fa-line);
  transition: color var(--fa-t) var(--fa-ease);
}

.fa-01-header__drawerlist li:last-child .fa-01-header__drawerlink {
  border-bottom: 0;
}

.fa-01-header__drawerlink:hover,
.fa-01-header__drawerlink:focus-visible,
.fa-01-header__drawerlink.is-current { color: var(--fa-gold); }

.fa-01-header__draweractions {
  margin-top: auto;
  padding-top: var(--fa-s-3);
}


/* ==========================================================================
   7. COMPLIANCE STRIP  (the content guide )
   Sibling of the sticky header, so it scrolls away and leaves the pinned
   height at exactly --fa-header-h. --fa-muted on --fa-bg-2 is 5.8:1.
   ========================================================================== */

.fa-01-header__compliance {
  background: var(--fa-bg-2);
  border-bottom: 1px solid var(--fa-line);
}

.fa-01-header__compliance-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-1) var(--fa-s-2);
  padding: var(--fa-s-1) var(--fa-pad-frame);
  font-size: 11px;                       /* the content guide  */
  line-height: 1.5;
  text-align: center;
  color: var(--fa-muted);
}

.fa-01-header__compliance-sep { color: var(--fa-gold-dim); }


/* ==========================================================================
   8. BREAKPOINTS

   The collapse is at <=1024px, exactly as the design spec states, and the BOARD NOW
   label swap happens at the same width — so both halves of the design spec's
   responsive rule fire together.

   Three things pin this to 1024 rather than to a roomier custom value:
     - the design spec is binding, and the design guide fixes the order the design spec > the design guide >
       builder judgement.
     - 00-base.css's own <=1024 block is commented "nav collapses (the design spec)",
       so the design system already assumes this width.
     - The shared runtime (parts/00-runtime.js) auto-closes the drawer at
       `window.innerWidth > 1024`. Any collapse breakpoint ABOVE 1024 leaves a
       band where the hamburger is the only navigation but a resize event
       force-closes the drawer. Matching 1024 removes that desync entirely.

   The cost is that 1025–1180 is genuinely tight: seven labels totalling 67
   uppercase characters at .1em, plus a wordmark and two CTAs. The band rule
   below buys the room back by pinning the fluid values to their floors there
   and nowhere else, so the verified 1440 / 1280 renderings are untouched.
   Should a future label make it tighter still, the nav track is
   minmax(0,1fr) inside .fa-frame's overflow:clip, so the failure mode is a
   clipped nav edge, never horizontal page scroll (the design spec).
   ========================================================================== */

/* --- 1025–1180 : keep the full nav, pinned to its tightest fluid values ---
     Everything here is already the floor of a clamp() further up the sheet;
     this only stops the interpolation early. Nothing exceeds its own the design spec
     value — these are the same minimums, reached sooner. */
@media (min-width: 1025px) and (max-width: 1180px) {

  .fa-01-header__bar { column-gap: var(--fa-s-2); }

  .fa-01-header__logo { height: 26px; }

  .fa-01-header__list { gap: 7px; }

  .fa-01-header__navlink { font-size: 10px; }

  .fa-01-header__btn {
    padding-inline: 12px;
    font-size: 11px;
  }
}

/* --- <=1024 : nav -> hamburger + drawer, and GET BOARDING PASS -> BOARD NOW
       Both are the design spec rules and both switch here. ------------------------- */
@media (max-width: 1024px) {

  .fa-01-header__nav,
  .fa-01-header__login { display: none; }

  .fa-01-header__burger { display: grid; }

  .fa-01-header__scrim  { display: block; }
  .fa-01-header__drawer { display: flex; }

  .fa-01-header__cta-long  { display: none; }
  .fa-01-header__cta-short { display: inline; }
}

/* --- <=768 --------------------------------------------------------------- */
@media (max-width: 768px) {
  .fa-01-header__logo { height: 30px; }
}

/* --- <=375 : narrowest verified width ------------------------------------
     Budget at 375px: 10px frame padding each side leaves 355px for a 114px
     wordmark, the BOARD NOW button and the 40px burger. Comfortable. */
@media (max-width: 375px) {

  .fa-01-header__logo { height: 26px; }

  .fa-01-header__burger,
  .fa-01-header__close { width: 40px; height: 40px; }

  .fa-01-header__bar { column-gap: var(--fa-s-2); }

  .fa-01-header__drawer {
    width: min(300px, 88vw);
    padding-inline: var(--fa-s-4);
  }

  /* 00-base.css lets .fa-btn wrap to two lines at this width; a two-line
     CTA would break the 68px bar, so the header CTA stays on one line. */
  .fa-01-header__btn { white-space: nowrap; }
}


/* ==========================================================================
   9. REDUCED MOTION (the design spec)
   00-base.css already collapses every transition duration globally. These
   are belt-and-braces so the drawer and scrim swap state instantly rather
   than sliding, with no dependence on the global rule's ordering.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .fa-01-header__drawer,
  .fa-01-header__scrim {
    transition: none !important;
  }
}


/* ==========================================================================
   10. TWO UNPREFIXED RULES — DECLARED, NOT ACCIDENTAL

   `.fa-noscroll` is set on <html> by the shared runtime's mobileNav
   initialiser (parts/00-runtime.js), which hard-codes that exact class
   name, so it cannot carry the fa-01-header- prefix. 00-base.css never
   defines it and the header drawer is its only consumer, so it is defined
   here rather than left inert. It is not a restyle of a shared class —
   it is the missing definition of one this section owns.
   ========================================================================== */

html.fa-noscroll {
  overflow: hidden;
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/02-hero.css
   ========================================================================== */
/* ==========================================================================
   02 — HERO  (the design spec)

   Scoped sheet. Everything here is either layout that is genuinely specific to
   the hero, or one of the pixel values the design spec quotes literally for this
   section alone (the design guide rule 2 grants that exception): the
   clamp(360px, 42vw, 470px) height, object-position 62% center, the 48px copy
   inset, max-width 520px / 380px, right: 40px, padding 22px 28px, 46px / 22px /
   13px / 11px / .16em in the bonus panel, and the <=768 300px + clamp(32px,
   9vw, 44px) pair. Every other value comes from a token.

   No primitive is redefined and no custom property is reassigned. The two
   properties declared below are new and section-scoped.
   ========================================================================== */

.fa-02-hero {
  /* New, section-scoped — not a redefinition of anything in 00-base.css. */
  --fa-02-hero-pad: 48px;          /* the design spec: copy padded 48px from the frame edge */

  position: relative;
  isolation: isolate;              /* keeps the scrim/content stack self-contained */
  display: flex;
  align-items: center;
  min-height: clamp(360px, 42vw, 470px);   /* the design spec */
  overflow: hidden;                /* clips the cover photograph */
  /* No radius: the design spec puts the 10px corner on .fa-frame only, and .fa-frame
     already clips this bleed section to it. */
}


/* --- Background photograph ----------------------------------------------- */

.fa-02-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.fa-02-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;     /* the design spec: keeps the characters in frame */
}


/* --- Overlays -------------------------------------------------------------
   .fa-scrim already supplies position/inset/z-index/pointer-events. Both the design spec
   variants are in the DOM; these rules only choose which one is showing, so
   neither shared class is restyled. -------------------------------------- */

.fa-02-hero__scrim--mob { display: none; }

/* Copy-column reinforcement. Uses the shared --fa-scrim-* stops so the accent
   strength still retunes globally. Transparent by 56%, which is left of the
   62% focal point, so the characters keep their full value. */
.fa-02-hero__copy-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--fa-scrim-2) 0%,
    var(--fa-scrim-3) 34%,
    transparent 56%);
}


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

.fa-02-hero__inner {
  position: relative;
  z-index: 2;                      /* the design guide: content sits above the scrims */
  width: 100%;
  padding: var(--fa-s-7) var(--fa-02-hero-pad);
}


/* --- Left copy block ------------------------------------------------------ */

.fa-02-hero__copy { max-width: 520px; }            /* the design spec */

.fa-02-hero__title { margin-top: var(--fa-s-2); }

.fa-02-hero__lead {
  margin-top: var(--fa-s-4);
  max-width: 380px;                                /* the design spec */
}

.fa-02-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fa-s-5);
  margin-top: var(--fa-s-6);
}


/* --- Right welcome-bonus panel -------------------------------------------
   .fa-panel--glass gives the rgba(11,18,59,.86) surface and .fa-panel--deco
   the second gold hairline inset 4px, both straight from the design spec ------- */

.fa-02-hero__bonus {
  position: absolute;
  top: 50%;
  right: 40px;                                     /* the design spec */
  z-index: 2;
  transform: translateY(-50%);                     /* centring, not motion */
  width: min(300px, 30vw);
  padding: 22px 28px;                              /* the design spec */
  text-align: center;
}

/* the design spec specifies 11px / .16em / --fa-muted here, a touch wider than the
   house .fa-label metrics. Colour stays on the token. */
.fa-02-hero__bonus-label {
  font-size: 11px;
  letter-spacing: .16em;
}

.fa-02-hero__bonus-cap {
  margin-top: var(--fa-s-1);
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: 22px;                                 /* the design spec */
  line-height: var(--fa-lh-head);
  letter-spacing: var(--fa-ls);
  text-transform: uppercase;
  color: var(--fa-ivory);
}

.fa-02-hero__bonus-spins {
  margin-top: var(--fa-s-2);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: 13px;                                 /* the design spec */
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-gold-hi);
}

.fa-02-hero__bonus-cta { margin-top: var(--fa-s-4); }

.fa-02-hero__terms { margin-top: var(--fa-s-3); }

/* Inherit the .fa-fine metrics rather than .fa-link's 13px, and carry an
   underline so the control is not signalled by colour alone.
   padding/cursor: the base reset clears a button's background, border and
   margin but not its UA padding (~1px 6px), which would push this trigger out
   of line with the sentence it sits in, and a <button> gets the default arrow
   cursor where every other .fa-link is an <a> and gets the pointer. */
.fa-02-hero__terms-btn {
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}


/* ==========================================================================
   BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375 (the design spec)
   ========================================================================== */

/* --- <=1100 : the design spec — the bonus panel drops below the copy, full width --- */
@media (max-width: 1100px) {

  .fa-02-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--fa-s-6);
    padding-block: var(--fa-s-8);
  }

  .fa-02-hero__copy { max-width: none; }

  /* position:relative, NOT static: .fa-panel--deco's second gold hairline is
     an absolutely-positioned ::after at inset 4px. With the panel static it
     escapes to the nearest positioned ancestor — .fa-02-hero — and draws a
     gold rectangle 4px inside the whole photograph. inset:auto clears the
     desktop top/right offsets, which relative positioning would still apply. */
  .fa-02-hero__bonus {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
  }
}

/* --- <=1024 --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fa-02-hero { --fa-02-hero-pad: 32px; }
}

/* --- <=768 : the design spec — mobile crop, 300px, vertical overlay, smaller H1 ---- */
@media (max-width: 768px) {

  .fa-02-hero {
    --fa-02-hero-pad: 20px;
    min-height: 300px;                             /* the design spec */
  }

  /* The portrait plate is already centred on its subject. */
  .fa-02-hero__bg img { object-position: center; }

  /* Horizontal overlay out, vertical in (the design spec). */
  .fa-02-hero__scrim--desk { display: none; }
  .fa-02-hero__scrim--mob { display: block; }

  /* The copy reinforcement turns vertical here rather than switching off.
     Measured against img/hero/hero-mobile.png: the top ~30% of that plate is
     near-white sunrise sky (column mean RGB ~200,200,190). .fa-scrim--vert
     alone only reaches .30-.54 across it, leaving the gold H1 at 1.7-2.6:1 and
     the ivory eyebrow worse — a hard failure of the design spec's 4.5:1 floor at both
     the 768 and 375 verified breakpoints, and exactly the case the design spec names
     ("the raw photo fails contrast"). These stops take the worst case to
     6.3:1 and clear to transparent by 66%, below the last line of copy.
     the design spec's own .fa-scrim--vert gradient is not modified. */
  .fa-02-hero__copy-scrim {
    background: linear-gradient(180deg,
      var(--fa-scrim-2) 0%,
      var(--fa-scrim-3) 38%,
      transparent 66%);
  }

  .fa-02-hero__inner { padding-block: var(--fa-s-7); }

  .fa-02-hero__title { font-size: clamp(32px, 9vw, 44px); }   /* the design spec */

  .fa-02-hero__lead { max-width: none; }

  .fa-02-hero__cta { gap: var(--fa-s-4); }
}

/* --- <=420 : stack the CTA pair so the 52px button can never be clipped,
       including when Montserrat has not loaded and Arial runs wider. -------- */
@media (max-width: 420px) {

  .fa-02-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .fa-02-hero__cta .fa-btn { width: 100%; }
  .fa-02-hero__explore { justify-content: center; }
}


/* ==========================================================================
   REDUCED MOTION
   This section introduces no animation, transition or hover transform of its
   own — the only transform here is translateY(-50%), which is layout centring
   and must survive. The primitives it composes are already neutralised by
   00-base.css , so there is deliberately nothing to disable here.
   ========================================================================== */

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/03-journey.css
   ========================================================================== */
/* ==========================================================================
   FORTUNE AIRLINES — 03-journey.css
   the design spec — journey strip: boarding pass, your journey, current class,
   five-node class ladder.

   Composes the primitives from the design guide. Nothing here redefines a
   primitive or a token; every rule is scoped to .fa-03-journey and every
   colour, radius, duration and space comes from a :root token.

   Load position: after css/00-base.css, in DOM order with the other
   section sheets.
   ========================================================================== */

.fa-03-journey {
  /* Ladder node diameter. Fed to .fa-medallion through its own --fa-med
     knob (the design guide) and reused to align the connector line. */
  --fa-03-journey-node: 48px;
  /* Ticket perforation geometry. */
  --fa-03-journey-perf: 5px;
  --fa-03-journey-perf-step: 17px;
}


/* ==========================================================================
   ZONE LAYOUT
   the design spec: "four zones in a row; wraps to 2x2 at <=1100px, stacks at <=700px".
   Widths ~300 / ~260 / ~230 / rest.
   ========================================================================== */

/* Proportional rather than fixed px: the ratios land on the design spec's ~300 / ~260 /
   ~230 / rest at the 1440 design width, but they scale down together instead
   of starving the ladder at 1280 — with fixed tracks the first three keep
   790px and the fifth node falls off the end. */
.fa-03-journey__zones {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 1fr)
    minmax(0, .9fr)
    minmax(0, 2fr);
  gap: var(--fa-s-3);
  /* stretch (the default) is deliberate: it squares the zone heights so the
     gold dividers run the full height of the strip and the ladder can centre
     against the taller boarding pass. */
}

.fa-03-journey__zone {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  min-width: 0;
}

/* Hairline between zones, desktop only — at 2x2 and stacked it would cut
   across the wrap and read as a mistake. */
@media (min-width: 1101px) {
  .fa-03-journey__zone + .fa-03-journey__zone {
    padding-left: var(--fa-s-3);
    border-left: 1px solid var(--fa-gold-a12);
  }
}

/* The ladder is the widest zone; let it own the row height. */
.fa-03-journey__zone--ladder {
  justify-content: center;
  padding-block: var(--fa-s-2);
}

/* Zone C is centred under its badge. */
.fa-03-journey__zone--class { align-items: center; text-align: center; }

/* Zone CTAs sit left in their zone (centred in zone C, which centres all)
   and drop to the foot so the two ghost buttons share a baseline. */
.fa-03-journey__cta { align-self: flex-start; margin-top: auto; }
.fa-03-journey__zone--class .fa-03-journey__cta { align-self: center; }

/* --- 2x2 (the design spec: <=1100px) ------------------------------------------------
   the design spec says 2x2, so the ladder stays the fourth cell rather than spanning.
   Below this the ladder cell narrows past 5 x 88px and the track scrolls,
   which is the design specD's own stated fallback. */
@media (max-width: 1100px) {
  .fa-03-journey__zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- stacked (the design spec: <=700px) --------------------------------------------- */
@media (max-width: 700px) {
  .fa-03-journey__zones { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   ZONE HEADS
   .fa-label supplies the the design spec small-label metrics; this only adds the
   icon row. the design specB: "Label YOUR JOURNEY with a small gold clover icon".
   ========================================================================== */

.fa-03-journey__zone-title {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
}

.fa-03-journey__zone-icon {
  --fa-icon-size: 14px;
  color: var(--fa-gold);
}


/* ==========================================================================
   A. BOARDING PASS  (the design specA)
   Ivory paper ticket: .fa-card--paper carries the surface and the ink,
   .fa-card--flat opts out of the hover lift (it is not a link).
   ========================================================================== */

.fa-03-journey__pass {
  position: relative;
  isolation: isolate;
  /* Perforated right edge: a repeating half-circle punched out of the
     card's right border (the design specA). The mask also nicks the border, which
     is what a real torn stub does. */
  -webkit-mask-image: radial-gradient(
    circle var(--fa-03-journey-perf) at right,
    rgba(0, 0, 0, 0) 96%, #000 100%);
  mask-image: radial-gradient(
    circle var(--fa-03-journey-perf) at right,
    rgba(0, 0, 0, 0) 96%, #000 100%);
  -webkit-mask-size: 100% var(--fa-03-journey-perf-step);
  mask-size: 100% var(--fa-03-journey-perf-step);
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  -webkit-mask-position: right center;
  mask-position: right center;
}

/* Rotated wordmark watermark. Decorative: alt="" in the markup. */
.fa-03-journey__pass-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 132%;
  height: auto;
  opacity: .11;
  transform: translate(-50%, -50%) rotate(-16deg);
  pointer-events: none;
}

.fa-03-journey__pass-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  padding: var(--fa-s-3);
  /* keep the ink clear of the perforated edge */
  padding-right: calc(var(--fa-s-3) + var(--fa-03-journey-perf));
}

/* the design specA: "Fields, two columns, tiny uppercase labels above values". */
.fa-03-journey__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fa-s-2) var(--fa-s-3);
}

.fa-03-journey__field { min-width: 0; }

/* The base sets .fa-card--paper .fa-label to 62% ink, which measures 3.5:1
   on --fa-paper — below the design spec's 4.5:1 floor for these 10.5px labels.
   Scoped to this section only; the primitive is untouched. The plain
   declaration is the fallback where color-mix() is unsupported. */
.fa-03-journey__pass .fa-label {
  color: var(--fa-paper-ink);
  color: color-mix(in srgb, var(--fa-paper-ink) 78%, var(--fa-paper));
}

.fa-03-journey__value {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-sm);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-paper-ink);
}

.fa-03-journey__value--seat {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-h3);
  line-height: 1;
}

/* FROM / TO render in caps on the ticket, per the design specA. */
.fa-03-journey__value--caps {
  text-transform: uppercase;
  letter-spacing: var(--fa-ls-wider);
  font-size: var(--fa-fs-xs);
}

/* Caps-only: for values the design spec renders uppercase but whose size is owned by
   the primitive (B "2,500 MILES" on .fa-stat--sm). */
.fa-03-journey__caps { text-transform: uppercase; }

.fa-03-journey__pass-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-3);
  padding-top: var(--fa-s-3);
  border-top: 1px dashed var(--fa-paper-ink);
  border-top-color: color-mix(in srgb, var(--fa-paper-ink) 34%, var(--fa-paper));
}

/* the design specA: a real barcode, CSS repeating-linear-gradient bars. */
.fa-03-journey__barcode {
  display: block;
  flex: 1 1 auto;
  height: 34px;
  min-width: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--fa-paper-ink) 0 1px,
    transparent 1px 3px,
    var(--fa-paper-ink) 3px 5px,
    transparent 5px 6px,
    var(--fa-paper-ink) 6px 7px,
    transparent 7px 8px,
    var(--fa-paper-ink) 8px 11px,
    transparent 11px 13px);
}

/* the design specA: circular greyish "boarding" stamp with a small aircraft glyph. */
.fa-03-journey__stamp {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 2px solid var(--fa-paper-ink);
  border-color: color-mix(in srgb, var(--fa-paper-ink) 40%, var(--fa-paper));
  border-radius: var(--fa-r-circle);
  color: var(--fa-paper-ink);
  color: color-mix(in srgb, var(--fa-paper-ink) 52%, var(--fa-paper));
  transform: rotate(-14deg);
  opacity: .9;
}

.fa-03-journey__stamp .fa-icon { --fa-icon-size: 22px; }


/* ==========================================================================
   B. YOUR JOURNEY  (the design specB)
   .fa-stat + .fa-progress carry almost all of this.
   ========================================================================== */

/* The clover suffix on the miles figure (the design specB). */
.fa-03-journey__miles-mark {
  --fa-icon-size: .62em;
  color: var(--fa-gold-hi);
}

.fa-03-journey__bar { margin-top: var(--fa-s-1); }


/* ==========================================================================
   C. CURRENT CLASS  (the design specC)
   ========================================================================== */

.fa-03-journey__class-name { text-transform: uppercase; }

.fa-03-journey__badge {
  display: block;
  width: 104px;
  max-width: 100%;
  /* --fa-sh has no spread, so it is a valid drop-shadow() argument and the
     shadow follows the badge's alpha silhouette rather than its box. */
  filter: drop-shadow(var(--fa-sh));
}

/* the assets guide defect 3: the badge carries a stray wheel-rim crescent across
   its top edge. Masking the top ~12% removes it, as the manifest advises. */
.fa-03-journey__badge-img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 11%, #000 14%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0 11%, #000 14%);
}

.fa-03-journey__class-cap { max-width: 24ch; }


/* ==========================================================================
   D. CLASS LADDER  (the design specD)
   Five circular nodes joined by a dotted gold line with small chevrons
   between them. Labels under each at --fa-fs-label (10.5px, the design spec's 10px
   floor) with --fa-ls-wider (.12em).

   The track scrolls horizontally as soon as five 88px steps stop fitting,
   which is the design spec's "scrolls horizontally on mobile rather than shrinking
   below 10px text" expressed as a single container-driven rule instead of
   a breakpoint guess. [data-rail]/[data-rail-track] in the markup hand the
   track to the shared `rails` initialiser, which makes it keyboard operable.
   ========================================================================== */

.fa-03-journey__ladder {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* headroom so the active node's gold glow is not clipped by the scroller */
  padding-block: var(--fa-s-2);
}

.fa-03-journey__step {
  position: relative;
  /* grow to fill on desktop, never shrink below a readable label */
  flex: 1 0 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fa-s-2);
  min-width: 0;
  padding-inline: var(--fa-s-1);
  text-align: center;
}

/* The dotted gold joining line: centre of the previous node to centre of
   this one. All steps share a width, so -50% / 50% lands exactly. */
.fa-03-journey__step + .fa-03-journey__step::before {
  content: "";
  position: absolute;
  top: calc(var(--fa-03-journey-node) / 2);
  left: -50%;
  right: 50%;
  border-top: 1px dotted var(--fa-gold-a45);
}

/* The chevron sits at the midpoint of that line (the step's left edge). */
.fa-03-journey__link {
  position: absolute;
  top: calc(var(--fa-03-journey-node) / 2);
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0 2px;
  color: var(--fa-gold-a60);
  background: var(--fa-panel);
  transform: translate(-50%, -50%);
}

.fa-03-journey__link .fa-icon { --fa-icon-size: 12px; }

.fa-03-journey__node {
  position: relative;
  z-index: 2;
  --fa-med: var(--fa-03-journey-node);
}

/* the design specD node 3 is a crown-in-circle where node 4 is a bare crown. The
   sprite has one crown symbol, so the inner ring is drawn here rather than
   inventing a second glyph. */
.fa-03-journey__node--ringed::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid currentColor;
  border-radius: var(--fa-r-circle);
  opacity: .55;
  pointer-events: none;
}

/* the design guide: a --locked medallion must ship a padlock, so "not yet
   reached" is never carried by colour alone. The class icon stays as the design specD dictates; this is an additional state pip. The meaning is in the
   visually-hidden state text beside each label. */
.fa-03-journey__pip {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--fa-muted);
  background: var(--fa-bg-2);
  border: 1px solid var(--fa-line);
  border-radius: var(--fa-r-circle);
}

.fa-03-journey__pip .fa-icon { --fa-icon-size: 10px; }

.fa-03-journey__step-label {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.35;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-muted);
  text-wrap: balance;
}

/* The reached class reads brighter — paired with the ring, the glow and the
   visually-hidden "current class", never colour on its own. */
.fa-03-journey__step-label--on { color: var(--fa-gold); }


/* ==========================================================================
   NARROW WIDTHS
   ========================================================================== */

@media (max-width: 700px) {
  /* Stacked: zone C stops centring so it reads in the same left-aligned
     column as the three zones above and below it. */
  .fa-03-journey__zone--class { align-items: flex-start; text-align: left; }
  .fa-03-journey__zone--class .fa-03-journey__cta { align-self: flex-start; }
  .fa-03-journey__class-cap { max-width: none; }
}

@media (max-width: 375px) {
  .fa-03-journey { --fa-03-journey-node: 42px; }

  .fa-03-journey__fields { gap: var(--fa-s-2); }
  .fa-03-journey__badge { width: 88px; }
  .fa-03-journey__barcode { height: 28px; }
  .fa-03-journey__stamp { width: 40px; height: 40px; }
  .fa-03-journey__stamp .fa-icon { --fa-icon-size: 18px; }
}


/* ==========================================================================
   REDUCED MOTION
   00-base.css already neutralises transitions globally. The two motions
   this section owns are the .fa-progress fill/aircraft transitions, pinned
   here so the bar and its glyph render at their final position instantly.
   The static rotations (watermark, stamp, the ringed node) are shapes, not
   motion, and are deliberately kept — same reasoning as .fa-badge's 4deg.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fa-03-journey .fa-progress__fill,
  .fa-03-journey .fa-progress__mark { transition: none !important; }

  .fa-03-journey__ladder { scroll-behavior: auto; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/04-destinations.css
   ========================================================================== */
/* ==========================================================================
   SECTION 04 — CHOOSE YOUR DESTINATION                          (the design spec)

   Composed almost entirely from the design guide primitives:
     .fa-panel            section surface
     .fa-sec + __icon     pictogram-led header (no circled number)
     .fa-grid--snap       6 -> 4 -> 3 -> snap rail, driven by the --fa-cols knobs
     .fa-card             gold border 30% -> 100%, lift 4px, 220ms  (free)
     .fa-media--16x9      ratio box, reserves the frame against CLS
     .fa-scrim--bottom    the the design spec gradient, verbatim
     .fa-h4               Cinzel 600, ivory, uppercase, .10em
     .fa-btn--gold --sm   the PLAY NOW metal

   Only two things are genuinely specific to this section and styled here:
     1. the caption that floats over the photograph, and its contrast floor
     2. a header re-placement at <=768 (see the note on __rule below)

   No primitive is redefined and no custom property is reassigned. Every
   colour below comes from a token; the section adds no motion of its own,
   so the reduced-motion neutralisation in 00-base.css  fully covers it.
   ========================================================================== */


/* --- The card is the photograph -------------------------------------------
   the design spec puts the city name and the PLAY NOW button over the art, under a
   bottom scrim ("pinned at the card bottom"). That is what earns the scrim
   its place, so .fa-media is the card's only in-flow child and the caption
   is an absolute layer above it. Because every card is one ratio at one
   column width, the row is equal-height without .fa-card__body's flex:1. */

.fa-04-destinations__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;                       /* the design guide: above the .fa-scrim at z1 */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-1);

  /* Top pad gives the reinforcing gradient room to fade out instead of
     ending on a visible edge. Kept modest on purpose: at 1440 six columns
     make a roughly 214x120 card, and the title + button block is already a
     fixed ~53px of that, so a generous pad here would swallow the photo.
     The gradient below, not the padding, is what buys the contrast. */
  padding: var(--fa-s-4) var(--fa-s-3) var(--fa-s-3);

  /* Contrast floor. .fa-scrim--bottom alone is the the design spec gradient measured
     against the whole card; on the short cards this section produces at
     1440 (six columns -> roughly 214x120) the title sits high enough in
     that gradient to land in its weak tail. This second, caption-height
     wash guarantees >=4.5:1 even against a blown-out white photograph.
     Stops are the --fa-scrim-* tokens, which are rgba(6,15,31,·). */
  background: linear-gradient(0deg,
    var(--fa-scrim-1) 0%,
    var(--fa-scrim-1) 55%,
    var(--fa-scrim-2) 82%,
    transparent 100%);
}

/* Long names must wrap inside the card rather than push it wide. */
.fa-04-destinations__city {
  max-width: 100%;
  overflow-wrap: anywhere;
}


/* --- Header placement ------------------------------------------------------
   .fa-sec__icon and .fa-sec__title already sit in adjacent cells on the
   default (non --plain) four-column header grid, so the desktop header
   needs no rule at all.

   NOTE — the design guide suggests `.fa-sec--plain` + `.fa-sec__icon` for this
   section. That combination collides in 00-base.css: --plain moves
   .fa-sec__title to grid-area 1/1, which is the cell .fa-sec__icon already
   occupies, so the aircraft would print underneath the heading. Plain
   .fa-sec is used instead — it is what .fa-sec__icon was written for
   ("occupies the same cell as __num") and it needs no override. Flagged to
   the the design guide owner rather than patched here.
   ------------------------------------------------------------------------ */

@media (max-width: 768px) {
  /* At this width 00-base.css collapses .fa-sec to `auto 1fr` and moves
     .fa-sec__rule to grid-area 1/2 — the cell .fa-sec__title still holds.
     For a numbered section the number takes column 1 and the rule lands on
     the title, drawing a hairline straight through the heading. Rather than
     restyle the shared class, this section keeps its own three-column
     header so icon | title | rule stay side by side.
     Reported as a base-sheet bug: it affects every numbered section.

     minmax(0, auto) on the title track rather than plain auto: it lets the
     track shrink past max-content so the item's own min-content minimum
     takes over and "CHOOSE YOUR DESTINATION" wraps to two lines at 375
     instead of widening the header. */
  .fa-04-destinations__head { grid-template-columns: auto minmax(0, auto) 1fr; }
  .fa-04-destinations__rule { grid-area: 1 / 3; }

  /* The link drops to its own row (base behaviour) but onto row 2, not row
     3 — this section has no .fa-sec__sub, so row 3 would leave an empty
     row and a stray row-gap. the design spec: the design is dense. */
  .fa-04-destinations__link {
    grid-area: 2 / 1 / auto / span 3;
    justify-self: start;
  }
}


/* Below ~420 the title wraps to two lines and .fa-sec__rule collapses to its
   20px min-width, leaving a gold stub floating beside the heading that reads
   as a stray dash rather than a rule. It is pure ornament (aria-hidden), so
   it is dropped rather than shown broken. */
@media (max-width: 420px) {
  .fa-04-destinations__rule { display: none; }
}


/* --- Snap rail <=760 -------------------------------------------------------
   .fa-grid--snap supplies the flex / scroll-snap / 74vw switch and the bleed
   to the panel edge, so nothing about the rail itself is restated here.

   The one adjustment: a 74vw card is far taller than a desktop column
   (roughly 277x156 at 375px against 214x120 at 1440), so the caption gets
   proportionally more breathing room and stops hugging the bottom edge.
   Deliberately 760 to match the primitive's own switch, not 768. */

@media (max-width: 760px) {
  .fa-04-destinations__caption {
    padding: var(--fa-s-5) var(--fa-s-4) var(--fa-s-4);
  }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/05-flights.css
   ========================================================================== */
/* ==========================================================================
   05 — FEATURED FLIGHTS   (the design spec, circled section 1)

   Everything structural comes from the primitives: .fa-panel, .fa-sec,
   .fa-grid--snap (6 -> 4 -> 3 -> rail), .fa-card, .fa-media, .fa-scrim,
   .fa-badge, .fa-btn. Only the four things the design spec states that no primitive
   already covers are written here:

     1. the gold frame line between thumbnail and copy well
     2. the dark gradient behind the title
     3. the 13px title / 10px .12em provider line metrics
     4. the centred PLAY NOW plaque inside the hover overlay

   No primitive is redefined and no custom property is reassigned.
   ========================================================================== */


/* --- Thumbnail ------------------------------------------------------------
   the design spec: "gold frame". The card already carries the outer gold hairline,
   so this is only the divider that closes the frame under the artwork.
   Art is 157x210 provider tiles from the 1win library, which is exactly
   --3x4, so a tile is never cropped and its baked-in title stays legible.
   Swapping in different art means matching that ratio or the titles inside
   the artwork will be cut. */
.fa-05-flights__thumb {
  /* .fa-media inherits the card's radius on all four corners, which would
     bow the divider up at both ends. Top corners only, same --fa-r the card
     uses, so the gold line reads as a straight frame edge. */
  border-radius: var(--fa-r) var(--fa-r) 0 0;
  border-bottom: 1px solid var(--fa-gold-a30);
}


/* --- Copy well ------------------------------------------------------------
   the design spec: "dark gradient behind the title". The media scrim runs into the
   top of the well so the title and provider line always sit on the darkest
   part of the card, whatever the eventual game art turns out to be. */
.fa-05-flights__body {
  gap: var(--fa-s-1);
  background: linear-gradient(180deg, var(--fa-bg), transparent 62%);
}


/* --- Title ----------------------------------------------------------------
   the design spec pins the game title at 13px. --fa-fs-h4 clamps up to 15px, which
   is too heavy in a six-up row, and --fa-fs-sm is exactly 13px — so the size
   is retuned through a token rather than a raw value, and .fa-h4 keeps the
   Cinzel 600 / ivory / uppercase it already provides. */
.fa-05-flights__title {
  font-size: var(--fa-fs-sm);
}


/* --- Provider line --------------------------------------------------------
   the design spec: 10px, .12em, --fa-muted. Nearest tokens are --fa-fs-label (10.5)
   and --fa-ls-wider (.12em, which the design guide names for provider lines).
   Measured 5.4:1 on the --fa-panel-2 card surface.
   The LIVE rows carry .fa-dot--live; the word "Live" is always present, so
   the cyan dot is never the only signal. */
.fa-05-flights__provider {
  display: flex;
  align-items: center;
  gap: var(--fa-s-1);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-muted);
}


/* --- Hover overlay --------------------------------------------------------
   the design spec: the thumbnail dims and a centred PLAY NOW fades in. Scoped to the
   .fa-media box, so the real PLAY NOW button in .fa-card__foot is never
   covered — it stays clickable for touch users, which is the whole point of
   the design spec's note. The layer is aria-hidden: it duplicates that button.
   Fade in/out is the primitive's opacity transition, which reduced-motion
   already neutralises globally.

   z-index is load-bearing, not decoration. The layer's earlier sibling
   .fa-scrim--bottom carries z-index:1 (the design guide), while .fa-card__over
   resting at opacity:0 forms its OWN stacking context — so without this the
   whole overlay, plaque included, paints beneath the bottom scrim, and then
   pops above it at the instant the transition reaches opacity:1 and the
   stacking context dissolves. Lifting the layer to 2 makes the order the
   same at rest, mid-fade and at full hover. It stays level with
   .fa-badge--pin (also 2) and loses to it on DOM order, which is what we
   want: the NEW / HOT stamp must stay legible while the overlay is up. */
.fa-05-flights__over {
  z-index: 2;                 /* .fa-card__over already supplies position:absolute */
  border-radius: inherit;
}

/* Above .fa-scrim--dim (z-index 1) inside the layer's own stacking context.
   Gold on --fa-bg-2 measures 8.6:1, so the plaque holds contrast over any
   future artwork rather than depending on the dim alone. */
.fa-05-flights__over-play {
  position: relative;
  z-index: 2;
  padding: var(--fa-s-2) var(--fa-s-3);
  font-family: var(--fa-font-ui);
  font-weight: 700;
  font-size: var(--fa-fs-label);
  line-height: 1;
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-gold);
  background: var(--fa-bg-2);
  border: 1px solid var(--fa-gold);
  border-radius: var(--fa-r-xs);
  box-shadow: var(--fa-sh-sm);
}


/* --- HOT badge contrast ---------------------------------------------------
   the design guide gives .fa-badge--hot --fa-burgundy-hi on --fa-bg-2. Measured, that
   is 4.17:1 at 9px — under the design spec's 4.5:1 floor. Lifting the same token
   toward --fa-ivory keeps it burgundy and reaches 5.7:1. Scoped to this
   section's badge only: the shared .fa-badge--hot is left untouched, and
   browsers without color-mix() fall back to the primitive's colour.
   Flagged for the the design guide owner — the token pair itself is the defect. */
.fa-05-flights__badge--hot {
  color: color-mix(in srgb, var(--fa-burgundy-hi) 78%, var(--fa-ivory));
}


/* --- Badge placement: TOP-LEFT of the thumbnail ---------------------------
   The shared .fa-badge--pin parks a stamp at the top-RIGHT of the card; here
   each NEW / HOT stamp sits at the top-LEFT corner of the game art instead, a
   few px inside the gold frame, clear of the RTP chip that reveals top-right.
   The card is the positioned ancestor and the thumbnail is its first (unpadded)
   child, so top/left offsets land inside the artwork corner. position:absolute
   is restated so the placement can never depend on cascade order — the ornament
   sheet's .fa-badge{position:relative} is already scoped off pinned badges, and
   this two-class rule outranks it regardless. */
.fa-05-flights__card .fa-badge--pin {
  position: absolute;
  top: var(--fa-s-2);
  left: var(--fa-s-2);
  right: auto;
}


/* --- RTP on hover, gold neon ----------------------------------------------
   Hovering (or focusing into) the games block reveals EVERY card's real RTP at
   once — a gold-neon chip over each thumbnail's top-right corner, clear of the
   top-left stamp and the centred PLAY NOW plaque. The dark chip keeps the neon
   legible over any artwork; the reveal is a ~200ms opacity/translate fade the
   global reduced-motion guard neutralises (it then simply appears). aria-hidden
   in the markup: a decorative hover flourish, not a hover-only affordance. */
.fa-05-flights__rtp {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-2);
  z-index: 3;                 /* over the bottom scrim (1) and PLAY NOW (2) */
  padding: 3px 7px;
  font-family: var(--fa-font-ui);
  font-weight: 700;
  font-size: var(--fa-fs-micro);
  line-height: 1;
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-gold-hi);
  background: rgba(6, 15, 31, .72);
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r-xs);
  text-shadow:
    0 0 4px rgba(240, 213, 132, .95),
    0 0 10px rgba(240, 213, 132, .55);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--fa-t) var(--fa-ease), transform var(--fa-t) var(--fa-ease);
  pointer-events: none;
}
.fa-05-flights__grid:hover .fa-05-flights__rtp,
.fa-05-flights__grid:focus-within .fa-05-flights__rtp {
  opacity: 1;
  transform: none;
}


/* --- Narrow widths --------------------------------------------------------
   <=760 the grid is already a 74vw snap rail (base, ), so no column work
   is needed here. The one thing that does not scale is the overlay plaque:
   at 375 it would crowd an 82vw thumbnail, so its padding steps down. */
@media (max-width: 375px) {
  .fa-05-flights__over-play {
    padding: var(--fa-s-1) var(--fa-s-2);
  }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/05b-livewins.css
   ========================================================================== */
/* ==========================================================================
   RECENT WINS — live feed, scoped styles (.fa-05b-livewins*). Composes
   .fa-panel + .fa-sec--plain. No :root tokens declared (the design spec).
   ========================================================================== */

.fa-05b-livewins__live {
  display: inline-flex; align-items: center; gap: var(--fa-s-2);
  margin: 0 0 var(--fa-s-3);
  font-family: var(--fa-font-ui); font-weight: 600;
  font-size: var(--fa-fs-label); letter-spacing: var(--fa-ls-label);
  text-transform: uppercase; color: var(--fa-ivory-dim);
}
.fa-05b-livewins__pulse {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--fa-green);
  animation: fa-livepulse 2.2s ease-out infinite;
}
@keyframes fa-livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 132, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.fa-05b-livewins__feed {
  list-style: none; margin: 0; padding: 0;
  background: var(--fa-panel-2);
  border: 1px solid var(--fa-line); border-radius: var(--fa-r);
  overflow: hidden;
}

.fa-05b-livewins__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  align-items: center; gap: var(--fa-s-3);
  padding: var(--fa-s-3) var(--fa-s-4);
  border-top: 1px solid var(--fa-line);
  transition: opacity .5s var(--fa-ease), transform .5s var(--fa-ease);
}
.fa-05b-livewins__row:first-child { border-top: 0; }
.fa-05b-livewins__row.is-enter { opacity: 0; transform: translateY(-10px); }

.fa-05b-livewins__who { display: inline-flex; align-items: center; gap: var(--fa-s-3); min-width: 0; }
.fa-05b-livewins__avatar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-xs);
  color: var(--fa-graphite);
  background: linear-gradient(180deg, #F0D584, #D4AF37 60%, #B8912F);
}
.fa-05b-livewins__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fa-ivory); font-weight: 600; font-size: var(--fa-fs-sm);
}
.fa-05b-livewins__game {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fa-ivory-dim); font-size: var(--fa-fs-sm);
}
.fa-05b-livewins__win {
  display: inline-flex; align-items: baseline; gap: var(--fa-s-3);
  justify-self: end; white-space: nowrap;
}
.fa-05b-livewins__amount { color: var(--fa-gold); font-weight: 700; font-size: var(--fa-fs-sm); }
.fa-05b-livewins__time { color: var(--fa-muted); font-size: var(--fa-fs-xs); }

.fa-05b-livewins__note { margin: var(--fa-s-3) 0 0; color: var(--fa-muted); font-size: var(--fa-fs-xs); }

@media (max-width: 640px) {
  .fa-05b-livewins__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "who win" "game win";
    row-gap: 2px;
  }
  .fa-05b-livewins__who { grid-area: who; }
  .fa-05b-livewins__game { grid-area: game; padding-left: calc(34px + var(--fa-s-3)); }
  .fa-05b-livewins__win { grid-area: win; flex-direction: column; align-items: flex-end; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-05b-livewins__pulse { animation: none; }
  .fa-05b-livewins__row { transition: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/06-upgrades.css
   ========================================================================== */
/* ==========================================================================
   SECTION 06 — UPGRADE YOUR JOURNEY   (the design spec)

   Scope: everything here is prefixed .fa-06-upgrades-. No primitive is
   redefined, no custom property from the design guide is reassigned, no colour /
   radius / shadow / duration is hard-coded where a token exists.

   Two things in this section genuinely cannot be expressed with the shared
   knobs and so earn scoped rules:

   1. The grid. the design spec asks for `repeat(4,1fr) 300px` — a mixed track list
      with a fixed trailing column. .fa-grid's --fa-cols knobs only produce
      equal columns, so the grid is scoped rather than bent.
   2. The promo copy plate. The four banner plates have a warm CREAM clear
      zone (the assets guide), and at the narrow card width the art is cover-cropped
      unpredictably, so neither .fa-scrim--copy nor --bottom alone can
      guarantee 4.5:1 on the copy block. .fa-06-upgrades-promo__body carries
      its own navy gradient built from the --fa-scrim-* stops, which makes
      the contrast deterministic whatever pixel lands underneath.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. GRID — the design spec: repeat(4,1fr) 300px -> 2+1 at <=1200 -> 1 col at <=760
   -------------------------------------------------------------------------- */

.fa-06-upgrades-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
  gap: var(--fa-gap-grid);
  align-items: stretch;          /* the deal panel is tallest and sets the row */
}


/* --------------------------------------------------------------------------
   2. PROMO CARD — .fa-card .fa-card--art + scoped copy plate
   -------------------------------------------------------------------------- */

.fa-06-upgrades-promo {
  min-height: 240px;
}

/* The banner plate. A real <img> rather than a CSS background so it gets
   explicit width/height (no CLS), loading="lazy" and decoding="async".
   --fa-focal is the the design guide knob for .fa-card--art, reused here for
   object-position so the art side of each 3:1 plate survives the crop. */
.fa-06-upgrades-promo__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fa-focal, center);
}

/* The copy plate. Sits above the .fa-scrim layers (they are z-index:1) and
   carries its own fade so the text never depends on where the crop landed.
   The fade reaches full --fa-scrim-1 at --fa-s-6 (24px); padding-top is
   --fa-s-7 (32px), so every glyph sits on solid navy regardless of body
   height. Measured worst case: gold on the resulting plate is ~7.4:1,
   ivory-dim ~9:1. */
.fa-06-upgrades-promo__body {
  position: relative;
  z-index: 2;
  /* .fa-card__body is flex:1 1 auto, which would stretch the plate over the
     whole card and bury the artwork. .fa-card--art already pins the body to
     the bottom with justify-content:flex-end, so here it must hug content. */
  flex: 0 0 auto;
  gap: var(--fa-s-1);
  padding-top: var(--fa-s-7);
  background: linear-gradient(180deg,
    transparent 0,
    var(--fa-scrim-1) var(--fa-s-6),
    var(--fa-scrim-1) 100%);
}

.fa-06-upgrades-promo__title {
  margin: 0;
}

.fa-06-upgrades-promo__value {
  text-wrap: balance;
}

/* .fa-xs is --fa-muted; the support line wants the brighter ivory-dim over
   artwork, and the design spec renders it uppercase. */
.fa-06-upgrades-promo__support {
  font-size: var(--fa-fs-xs);
  line-height: 1.4;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
}

.fa-06-upgrades-promo__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-2);
  padding-top: var(--fa-s-3);
}


/* --------------------------------------------------------------------------
   3. TERMS TRIGGER — a <button> wearing .fa-link, so it needs the reset
   -------------------------------------------------------------------------- */

.fa-06-upgrades-terms {
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-tight);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fa-gold-a45);
  cursor: pointer;
}

.fa-06-upgrades-terms:hover {
  text-decoration-color: var(--fa-gold);
}


/* --------------------------------------------------------------------------
   4. TODAY'S FLIGHT DEAL PANEL
   -------------------------------------------------------------------------- */

.fa-06-upgrades-deal {
  display: flex;
  min-width: 0;
}

.fa-06-upgrades-deal__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-4);
  text-align: center;
}

.fa-06-upgrades-deal__label {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-2);
}

.fa-06-upgrades-deal__label .fa-icon {
  --fa-icon-size: 14px;
}

/* Countdown row. Fixed tile width + tabular figures + a separator that never
   changes width = the digits can tick without any layout shift. */
.fa-06-upgrades-deal__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--fa-s-2);
}

.fa-06-upgrades-deal__tile {
  flex: none;
}

.fa-06-upgrades-deal__sep {
  align-self: center;
  font-family: var(--fa-font-display);
  font-size: var(--fa-fs-h3);
  line-height: 1;
  color: var(--fa-gold-dim);
}

.fa-06-upgrades-deal__offer {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-1);
}

.fa-06-upgrades-deal__value {
  text-wrap: balance;
}

.fa-06-upgrades-deal__support {
  font-size: var(--fa-fs-sm);
  line-height: 1.4;
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-gold-hi);
}

.fa-06-upgrades-deal__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fa-s-2);
  width: 100%;
}


/* --------------------------------------------------------------------------
   5. BONUS TERMS DIALOG
   Native <dialog>. showModal() gives the focus trap and Esc; the inner
   <form method="dialog"> closes it with zero JS. Padding lives on __body,
   not the dialog box, so a click landing on the dialog element itself is
   unambiguously a backdrop click.
   -------------------------------------------------------------------------- */

/* position/inset/height are restated rather than inherited from the UA sheet.
   The dialog also wears .fa-panel, whose `position: relative` is an AUTHOR
   declaration and therefore beats the UA's `dialog:modal { position: fixed }`.
   Without this the modal falls out of the viewport-centred top-layer box and
   is laid out in normal flow at the foot of the page, under an opaque
   backdrop. `height: fit-content` (the UA value, also restated) is what lets
   `margin: auto` centre it vertically — with `height: auto` and inset 0 the
   box would stretch to the full viewport height instead. */
.fa-06-upgrades-dialog {
  position: fixed;
  inset: 0;
  width: min(440px, calc(100vw - 2 * var(--fa-s-5)));
  height: fit-content;
  max-height: calc(100vh - 2 * var(--fa-s-6));
  margin: auto;
  color: var(--fa-ivory);
  overflow: auto;
}

/* Belt and braces: some resets set a display on every element. */
.fa-06-upgrades-dialog:not([open]) { display: none; }

.fa-06-upgrades-dialog::backdrop {
  background: var(--fa-scrim-2);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.fa-06-upgrades-dialog[open] {
  animation: fa-06-upgrades-dialog-in var(--fa-t) var(--fa-ease) 1;
}

@keyframes fa-06-upgrades-dialog-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.fa-06-upgrades-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  padding: var(--fa-pad-panel);
}

.fa-06-upgrades-dialog__dismiss {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-2);
  margin: 0;
}

.fa-06-upgrades-dialog__close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--fa-ivory-dim);
  background: none;
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r-circle);
  cursor: pointer;
  transition: color var(--fa-t) var(--fa-ease),
              border-color var(--fa-t) var(--fa-ease);
}

.fa-06-upgrades-dialog__close .fa-icon { --fa-icon-size: 14px; }

.fa-06-upgrades-dialog__close:hover {
  color: var(--fa-gold);
  border-color: var(--fa-gold);
}

/* keep the heading clear of the close control */
.fa-06-upgrades-dialog__body > .fa-h3 { padding-right: var(--fa-s-8); }


/* ==========================================================================
   6. BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375
   No horizontal page overflow at any of them; nothing in this section
   scrolls sideways.
   ========================================================================== */

/* --- <=1200 : the design spec "2+1". Four promos become 2x2, the deal panel keeps
       its 300px column and spans both rows. ---------------------------------- */
@media (max-width: 1200px) {
  .fa-06-upgrades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 300px;
  }
  .fa-06-upgrades-deal {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  /* spanning two card rows leaves a tall column: spread the four blocks
     through it instead of clumping them in the middle */
  .fa-06-upgrades-deal__inner {
    justify-content: space-evenly;
    gap: var(--fa-s-5);
  }
}

/* --- <=980 : a fixed 300px column would eat ~40% of the row. The deal panel
       drops to a full-width band under the 2x2 and lays out horizontally, so
       it stays dense rather than becoming a tall empty box. ------------------ */
@media (max-width: 980px) {
  .fa-06-upgrades-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fa-06-upgrades-deal {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .fa-06-upgrades-deal__inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--fa-s-5);
  }
  .fa-06-upgrades-deal__foot {
    width: auto;
    min-width: 200px;
  }
}

/* --- <=768 : SECTION-SCOPED REPAIR OF A BASE-SHEET BUG --------------------
   00-base.css (~line 1693) collapses .fa-sec to `auto 1fr` at this width and
   moves .fa-sec__rule to grid-area 1/2 — but .fa-sec__title still holds 1/2.
   For any numbered header the number takes column 1 and the gold rule is
   drawn straight through the heading. Reproduced at 768 and 375.

   Per the design guide rule 1 the shared class is NOT restyled: every selector here
   is scoped under .fa-06-upgrades, so nothing outside this section changes.
   The base sheet still needs the same fix globally — it affects every
   numbered section — and that is reported to the the design guide owner.

   minmax(0, auto) on the title track, not plain auto: a plain auto track is
   floored at max-content and would refuse to let the title wrap at 375. --- */
@media (max-width: 768px) {
  .fa-06-upgrades .fa-sec       { grid-template-columns: auto minmax(0, auto) 1fr; }
  .fa-06-upgrades .fa-sec__rule { grid-area: 1 / 3; }
  .fa-06-upgrades .fa-sec__sub  { grid-area: 2 / 1 / auto / span 3; }
}

/* --- <=760 : the design spec single column. The deal panel returns to a stack. ----- */
@media (max-width: 760px) {
  .fa-06-upgrades-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fa-06-upgrades-deal__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--fa-s-4);
  }
  .fa-06-upgrades-deal__foot {
    width: 100%;
    min-width: 0;
  }
  .fa-06-upgrades-promo {
    min-height: 200px;
  }
}

/* --- <=375 : tighten the tiles so HRS : MIN : SEC never wraps -------------- */
@media (max-width: 375px) {
  .fa-06-upgrades-deal__clock { gap: var(--fa-s-1); }
  .fa-06-upgrades-promo { min-height: 184px; }
}


/* ==========================================================================
   7. REDUCED MOTION (the design spec)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fa-06-upgrades-dialog[open] { animation: none; }
  .fa-06-upgrades-dialog__close { transition: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/07-wheel.css
   ========================================================================== */
/* ==========================================================================
   SECTION 07 — FORTUNE WHEEL  (the design spec, circled number 3)

   Composes: .fa-panel .fa-sec .fa-btn .fa-chip .fa-row .fa-lead .fa-fine
             .fa-icon, and the #i-wings-clover / #i-spin / #i-chevron-right
             sprite symbols.

   Everything below is scoped to .fa-07-wheel-*. No primitive is redefined,
   no custom property is reassigned, no `outline` is touched.

   COLOUR NOTE — the design spec vs the design spec, resolved in favour of 
   the design spec asks for "12 alternating gold / teal / ivory / burgundy segments",
   which on a strict four-colour cycle is THREE burgundy wedges. the design spec is
   explicit twice over: burgundy is for "HOT badges, urgent promos ONLY" and
   "appears at most 2x on the page" — and the design spec itself already spends both
   slots ( CLAIM BONUS,  HOT badge). the design guide ("if you need a third,
   you are wrong") and the  checklist enforce the same cap.
    is also the one section the design spec says is NOT transcribed from a screenshot
   ("client requirement — not in the screenshots, design it in-style"), so its
   colour list is authorial suggestion, not observed fact, and "in-style"
   means obeying the palette law.
   Resolution: alternate gold / teal / ivory, and paint the single non-award
   wedge — TRY AGAIN — in --fa-graphite, the token whose documented job is
   "matte graphite, inactive". The wheel still reads as four colours, the
   non-award segment is still visually marked, and burgundy stays at 2 uses
   page-wide. No sign-off needed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LAYOUT
   the design spec: full-width panel, two columns (art left ~420px, copy right),
   stacks at <=860. The clamp reaches 420px at 1440 and eases down on its own
   through 1280 / 1024, so no extra breakpoint is needed above the stack.
   -------------------------------------------------------------------------- */

.fa-07-wheel-grid {
  display: grid;
  /* Structure is the design spec's, literally: art track first at ~420px, copy track
     second filling the rest. The art column stays hard-left — the pair is
     NOT centred, because the design spec says "art left ... copy right" and the design guide's
     binding order puts the design spec above a builder's taste. */
  grid-template-columns: clamp(260px, 32vw, 420px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--fa-s-5), 3vw, var(--fa-s-8));
}

.fa-07-wheel-copy {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-4);
  min-width: 0;
  /* The track fills, but the copy inside it stops at a readable measure
     rather than running a 75-character sentence across ~940px at 1440. */
  max-width: 620px;
}


/* --------------------------------------------------------------------------
   2. STAGE
   The wheel sits on a soft gold halo so the navy face separates from the
   navy panel. Purely decorative, and it only brightens — never moves.
   -------------------------------------------------------------------------- */

.fa-07-wheel-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.fa-07-wheel-stage::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  border-radius: var(--fa-r-circle);
  background: radial-gradient(circle at 50% 50%, var(--fa-gold-a12) 0%, transparent 68%);
  opacity: .7;
  pointer-events: none;
  transition: opacity var(--fa-t-slow) var(--fa-ease);
}

.fa-07-wheel-grid.is-spinning .fa-07-wheel-stage::before { opacity: 1; }

.fa-07-wheel-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* --fa-sh-lg is 0 10px 30px rgba(0,0,0,.45) — the same triple drop-shadow()
     takes, so the token is used rather than restating the value. */
  filter: drop-shadow(var(--fa-sh-lg));
}


/* --------------------------------------------------------------------------
   3. THE ROTOR
   The shared runtime writes `transform: rotate(Ndeg)` and the transition
   inline. All this rule owns is the pivot: without an explicit origin the
   default box would put it at the element's top-left corner, not the axle.
   transform-box:view-box makes 50% 50% resolve against the 400x400 viewBox,
   i.e. exactly (200,200), regardless of the rendered pixel size.
   -------------------------------------------------------------------------- */

.fa-07-wheel-rotor {
  transform-box: view-box;
  transform-origin: 50% 50%;
  will-change: transform;
  /* Rest position only. Segment i is drawn spanning 30i..30i+30, so at 0deg
     the pointer would straddle the seam between segment 11 and segment 0 and
     read as broken. Half a segment back parks segment 0's centre under the
     pointer. The runtime writes an inline transform for every spun or
     restored state, which overrides this. */
  transform: rotate(-15deg);
}


/* --------------------------------------------------------------------------
   4. SEGMENTS
   Wedge fill / label colour are paired so every label clears 4.5:1 against
   the wedge it actually sits on:
     gold #D4AF37     + navy  #0B123B  ->  9.3:1
     teal #0B3D46     + ivory #F5EBD4  -> 10.0:1
     ivory #F5EBD4    + navy  #0B123B  -> 15.2:1
     graphite #1C2541 + ivory #F5EBD4  -> 12.6:1
   -------------------------------------------------------------------------- */

.fa-07-wheel-wedge {
  stroke: var(--fa-bg-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.fa-07-wheel-seg-label {
  font-family: var(--fa-font-ui);
  font-weight: 700;
  font-size: 14px;              /* user units — scales with the viewBox */
  letter-spacing: .06em;
}

.fa-07-wheel-seg--gold     .fa-07-wheel-wedge      { fill: var(--fa-gold); }
.fa-07-wheel-seg--gold     .fa-07-wheel-seg-label  { fill: var(--fa-bg-2); }

.fa-07-wheel-seg--teal     .fa-07-wheel-wedge      { fill: var(--fa-teal); }
.fa-07-wheel-seg--teal     .fa-07-wheel-seg-label  { fill: var(--fa-ivory); }

.fa-07-wheel-seg--ivory    .fa-07-wheel-wedge      { fill: var(--fa-ivory); }
.fa-07-wheel-seg--ivory    .fa-07-wheel-seg-label  { fill: var(--fa-bg-2); }

.fa-07-wheel-seg--graphite .fa-07-wheel-wedge      { fill: var(--fa-graphite); }
.fa-07-wheel-seg--graphite .fa-07-wheel-seg-label  { fill: var(--fa-ivory); }


/* --------------------------------------------------------------------------
   5. HOUSING — navy face, beaded gold rim, winged-clover hub, gold pointer
   The lamp dots are a dashed stroke with round caps: 24 beads spaced
   2*PI*181/24 = 47.386 units apart. One circle instead of 24 elements.
   -------------------------------------------------------------------------- */

.fa-07-wheel-face { fill: var(--fa-bg-2); }

.fa-07-wheel-edge {
  fill: none;
  stroke: var(--fa-gold-a45);
  stroke-width: 1.5;
}

.fa-07-wheel-band {
  fill: none;
  stroke: url(#fa-07-wheel-rim-grad);
  stroke-width: 14;
}

.fa-07-wheel-lamps {
  fill: none;
  stroke: var(--fa-gold-hi);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1 46.386;
}

.fa-07-wheel-ring {
  fill: none;
  stroke: var(--fa-gold);
  stroke-width: 2;
}

/* the design spec metallic recipe, expressed through the tokens rather than hexes. */
.fa-07-wheel-stop-1 { stop-color: var(--fa-gold-hi); }
.fa-07-wheel-stop-2 { stop-color: var(--fa-gold); }
.fa-07-wheel-stop-3 { stop-color: var(--fa-gold-mid); }
.fa-07-wheel-stop-4 { stop-color: var(--fa-gold-lo); }

.fa-07-wheel-hub-disc {
  fill: var(--fa-bg-2);
  stroke: var(--fa-gold);
  stroke-width: 2;
}

.fa-07-wheel-hub-ring {
  fill: none;
  stroke: var(--fa-gold-a45);
  stroke-width: 1;
}

/* The sprite symbol paints itself with currentColor, so it takes `color`. */
.fa-07-wheel-hub-mark { color: var(--fa-gold); }

.fa-07-wheel-dart,
.fa-07-wheel-dart-cap {
  fill: url(#fa-07-wheel-rim-grad);
  stroke: var(--fa-gold-deep);
  stroke-width: 1.5;
  stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   6. COPY COLUMN
   -------------------------------------------------------------------------- */

.fa-07-wheel-pills {
  --fa-row-gap: var(--fa-s-2);
  list-style: none;
  padding: 0;
}

.fa-07-wheel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fa-s-3);
}

/* The result line. min-height reserves the row before the first spin so the
   announcement cannot shove the small print down the page. */
.fa-07-wheel-result {
  display: flex;
  align-items: center;
  min-height: calc(1.5em + var(--fa-s-4));
  padding-inline-start: var(--fa-s-3);
  border-inline-start: 2px solid var(--fa-gold-a45);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-lead);
  line-height: 1.5;
  color: var(--fa-ivory);
}

/* Before the first spin the row still occupies its space — it just must not
   draw an orphan rule under the button. */
.fa-07-wheel-result:empty { border-inline-start-color: transparent; }


/* --------------------------------------------------------------------------
   7. BREAKPOINTS — verified 1440 / 1280 / 1024 / 768 / 375
   Only the stack at 860 (the design spec) is a real change; the columns above it are
   handled by the clamp. Nothing here scrolls horizontally.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .fa-07-wheel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fa-s-5);
  }

  .fa-07-wheel-stage { max-width: 360px; }

  /* Stacked, the copy owns the full width — a 620px block left of an
     auto-centred wheel would read as a misalignment. */
  .fa-07-wheel-copy { max-width: none; }
}

@media (max-width: 375px) {
  .fa-07-wheel-stage { max-width: 300px; }

  /* Two full-width CTAs read better than two cramped half-width ones. */
  .fa-07-wheel-controls > .fa-btn { flex: 1 1 100%; }
}


/* --------------------------------------------------------------------------
   8. REDUCED MOTION (the design spec + )
   The runtime already skips the spin animation and jumps straight to the
   result when the user asks for reduced motion; base neutralises transition
   durations globally. This belt-and-braces rule guarantees the halo cannot
   animate even if the rotor is placed without the runtime.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fa-07-wheel-stage::before { transition: none !important; }
  .fa-07-wheel-rotor { will-change: auto; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/08-map-challenge.css
   ========================================================================== */
/* ==========================================================================
   SECTION 08 — ROUTE MAP + FLIGHT CHALLENGE   (the design spec)

   Composes the the design guide primitives: .fa-panel (+ --inset), .fa-sec, .fa-btn,
   .fa-tabs, .fa-stat, .fa-chip--rank-*, .fa-label, .fa-tnum, .fa-sr-only.
   Everything below is scoped .fa-08-map-challenge* and describes only what is
   genuinely specific to this section: the SVG map plate, the six route pins,
   the map tooltip and the leaderboard table.

   No primitive is redefined and no custom property is reassigned. The two
   inline knobs --fa-08-map-x / --fa-08-map-y are section-owned, set per pin
   in the markup, and read only here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE TWO-PANEL SHELL
   the design spec: grid-template-columns: 1.15fr .85fr, stacking at <=1000px.
   minmax(0,…) so a wide table or a long city name can never blow the column
   out and start a horizontal page scroll.
   -------------------------------------------------------------------------- */

.fa-08-map-challenge {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--fa-gap-sec);
}

/* Column children are flex so both panels reach the same height and the map
   panel's footer row can be pushed to the bottom. */
.fa-08-map-challenge__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* --------------------------------------------------------------------------
   2. THE MAP PLATE
   A dark inset board inside the panel. Its own background is the darkest
   surface on the page, so the pin labels that sit over the coastline art
   clear 4.5:1 comfortably (they also carry their own scrim — see __tag).
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__plate {
  position: relative;
  overflow: hidden;
  padding: var(--fa-s-4) var(--fa-s-6) var(--fa-s-5);
  background: var(--fa-bg);
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r);
}

.fa-08-map-challenge__stage { position: relative; }

.fa-08-map-challenge__map {
  width: 100%;
  height: auto;
  aspect-ratio: 50 / 23;      /* matches the viewBox — no letterboxing */
}

/* Gradient stops as real CSS so the plate is token-driven, not hard-coded. */
.fa-08-map-challenge__sea-a { stop-color: var(--fa-panel-2); }
.fa-08-map-challenge__sea-b { stop-color: var(--fa-bg); }

.fa-08-map-challenge__grid {
  fill: none;
  stroke: var(--fa-gold-a08);
  stroke-width: 1;
}

.fa-08-map-challenge__land {
  fill: var(--fa-gold-a08);
  stroke: var(--fa-gold-a45);
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.fa-08-map-challenge__lights { fill: var(--fa-gold-a60); }


/* --------------------------------------------------------------------------
   3. ROUTES
   Dotted great-circle legs. `.is-lit` / `.is-flying` are added by the runtime
   routeMap initialiser when the owning pin is hovered or focused; `is-flying`
   is withheld entirely under prefers-reduced-motion, and the @media block at
   the foot of this file is the belt to that braces.
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__route {
  fill: none;
  stroke: var(--fa-gold-a45);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 8;
  transition:
    stroke var(--fa-t) var(--fa-ease),
    stroke-width var(--fa-t) var(--fa-ease);
}

.fa-08-map-challenge__route.is-lit {
  stroke: var(--fa-gold-hi);
  stroke-width: 2.4;
}

.fa-08-map-challenge__route.is-flying {
  animation: fa-08-map-challenge-fly 900ms linear infinite;
}

@keyframes fa-08-map-challenge-fly {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

.fa-08-map-challenge__planes {
  color: var(--fa-gold-hi);
  opacity: .8;
}


/* --------------------------------------------------------------------------
   4. DECORATIVE PROPS (the assets guide )
   Both are ornament with alt="". They sit over empty ocean, clear of every
   pin and route, and drop out below 1000px where the plate is too small to
   carry them.
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__globe,
.fa-08-map-challenge__prop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.fa-08-map-challenge__globe {
  top: var(--fa-s-4);
  left: var(--fa-s-3);
  width: clamp(64px, 7vw, 92px);
  height: auto;
  opacity: .62;
}

.fa-08-map-challenge__prop {
  top: 62%;
  left: 62%;
  width: clamp(70px, 7vw, 104px);
  height: auto;
  opacity: .45;
}


/* --------------------------------------------------------------------------
   5. PINS
   Each pin is a real <button> laid over the plate at --fa-08-map-x/y. The
   dot is centred exactly on the coordinate; the label hangs below it (or
   above it, for --up, where a neighbour would collide).
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__pin {
  position: absolute;
  left: var(--fa-08-map-x, 50%);
  top: var(--fa-08-map-y, 50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.fa-08-map-challenge__dot {
  width: 9px;
  height: 9px;
  background: var(--fa-gold);
  border: 1px solid var(--fa-gold-hi);
  border-radius: var(--fa-r-circle);
  box-shadow: var(--fa-glow-gold);
  transition:
    background var(--fa-t) var(--fa-ease),
    transform var(--fa-t) var(--fa-ease);
}

.fa-08-map-challenge__pin:hover .fa-08-map-challenge__dot,
.fa-08-map-challenge__pin:focus-visible .fa-08-map-challenge__dot,
.fa-08-map-challenge__pin.is-lit .fa-08-map-challenge__dot {
  background: var(--fa-gold-hi);
  transform: scale(1.35);
}

/* A 0%-complete pin reads as an unvisited outline, never as a colour-only
   difference: the "0%" is real text right beside it. */
.fa-08-map-challenge__pin--none .fa-08-map-challenge__dot {
  background: var(--fa-graphite);
  border-color: var(--fa-gold-a60);
  box-shadow: none;
}

/* The label block. --fa-scrim-2 guarantees the text keeps 4.5:1 wherever a
   coastline or a route happens to pass beneath it. Fixed width so a two-word
   city name wraps instead of colliding with its neighbour. */
.fa-08-map-challenge__tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 78px;
  padding: 3px 4px;
  background: var(--fa-scrim-2);
  border-radius: var(--fa-r-xs);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.fa-08-map-challenge__pin--up .fa-08-map-challenge__tag {
  top: auto;
  bottom: calc(100% + 4px);
}

/* The runtime raises its tooltip above the pin. For pins whose own tag also
   sits above, the gold tooltip simply replaces it rather than covering it —
   same two facts, one of them at a time. Pins tagged below keep both. */
.fa-08-map-challenge__pin--up:hover .fa-08-map-challenge__tag,
.fa-08-map-challenge__pin--up.is-lit .fa-08-map-challenge__tag {
  opacity: 0;
  transition: opacity var(--fa-t-fast) var(--fa-ease);
}

.fa-08-map-challenge__city {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-micro);
  line-height: 1.25;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
}

.fa-08-map-challenge__pct {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-label);
  line-height: 1;
  color: var(--fa-gold-hi);
}

.fa-08-map-challenge__pin--done .fa-08-map-challenge__pct { color: var(--fa-green); }
.fa-08-map-challenge__pin--none .fa-08-map-challenge__pct { color: var(--fa-muted); }

.fa-08-map-challenge__pin:hover .fa-08-map-challenge__city,
.fa-08-map-challenge__pin:focus-visible .fa-08-map-challenge__city,
.fa-08-map-challenge__pin.is-lit .fa-08-map-challenge__city { color: var(--fa-ivory); }


/* --------------------------------------------------------------------------
   6. TOOLTIP
   Filled and positioned by the runtime; aria-hidden because the pin's own
   accessible name already carries both the city and the percentage.
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__tip {
  position: absolute;
  z-index: 4;
  display: block;
  padding: 4px 9px;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fa-bg-2);
  background: linear-gradient(180deg, var(--fa-gold-hi), var(--fa-gold));
  border: 1px solid var(--fa-gold-deep);
  border-radius: var(--fa-r-xs);
  box-shadow: var(--fa-sh);
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   7. MAP PANEL FOOTER — CTA bottom-left, YOUR PROGRESS inset bottom-right
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-4);
  margin-top: auto;
  padding-top: var(--fa-s-4);
}

.fa-08-map-challenge__progress {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  flex: 1 1 280px;
  max-width: 340px;
}

.fa-08-map-challenge__figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s-3) var(--fa-s-5);
}

.fa-08-map-challenge__progress .fa-btn { align-self: flex-start; }


/* --------------------------------------------------------------------------
   8. FLIGHT CHALLENGE — PRIZE POOL TAB
   -------------------------------------------------------------------------- */

.fa-08-map-challenge__tabs { flex: 1 1 auto; }

/* flex:1 on the panel and the cup so the shorter tab still fills the height
   the taller route-map panel sets for the row — no dead space under the CTA. */
.fa-08-map-challenge__tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-4);
  flex: 1 1 auto;
}

.fa-08-map-challenge__cup {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-3);
  padding: var(--fa-s-4) var(--fa-s-3) var(--fa-s-5);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--fa-gold-a12), transparent 62%),
    var(--fa-graphite);
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r);
}

/* the assets guide defect 5: the trophy is cropped just below its plinth, so the
   base is faded out rather than left floating on a hard cut. */
.fa-08-map-challenge__trophy {
  width: clamp(92px, 11vw, 134px);
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 100%);
}

.fa-08-map-challenge__cup-title {
  text-transform: uppercase;
  letter-spacing: var(--fa-ls-wide);
}

.fa-08-map-challenge__ends {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
}

.fa-08-map-challenge__cd {
  color: var(--fa-gold-hi);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   9. FLIGHT CHALLENGE — LEADERBOARD TAB
   -------------------------------------------------------------------------- */

/* No border-radius / overflow clipping here: a collapsed-border <table> does
   not clip reliably to a radius, and a wrapper div purely to round the
   corners would add a scroll container the section does not need. */
.fa-08-map-challenge__board { table-layout: fixed; }

.fa-08-map-challenge__board th,
.fa-08-map-challenge__board td {
  padding: var(--fa-s-2) var(--fa-s-3);
  text-align: left;
  vertical-align: middle;
}

.fa-08-map-challenge__board th {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-muted);
  border-bottom: 1px solid var(--fa-line);
}

.fa-08-map-challenge__board th:first-child,
.fa-08-map-challenge__board td:first-child { width: 52px; }

/* Zebra striping on --fa-panel-2, per the design spec */
.fa-08-map-challenge__board tbody tr:nth-child(odd) { background: var(--fa-panel-2); }

.fa-08-map-challenge__pilot {
  font-size: var(--fa-fs-sm);
  font-weight: 500;
  color: var(--fa-ivory);
  overflow-wrap: anywhere;
}

.fa-08-map-challenge__pts-h,
.fa-08-map-challenge__pts { text-align: right; }

.fa-08-map-challenge__pts {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-sm);
  color: var(--fa-gold-hi);
}

/* Ranks 4 and 5 carry no medal, so they are plain figures rather than a
   .fa-chip--rank with no colour modifier (which would put navy text on a
   graphite plate). */
.fa-08-map-challenge__rank {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 3px 6px;
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-label);
  line-height: 1.4;
  color: var(--fa-ivory-dim);
  border: 1px solid var(--fa-line);
  border-radius: var(--fa-r-xs);
}

.fa-08-map-challenge__board-foot { margin-top: auto; }


/* --------------------------------------------------------------------------
   10. BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375
   -------------------------------------------------------------------------- */

/* The plate loses its wide side gutters first — the map keeps its size. */
@media (max-width: 1280px) {
  .fa-08-map-challenge__plate { padding: var(--fa-s-3) var(--fa-s-5) var(--fa-s-4); }
}

/* The aircraft prop is calibrated to a wide plate: once the map column is
   narrow it sits on top of Australia and the Sydney leg, so it goes first. */
@media (max-width: 1180px) {
  .fa-08-map-challenge__prop { display: none; }
}

/* the design spec: the two panels stack at <=1000px. */
@media (max-width: 1000px) {
  .fa-08-map-challenge { grid-template-columns: minmax(0, 1fr); }

  .fa-08-map-challenge__globe { display: none; }
}

/* Below 700px the plate is too narrow for six labelled pins. The SAME DOM is
   restyled: the pin buttons leave the map and flow beneath it as a legend, so
   every city and percentage stays visible, every pin stays a real button, and
   hovering or focusing one still illuminates its route on the map above. */
@media (max-width: 700px) {
  .fa-08-map-challenge__pins {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fa-s-2);
    margin-top: var(--fa-s-3);
  }

  .fa-08-map-challenge__pin {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: var(--fa-s-2);
    width: auto;
    height: auto;
    padding: 5px 10px;
    /* --fa-panel-2, not --fa-graphite: the green "100%" and the muted "0%"
       both clear 4.5:1 on it, and graphite leaves the green at 4.47:1. */
    background: var(--fa-panel-2);
    border: 1px solid var(--fa-gold-a22);
    border-radius: var(--fa-r-pill);
    transform: none;
  }

  .fa-08-map-challenge__tag {
    position: static;
    display: inline-flex;
    align-items: baseline;
    gap: var(--fa-s-2);
    width: auto;
    padding: 0;
    background: none;
    transform: none;
  }

  /* The tooltip only makes sense anchored to a pin on the plate. With it gone
     the --up "fade my tag, the tooltip replaces it" trade is off: a legend
     chip must keep its own text on hover and focus. */
  .fa-08-map-challenge__tip { display: none; }

  .fa-08-map-challenge__pin--up:hover .fa-08-map-challenge__tag,
  .fa-08-map-challenge__pin--up.is-lit .fa-08-map-challenge__tag { opacity: 1; }

  .fa-08-map-challenge__foot { align-items: stretch; }
  .fa-08-map-challenge__progress { max-width: none; }
}

@media (max-width: 375px) {
  .fa-08-map-challenge__plate { padding: var(--fa-s-2) var(--fa-s-3) var(--fa-s-3); }

  .fa-08-map-challenge__board th,
  .fa-08-map-challenge__board td { padding: var(--fa-s-2) var(--fa-s-2); }

  .fa-08-map-challenge__board th:first-child,
  .fa-08-map-challenge__board td:first-child { width: 44px; }

  .fa-08-map-challenge__figures { gap: var(--fa-s-3); }
}


/* --------------------------------------------------------------------------
   11. REDUCED MOTION (the design spec)
   The runtime already withholds `is-flying` when the user asks for reduced
   motion; this makes the end state unconditional, so a route illuminates
   without ever animating.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fa-08-map-challenge__route.is-flying { animation: none !important; }

  .fa-08-map-challenge__pin:hover .fa-08-map-challenge__dot,
  .fa-08-map-challenge__pin:focus-visible .fa-08-map-challenge__dot,
  .fa-08-map-challenge__pin.is-lit .fa-08-map-challenge__dot { transform: none !important; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/09-miles-vip.css
   ========================================================================== */
/* ==========================================================================
   SECTION 09 — FORTUNE MILES ( 6 ) + VIP CLUB ( 7 )          the design spec

   Composes the shared primitives from docs/the design guide:
     .fa-panel (+ --inset --tight) · .fa-sec · .fa-stat · .fa-btn · .fa-link
     .fa-card (+ --graphite --flat) · .fa-chip (+ --gold --sm) · .fa-rail
     .fa-medallion · .fa-progress (+ --thick) · .fa-label · .fa-icon · .fa-row

   Everything below is genuinely specific to this section: the two-panel
   split, the reward-tile interior, the perk row and the status inset.
   No primitive is redefined and no custom property is declared.
   Loads AFTER css/00-base.css, so same-specificity scoped classes win.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE TWO-PANEL SPLIT
   the design spec: "Two panels side by side (1fr 1fr, stack <=1000)."
   The wrapper is a plain grid, not a panel — each half is its own .fa-panel
   so both keep the standard gold-hairline section treatment.
   -------------------------------------------------------------------------- */

.fa-09-miles-vip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fa-gap-sec);
}

/* min-width:0 — without it a long Cinzel value or the rail's scroll width
   can force the grid column wider than its share and push the page into a
   horizontal scroll (the design spec forbids that at every breakpoint). */
.fa-09-miles-vip__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The VIP panel carries more content, and the grid stretches both halves to
   match it. Rather than leave a block of dead space under the miles rail,
   the balance + rail pair takes the slack as symmetric auto margins and
   centres in it. The section header stays pinned at the top. */
.fa-09-miles-vip__miles-body { margin-block: auto; }


/* --------------------------------------------------------------------------
   2. FORTUNE MILES — balance block
   Clover mark + 12,450 + caption on the left, AIR SHOP on the right.
   .fa-row--between does the split; this only owns the rhythm beneath it.
   -------------------------------------------------------------------------- */

.fa-09-miles-vip__balance {
  margin-bottom: var(--fa-s-4);
  row-gap: var(--fa-s-3);
}


/* --------------------------------------------------------------------------
   3. FORTUNE MILES — reward rail
   Five graphite tiles, icon over the tile, gold price chip beneath.
   The rail itself, its snap behaviour and the round gold chevron all come
   from .fa-rail; only the slide width and the tile interior are ours.
   -------------------------------------------------------------------------- */

.fa-09-miles-vip__rail { --fa-rail-item: 150px; }

/* Equal-height tiles: .fa-rail__item stretches, the card must fill it. */
.fa-09-miles-vip__reward { height: 100%; }

.fa-09-miles-vip__reward-body {
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-2);
  text-align: center;
}


/* --------------------------------------------------------------------------
   4. VIP CLUB — perk medallions
   the design spec: five 56px gold-ringed medallions IN A ROW with a caption each.
   Five fixed tracks, not auto-fit: auto-fit reflowed to 4 + 1 orphan through
   the 1001-1180px band (the panel is only ~460px there), and 1024 is one of
   the five mandated breakpoints, so that band shipped against the the design spec.
   The squeeze is the caption, never the 56px medallion — five tracks at that
   width are ~84px while EXCLUSIVE TOURNAMENTS wants ~88px. The caption rule
   below plus the tight-band rule in section 6 absorb it and the row stays
   five wide down to 521px, below which it is allowed to reflow.
   -------------------------------------------------------------------------- */

.fa-09-miles-vip__perks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fa-s-4) var(--fa-s-2);
  margin-bottom: var(--fa-s-5);
}

/* Scoped, so .fa-label itself is never redefined (the design guide rule 1).
   .12em is the the design specD node-label tracking, not a new value, and the two
   break properties stop TOURNAMENTS / PROMOTIONS spilling into the
   neighbouring track at the narrowest five-up width. */
.fa-09-miles-vip__perk-cap {
  max-width: 100%;                 /* a centred flex item otherwise takes its
                                      max-content width and overhangs the
                                      track, which is what break-word needs
                                      constraining before it can act */
  letter-spacing: var(--fa-ls-wider);
  overflow-wrap: break-word;
  hyphens: auto;
}

.fa-09-miles-vip__perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fa-s-2);
  min-width: 0;
  text-align: center;
}


/* --------------------------------------------------------------------------
   5. VIP CLUB — teaser + YOUR STATUS inset
   the design spec places the status as a right-hand inset with the Frequent Flyer
   teaser beneath the perks beside it. DOM order matches the visual order
   (teaser then status) so the reading sequence and the layout agree.
   -------------------------------------------------------------------------- */

.fa-09-miles-vip__vip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--fa-s-4);
  align-items: start;
}

.fa-09-miles-vip__teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-2);
  min-width: 0;
}

.fa-09-miles-vip__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fa-s-2);
  min-width: 0;
  text-align: center;
}

/* The bar and its caption span the inset; .fa-progress is a block, but the
   flex column would otherwise shrink both to content width. */
.fa-09-miles-vip__status .fa-progress,
.fa-09-miles-vip__status .fa-progress__cap { align-self: stretch; }

/* Winged clover badge. the assets guide defect 3: the plate carries a stray
   crescent of wheel rim across its top edge — clipped off here rather than
   editing the client's artwork. Decorative, so alt="". */
.fa-09-miles-vip__badge {
  width: 64px;
  height: auto;
  margin-top: var(--fa-s-1);
  clip-path: inset(12% 0 0 0);
}

.fa-09-miles-vip__status-name { margin-top: calc(var(--fa-s-1) * -1); }


/* --------------------------------------------------------------------------
   6. BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375
   -------------------------------------------------------------------------- */

/* the design spec: the two panels stack at <=1000px. */
@media (max-width: 1000px) {
  .fa-09-miles-vip { grid-template-columns: minmax(0, 1fr); }
}

/* The tight five-up band. Two things make the perk tracks narrowest here:
   from 1001-1180px the VIP panel is still only half a narrow viewport, and
   just above 520px it is full width but the viewport itself is small. In
   both the tracks fall to ~86-98px against an EXCLUSIVE TOURNAMENTS that
   wants ~86px at .12em, and the word breaks mid-syllable.
   Reclaiming the column gap (the 56px medallion already leaves the tracks
   visually separated) and stepping the tracking down one token to .10em
   sets the word on one line and keeps the row five wide, per the design spec */
@media (min-width: 521px) and (max-width: 1180px) {
  .fa-09-miles-vip__perks { column-gap: 0; }

  .fa-09-miles-vip__perk-cap { letter-spacing: var(--fa-ls-wide); }
}

/* Below ~520px five perks across stop working: the tracks fall under ~86px,
   which is the set width of EXCLUSIVE TOURNAMENTS even at the tightest
   tracking, so the word would break mid-syllable. This is the one place the
   row is allowed to reflow — 375px lands here and gives a clean 3 + 2. */
@media (max-width: 520px) {
  .fa-09-miles-vip__perks { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
}

/* Below ~480px the status inset can no longer hold a legible column beside
   the teaser: one column instead of two cramped ones. */
@media (max-width: 480px) {
  .fa-09-miles-vip__vip-grid { grid-template-columns: minmax(0, 1fr); }

  .fa-09-miles-vip__rail { --fa-rail-item: 140px; }
}


/* --------------------------------------------------------------------------
   7. REDUCED MOTION
   This section introduces no animation of its own — the only movement is the
   shared rail scroll, which 00-base.css and the runtime already neutralise.
   The rule below is a belt-and-braces guard for the rail's smooth scrolling.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fa-09-miles-vip__rail .fa-rail__track { scroll-behavior: auto; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/09b-bonus-hub.css
   ========================================================================== */
/* ==========================================================================
   REWARDS TERMINAL (Bonus Hub) — scoped styles (.fa-09b-bonus-hub*).
   Composes .fa-panel/.fa-card/.fa-btn/.fa-chip/.fa-label. Self-contained
   progress bars (no dependency on the .fa-progress primitive internals).
   No :root tokens declared.
   ========================================================================== */

.fa-09b-bonus-hub__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--fa-gap-grid);
  align-items: stretch;
}
@media (max-width: 900px) { .fa-09b-bonus-hub__top { grid-template-columns: 1fr; } }

.fa-09b-bonus-hub__daily,
.fa-09b-bonus-hub__status {
  display: flex; flex-direction: column;
  padding: var(--fa-s-5);
}

/* --- Daily Boarding Pass --- */
.fa-09b-bonus-hub__daily {
  gap: var(--fa-s-3);
  background: radial-gradient(120% 140% at 50% 0%, var(--fa-panel-2), var(--fa-panel) 72%);
  border-color: var(--fa-gold-a30);
}
.fa-09b-bonus-hub__tag { align-self: flex-start; }
.fa-09b-bonus-hub__daily-h { margin: 0; color: var(--fa-ivory); }
.fa-09b-bonus-hub__reward {
  margin: 0;
  font-family: var(--fa-font-display); font-weight: 700;
  font-size: var(--fa-fs-h2); letter-spacing: var(--fa-ls);
  color: var(--fa-gold);
}
.fa-09b-bonus-hub__daily-sub { margin: 0; color: var(--fa-ivory-dim); line-height: var(--fa-lh-body); }
.fa-09b-bonus-hub__claim { margin-top: auto; }
.fa-09b-bonus-hub__claim[disabled] { opacity: .55; cursor: not-allowed; }
.fa-09b-bonus-hub__timer { margin: var(--fa-s-2) 0 0; text-align: center; color: var(--fa-muted); }

/* --- Status: XP + streak --- */
.fa-09b-bonus-hub__status { gap: var(--fa-s-5); justify-content: center; }
.fa-09b-bonus-hub__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--fa-s-3); margin-bottom: var(--fa-s-2);
}
.fa-09b-bonus-hub__level,
.fa-09b-bonus-hub__streak-n {
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-sm);
  color: var(--fa-gold-hi); white-space: nowrap;
}
.fa-09b-bonus-hub__xp .fa-fine,
.fa-09b-bonus-hub__streak .fa-fine { margin: var(--fa-s-2) 0 0; color: var(--fa-muted); }

/* --- Self-contained progress bar --- */
.fa-09b-bonus-hub__bar {
  height: 8px; border-radius: var(--fa-r-pill); overflow: hidden;
  background: var(--fa-graphite); border: 1px solid var(--fa-gold-a12);
}
.fa-09b-bonus-hub__bar-fill {
  display: block; height: 100%; width: var(--v, 0%); border-radius: inherit;
  background: linear-gradient(90deg, var(--fa-gold-dim), var(--fa-gold) 60%, var(--fa-gold-hi));
  transition: width .5s var(--fa-ease);
}

/* --- Streak pips --- */
.fa-09b-bonus-hub__pips {
  list-style: none; margin: var(--fa-s-3) 0 0; padding: 0;
  display: flex; gap: var(--fa-s-2);
}
.fa-09b-bonus-hub__pip {
  flex: 1 1 0; min-width: 0; display: grid; place-items: center;
  aspect-ratio: 1 / 1; min-height: 32px;
  border-radius: var(--fa-r-sm);
  background: var(--fa-graphite); border: 1px solid var(--fa-line);
  color: var(--fa-muted);
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-sm);
}
.fa-09b-bonus-hub__pip.is-on {
  background: var(--fa-gold-a12); border-color: var(--fa-gold-a45); color: var(--fa-gold-hi);
}
.fa-09b-bonus-hub__pip--mega { color: var(--fa-gold); }
.fa-09b-bonus-hub__pip--mega.is-on {
  background: var(--fa-gold); border-color: var(--fa-gold-hi); color: var(--fa-bg-2);
  box-shadow: var(--fa-glow-gold);
}

/* --- Missions --- */
.fa-09b-bonus-hub__missions { margin-top: var(--fa-s-5); }
.fa-09b-bonus-hub__missions-h { margin: 0 0 var(--fa-s-3); color: var(--fa-ivory); }
.fa-09b-bonus-hub__mission-list { list-style: none; margin: 0; padding: 0; }
.fa-09b-bonus-hub__mission {
  display: flex; align-items: center; gap: var(--fa-s-4);
  padding: var(--fa-s-3) var(--fa-s-4);
  background: var(--fa-panel-2); border: 1px solid var(--fa-line); border-radius: var(--fa-r);
}
.fa-09b-bonus-hub__mission + .fa-09b-bonus-hub__mission { margin-top: var(--fa-s-2); }
.fa-09b-bonus-hub__mission-info { flex: 1 1 auto; min-width: 0; }
.fa-09b-bonus-hub__mission-name { margin: 0 0 2px; color: var(--fa-ivory); font-weight: 600; font-size: var(--fa-fs-sm); }
.fa-09b-bonus-hub__mission-info .fa-fine { margin: 0; color: var(--fa-muted); }
.fa-09b-bonus-hub__mission-info .fa-09b-bonus-hub__bar { margin-top: var(--fa-s-2); max-width: 340px; }
.fa-09b-bonus-hub__mission-btn { flex: none; white-space: nowrap; }
.fa-09b-bonus-hub__mission.is-claimed { opacity: .72; }
.fa-09b-bonus-hub__mission.is-claimed .fa-09b-bonus-hub__mission-name { color: var(--fa-green); }

.fa-09b-bonus-hub__note { margin: var(--fa-s-4) 0 0; color: var(--fa-muted); }

@media (max-width: 560px) {
  .fa-09b-bonus-hub__mission { flex-direction: column; align-items: stretch; }
  .fa-09b-bonus-hub__mission-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-09b-bonus-hub__bar-fill { transition: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/10-progress-how.css
   ========================================================================== */
/* ==========================================================================
   10-progress-how.css
   the design spec JOURNEY PROGRESS ( 8 )  +  the design spec HOW IT WORKS ( 9 )

   Composes the the design guide primitives. Everything here is scoped to
   .fa-10-progress-how-* ; no primitive is redefined and no custom property
   is reassigned on :root. Where a shared class is touched it is always
   inside this section's scope (the design guide rule 1).

   Motion: this section is static by construction — it declares no
   transition, animation or hover transform of its own, so there is nothing
   for prefers-reduced-motion to switch off. See the block at the foot.

   CONTENTS
     1. Local knobs
     2.  sky plate + journey row
     3.  miniature boarding pass
     4.  stage stepper (flight path, nodes, states)
     5.  footer row
     6.  steps + chevrons
     7.  support inset + panel ornament
     8. Breakpoints  1000 / 900 / 768 / 700 / 375
     9. prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. LOCAL KNOBS
   --fa-10-node is this section's node diameter. It feeds the .fa-medallion
   primitive through its own --fa-med knob (the design guide) AND positions the
   flight path, the aircraft and the chevrons, so all four stay locked
   together at every breakpoint from one number.
   ========================================================================== */

.fa-10-progress-how__stages { --fa-10-node: 56px; }
.fa-10-progress-how__steps  { --fa-10-node: 64px; }   /* the design spec: 64px */

.fa-10-progress-how__node { --fa-med: var(--fa-10-node); }


/* ==========================================================================
   2.  — SKY PLATE AND JOURNEY ROW
   the assets guide: the pack ships no clouds-at-altitude plate and rules out a
   placeholder for a section background, so the sky is built from tokens —
   a navy-to-graphite altitude wash with three soft warm cloud blooms.
   Every layer stays dark: the lightest solid is --fa-graphite plus 8% gold,
   which holds ivory-dim body copy at ~7.9:1 and the ivory Cinzel names far
   above that.
   ========================================================================== */

.fa-10-progress-how__sky {
  position: relative;
  padding: var(--fa-s-5) var(--fa-s-4);
  border: 1px solid var(--fa-gold-a12);
  border-radius: var(--fa-r);
  overflow: hidden;
  background:
    radial-gradient(46% 78% at 16% 88%, var(--fa-hi-a06)   0%, transparent 60%),
    radial-gradient(38% 66% at 47% 4%,  var(--fa-hi-a06)   0%, transparent 62%),
    radial-gradient(52% 84% at 85% 82%, var(--fa-gold-a08) 0%, transparent 64%),
    linear-gradient(180deg,
      var(--fa-bg-2)    0%,
      var(--fa-panel-2) 58%,
      var(--fa-graphite) 100%);
}

.fa-10-progress-how__journey {
  display: grid;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
  gap: var(--fa-s-5);
  align-items: center;
}


/* ==========================================================================
   3.  — MINIATURE BOARDING PASS
   the design spec: "A miniature boarding-pass card sits at the left of the row."
   Composes .fa-card--paper (the design guide), the one deliberately light
   surface, with the perforated stub edge of the design specA.
   ========================================================================== */

.fa-10-progress-how__pass {
  gap: var(--fa-s-3);
  padding: var(--fa-s-3) var(--fa-s-5) var(--fa-s-3) var(--fa-s-4);

  /* the torn-stub perforation down the right edge. #000 here is mask-channel
     data (full alpha), not a theme colour — the same convention the base
     sheet uses for .fa-rail--edge. */
  -webkit-mask-image: radial-gradient(circle 4px at 100% 6px, transparent 0 4px, #000 4.6px);
          mask-image: radial-gradient(circle 4px at 100% 6px, transparent 0 4px, #000 4.6px);
  -webkit-mask-size: 100% 12px;
          mask-size: 100% 12px;
  -webkit-mask-repeat: repeat-y;
          mask-repeat: repeat-y;
}

/* Contrast fix, scoped to this card only. The shared
   `.fa-card--paper .fa-label` tone lands at ~3.6:1 on --fa-paper, under the
   4.5:1 floor; full-strength ink takes the same label to ~9.9:1. Scoped, so
   the shared rule is untouched elsewhere on the page. */
.fa-10-progress-how__pass .fa-label { color: var(--fa-paper-ink); }

.fa-10-progress-how__pass-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--fa-s-3);
}

.fa-10-progress-how__pass-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fa-10-progress-how__pass-value {
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: var(--fa-fs-h4);
  line-height: var(--fa-lh-head);
  letter-spacing: var(--fa-ls);
  color: var(--fa-paper-ink);
}

/* Real barcode bars, drawn rather than imaged (the design specA / the assets guide). */
.fa-10-progress-how__pass-barcode {
  display: block;
  height: 26px;
  border-radius: var(--fa-r-xs);
  background-image: repeating-linear-gradient(90deg,
    var(--fa-paper-ink)  0    2px, transparent  2px  4px,
    var(--fa-paper-ink)  4px  5px, transparent  5px  8px,
    var(--fa-paper-ink)  8px 11px, transparent 11px 13px);
}


/* ==========================================================================
   4.  — STAGE STEPPER
   Five stages joined by a dotted gold flight path with the aircraft at the
   current position. the design spec: completed / active / locked are carried by
   icon AND text — every stage ships a visible state word, so the medallion
   tone is never the only signal and each medallion is aria-hidden.
   ========================================================================== */

/* Five explicit rows — node · name · requirement · state · meter — and each
   <li> is a row subgrid spanning all five. That is what keeps the names,
   requirement lines and state words on the same baselines across every
   column no matter how many lines a name wraps to. Stages with no meter
   simply leave row 5 empty, and an empty auto track collapses to 0.
   Without subgrid support the li still spans its five rows and degrades to
   the plain per-column stack. */
.fa-10-progress-how__stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto;
  column-gap: var(--fa-gap-grid);
  row-gap: var(--fa-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the dotted gold flight path, behind the nodes. Runs between the first and
   last node centres; the medallions are opaque and cap both ends. */
.fa-10-progress-how__stages::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--fa-10-node) / 2);
  left: 10%;
  right: 10%;
  height: 2px;
  transform: translateY(-1px);
  background-image: repeating-linear-gradient(90deg,
    var(--fa-gold-a60) 0 4px, transparent 4px 12px);
}

/* Note: the row items are deliberately left at the default `stretch`
   justification and centred with text-align instead. `justify-items:center`
   sizes every item to its max-content width, which stops the names wrapping
   and lets a long word ("destination") punch straight out of its column. */
.fa-10-progress-how__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  text-align: center;
  min-width: 0;
}

/* last-resort guard: a word that still cannot fit breaks rather than
   overflowing the panel. Sizing above means it should never fire. */
.fa-10-progress-how__stage > *,
.fa-10-progress-how__step > * {
  min-width: 0;
  overflow-wrap: break-word;
}

/* The name row is sized to the tallest name in the row, so a one-line name
   would otherwise hang at the top of a two-line box, adrift from its own
   caption. Bottom-aligning it keeps every name tight to the line it
   belongs to and pushes the slack up under the medallion instead. */
.fa-10-progress-how__stage > .fa-h4,
.fa-10-progress-how__step > .fa-h4 { align-self: end; }

/* opaque so it caps the dotted path instead of sitting on top of it.
   The margin buys the node a little more air than the shared row gap. */
.fa-10-progress-how__node {
  position: relative;
  z-index: 1;
  justify-self: center;
  margin-bottom: var(--fa-s-1);
}

/* the graphite track is nearly invisible against the sky plate, which would
   hide where "100" actually ends — a hairline gives it back its endpoint */
.fa-10-progress-how__meter .fa-progress {
  box-shadow: inset 0 0 0 1px var(--fa-line);
}

.fa-10-progress-how__state { margin: 0; }

.fa-10-progress-how__state-badge { --fa-icon-size: 10px; }

/* bar + caption travel together so the stage keeps exactly five slots */
.fa-10-progress-how__meter {
  width: 100%;
  min-width: 0;
  margin-top: var(--fa-s-1);
}

/* the caption sits over the sky plate rather than the panel surface, so it
   is raised from --fa-muted to --fa-ivory-dim to clear 4.5:1 comfortably */
.fa-10-progress-how__stage .fa-progress__cap { color: var(--fa-ivory-dim); }

/* the aircraft riding the path, parked in the gap ahead of the active node */
.fa-10-progress-how__plane {
  position: absolute;
  z-index: 2;
  top: calc(var(--fa-10-node) / 2);
  left: calc(var(--fa-gap-grid) / -2);
  width: 46px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 6px var(--fa-scrim-3));
  pointer-events: none;
}


/* ==========================================================================
   5.  — FOOTER ROW
   Gift mark + "Next reward: …" on the left, gold CTA on the right.
   ========================================================================== */

.fa-10-progress-how__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-3);
  margin-top: var(--fa-s-4);
}

.fa-10-progress-how__next {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
  margin: 0;
  min-width: 0;
}

/* the assets guide defect 4: gift-box.png carries a clipped fuselage sliver at its
   right edge. The wrapper crops it off rather than editing client art. */
.fa-10-progress-how__gift {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--fa-r-xs);
}

.fa-10-progress-how__gift img {
  display: block;
  /* the reset caps every img at max-width:100%, which would clamp this back
     to the wrapper's 36px and undo the crop entirely — the sliver would
     render. Released here only. */
  max-width: none;
  width: 118%;          /* the right ~15% is clipped away by the wrapper:
                           the box art ends at x=371 of 441, the fuselage
                           sliver starts at x=384 — this cuts between them */
  height: 100%;
  object-fit: cover;
  object-position: left center;
}


/* ==========================================================================
   6.  — FIVE STEPS SEPARATED BY GOLD CHEVRONS
   ========================================================================== */

.fa-10-progress-how__how {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--fa-gap-grid);
  align-items: stretch;
}

/* Same subgrid treatment as the stepper: three shared rows — node · name ·
   caption. "Get boarding pass" wraps to three lines where "Claim rewards"
   takes one, so without this the captions start at five different heights. */
.fa-10-progress-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: var(--fa-gap-grid);
  row-gap: var(--fa-s-2);
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fa-10-progress-how__step {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  text-align: center;
  min-width: 0;
}

/* decorative gold chevron, centred in the gap after each step but the last */
.fa-10-progress-how__chev {
  position: absolute;
  top: calc(var(--fa-10-node) / 2);
  right: calc(var(--fa-gap-grid) / -2);
  --fa-icon-size: 16px;
  color: var(--fa-gold-a60);
  transform: translate(50%, -50%);
  pointer-events: none;
}


/* ==========================================================================
   7.  — SUPPORT INSET AND PANEL ORNAMENT
   ========================================================================== */

.fa-10-progress-how__support {
  display: flex;
  align-items: flex-end;
  gap: var(--fa-s-3);
  min-height: 200px;
  overflow: hidden;
}

/* the design spec: never stretch a person. Height drives, width follows the
   intrinsic 177x546 ratio, so the full silhouette always reads. */
.fa-10-progress-how__support-img {
  flex: none;
  width: auto;
  height: clamp(150px, 17vw, 208px);
  align-self: flex-end;
  filter: drop-shadow(0 6px 16px var(--fa-scrim-3));
}

.fa-10-progress-how__support-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: var(--fa-s-2);
  min-width: 0;
}

/* the design spec writes this heading in sentence case ("Need help?"), so the
   uppercase transform the .fa-h3 primitive applies is cancelled here only. */
.fa-10-progress-how__support-h { text-transform: none; }

.fa-10-progress-how__ornament {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-4);
  width: 118px;
  height: auto;
  opacity: .12;
  pointer-events: none;
}


/* ==========================================================================
   8. BREAKPOINTS
   Verified at 1440 / 1280 / 1024 / 768 / 375 (the design spec). 1000 and 900 are
   this section's own switches: the design spec names <=1000 for the support inset,
   and the boarding pass runs out of room before the stepper does.
   Nothing here scrolls horizontally — both lists reflow to one column.
   ========================================================================== */

/* --- <=1024 : the five-across rows get tight. Cinzel at .10em is what
       pushes the longest single word ("Destination", "boarding") past its
       column, so the names drop to the .06em Cinzel default here. Buys
       ~6px per name, which is the whole margin at this width. ------------ */
@media (max-width: 1024px) {
  .fa-10-progress-how__stage .fa-h4,
  .fa-10-progress-how__step .fa-h4 { letter-spacing: var(--fa-ls); }

  .fa-10-progress-how__stages { --fa-10-node: 52px; }
  .fa-10-progress-how__steps  { --fa-10-node: 58px; }
}

/* --- <=1000 : the design spec stacks the support inset under the steps ---------- */
@media (max-width: 1000px) {
  .fa-10-progress-how__how { grid-template-columns: minmax(0, 1fr); }

  .fa-10-progress-how__support {
    min-height: 0;
    justify-content: flex-start;
    gap: var(--fa-s-5);
  }

  .fa-10-progress-how__support-img { height: 150px; }

  /* the ornament has no clear corner left once the header title wraps */
  .fa-10-progress-how__ornament { display: none; }
}

/* --- <=900 : the boarding pass moves above the stepper ------------------- */
@media (max-width: 900px) {
  .fa-10-progress-how__journey {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fa-s-5);
  }
}

/* --- <=860 : both lists become vertical. Five columns stop being viable
       here — below roughly 110px per column the word "Destination" no
       longer fits on one line at any size the design allows, and the design spec
       forbids shrinking labels away. The flight path turns with the list
       and the chevrons rotate a quarter turn to point down the column.
       That rotation is a static shape, not motion. ---------------------- */
@media (max-width: 860px) {

  /* one column, and the shared row template is dropped: alignment across
     columns is meaningless once there is only one column */
  .fa-10-progress-how__stages,
  .fa-10-progress-how__steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--fa-s-6);
  }

  /* each row becomes: node in column 1 spanning the copy, copy in column 2 */
  .fa-10-progress-how__stage,
  .fa-10-progress-how__step {
    grid-row: auto;
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
    column-gap: var(--fa-s-4);
    row-gap: var(--fa-s-1);
  }

  .fa-10-progress-how__stage { grid-template-rows: auto auto auto auto; }
  .fa-10-progress-how__step  { grid-template-rows: auto auto; }

  .fa-10-progress-how__stage > .fa-10-progress-how__node { grid-row: 1 / span 4; }
  .fa-10-progress-how__step  > .fa-10-progress-how__node { grid-row: 1 / span 2; }

  .fa-10-progress-how__node {
    align-self: start;
    justify-self: start;
    margin-bottom: 0;
  }

  .fa-10-progress-how__meter { max-width: 220px; }

  /* the dotted path runs down through the node centres */
  .fa-10-progress-how__stages::before {
    top: calc(var(--fa-10-node) / 2);
    bottom: calc(var(--fa-10-node) / 2);
    left: calc(var(--fa-10-node) / 2);
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-1px);
    background-image: repeating-linear-gradient(180deg,
      var(--fa-gold-a60) 0 4px, transparent 4px 12px);
  }

  /* aircraft into the gap above the active stage, still on the path */
  .fa-10-progress-how__plane {
    top: calc(var(--fa-s-6) / -2);
    left: calc(var(--fa-10-node) / 2);
  }

  /* chevron into the gap below each step, pointing down the column */
  .fa-10-progress-how__chev {
    top: auto;
    right: auto;
    bottom: calc(var(--fa-s-6) / -2);
    left: calc(var(--fa-10-node) / 2);
    transform: translate(-50%, 50%) rotate(90deg);
  }

  .fa-10-progress-how__foot { justify-content: flex-start; }
}

/* --- <=768 : density pass on the now-vertical lists ---------------------- */
@media (max-width: 768px) {
  .fa-10-progress-how__stages { --fa-10-node: 48px; }
  .fa-10-progress-how__steps  { --fa-10-node: 52px; }

  .fa-10-progress-how__sky { padding: var(--fa-s-4) var(--fa-s-3); }

  .fa-10-progress-how__plane { width: 38px; }
}

/* --- <=375 : the narrowest verified width -------------------------------- */
@media (max-width: 375px) {
  .fa-10-progress-how__stages,
  .fa-10-progress-how__steps { --fa-10-node: 44px; }

  .fa-10-progress-how__stage,
  .fa-10-progress-how__step { gap: var(--fa-s-3); }

  .fa-10-progress-how__pass { padding: var(--fa-s-3) var(--fa-s-4) var(--fa-s-3) var(--fa-s-3); }

  .fa-10-progress-how__plane { width: 32px; }

  /* the CTA takes the full row rather than crowding the reward line */
  .fa-10-progress-how__foot .fa-btn { width: 100%; }
}


/* ==========================================================================
   9. REDUCED MOTION (the design spec)
   Nothing in this section animates, transitions or lifts, so there is no
   movement to remove. The aircraft, chevron and stamp transforms are static
   placement and shape — the same category as the .fa-badge 4deg tilt the
   base sheet deliberately preserves — and are kept.

   The one inherited moving part is .fa-progress__fill's width transition,
   which the base sheet already neutralises globally.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fa-10-progress-how__plane { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/11-crew-reviews.css
   ========================================================================== */
/* ==========================================================================
   11 — THE FORTUNE CREW + PASSENGER REVIEWS
   the design spec (circled section 10) and the design spec (circled section 11).

   Structure is entirely primitive: .fa-panel, .fa-sec, .fa-grid--snap
   (6 -> 3 -> 2 -> rail for crew, 3 -> 2 -> rail for reviews), .fa-card with
   --glow / --flat, .fa-card__body, .fa-card__foot, .fa-clamp, .fa-h4.

   Only what the design spec states and no primitive already covers is written here:

     CREW      1. the cutout stage: a transparent full silhouette that must
                  never be stretched or cropped (the design spec / the assets guide)
               2. the 12px Cinzel name and the 10px .12em role line

     REVIEWS   3. the gold star row
               4. the 13px title / 13.5px 1.6 body metrics
               5. the Read more disclosure that expands the clamp in place
               6. the circular monogram avatar and reviewer footer

   No primitive is redefined and no custom property is reassigned.

   NOTE: every REVIEWS rule below is live and complete but currently styles
   nothing, because the design spec's eight verbatim reviews are blocked on the
   missing texts/the copy guide and the markup ships inert inside a <template>.
   That is deliberate: the content guide  requires the CSS to stay so the layout
   is verified the moment the copy lands. Do not delete these rules.
   ========================================================================== */


/* --- Shared: grid cell ----------------------------------------------------
   The grids are real <ul role="list">, so the flex/grid item is the <li> and
   the card sits inside it. Stretching the card to fill the cell is what keeps
   a row of cards equal height once .fa-card__body's flex:1 has done its work.
   Targeted through the section's own classes rather than .fa-card, so the
   shared primitive is never restyled. */
.fa-11-crew-reviews__item {
  display: flex;
  min-width: 0;                       /* lets a long word shrink, not overflow */
}

.fa-11-crew-reviews__crew,
.fa-11-crew-reviews__review {
  flex: 1 1 auto;
}


/* ==========================================================================
   the design spec — THE FORTUNE CREW
   ========================================================================== */

/* --- Cutout stage ---------------------------------------------------------
   the design spec: "Transparent character cutout over a subtle radial gold glow on
   graphite". The glow and the graphite are .fa-card--glow; this is only the
   box the figure stands in.

   The six cutouts are all different intrinsic sizes (221x604, 238x556,
   218x563 and three 230x600 placeholders) and the design spec forbids stretching a
   person, so:
     object-fit: contain          keeps every aspect ratio exactly
     object-position: bottom      lands all six on one shared floor line
   A ratio rather than a fixed height means the figure scales with the column,
   so it holds the same proportion of the card at 6-up, 3-up and 2-up instead
   of shrinking inside a widening card.

   Background stays transparent so the card's radial glow reads through the
   alpha of the cutout — which is the whole point of the the design spec treatment.

   WHY THE IMAGE IS ABSOLUTELY POSITIONED, do not "simplify" it back:
   a percentage height only resolves against a parent whose height is already
   definite. A parent sized purely by aspect-ratio is not definite during
   intrinsic sizing, so a plain `height:100%` silently falls back to auto and
   the cutout renders at its intrinsic 604px, dragging the card to ~637px tall
   and breaking the row. Measured before the fix. Absolute positioning makes
   the containing block definite, so 100% resolves and the ratio is enforced.
   (The same latent trap sits in .fa-media, where it is invisible only because
   those images already match their box ratio.)

   The top padding sits on the image rather than the stage: with border-box
   sizing it shrinks the content box that object-fit fills, which gives the
   figure headroom without a second positioned layer.

   The max-height is a ceiling, not a size. The ratio alone runs away on a
   wide card: at the 74vw snap width a 760px viewport gave a 700px stage and a
   758px card, taller than the phone holding it, and the 2-up grid at 768
   reached 521px. Capping the stage caps the whole card at roughly 380px at
   every width, and object-fit:contain simply draws the figure smaller inside
   it, so nothing is ever cropped or stretched. Measured at 320 / 375 / 760 /
   768 / 1024 / 1280 / 1440. */
.fa-11-crew-reviews__stage {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  max-height: 320px;
}

.fa-11-crew-reviews__cutout {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: var(--fa-s-3);
  object-fit: contain;
  object-position: bottom center;
}


/* --- Crew copy well -------------------------------------------------------
   Centred under the figure, tighter than the primitive's default gap: the
   name and role are one two-line unit, not two separate blocks. */
.fa-11-crew-reviews__crew-body {
  gap: var(--fa-s-1);
  text-align: center;
}

/* the design spec pins the name at Cinzel 600 12px. No token is 12px: --fa-fs-xs is
   11.5 and --fa-fs-sm is 13. the design guide rule 2 allows a literal only where
   the design spec quotes the value for this section alone, which is exactly this case.
   .fa-h4 already supplies Cinzel 600, ivory, uppercase and .10em tracking.
   Measured 12.0:1 on --fa-graphite. */
.fa-11-crew-reviews__name {
  font-size: 12px;
}

/* the design spec: role line 10px, .12em, --fa-muted. --fa-fs-label (10.5px) and
   --fa-ls-wider (.12em, which the design guide names for exactly this kind of
   line) carry it without a raw value — the same substitution  makes for its
   provider line. Measured 4.9:1 on --fa-graphite, over the 4.5:1 floor. */
.fa-11-crew-reviews__role {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-muted);
}


/* ==========================================================================
   the design spec — PASSENGER REVIEWS
   ========================================================================== */

/* --- Review copy well -----------------------------------------------------
   No media on these cards, so the well carries the whole card. Slightly
   roomier than the primitive default because this is running prose rather
   than a label stack. */
.fa-11-crew-reviews__review-body {
  gap: var(--fa-s-3);
  padding: var(--fa-s-4);
}


/* --- Star row -------------------------------------------------------------
   the design spec: five gold stars. The row is one role="img" with an aria-label, so
   the five glyphs inside are aria-hidden and announce as a single rating
   rather than as five meaningless icons. */
.fa-11-crew-reviews__stars {
  display: flex;
  gap: 3px;
  color: var(--fa-gold);
}

.fa-11-crew-reviews__stars .fa-icon {
  --fa-icon-size: 14px;
}


/* --- Title ----------------------------------------------------------------
   the design spec: Cinzel 600 13px. --fa-fs-sm is exactly 13px, so the size is
   retuned through a token and .fa-h4 keeps its Cinzel 600 / ivory / uppercase
   — the same move  makes for its game titles. */
.fa-11-crew-reviews__title {
  font-size: var(--fa-fs-sm);
}


/* --- Body -----------------------------------------------------------------
   the design spec: Montserrat 13.5px / 1.6, --fa-ivory-dim. 13.5px sits between
   --fa-fs-sm (13) and --fa-fs-body (14) with no token on it; the design spec names the
   value for this section alone, which is the the design guide rule 2 exception.
   The line height is the --fa-lh-body token, not a literal.
   Measured 8.7:1 on the --fa-panel-2 card surface. */
.fa-11-crew-reviews__body {
  font-family: var(--fa-font-ui);
  font-size: 13.5px;
  line-height: var(--fa-lh-body);
  color: var(--fa-ivory-dim);
}


/* --- Read more disclosure -------------------------------------------------
   the design spec: the body clamps to 6 lines with a "Read more" disclosure that
   expands in place, <details>-based so it works without JS.

   Why the paragraph sits OUTSIDE the <details> rather than inside it: a
   closed <details> hides its non-summary children in a UA shadow slot, so a
   body nested inside would be invisible when closed rather than clamped, and
   the only way to show a preview would be to print the review twice. Copy
   this sensitive is never duplicated in the DOM — it would also be read out
   twice by a screen reader. Instead the paragraph is always present and
   always the single source, the <details> holds only the toggle, and :has()
   lifts the clamp when it opens. No JS, no duplicated testimony.

   :has() is Baseline widely available and is already the support floor this
   build sits on ( ships color-mix(), which landed alongside it). */
.fa-11-crew-reviews__quote:has(.fa-11-crew-reviews__disc[open]) .fa-11-crew-reviews__body {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Toggle. The base reset already strips the UA marker from every summary and
   the global :focus-visible ring already covers it, so neither is repeated
   here. Gold on --fa-panel-2 measures 7.4:1. */
.fa-11-crew-reviews__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-1);
  margin-top: var(--fa-s-2);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-gold);
  transition: color var(--fa-t-fast) var(--fa-ease);
}

.fa-11-crew-reviews__toggle:hover {
  color: var(--fa-gold-hi);
}

/* Both labels live in the DOM and CSS swaps them, so the control still reads
   correctly with no JS and the accessible name changes with the state. */
.fa-11-crew-reviews__disc:not([open]) .fa-11-crew-reviews__toggle-less,
.fa-11-crew-reviews__disc[open] .fa-11-crew-reviews__toggle-more {
  display: none;
}

.fa-11-crew-reviews__toggle-chev {
  --fa-icon-size: 14px;
  transition: transform var(--fa-t) var(--fa-ease);
}

.fa-11-crew-reviews__disc[open] .fa-11-crew-reviews__toggle-chev {
  transform: rotate(180deg);
}


/* --- Footer: monogram avatar + reviewer name ------------------------------
   the design spec: a circular monogram avatar carrying the reviewer's first initial,
   then the name. The avatar is aria-hidden — it is a decorative restatement
   of the first letter of the name that follows as real text. */
.fa-11-crew-reviews__foot {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
  border-top: 1px solid var(--fa-line);
  margin-top: auto;                   /* .fa-card__foot already sets this;
                                         repeated so the rule stands alone if
                                         the primitive class is ever dropped */
}

/* Gold initial on graphite measures 7.1:1. Cinzel to match the card title. */
.fa-11-crew-reviews__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-circle);
  background: var(--fa-graphite);
  font-family: var(--fa-font-display);
  font-weight: 600;
  font-size: var(--fa-fs-sm);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-gold);
}

/* Ivory, not gold: the design spec reserves gold for ornament and headings, and a
   person's name is content. Measured 11.4:1 on --fa-panel-2. */
.fa-11-crew-reviews__who {
  min-width: 0;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-xs);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-ivory);
}


/* ==========================================================================
   NARROW WIDTHS
   At <=760 both grids are already 74vw snap rails from the base sheet and the
   stage is already held by its max-height, so no column or ratio work is
   needed here. Only the review well needs to give back some padding at the
   narrowest width, where a 82vw card has little room to spare.
   ========================================================================== */
@media (max-width: 375px) {
  .fa-11-crew-reviews__review-body {
    padding: var(--fa-s-3);
  }
}


/* ==========================================================================
   REDUCED MOTION
   The base sheet neutralises transitions globally, so this is belt and braces
   for the only two transitions this section introduces: the toggle's colour
   change and the chevron flip. The chevron's rotation is state, not
   decoration, so it still SNAPS to the open position — only the tween goes.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fa-11-crew-reviews__toggle,
  .fa-11-crew-reviews__toggle-chev {
    transition: none;
  }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/12-news-trust-footer.css
   ========================================================================== */
/* ==========================================================================
   SECTION 12 — NEWS & ANNOUNCEMENTS ( 12 )        the design spec
                TRUST, SUPPORT AND PAYMENTS        the design spec
                FOOTER + LEGAL BAR + COOKIE        the design spec

   Composes the shared primitives from docs/the design guide:
     .fa-panel (+ --warm) · .fa-sec · .fa-grid · .fa-card (+ __body __foot)
     .fa-media (+ --16x9) · .fa-scrim (+ --bottom --top --heavy)
     .fa-chip (+ --ghost --sm) · .fa-btn (+ --gold --ghost --sm)
     .fa-link (+ --caps --quiet) · .fa-medallion (+ --sm) · .fa-deco-rule
     .fa-label (+ --gold --ivory) · .fa-h3 · .fa-h4 · .fa-sm · .fa-fine
     .fa-clamp · .fa-icon

   Everything below is genuinely specific to this section: the news card
   interior, the four-zone trust panel, the payment marks, the six footer
   columns and the legal / cookie strips. No primitive is redefined and no
   design token is reassigned. Loads AFTER css/00-base.css, so same-
   specificity scoped classes win.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. BLOCK ROOTS
   min-width:0 — these panels are flex children of .fa-main. Without it a
   long Cinzel line or the six-column footer grid can push its track wider
   than its share and put the PAGE into a horizontal scroll, which the design spec
   forbids at every verified breakpoint.
   -------------------------------------------------------------------------- */

.fa-12-news-trust-footer,
.fa-12-news-trust-footer__footer { min-width: 0; }


/* ==========================================================================
   1. NEWS & ANNOUNCEMENTS — the design spec
   Four cards: 16:9 image, category chip top-right, date, Cinzel title,
   two-line summary, READ MORE link.
   ========================================================================== */

/* The chip is pinned over the media, above .fa-scrim (z-index 1).

   .fa-chip--ghost's own wash is only 8% gold — effectively transparent, and
   gold text directly on a sunset photograph fails 4.5:1. The card markup
   already carries .fa-scrim--top beneath the chip; this adds the scrim navy
   to the chip itself so the label holds its contrast even where the top of
   the image is at its brightest. Token value, not a new colour. */
.fa-12-news-trust-footer__news-chip {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-2);
  z-index: 2;
  background: var(--fa-scrim-2);
  border-color: var(--fa-gold-a45);
}

/* The date is the card's quietest line but still running content, so it
   takes ivory-dim rather than --fa-label's default muted: 4.5:1 against the
   card surface with room to spare. */
.fa-12-news-trust-footer__news-date { color: var(--fa-ivory-dim); }

/* the design spec calls for a two-line summary. Reserving both lines keeps the
   READ MORE row on the same baseline across all four cards even when one
   summary happens to wrap to a single line. */
.fa-12-news-trust-footer__news-sum { min-height: calc(2em * 1.55); }


/* ==========================================================================
   2. TRUST, SUPPORT AND PAYMENTS — the design spec
   One panel, three zones, plus the closing brand line over the cabin
   window on the right.
   ========================================================================== */

.fa-12-news-trust-footer__trust {
  display: grid;
  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(0, 1.15fr);
  gap: var(--fa-pad-panel);
  align-items: stretch;
}

.fa-12-news-trust-footer__zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-3);
  min-width: 0;
}

/* Gold hairline between the three copy zones — the same divider weight the
   rest of the page uses for an inset border. */
.fa-12-news-trust-footer__zone + .fa-12-news-trust-footer__zone {
  border-inline-start: 1px solid var(--fa-gold-a12);
  padding-inline-start: var(--fa-pad-panel);
}

/* --- 2.1 SAFE & SECURE badges ------------------------------------------
   auto-fit rather than a fixed track count: this zone is ~380px wide at
   1440 and ~330px when the panel folds to two columns, and five fixed
   tracks would crush "RESPONSIBLE GAMING" at both. It reflows on its own
   and needs no breakpoint of its own. */

.fa-12-news-trust-footer__badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fa-s-3);
  width: 100%;
}

.fa-12-news-trust-footer__badge {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
  min-width: 0;
}

.fa-12-news-trust-footer__badge-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The responsible-gaming line closes the zone; it is legal wording, not a
   caption, so it keeps the full column width. */
.fa-12-news-trust-footer__rg { max-width: 46ch; }

/* GambleAware / Cookie Policy inside a --fa-fine paragraph: .fa-link's own
   font-size would jump the line. Inherit instead, and keep the underline so
   the link is not signalled by colour alone. */
.fa-12-news-trust-footer__rg-link {
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 2.2 WE ACCEPT payment marks ---------------------------------------
   the design spec: wordmark chips in their brand colours on graphite tiles, each
   with a real text label so it is never an image-only affordance.

   RAW-HEX EXCEPTION, deliberate and documented. the design guide rule 2 bans raw
   colour in a section sheet; the design spec requires these six marks to carry
   their own brand colours, and the design spec wins (the design guide, binding order). The
   exception is scoped as tightly as possible: the brand hue is applied ONLY
   to the decorative glyph and a 3px edge — never to text. Every label stays
   --fa-ivory on --fa-graphite, so the readable content is unaffected and
   4.5:1 holds regardless of the brand hue.

   Skrill's #862165 is too dark to register on navy graphite, so its tile
   uses a lightened tint of the same hue rather than an unreadable smear. */

.fa-12-news-trust-footer__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s-2);
  width: 100%;
}

.fa-12-news-trust-footer__mark {
  display: inline-flex;
  align-items: center;
  border-radius: var(--fa-r-sm);
}

/* Real brand logos ship with their own card background and wordmark, so the
   mark is just a sized, rounded frame — no chip fill, no per-brand accent. */
.fa-12-news-trust-footer__mark img {
  display: block;
  height: 26px;
  width: auto;
  border-radius: var(--fa-r-sm);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* The footer's column 6 repeats the marks in a tighter stack. */
.fa-12-news-trust-footer__marks--foot { gap: var(--fa-s-1); }

.fa-12-news-trust-footer__marks--foot .fa-12-news-trust-footer__mark img { height: 22px; }

/* Motion toggle — reuses .fa-link--caps; reset the <button> chrome and mark
   the active (motion-off) state in gold. */
.fa-12-news-trust-footer__motion,
.fa-12-news-trust-footer__toggle {
  background: none; border: 0; cursor: pointer; font: inherit;
}
.fa-12-news-trust-footer__motion[aria-pressed="true"],
.fa-12-news-trust-footer__toggle[aria-pressed="true"] { color: var(--fa-gold); }

/* --- 2.3 Closing brand line over the cabin window -----------------------
   the assets guide: cabin-window.png is a bright sunset cloudscape through gilded
   glass; its lower edge falls to dark navy. The markup stacks --heavy over
   --bottom so the copy well is effectively solid navy and the gold line
   clears 4.5:1 over photography (the design spec). */

.fa-12-news-trust-footer__closing {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r);
}

.fa-12-news-trust-footer__closing-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.fa-12-news-trust-footer__closing-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-3);
  width: 100%;
  padding: var(--fa-s-4);
}

.fa-12-news-trust-footer__closing-line { line-height: 1.35; }

.fa-12-news-trust-footer__closing-logo {
  width: 168px;
  height: auto;
}


/* ==========================================================================
   3. FOOTER — the design spec
   Warm-dark panel: six link columns, brand block, socials, back to top,
   legal bar, cookie notice.
   ========================================================================== */

/* The footer is a SIBLING of <main>, so .fa-main's gutter and section
   rhythm do not reach it — it carries its own. overflow:hidden clips the
   two full-bleed strips (legal bar, cookie notice) to the panel radius. */
.fa-12-news-trust-footer__footer {
  margin: var(--fa-gap-sec) var(--fa-pad-frame) var(--fa-gap-sec);
  overflow: hidden;
}

/* --- 3.1 Link columns --------------------------------------------------- */

.fa-12-news-trust-footer__cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--fa-s-4) var(--fa-s-5);
}

.fa-12-news-trust-footer__col { min-width: 0; }

/* Above 700px this is a plain column heading, not a control: the chevron is
   hidden and the cursor stays default. 12-news-trust-footer.js matches that
   at the behaviour level, suppressing the toggle and taking the summary out
   of the tab order until the accordion breakpoint. The <details> ships
   `open`, so with JS disabled every link is still present and the summary
   simply stays a working disclosure. */
.fa-12-news-trust-footer__col-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-2);
  cursor: default;
}

.fa-12-news-trust-footer__col-chev {
  display: none;
  flex: none;
  color: var(--fa-gold);
  --fa-icon-size: 16px;
  transition: transform var(--fa-t) var(--fa-ease);
}

.fa-12-news-trust-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-2);
  margin-top: var(--fa-s-3);
}

/* --- 3.2 Brand block · socials · back to top ---------------------------- */

.fa-12-news-trust-footer__brandrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-4) var(--fa-s-5);
}

.fa-12-news-trust-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-2);
  flex: 1 1 300px;
  min-width: 0;
}

.fa-12-news-trust-footer__brand-logo {
  width: 210px;
  max-width: 100%;
  height: auto;
}

.fa-12-news-trust-footer__brand-line { max-width: 42ch; }

.fa-12-news-trust-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s-2);
}

.fa-12-news-trust-footer__soc {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--fa-gold);
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-circle);
  transition:
    color var(--fa-t) var(--fa-ease),
    background-color var(--fa-t) var(--fa-ease),
    border-color var(--fa-t) var(--fa-ease);
}

.fa-12-news-trust-footer__soc .fa-icon { --fa-icon-size: 18px; }

/* Gold fill takes navy text (the design spec), never ivory. */
.fa-12-news-trust-footer__soc:hover {
  color: var(--fa-bg-2);
  background: var(--fa-gold);
  border-color: var(--fa-gold);
}

.fa-12-news-trust-footer__totop { flex: none; }

/* --- 3.3 Legal bar ------------------------------------------------------
   the design spec: centred, 11px --fa-muted, on --fa-bg. Bled to the panel edges
   and clipped by the footer's own overflow. */

.fa-12-news-trust-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-2) var(--fa-s-4);
  margin: var(--fa-s-5) calc(var(--fa-pad-panel) * -1) 0;
  padding: var(--fa-s-3) var(--fa-pad-panel);
  text-align: center;
  background: var(--fa-bg);
  border-top: 1px solid var(--fa-gold-a12);
}

.fa-12-news-trust-footer__roundel {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--fa-gold);
  border: 1px solid var(--fa-gold-a45);
  border-radius: var(--fa-r-circle);
}

.fa-12-news-trust-footer__roundel .fa-icon { --fa-icon-size: 16px; }

/* --- 3.4 Cookie notice --------------------------------------------------
   Visible in the markup; the runtime's `cookie` initialiser hides it once
   accepted. Flush to the bottom edge of the footer panel. */

.fa-12-news-trust-footer__cookie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-3);
  margin: 0 calc(var(--fa-pad-panel) * -1) calc(var(--fa-pad-panel) * -1);
  padding: var(--fa-s-3) var(--fa-pad-panel);
  background: var(--fa-graphite);
  border-top: 1px solid var(--fa-gold-a12);
}


/* ==========================================================================
   4. BREAKPOINTS — 1440 / 1280 / 1024 / 768 / 375
   Verified: no horizontal PAGE scroll at any of them. This section owns no
   horizontally scrolling rail — the news grid reflows instead.
   ========================================================================== */

/* Four trust zones cannot hold a legible column much under 1200px. */
@media (max-width: 1200px) {
  .fa-12-news-trust-footer__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The vertical hairline only reads as a divider in a single row; in a 2x2
     it would land mid-grid. Gap alone separates the zones from here down. */
  .fa-12-news-trust-footer__zone + .fa-12-news-trust-footer__zone {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Six footer columns become three. */
@media (max-width: 1024px) {
  .fa-12-news-trust-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Trust panel stacks. */
@media (max-width: 760px) {
  .fa-12-news-trust-footer__trust { grid-template-columns: minmax(0, 1fr); }

  .fa-12-news-trust-footer__closing { min-height: 200px; }
}

/* the design spec: at <=700px the six columns become <details> accordions.
   The summary becomes a real control — chevron visible, pointer cursor,
   hairline rule — and 12-news-trust-footer.js closes them on the way down. */
@media (max-width: 700px) {
  .fa-12-news-trust-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .fa-12-news-trust-footer__col { border-bottom: 1px solid var(--fa-gold-a12); }

  .fa-12-news-trust-footer__col-h {
    cursor: pointer;
    padding-block: var(--fa-s-3);
  }

  .fa-12-news-trust-footer__col-chev { display: block; }

  .fa-12-news-trust-footer__col[open] .fa-12-news-trust-footer__col-chev {
    transform: rotate(180deg);
  }

  .fa-12-news-trust-footer__links {
    margin-top: 0;
    padding-bottom: var(--fa-s-3);
  }

  .fa-12-news-trust-footer__marks--foot { padding-bottom: var(--fa-s-3); }

  .fa-12-news-trust-footer__brandrow { justify-content: flex-start; }
}

/* News grid: 4 -> 2 (1024, via the .fa-grid knobs in the markup) -> 1.
   This is a knob override on our own grid, not a redefinition of .fa-grid:
   the primitive's <=768 rule reads --fa-cols-768 at compute time. */
@media (max-width: 560px) {
  .fa-12-news-trust-footer__news-grid { --fa-cols-768: 1; }

  .fa-12-news-trust-footer__closing-logo { width: 150px; }

  /* The five legal-bar items read as one centred block on a narrow screen. */
  .fa-12-news-trust-footer__legal { gap: var(--fa-s-2); }
}


/* ==========================================================================
   5. REDUCED MOTION
   The only motion this section introduces is the accordion chevron rotation
   and the social-icon colour fade. Both are neutralised; the chevron keeps
   its rotated END STATE, because that is a shape conveying open/closed, not
   an animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .fa-12-news-trust-footer__col-chev,
  .fa-12-news-trust-footer__soc { transition: none !important; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/promotions.css
   ========================================================================== */
/* ==========================================================================
   PROMOTIONS PAGE — parts/promotions.css
   Appended after the section sheets into css/main.css by scratchpad/build.js.

   Scope: every rule is prefixed .fa-promotions-. No :root token is declared
   or redefined and no shared primitive is restyled globally — the page only
   adds layout and the few text treatments the design guide has no primitive for
   (the page-hero title, the gold value line, the breadcrumb). All colours,
   spacing, radii, motion and type come from the tokens in css/00-base.css.
   ========================================================================== */


/* -------------------------------------------------------------------------
   1 · PAGE HERO BAND
   Compact banner (~200-260px), centred, with a faint gold wash inside the
   .fa-panel--deco double frame. Not the cinematic homepage hero.
   ------------------------------------------------------------------------- */
.fa-promotions-hero {
  overflow: hidden;
  text-align: center;
  background-image:
    radial-gradient(135% 150% at 50% -35%, var(--fa-gold-a12), transparent 60%);
}

.fa-promotions-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fa-s-3);
  min-height: 188px;
  padding-block: var(--fa-s-5);
}

.fa-promotions-hero__eyebrow { color: var(--fa-ivory); }

/* The page <h1>. Own class rather than composing .fa-display, whose hero
   scale (up to 76px) is too large for a compact band. */
.fa-promotions-hero__title {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: var(--fa-lh-tight);
  letter-spacing: var(--fa-ls);
  text-transform: uppercase;
  color: var(--fa-gold);
}

.fa-promotions-hero__sub { max-width: 48ch; }

.fa-promotions-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--fa-s-3);
  margin-top: var(--fa-s-1);
}

/* Breadcrumb — small uppercase trail, Home -> Promotions. */
.fa-promotions-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--fa-s-2);
}

.fa-promotions-breadcrumb__link,
.fa-promotions-breadcrumb__current {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
}

.fa-promotions-breadcrumb__link {
  color: var(--fa-muted);
  transition: color var(--fa-t) var(--fa-ease);
}

.fa-promotions-breadcrumb__link:hover { color: var(--fa-gold); }

.fa-promotions-breadcrumb__current { color: var(--fa-ivory-dim); }

.fa-promotions-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  color: var(--fa-gold-dim);
}

.fa-promotions-breadcrumb__sep .fa-icon { --fa-icon-size: 11px; }


/* -------------------------------------------------------------------------
   2 · FEATURED WELCOME OFFER
   Two columns: copy left, gift illustration right. Stacks at <=768.
   ------------------------------------------------------------------------- */
.fa-promotions-welcome__grid {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: var(--fa-pad-panel);
  align-items: center;
}

.fa-promotions-welcome__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-3);
}

.fa-promotions-welcome__cat { gap: var(--fa-s-1); }

/* The gold value. Cinzel, gold, NOT uppercased so amounts read cleanly. */
.fa-promotions-welcome__value {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-display);
  line-height: 1.05;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-gold);
}

.fa-promotions-welcome__support {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-h3);
  line-height: 1.3;
  color: var(--fa-gold-hi);
}

.fa-promotions-welcome__fine { max-width: 52ch; }

.fa-promotions-welcome__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fa-s-4);
  margin-top: var(--fa-s-2);
}

.fa-promotions-welcome__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fa-promotions-welcome__art img {
  width: auto;
  max-width: 100%;
  max-height: 280px;
  height: auto;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .42));
}


/* -------------------------------------------------------------------------
   3 · ALL PROMOTIONS GRID
   Cards are informational text tiles; they keep the .fa-card hover/focus
   lift (motion-guarded in base) for a clear interactive affordance.
   ------------------------------------------------------------------------- */
.fa-promotions-card__body { gap: var(--fa-s-2); }

/* The category chip pins to the top-left and never stretches full width. */
.fa-promotions-card__cat {
  align-self: flex-start;
  gap: var(--fa-s-1);
}

.fa-promotions-card__title { margin-top: var(--fa-s-1); }

/* Gold value line. Own class (not .fa-h2) so it is gold Cinzel WITHOUT the
   uppercase transform — long values like the prize sentences stay legible. */
.fa-promotions-card__value {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.12;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-gold);
}

.fa-promotions-card__support {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-sm);
  line-height: 1.4;
  color: var(--fa-gold-hi);
}

.fa-promotions-card__desc { color: var(--fa-ivory-dim); }
.fa-promotions-card__desc em { font-style: italic; color: var(--fa-muted); }
.fa-promotions-card__desc strong { font-weight: 700; color: var(--fa-ivory); }

.fa-promotions-card__fine { margin-top: calc(var(--fa-s-1) * -1); }

/* CTA left, Terms right, pinned to the card foot. */
.fa-promotions-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fa-s-3);
}


/* -------------------------------------------------------------------------
   4 · HOW BONUSES WORK
   Two inset panels side by side; single column on mobile.
   ------------------------------------------------------------------------- */
.fa-promotions-how__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fa-gap-grid);
}

.fa-promotions-how__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fa-s-2);
  padding: var(--fa-pad-panel);
}

.fa-promotions-how__lead { color: var(--fa-ivory-dim); }
.fa-promotions-how__note { max-width: 60ch; }


/* -------------------------------------------------------------------------
   5 · CTA BAND
   ------------------------------------------------------------------------- */
.fa-promotions-cta {
  background-image:
    radial-gradient(130% 170% at 100% 50%, var(--fa-gold-a08), transparent 55%);
}

.fa-promotions-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fa-pad-panel);
}

.fa-promotions-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-2);
}

.fa-promotions-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fa-s-5);
}


/* -------------------------------------------------------------------------
   RESPONSIVE — verified at 1440 / 1280 / 1024 / 768 / 375.
   The card grid step-down (3 -> 2 -> 1) is driven by the .fa-grid knobs on
   the element; only the bespoke two-column blocks need collapsing here.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .fa-promotions-welcome__grid { grid-template-columns: 1fr; }
  .fa-promotions-welcome__art  { justify-content: center; }
  .fa-promotions-welcome__art img { max-height: 220px; }

  .fa-promotions-how__grid { grid-template-columns: 1fr; }

  .fa-promotions-cta__inner   { align-items: flex-start; }
  .fa-promotions-cta__actions { width: 100%; }

  /* SECTION-SCOPED REPAIR OF A BASE-SHEET BUG (same as 04/06 apply).
     At <=768 00-base.css collapses .fa-sec to `auto 1fr` and moves
     .fa-sec__rule to grid-area 1/2 — the cell .fa-sec__title still holds, so
     the gold rule is drawn straight through the "ALL PROMOTIONS" / "HOW
     BONUSES WORK" headings. Per the design guide rule 1 the shared class is not
     restyled: every selector is scoped to this page. minmax(0,auto) on the
     title track lets a long title wrap instead of forcing overflow. */
  .fa-promotions-all .fa-sec,
  .fa-promotions-how .fa-sec       { grid-template-columns: auto minmax(0, auto) 1fr; }
  .fa-promotions-all .fa-sec__rule,
  .fa-promotions-how .fa-sec__rule { grid-area: 1 / 3; }
}

@media (max-width: 375px) {
  .fa-promotions-hero__inner { min-height: 160px; }
  .fa-promotions-welcome__foot,
  .fa-promotions-card__foot { gap: var(--fa-s-2); }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/vip.css
   ========================================================================== */
/* ==========================================================================
   VIP PAGE — page-scoped styles (the pages guide PART 3, LUXURY)
   Every rule is prefixed .fa-vip-. This sheet composes the shared primitives
   from css/00-base.css and only adds what is genuinely VIP-specific: the gold
   page-hero band, the diamond/gem facet accents, the benefit medallion cards,
   the illustrative 15-level table and the four warm tier-showcase cards.
   No :root token is redefined; no shared primitive is restyled globally.
   Tokens only — no raw hex, no literal radius/duration.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Diamond / gem facet accent — shared shape used on the hero and tier cards.
   Drawn in SVG (the design spec: never emoji), coloured only from the gold ramp:
   a gold-tinted body, a gold edge, a bright gold-hi highlight facet.
   -------------------------------------------------------------------------- */
.fa-vip-gem {
  width: var(--fa-vip-gem-size, 22px);
  height: var(--fa-vip-gem-size, 22px);
  overflow: visible;
}
.fa-vip-gem__edge {
  fill: var(--fa-gold-a12);
  stroke: var(--fa-gold);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.fa-vip-gem__hi {
  fill: var(--fa-gold-hi);
  opacity: .5;
}
.fa-vip-gem__line {
  fill: none;
  stroke: var(--fa-gold-hi);
  stroke-width: .6;
  opacity: .5;
}


/* ==========================================================================
   1. PAGE HERO
   ========================================================================== */

.fa-vip-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 240px;
  padding-block: clamp(var(--fa-s-6), 4vw, var(--fa-s-8));
  /* Rich gold-washed navy — reads gold while staying inside the dark system. */
  background:
    radial-gradient(120% 150% at 12% 0%, var(--fa-gold-a12), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, var(--fa-gold-a08), transparent 60%),
    linear-gradient(160deg, var(--fa-gold-a08), transparent 46%),
    var(--fa-panel);
}

/* Faint diamond-facet shimmer layer — pure decoration, restrained. */
.fa-vip-hero__facets {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(60deg, transparent 0 22px, var(--fa-gold-a08) 22px 23px),
    repeating-linear-gradient(-60deg, transparent 0 22px, var(--fa-gold-a08) 22px 23px);
  -webkit-mask-image: radial-gradient(120% 130% at 85% 15%, #000, transparent 70%);
  mask-image: radial-gradient(120% 130% at 85% 15%, #000, transparent 70%);
}

.fa-vip-hero__gem {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px var(--fa-scrim-3));
}
.fa-vip-hero__gem--a {
  --fa-vip-gem-size: 74px;
  top: 14%;
  right: 6%;
  opacity: .85;
  transform: rotate(8deg);
}
.fa-vip-hero__gem--b {
  --fa-vip-gem-size: 40px;
  bottom: 16%;
  right: 22%;
  opacity: .6;
  transform: rotate(-12deg);
}

/* First-class guest cutout — fills the empty right of the hero. z-index 1 keeps
   it above the facet layer (0) but below the copy (2), so the headline holds
   4.5:1 contrast; height tracks the hero so it downscales from its native 563px
   and stays crisp. Hidden with the gems on mobile (below). */
.fa-vip-hero__figure {
  position: absolute;
  right: clamp(var(--fa-s-3), 3vw, var(--fa-s-8));
  bottom: 0;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 34%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  filter: drop-shadow(0 6px 20px var(--fa-scrim-3));
}

/* Keep the copy column clear of the figure at every desktop width: at wide
   widths the 760px cap wins (copy unchanged from before); as the hero narrows,
   the 66% cap reserves the right for the cutout, so text never runs under her. */
@media (min-width: 769px) {
  .fa-vip-hero__inner { max-width: min(760px, 66%); }
}

.fa-vip-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  width: 100%;
  max-width: 760px;
}

.fa-vip-hero__eyebrow { margin-top: var(--fa-s-1); }
.fa-vip-hero__title { margin: 0; }
.fa-vip-hero__sub { max-width: 46ch; }

.fa-vip-hero__actions {
  margin-top: var(--fa-s-2);
  gap: var(--fa-s-4);
}

.fa-vip-hero__age { gap: var(--fa-s-1); }
.fa-vip-hero__age .fa-icon { --fa-icon-size: 15px; }

/* Breadcrumb */
.fa-vip-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fa-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fa-vip-crumbs__item { display: inline-flex; align-items: center; }
.fa-vip-crumbs__sep { --fa-icon-size: 12px; color: var(--fa-muted); }
.fa-vip-crumbs__here {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-gold);
}


/* ==========================================================================
   2. INTRO
   ========================================================================== */

.fa-vip-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-3);
  max-width: 72ch;   /* readable measure */
}
.fa-vip-intro__rule { margin-top: var(--fa-s-1); }
.fa-vip-intro__rules { align-self: flex-start; }


/* ==========================================================================
   3. BENEFITS — six gold-medallion cards
   ========================================================================== */

.fa-vip-benefit__body {
  align-items: flex-start;
  gap: var(--fa-s-3);
}
.fa-vip-benefit__name { margin-top: var(--fa-s-1); }
.fa-vip-benefit__desc { color: var(--fa-ivory-dim); }


/* ==========================================================================
   4. THE 15 LEVELS — illustrative table
   Scrolls inside its own container on small screens; page never scrolls.
   ========================================================================== */

.fa-vip-levels__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r);
  background: var(--fa-panel);
}

.fa-vip-levels__table {
  width: 100%;
  min-width: 620px;          /* forces the internal scroll below ~620px */
  border-collapse: collapse;
  font-size: var(--fa-fs-sm);
}

.fa-vip-levels__cap {
  caption-side: bottom;
  padding: var(--fa-s-3);
  text-align: left;
  font-size: var(--fa-fs-label);
  line-height: 1.5;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-muted);
}

.fa-vip-levels__table thead th {
  padding: var(--fa-s-3);
  text-align: left;
  vertical-align: bottom;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-gold);
  background: var(--fa-panel-2);
  border-bottom: 1px solid var(--fa-gold-a30);
  white-space: nowrap;
}

.fa-vip-levels__unit {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: var(--fa-fs-micro);
  letter-spacing: var(--fa-ls-tight);
  text-transform: none;
  color: var(--fa-muted);
}

/* Gold tier band that opens each cabin group.
   The selector carries the `.fa-vip-levels__table` ancestor on purpose: the body-cell
   rule `.fa-vip-levels__table tbody th` (below) is more specific than a bare
   `.fa-vip-levels__band th` and was overriding this navy colour with light ivory —
   which rendered as near-invisible text on the gold band. This ancestor makes the
   band rule win. Navy on gold measures ~8:1. */
.fa-vip-levels__table .fa-vip-levels__band th {
  padding: var(--fa-s-2) var(--fa-s-3);
  text-align: left;
  font-family: var(--fa-font-display);
  font-weight: 700;
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-bg-2);
  -webkit-text-fill-color: var(--fa-bg-2);   /* defeat any inherited gradient-clip */
  background: linear-gradient(180deg, var(--fa-gold-hi), var(--fa-gold));
  border-top: 1px solid var(--fa-gold-deep);
}
.fa-vip-levels__band-name,
.fa-vip-levels__band-range { color: var(--fa-bg-2); }
.fa-vip-levels__band-name { font-size: var(--fa-fs-h4); }
.fa-vip-levels__band-range {
  margin-left: var(--fa-s-2);
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-micro);
  letter-spacing: var(--fa-ls-label);
  opacity: .8;
}

/* Body cells */
.fa-vip-levels__table tbody td,
.fa-vip-levels__table tbody th {
  padding: var(--fa-s-3);
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid var(--fa-line);
  color: var(--fa-ivory-dim);
}

/* Zebra — alternate level rows (the band row is excluded). */
.fa-vip-levels__group tr:not(.fa-vip-levels__band):nth-child(even) td,
.fa-vip-levels__group tr:not(.fa-vip-levels__band):nth-child(even) th {
  background: var(--fa-panel-2);
}

.fa-vip-levels__lvl {
  width: 1%;
  text-align: center;
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: var(--fa-fs-h4);
  color: var(--fa-gold);
  font-variant-numeric: tabular-nums;
}
.fa-vip-levels__tier { color: var(--fa-muted); white-space: nowrap; }
.fa-vip-levels__col-num,
.fa-vip-levels__num { text-align: right; white-space: nowrap; }
.fa-vip-levels__num { color: var(--fa-ivory); }

.fa-vip-levels__note { margin-top: var(--fa-s-3); }
.fa-vip-levels__note .fa-link { display: inline; }


/* ==========================================================================
   5. TIER SHOWCASE — four warm cabins
   ========================================================================== */

.fa-vip-tier { overflow: hidden; }

.fa-vip-tier__media { border-radius: var(--fa-r) var(--fa-r) 0 0; }

.fa-vip-tier__gem {
  position: absolute;
  top: var(--fa-s-2);
  right: var(--fa-s-2);
  z-index: 2;
  --fa-vip-gem-size: 30px;
  filter: drop-shadow(0 2px 6px var(--fa-scrim-3));
}

.fa-vip-tier__body {
  gap: var(--fa-s-2);
  align-items: flex-start;
}
.fa-vip-tier__range { align-self: flex-start; }
.fa-vip-tier__name { margin: 2px 0 var(--fa-s-1); }

.fa-vip-tier__perks {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fa-vip-tier__perk {
  display: flex;
  align-items: flex-start;
  gap: var(--fa-s-2);
  font-size: var(--fa-fs-sm);
  line-height: 1.5;
  color: var(--fa-ivory-dim);
}
.fa-vip-tier__tick {
  --fa-icon-size: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--fa-gold);
}

/* Spaceship — the top cabin gets a slightly stronger gold frame. */
.fa-vip-tier--top { border-color: var(--fa-gold-a60); }


/* ==========================================================================
   6. CTA BAND
   ========================================================================== */

.fa-vip-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(var(--fa-s-6), 4vw, var(--fa-s-8));
  background:
    radial-gradient(90% 140% at 50% 0%, var(--fa-gold-a12), transparent 60%),
    var(--fa-panel);
}
.fa-vip-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fa-s-3);
  max-width: 620px;
  margin-inline: auto;
}
.fa-vip-cta__title { margin: 0; }
.fa-vip-cta__sub { max-width: 48ch; }
.fa-vip-cta__actions {
  margin-top: var(--fa-s-1);
  gap: var(--fa-s-5);
}
.fa-vip-cta__terms { margin-top: var(--fa-s-2); }
.fa-vip-cta__terms .fa-link { display: inline; }


/* ==========================================================================
   RESPONSIVE — the hero gems are wide-screen ornament only.
   ========================================================================== */

@media (max-width: 768px) {
  .fa-vip-hero__gem,
  .fa-vip-hero__figure { display: none; }
  .fa-vip-hero { min-height: 200px; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/rules.css
   ========================================================================== */
/* ==========================================================================
   RULES PAGE — parts/rules.css   (the pages guide PART 4, "STRICT")
   Page-scoped rules only, all prefixed .fa-rules-. Composes the shared
   primitives from css/00-base.css (the design guide); adds nothing global, no
   :root token, no primitive override. Sober, low-ornament, readable measure.
   ========================================================================== */


/* ---------------------------------------------------------------- hero band
   Compact page-hero (PART 1): dark navy, gold Art-Deco frame (fa-panel--deco),
   eyebrow / h1 / subtitle / breadcrumb / 18+ chip. ~200-240px tall. */
.fa-rules-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--fa-s-2);
  min-height: clamp(200px, 24vw, 240px);
}

.fa-rules-hero__eyebrow { margin-bottom: var(--fa-s-1); }

.fa-rules-hero__sub {
  max-width: 60ch;
  color: var(--fa-ivory-dim);
}

.fa-rules-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s-3);
  margin-top: var(--fa-s-3);
}

.fa-rules-hero__age { align-self: center; }

/* --- breadcrumb ---------------------------------------------------------- */
.fa-rules-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fa-s-2);
  font-size: var(--fa-fs-xs);
}

.fa-rules-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fa-s-2);
  color: var(--fa-muted);
}

/* Separator before every item after the first. "›" is a plain glyph, not an
   emoji; the sprite is reserved for meaningful icons. */
.fa-rules-crumbs__item + .fa-rules-crumbs__item::before {
  content: "\203A";
  color: var(--fa-gold-dim);
  font-size: 1.1em;
  line-height: 1;
}

.fa-rules-crumbs__item[aria-current="page"] { color: var(--fa-ivory-dim); }


/* -------------------------------------------------------------- notice banner
   The mandatory "template for illustration" callout (PART 4). Raised graphite
   surface with a gold rule down the leading edge and a gold shield mark. */
.fa-rules-notice {
  display: flex;
  align-items: center;
  gap: var(--fa-s-3);
  background: var(--fa-panel-2);
  border-color: var(--fa-gold-a30);
  border-left: 3px solid var(--fa-gold);
}

.fa-rules-notice__ico {
  --fa-icon-size: 26px;
  flex: none;
  color: var(--fa-gold);
}

.fa-rules-notice__text { color: var(--fa-ivory-dim); }


/* ------------------------------------------------------------------ document
   Two columns on desktop: sticky TOC beside the document body, which is capped
   to a readable ~72ch measure. Collapses to one column below 900px. */
.fa-rules-doc {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(var(--fa-s-5), 3vw, var(--fa-s-8));
  align-items: start;
}

/* --- table of contents --------------------------------------------------- */
.fa-rules-toc {
  position: sticky;
  top: calc(var(--fa-header-h) + var(--fa-s-4));
  align-self: start;
  padding: var(--fa-s-4);
  background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a12);
  border-radius: var(--fa-r);
}

.fa-rules-toc__h {
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-gold);
  margin-bottom: var(--fa-s-3);
}

.fa-rules-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: none;
}

.fa-rules-toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--fa-s-2);
  padding: var(--fa-s-2) var(--fa-s-2);
  font-size: var(--fa-fs-sm);
  line-height: 1.4;
  color: var(--fa-ivory-dim);
  border-left: 2px solid transparent;
  border-radius: 0 var(--fa-r-xs) var(--fa-r-xs) 0;
  transition: color var(--fa-t) var(--fa-ease),
              background var(--fa-t) var(--fa-ease),
              border-color var(--fa-t) var(--fa-ease);
}

.fa-rules-toc__link:hover,
.fa-rules-toc__link:focus-visible {
  color: var(--fa-gold);
  background: var(--fa-gold-a08);
  border-left-color: var(--fa-gold);
}

.fa-rules-toc__n {
  flex: none;
  min-width: 1.2em;
  font-family: var(--fa-font-display);
  font-weight: 600;
  color: var(--fa-gold);
  font-variant-numeric: tabular-nums;
}

.fa-rules-toc__note {
  margin-top: var(--fa-s-3);
  padding-top: var(--fa-s-3);
  border-top: 1px solid var(--fa-line);
  /* lift off .fa-fine's muted colour: 10.5px on graphite needs the brighter
     ivory-dim to clear 4.5:1 */
  color: var(--fa-ivory-dim);
}

/* --- document body ------------------------------------------------------- */
/* flex column so the <span class="fa-deco-rule"> dividers blockify and render
   their 1px rule + margins (same mechanism the primitive relies on site-wide). */
.fa-rules-doc__body {
  display: flex;
  flex-direction: column;
  max-width: 72ch;
  min-width: 0;
}

/* --- a legal section ----------------------------------------------------- */
.fa-rules-sec {
  /* land clear of the 68px sticky header when reached by a footer/header anchor */
  scroll-margin-top: calc(var(--fa-header-h) + var(--fa-s-5));
}

.fa-rules-sec__h { margin-bottom: var(--fa-s-3); }

.fa-rules-sec__lead {
  color: var(--fa-ivory-dim);
  margin-bottom: var(--fa-s-2);
}

/* h3 clause-group heading — sober, sentence-case, ivory, with the clause
   number in gold. Deliberately NOT the uppercase-gold .fa-h3 treatment. */
.fa-rules-sec__sub {
  display: flex;
  gap: var(--fa-s-2);
  margin-top: var(--fa-s-5);
  margin-bottom: var(--fa-s-1);
  font-family: var(--fa-font-ui);
  font-weight: 700;
  font-size: var(--fa-fs-h4);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-tight);
  color: var(--fa-ivory);
}

.fa-rules-sec__no {
  flex: none;
  color: var(--fa-gold);
  font-variant-numeric: tabular-nums;
}

/* running prose inside a section */
.fa-rules-sec p.fa-body { margin-top: var(--fa-s-2); }

/* --- clause list --------------------------------------------------------- */
.fa-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s-2);
  margin-top: var(--fa-s-2);
}

.fa-rules-list > li {
  position: relative;
  padding-left: var(--fa-s-5);
  font-size: var(--fa-fs-body);
  line-height: var(--fa-lh-body);
  color: var(--fa-ivory-dim);
}

/* small gold Art-Deco diamond marker — the page's only ornament */
.fa-rules-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(.8em - 3px);
  width: 5px;
  height: 5px;
  background: var(--fa-gold);
  opacity: .8;
  transform: rotate(45deg);
}

.fa-rules-list strong { color: var(--fa-ivory); font-weight: 600; }
.fa-rules-list em     { color: var(--fa-ivory-dim); font-style: italic; }

/* --- inline body link (Promotions page, Cookie Policy cross-refs) --------- */
.fa-rules-link {
  display: inline;
  font-weight: 600;
}
.fa-rules-link:hover { text-decoration: underline; }

/* --- [bracketed] operator placeholder token ------------------------------ */
.fa-rules-ph {
  font-weight: 600;
  color: var(--fa-ivory);
  background: var(--fa-gold-a08);
  border-bottom: 1px dashed var(--fa-gold-a45);
  border-radius: var(--fa-r-xs);
  padding: 0 4px;
}

/* --- responsible-gaming risk statement ----------------------------------- */
.fa-rules-risk {
  display: flex;
  align-items: center;
  gap: var(--fa-s-3);
  margin: var(--fa-s-4) 0 var(--fa-s-2);
  padding: var(--fa-s-3) var(--fa-s-4);
  background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r);
  color: var(--fa-ivory);
  font-size: var(--fa-fs-sm);
  line-height: 1.5;
}

.fa-rules-risk__ico {
  --fa-icon-size: 26px;
  flex: none;
  color: var(--fa-gold);
}

.fa-rules-risk strong { color: var(--fa-ivory); font-weight: 700; }

/* --- back-to-contents link ----------------------------------------------- */
.fa-rules-back { margin-top: var(--fa-s-5); }


/* ==========================================================================
   RESPONSIVE — collapse the two-column document to one column below 900px.
   Verified breakpoints 1440/1280/1024 keep the sticky TOC; 768/375 stack it.
   ========================================================================== */
@media (max-width: 900px) {
  .fa-rules-doc {
    grid-template-columns: 1fr;
    gap: var(--fa-s-5);
  }

  /* TOC stops being sticky and sits above the document as a compact wrap of
     pill links, so it costs little vertical space on a phone. */
  .fa-rules-toc {
    position: static;
    top: auto;
  }

  .fa-rules-toc__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--fa-s-2);
  }

  .fa-rules-toc__link {
    padding: var(--fa-s-1) var(--fa-s-3);
    border-left: 0;
    border: 1px solid var(--fa-gold-a30);
    border-radius: var(--fa-r-pill);
  }

  .fa-rules-toc__link:hover,
  .fa-rules-toc__link:focus-visible {
    border-color: var(--fa-gold);
  }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/casino.css
   ========================================================================== */
/* ==========================================================================
   CASINO / GAMES PAGE — scoped styles (.fa-casino-*)
   Composes the shared primitives: .fa-panel, .fa-panel--deco, .fa-sec,
   .fa-grid, .fa-card, .fa-media, .fa-scrim, .fa-badge, .fa-btn, .fa-tabs,
   .fa-chip, .fa-link. Only page-specific rules live here.
   ========================================================================== */

/* --- Page hero (compact banner, like the VIP/Promotions heroes) ---------- */
.fa-casino-hero { position: relative; overflow: hidden; min-height: 190px; display: flex; align-items: center; }
.fa-casino-hero__inner { position: relative; z-index: 1; padding: var(--fa-s-3) var(--fa-s-2); }
.fa-casino-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 150% at 90% 0%, var(--fa-gold-a12), transparent 55%),
    radial-gradient(80% 120% at 0% 100%, var(--fa-gold-a08), transparent 60%);
}
.fa-casino-hero__crumbs { margin-bottom: var(--fa-s-2); }
.fa-casino-hero__eyebrow { margin-top: var(--fa-s-1); }
.fa-casino-hero__title { margin: 0; }
.fa-casino-hero__sub { max-width: 54ch; }
.fa-casino-hero__actions { margin-top: var(--fa-s-3); gap: var(--fa-s-3); }
.fa-casino-hero__age { gap: var(--fa-s-1); }
.fa-casino-hero__age .fa-icon { --fa-icon-size: 15px; }

/* hero figure — a crew cutout on the right, behind the copy (z-index 0 vs the
   inner's z-index 1). Contain so the whole figure shows; left edge faded so it
   melts into the panel. Hidden where it would crowd the copy. */
.fa-casino-hero__figure {
  position: absolute; right: 3%; bottom: -4%; z-index: 0;
  height: 150%; width: auto; max-width: 40%;
  object-fit: contain; object-position: bottom right;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
          mask-image: linear-gradient(90deg, transparent, #000 34%);
}
@media (max-width: 900px) { .fa-casino-hero__figure { opacity: .4; max-width: 34%; } }
@media (max-width: 600px) { .fa-casino-hero__figure { display: none; } }

/* --- Library toolbar: category tabs on the left, live search on the right - */
.fa-casino-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--fa-s-3) var(--fa-s-4);
  margin-bottom: var(--fa-s-4);
}
.fa-casino-controls .fa-casino-tabs { margin-bottom: 0; flex: 1 1 auto; }

.fa-casino-search { position: relative; flex: 0 1 260px; min-width: 190px; }
.fa-casino-search__icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  --fa-icon-size: 17px; color: var(--fa-gold); pointer-events: none;
}
.fa-casino-search__input {
  width: 100%; padding: 9px 12px 9px 36px;
  font-family: var(--fa-font-ui); font-size: var(--fa-fs-sm); color: var(--fa-ivory);
  background: var(--fa-bg-2); border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r-xs);
  transition: border-color var(--fa-t) var(--fa-ease), box-shadow var(--fa-t) var(--fa-ease);
}
.fa-casino-search__input::placeholder { color: var(--fa-muted); }
.fa-casino-search__input:focus {
  outline: none; border-color: var(--fa-gold);
  box-shadow: 0 0 0 3px var(--fa-gold-a22);
}
.fa-casino-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* --- Category tabs (reuse .fa-tabs__list + __tab; add the count pill) ----- */
.fa-casino-tabs { flex-wrap: wrap; margin-bottom: var(--fa-s-4); }
.fa-casino-tab { cursor: pointer; }
.fa-casino-tab__n {
  font-size: var(--fa-fs-micro); font-weight: 700; color: var(--fa-muted);
  margin-left: 2px; vertical-align: 1px;
}
.fa-casino-tab[aria-selected="true"] .fa-casino-tab__n { color: var(--fa-gold-hi); }

/* aviation-themed category suffix — a subtle flourish; hidden on mobile */
.fa-casino-tab__theme {
  margin-left: 4px; padding-left: 6px;
  border-left: 1px solid var(--fa-gold-a22);
  font-family: var(--fa-font-display); font-weight: 600;
  font-size: var(--fa-fs-micro); letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase; color: var(--fa-gold-dim);
}
.fa-casino-tab[aria-selected="true"] .fa-casino-tab__theme { color: var(--fa-gold); }
@media (max-width: 768px) { .fa-casino-tab__theme { display: none; } }

/* --- Game grid ----------------------------------------------------------- */
.fa-casino-grid { gap: var(--fa-gap-grid); }
.fa-casino-card { position: relative; }
.fa-casino-card__thumb {
  border-radius: var(--fa-r) var(--fa-r) 0 0;
  border-bottom: 1px solid var(--fa-gold-a30);
}

/* Whole tile links to game.html via the stretched .fa-card__link hit area; the
   footer's Play/Demo controls sit above it (z-index) so they stay clickable,
   and the decorative RTP chip must not swallow the tile click. */
.fa-casino-card__rtp { pointer-events: none; }
.fa-casino-card__foot {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--fa-s-2);
}
.fa-casino-card__body { gap: var(--fa-s-1); background: linear-gradient(180deg, var(--fa-bg), transparent 62%); }
.fa-casino-card__title { font-size: var(--fa-fs-sm); }
/* Studio line under the title — quiet, uppercase, mirrors the Featured Flights
   provider metrics (10.5px / .12em / --fa-muted). */
.fa-casino-card__provider {
  margin: 0;
  font-family: var(--fa-font-ui);
  font-weight: 600;
  font-size: var(--fa-fs-label);
  line-height: 1.3;
  letter-spacing: var(--fa-ls-wider);
  text-transform: uppercase;
  color: var(--fa-muted);
}

/* RTP chip — gold neon, revealed when the grid is hovered/focused (mirrors the
   Featured Flights behaviour). aria-hidden decorative flourish. */
.fa-casino-card__rtp {
  position: absolute; top: var(--fa-s-2); right: var(--fa-s-2); z-index: 3;
  padding: 3px 7px; font-family: var(--fa-font-ui); font-weight: 700;
  font-size: var(--fa-fs-micro); line-height: 1; letter-spacing: var(--fa-ls-label);
  text-transform: uppercase; color: var(--fa-gold-hi);
  background: rgba(6, 15, 31, .72); border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r-xs);
  text-shadow: 0 0 4px rgba(240, 213, 132, .95), 0 0 9px rgba(240, 213, 132, .55);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s var(--fa-ease), transform .2s var(--fa-ease);
}
.fa-casino-grid:hover .fa-casino-card__rtp,
.fa-casino-grid:focus-within .fa-casino-card__rtp { opacity: 1; transform: none; }

/* hover PLAY NOW overlay (never replaces the always-present button) */
.fa-casino-card__over { z-index: 2; border-radius: inherit; }
.fa-casino-card__over-play {
  position: relative; z-index: 2; padding: var(--fa-s-2) var(--fa-s-3);
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-label);
  line-height: 1; letter-spacing: var(--fa-ls-wide); text-transform: uppercase;
  color: var(--fa-gold); background: var(--fa-bg-2);
  border: 1px solid var(--fa-gold); border-radius: var(--fa-r-xs); box-shadow: var(--fa-sh-sm);
}
.fa-casino-card[hidden] { display: none; }
.fa-casino-lib__count {
  margin-top: var(--fa-s-4); text-align: center;
  font-size: var(--fa-fs-label); letter-spacing: var(--fa-ls-label);
  text-transform: uppercase; color: var(--fa-muted);
}
.fa-casino-lib__count[hidden] { display: none; }
.fa-casino-lib__empty {
  margin-top: var(--fa-s-5); text-align: center;
  color: var(--fa-ivory-dim); font-size: var(--fa-fs-body); line-height: var(--fa-lh-body);
}
.fa-casino-lib__empty[hidden] { display: none; }

/* --- SEO article (readable prose column) --------------------------------- */
.fa-casino-seo__body { max-width: 74ch; }
.fa-rich h3 {
  font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h3);
  letter-spacing: var(--fa-ls); text-transform: uppercase; color: var(--fa-gold);
  margin: var(--fa-s-5) 0 var(--fa-s-2);
}
.fa-rich p { color: var(--fa-ivory-dim); line-height: var(--fa-lh-body); margin: 0 0 var(--fa-s-3); }
.fa-rich strong { color: var(--fa-ivory); }
.fa-rich a { color: var(--fa-gold); text-decoration: underline; text-underline-offset: 2px; }
.fa-rich a:hover { color: var(--fa-gold-hi); }
.fa-casino-seo__list { margin: 0 0 var(--fa-s-3); padding: 0; list-style: none; display: grid; gap: var(--fa-s-2); }
.fa-casino-seo__list li {
  position: relative; padding-left: var(--fa-s-5); color: var(--fa-ivory-dim); line-height: var(--fa-lh-body);
}
.fa-casino-seo__list li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px;
  background: var(--fa-gold); transform: rotate(45deg); box-shadow: 0 0 6px rgba(212, 175, 55, .5);
}

/* --- FAQ accordion (own mechanics; driven by casino.js) ------------------ */
.fa-casino-faq__grid { display: grid; gap: var(--fa-s-2); }
.fa-faq__item { border: 1px solid var(--fa-gold-a22); border-radius: var(--fa-r); background: var(--fa-panel-2); overflow: hidden; }
.fa-faq__q-wrap { margin: 0; }
.fa-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--fa-s-3);
  padding: var(--fa-s-3) var(--fa-s-4); cursor: pointer; text-align: left;
  background: none; border: 0; color: var(--fa-ivory);
  font-family: var(--fa-font-ui); font-weight: 600; font-size: var(--fa-fs-body);
}
.fa-faq__chev { --fa-icon-size: 18px; color: var(--fa-gold); flex: 0 0 auto; transition: transform var(--fa-t) var(--fa-ease); }
.fa-faq__q[aria-expanded="true"] .fa-faq__chev { transform: rotate(180deg); }
.fa-faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--fa-t) var(--fa-ease); }
.fa-faq__body.is-open { grid-template-rows: 1fr; }
.fa-faq__a { overflow: hidden; margin: 0; padding: 0 var(--fa-s-4); color: var(--fa-ivory-dim); line-height: var(--fa-lh-body); }
.fa-faq__body.is-open .fa-faq__a { padding-bottom: var(--fa-s-4); }

@media (max-width: 768px) {
  .fa-casino-hero { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .fa-faq__body, .fa-faq__chev, .fa-casino-card__rtp { transition: none; }
}

/* ==========================================================================
   GAME LAUNCHER PAGE (game.html) — .fa-game*
   A standalone per-title page reached from a library tile. Ships in this sheet
   so it rides the same css/main.css bundle every page loads. Reuses .fa-panel,
   .fa-vip-crumbs, .fa-chip, .fa-btn, .fa-scrim.
   ========================================================================== */
.fa-game { position: relative; overflow: hidden; }
.fa-game__crumbs { margin-bottom: var(--fa-s-4); }
.fa-game__grid {
  display: grid; gap: var(--fa-s-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
}
@media (max-width: 860px) { .fa-game__grid { grid-template-columns: 1fr; } }

.fa-game__stage { min-width: 0; }
.fa-game__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; width: 100%; max-width: 380px; margin-inline: auto;
  border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r);
  background: var(--fa-graphite);
}
.fa-game__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fa-game__frame > .fa-scrim--dim { opacity: 0; transition: opacity var(--fa-t-slow) var(--fa-ease); }
.fa-game__frame.is-playing > .fa-scrim--dim { opacity: 1; }
.fa-game__frame-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: var(--fa-s-2); padding: var(--fa-s-4); text-align: center;
}
.fa-game__frame-note {
  color: var(--fa-ivory); font-size: var(--fa-fs-sm); line-height: var(--fa-lh-body);
  max-width: 30ch; text-shadow: 0 1px 6px rgba(6, 15, 31, .9);
}
.fa-game__frame.is-playing .fa-game__launch { display: none; }

.fa-game__info { min-width: 0; }
.fa-game__title { margin: var(--fa-s-1) 0 0; }
.fa-game__meta { gap: var(--fa-s-2); margin: var(--fa-s-3) 0; }
.fa-game__lead { max-width: 46ch; }
.fa-game__actions { gap: var(--fa-s-3); margin: var(--fa-s-4) 0 var(--fa-s-3); }
.fa-game__fine { max-width: 54ch; color: var(--fa-muted); }
.fa-game__back { margin-top: var(--fa-s-3); display: inline-flex; align-items: center; gap: var(--fa-s-1); }
.fa-game__back .fa-icon { --fa-icon-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .fa-game__frame > .fa-scrim--dim { transition: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/hall-of-fame.css
   ========================================================================== */
/* ==========================================================================
   HALL OF FAME PAGE — scoped styles (.fa-hof-*)
   Composes shared primitives (.fa-panel, .fa-sec, .fa-tabs, .fa-btn, .fa-chip,
   .fa-link). Only page-specific rules here.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.fa-hof-hero { position: relative; overflow: hidden; min-height: 200px; display: flex; align-items: center; }
.fa-hof-hero__inner { position: relative; z-index: 1; padding: var(--fa-s-3) var(--fa-s-2); max-width: 62ch; }
.fa-hof-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 150% at 88% 10%, var(--fa-gold-a12), transparent 55%);
}
.fa-hof-hero__crumbs { margin-bottom: var(--fa-s-2); }
.fa-hof-hero__eyebrow { margin-top: var(--fa-s-1); }
.fa-hof-hero__title { margin: 0; }
.fa-hof-hero__sub { max-width: 48ch; }
.fa-hof-hero__actions { margin-top: var(--fa-s-3); gap: var(--fa-s-3); }
.fa-hof-hero__age { gap: var(--fa-s-1); }
.fa-hof-hero__age .fa-icon { --fa-icon-size: 15px; }
/* hero image — the gold winged trophy, on the right, behind the copy (z-index 0
   vs the inner's z-index 1). */
.fa-hof-hero__figure {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  height: 118%; width: auto; max-width: 40%; z-index: 0; pointer-events: none;
  object-fit: contain; object-position: center right;
  filter: drop-shadow(0 10px 30px rgba(212, 175, 55, .35)) drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
@media (max-width: 860px) { .fa-hof-hero__figure { max-width: 32%; opacity: .55; right: 2%; } }
@media (max-width: 560px) { .fa-hof-hero__figure { display: none; } }

/* --- Intro + stat tiles -------------------------------------------------- */
.fa-hof-intro__body { max-width: 72ch; }
.fa-hof-stats {
  margin: var(--fa-s-5) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fa-gap-grid);
}
.fa-hof-stat {
  display: grid; gap: 2px; padding: var(--fa-s-4);
  background: var(--fa-panel-2); border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r);
  text-align: center;
}
.fa-hof-stat__val {
  font-family: var(--fa-font-display); font-weight: 700; font-size: var(--fa-fs-stat);
  color: var(--fa-gold); line-height: 1; font-variant-numeric: tabular-nums;
}
.fa-hof-stat__lbl {
  font-size: var(--fa-fs-label); letter-spacing: var(--fa-ls-label);
  text-transform: uppercase; color: var(--fa-muted);
}
@media (max-width: 560px) { .fa-hof-stats { grid-template-columns: 1fr; } }

/* --- Winners board tabs + table ------------------------------------------ */
.fa-hof-tabs { flex-wrap: wrap; margin-bottom: var(--fa-s-4); }
.fa-hof-tab { cursor: pointer; }
.fa-hof-board__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--fa-r); }
.fa-hof-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fa-fs-sm); }
.fa-hof-table thead th {
  text-align: left; padding: var(--fa-s-2) var(--fa-s-3);
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label); text-transform: uppercase; color: var(--fa-gold);
  border-bottom: 1px solid var(--fa-gold-a30);
}
.fa-hof-table tbody th,
.fa-hof-table tbody td {
  padding: var(--fa-s-3); text-align: left; vertical-align: middle;
  border-top: 1px solid var(--fa-line); color: var(--fa-ivory-dim);
}
.fa-hof-table tbody td:nth-child(2),
.fa-hof-table tbody tr > td:first-of-type { color: var(--fa-ivory); font-weight: 600; }
.fa-hof-table tbody tr:nth-child(even) th,
.fa-hof-table tbody tr:nth-child(even) td { background: var(--fa-panel-2); }
.fa-hof-table__rank {
  width: 1%; text-align: center !important; font-family: var(--fa-font-display);
  font-weight: 700; color: var(--fa-gold); font-variant-numeric: tabular-nums;
}
.fa-hof-table__num { text-align: right !important; white-space: nowrap; color: var(--fa-gold-hi) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-hof-table__when { white-space: nowrap; color: var(--fa-muted) !important; font-size: var(--fa-fs-xs); }
/* top three rank chips */
.fa-hof-table tbody tr:nth-child(1) .fa-hof-table__rank { color: var(--fa-gold-hi); }
.fa-hof-table tbody tr:nth-child(2) .fa-hof-table__rank { color: var(--fa-silver); }
.fa-hof-table tbody tr:nth-child(3) .fa-hof-table__rank { color: var(--fa-bronze); }
.fa-hof-board__note { margin-top: var(--fa-s-3); }

/* --- Latest winners feed ------------------------------------------------- */
.fa-hof-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--fa-s-2); }
.fa-hof-feed__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: var(--fa-s-3) var(--fa-s-4);
  background: var(--fa-panel-2); border: 1px solid var(--fa-gold-a22); border-radius: var(--fa-r);
  color: var(--fa-ivory-dim); font-size: var(--fa-fs-sm);
}
.fa-hof-feed__user { color: var(--fa-ivory); font-weight: 600; }
.fa-hof-feed__prize { color: var(--fa-gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.fa-hof-feed__game { color: var(--fa-gold); }
.fa-hof-feed__when { margin-left: auto; color: var(--fa-muted); font-size: var(--fa-fs-xs); }

/* --- CTA band ------------------------------------------------------------ */
.fa-hof-cta { text-align: center; }
.fa-hof-cta__in { max-width: 60ch; margin-inline: auto; padding: var(--fa-s-4) var(--fa-s-2); }
.fa-hof-cta__h { color: var(--fa-gold); margin: 0 0 var(--fa-s-2); }
.fa-hof-cta__p { color: var(--fa-ivory-dim); margin: 0 auto var(--fa-s-4); }
.fa-hof-cta__actions { justify-content: center; gap: var(--fa-s-3); }

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/game.css
   ========================================================================== */
/* ==========================================================================
   GAME DETAIL / LAUNCHER — scoped styles (.fa-game*)
   Composes the shared primitives: .fa-panel, .fa-card, .fa-media, .fa-btn,
   .fa-chip, .fa-grid, .fa-scrim, .fa-sec, .fa-vip-crumbs, .fa-link. Only
   page-specific rules live here. No :root tokens are declared (the design spec).
   ========================================================================== */

.fa-game { position: relative; }
/* (top gap handled globally by .fa-main--flush > .fa-panel:first-child) */

/* --- Fallback (visible by default; game.js hides it once a slug resolves) -- */
.fa-game-fallback {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--fa-s-3); max-width: 56ch; margin-inline: auto;
  padding: var(--fa-s-7) var(--fa-s-3);
}
.fa-game-fallback[hidden] { display: none; }
.fa-game-fallback__badge {
  display: grid; place-items: center; width: 56px; height: 56px;
  color: var(--fa-gold); background: var(--fa-gold-a08);
  border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r-circle);
}
.fa-game-fallback__badge .fa-icon { --fa-icon-size: 26px; }
.fa-game-fallback__h { margin: 0; color: var(--fa-ivory); }
.fa-game-fallback__p { margin: 0; color: var(--fa-ivory-dim); line-height: var(--fa-lh-body); }

/* --- Header bits --- */
.fa-game__main[hidden] { display: none; }
.fa-game__crumbs { margin-bottom: var(--fa-s-3); }
.fa-game__eyebrow { margin-top: 0; }
.fa-game__title { margin: 0 0 var(--fa-s-5); }

/* --- Layout: stage + info rail --- */
.fa-game__layout {
  display: grid; gap: var(--fa-s-5); align-items: start;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .fa-game__layout { grid-template-columns: 1fr; } }

/* --- Stage: framed 16:9 demo panel --- */
.fa-game__stage-wrap { position: relative; }
.fa-game-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: var(--fa-s-5);
  border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r-lg);
  background: radial-gradient(120% 140% at 50% 0%, var(--fa-panel-2), var(--fa-bg) 72%);
}
/* ambient blurred wash from the tile art — --fa-game-art is set inline by JS */
.fa-game-stage::before {
  content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  background-image: var(--fa-game-art, none);
  background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.1); opacity: .3; transform: scale(1.1);
}
.fa-game-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--fa-scrim-3), var(--fa-scrim-1));
}
.fa-game-stage__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--fa-hi-a06), inset 0 -60px 90px -50px rgba(0, 0, 0, .65);
}
.fa-game-stage__launcher,
.fa-game-stage__demo { position: relative; z-index: 2; }

/* launcher state */
.fa-game-stage__launcher {
  display: flex; flex-direction: column; align-items: center; gap: var(--fa-s-4);
  text-align: center;
}
.fa-game-stage__frame {
  display: block; width: clamp(116px, 18vw, 168px);
  overflow: hidden; background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a45); border-radius: var(--fa-r);
  box-shadow: var(--fa-sh-lg);
}
.fa-game-stage__art { display: block; width: 100%; height: auto; }
.fa-game-stage__cta { display: flex; flex-direction: column; align-items: center; gap: var(--fa-s-3); }
.fa-game-stage__note {
  margin: 0; max-width: 46ch; color: var(--fa-ivory-dim);
  font-size: var(--fa-fs-sm); line-height: var(--fa-lh-body);
}

/* demo state */
.fa-game-stage__demo {
  display: flex; flex-direction: column; align-items: center; gap: var(--fa-s-3);
  max-width: 52ch; text-align: center; outline: none;
}
.fa-game-stage__demo[hidden] { display: none; }
.fa-game-stage__demo-chip { gap: var(--fa-s-1); }
.fa-game-stage__demo-h {
  margin: 0; color: var(--fa-gold);
  font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-fs-h2);
  letter-spacing: var(--fa-ls); text-transform: uppercase;
}
.fa-game-stage__demo-p {
  margin: 0; color: var(--fa-ivory-dim); font-size: var(--fa-fs-sm); line-height: var(--fa-lh-body);
}
.fa-game-stage__demo-p [data-game-demo-game] { color: var(--fa-ivory); font-weight: 600; }
.fa-game-stage__demo-actions { margin-top: var(--fa-s-1); gap: var(--fa-s-2); }

/* --- Info rail: details strip + real-money CTA --- */
.fa-game__rail { display: flex; flex-direction: column; gap: var(--fa-s-3); }
.fa-game__facts {
  margin: 0; display: grid; gap: 1px; overflow: hidden;
  border: 1px solid var(--fa-gold-a22); border-radius: var(--fa-r);
  background: var(--fa-gold-a12);
}
.fa-game__fact {
  display: flex; align-items: center; justify-content: space-between; gap: var(--fa-s-3);
  padding: var(--fa-s-3) var(--fa-s-4); background: var(--fa-panel);
}
.fa-game__fact-label {
  display: inline-flex; align-items: center; gap: var(--fa-s-2);
  font-family: var(--fa-font-ui); font-weight: 600; font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label); text-transform: uppercase; color: var(--fa-muted);
}
.fa-game__fact-label .fa-icon { --fa-icon-size: 14px; color: var(--fa-gold); }
.fa-game__fact-value {
  margin: 0; text-align: right; color: var(--fa-ivory);
  font-family: var(--fa-font-ui); font-weight: 700; font-size: var(--fa-fs-sm);
}
.fa-game__play { margin-top: var(--fa-s-1); }
.fa-game__rail-note {
  margin: 0; color: var(--fa-muted); font-size: var(--fa-fs-xs); line-height: var(--fa-lh-body);
}
.fa-game__age { align-self: flex-start; gap: var(--fa-s-1); }
.fa-game__age .fa-icon { --fa-icon-size: 15px; }

/* --- More games (related grid) --- */
.fa-game-rel { margin-top: var(--fa-s-7); }
.fa-game-rel[hidden] { display: none; }
.fa-game-rel__grid { gap: var(--fa-gap-grid); margin-top: var(--fa-s-4); }
.fa-game-rel__card { text-decoration: none; }
.fa-game-rel__thumb {
  border-radius: var(--fa-r) var(--fa-r) 0 0;
  border-bottom: 1px solid var(--fa-gold-a30);
}
.fa-game-rel__body { background: linear-gradient(180deg, var(--fa-bg), transparent 62%); }
.fa-game-rel__title { display: block; font-size: var(--fa-fs-sm); color: var(--fa-ivory); }
.fa-game-rel__card:hover .fa-game-rel__title,
.fa-game-rel__card:focus-visible .fa-game-rel__title { color: var(--fa-gold-hi); }

@media (max-width: 600px) {
  .fa-game-stage { aspect-ratio: 4 / 3; padding: var(--fa-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .fa-game-stage::before { filter: none; transform: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/404.css
   ========================================================================== */
/* ==========================================================================
   404 PAGE — scoped styles (.fa-404*). Composes the shared primitives
   (.fa-panel, .fa-btn, .fa-link, .fa-vip-crumbs, .fa-eyebrow, .fa-display).
   No :root tokens declared (the design spec).
   ========================================================================== */

.fa-404 { text-align: center; }

.fa-404__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--fa-s-4); max-width: 62ch; margin-inline: auto;
  padding-block: var(--fa-s-6);
}

.fa-404__crumbs { margin-bottom: var(--fa-s-2); }

.fa-404__eyebrow {
  display: inline-flex; align-items: center; gap: var(--fa-s-2);
  color: var(--fa-gold);
}
.fa-404__eyebrow .fa-icon { --fa-icon-size: 15px; }

/* Oversized gold numeral — the visual anchor. Decorative (aria-hidden). */
.fa-404__code {
  margin: 0;
  font-family: var(--fa-font-display); font-weight: 700;
  font-size: clamp(96px, 24vw, 210px); line-height: .86;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #F0D584 0%, #D4AF37 52%, #B8912F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .5));
}

.fa-404__title { margin: 0; color: var(--fa-ivory); }
.fa-404__sub { margin: 0; color: var(--fa-ivory-dim); }

.fa-404__actions { justify-content: center; flex-wrap: wrap; gap: var(--fa-s-3); }

.fa-404__links {
  list-style: none; margin: var(--fa-s-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fa-s-2) var(--fa-s-5);
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: parts/help.css
   ========================================================================== */
/* ==========================================================================
   HELP CENTRE — scoped styles (.fa-help-*). Composes .fa-panel/.fa-card/
   .fa-btn/.fa-chip/.fa-sec/.fa-vip-crumbs. No :root tokens declared.
   ========================================================================== */

/* --- hero --- */
/* (top gap handled globally by .fa-main--flush > .fa-panel:first-child) */
.fa-help-hero__inner { display: flex; flex-direction: column; gap: var(--fa-s-3); max-width: 70ch; }
.fa-help-hero__crumbs { margin-bottom: var(--fa-s-1); }
.fa-help-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--fa-s-2); color: var(--fa-gold); }
.fa-help-hero__eyebrow .fa-icon { --fa-icon-size: 15px; }
.fa-help-hero__title { margin: 0; color: var(--fa-ivory); }
.fa-help-hero__sub { margin: 0; color: var(--fa-ivory-dim); }
.fa-help-hero__jump { list-style: none; margin: var(--fa-s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--fa-s-2); }
.fa-help-hero__jump .fa-chip { text-decoration: none; gap: var(--fa-s-1); }
.fa-help-hero__jump .fa-icon { --fa-icon-size: 13px; }

/* --- support channels --- */
.fa-help-support__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fa-gap-grid);
}
@media (max-width: 860px) { .fa-help-support__grid { grid-template-columns: 1fr; } }
.fa-help-channel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fa-s-3); padding: var(--fa-s-5); }
.fa-help-channel__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--fa-gold); background: var(--fa-gold-a12);
  border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r-circle);
}
.fa-help-channel__icon .fa-icon { --fa-icon-size: 22px; }
.fa-help-channel__title { margin: 0; color: var(--fa-ivory); }
.fa-help-channel__desc { margin: 0; color: var(--fa-ivory-dim); line-height: var(--fa-lh-body); flex: 1 1 auto; }
.fa-help-channel__note { margin: 0; color: var(--fa-muted); }
.fa-help-channel__hours {
  margin: 0; font-family: var(--fa-font-display); font-weight: 700;
  font-size: var(--fa-fs-h3); color: var(--fa-gold);
}
.fa-help-channel .fa-btn { margin-top: auto; }

/* --- contact form --- */
.fa-help-contact__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--fa-s-6); align-items: start;
}
@media (max-width: 860px) { .fa-help-contact__grid { grid-template-columns: 1fr; } }
.fa-help-form { display: grid; gap: var(--fa-s-4); }
.fa-help-field { display: grid; gap: var(--fa-s-1); }
.fa-help-label {
  font-family: var(--fa-font-ui); font-weight: 600; font-size: var(--fa-fs-label);
  letter-spacing: var(--fa-ls-label); text-transform: uppercase; color: var(--fa-muted);
}
.fa-help-input {
  width: 100%; padding: 11px 13px; font-family: var(--fa-font-ui); font-size: var(--fa-fs-sm);
  color: var(--fa-ivory); background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r-sm);
  transition: border-color var(--fa-t) var(--fa-ease), box-shadow var(--fa-t) var(--fa-ease);
}
.fa-help-input:focus-visible { outline: none; border-color: var(--fa-gold); box-shadow: 0 0 0 2px var(--fa-gold-a30); }
.fa-help-input[aria-invalid="true"] { border-color: var(--fa-burgundy); }
.fa-help-textarea { resize: vertical; min-height: 120px; line-height: var(--fa-lh-body); }
.fa-help-err { margin: 0; color: var(--fa-burgundy-hi); font-size: var(--fa-fs-xs); }
.fa-help-status {
  margin: 0; padding: var(--fa-s-3) var(--fa-s-4); border-radius: var(--fa-r-sm);
  background: var(--fa-gold-a12); border: 1px solid var(--fa-gold-a30);
  color: var(--fa-ivory); font-size: var(--fa-fs-sm);
}

.fa-help-aside { display: flex; flex-direction: column; gap: var(--fa-s-3); }
.fa-help-aside__card {
  padding: var(--fa-s-5); background: var(--fa-panel-2);
  border: 1px solid var(--fa-line); border-radius: var(--fa-r);
}
.fa-help-aside__card h3 { margin: 0 0 var(--fa-s-3); color: var(--fa-ivory); }
.fa-help-aside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fa-s-3); }
.fa-help-aside__list li {
  display: flex; gap: var(--fa-s-2); align-items: flex-start;
  color: var(--fa-ivory-dim); font-size: var(--fa-fs-sm); line-height: var(--fa-lh-body);
}
.fa-help-aside__list .fa-icon { --fa-icon-size: 14px; color: var(--fa-gold); flex: none; margin-top: 4px; }
.fa-help-aside__note { color: var(--fa-muted); line-height: var(--fa-lh-body); }
.fa-help-aside__note .fa-chip { margin-right: var(--fa-s-1); vertical-align: middle; }

/* inline prose links: the .fa-link primitive is inline-flex and breaks mid-
   sentence, so links inside help prose flow as plain underlined inline links */
.fa-help-aside a,
.fa-help-faq__a a {
  display: inline; color: var(--fa-gold); text-decoration: underline; text-underline-offset: 2px;
}
.fa-help-aside a:hover,
.fa-help-faq__a a:hover { color: var(--fa-gold-hi); }

/* --- FAQ accordion --- */
.fa-help-faq__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fa-s-2); }
.fa-help-faq__grid .fa-faq {
  background: var(--fa-panel-2); border: 1px solid var(--fa-line); border-radius: var(--fa-r); overflow: hidden;
}
.fa-help-faq__grid .fa-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--fa-s-3);
  padding: var(--fa-s-3) var(--fa-s-4); text-align: left; cursor: pointer;
  font-family: var(--fa-font-ui); font-weight: 600; font-size: var(--fa-fs-sm);
  color: var(--fa-ivory); background: none; border: 0;
}
.fa-help-faq__grid .fa-faq__q:hover { color: var(--fa-gold); }
.fa-help-faq__grid .fa-faq__q .fa-icon { --fa-icon-size: 16px; color: var(--fa-gold); flex: none; transition: transform var(--fa-t) var(--fa-ease); }
.fa-help-faq__grid .fa-faq__q[aria-expanded="true"] .fa-icon { transform: rotate(180deg); }
.fa-help-faq__grid .fa-faq__a { display: none; padding: 0 var(--fa-s-4) var(--fa-s-4); }
.fa-help-faq__grid .fa-faq__a.is-open { display: block; }
.fa-help-faq__grid .fa-faq__a p { margin: 0; color: var(--fa-ivory-dim); font-size: var(--fa-fs-sm); line-height: var(--fa-lh-body); }

/* --- flight status tracker --- */
.fa-help-track { display: flex; gap: var(--fa-s-3); flex-wrap: wrap; align-items: center; }
.fa-help-track__input { flex: 1 1 260px; }
.fa-help-track__result {
  margin-top: var(--fa-s-4); padding: var(--fa-s-4) var(--fa-s-5);
  background: var(--fa-panel-2); border: 1px solid var(--fa-gold-a30); border-radius: var(--fa-r);
  color: var(--fa-ivory); line-height: var(--fa-lh-body);
}
.fa-help-track__result[hidden] { display: none; }
.fa-help-track__stage { display: inline-flex; align-items: center; gap: var(--fa-s-2); font-weight: 700; color: var(--fa-gold); }
.fa-help-track__stage .fa-icon { --fa-icon-size: 16px; }
.fa-help-status-sec__note { margin: var(--fa-s-3) 0 0; color: var(--fa-muted); }

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: css/99-gold.css
   ========================================================================== */
/* ==========================================================================
   FORTUNE AIRLINES — GOLD LAYER  (ornament overlay)
   --------------------------------------------------------------------------
   Client note: "должно быть больше золота" + the 2026-07-21 uplift brief —
   raise the ORNAMENT to a printed-poster level in the Havana-Royale family
   (its VOCABULARY: framed panels, beaded rules, winged-diamond flourishes,
   corner brackets, gem medallions, luggage-stamp badges) but on OUR dark
   midnight-navy + champagne-gold palette, never its warm cream.

   Appended LAST by scratchpad/build.js, so it outranks the base sheet and
   every section sheet on order alone — no !important anywhere below, and
   deleting this file returns the page to plain base styling.

   It only ever paints ORNAMENT: borders, rules, ledges, corner brackets,
   metal sheen, crests, icon/label colour. It does not move a layout box and
   does not restyle body copy — body text stays ivory (gold at 13-15px on navy
   reads worse, not richer). Every shaped motif (winged-diamond, gem medallion)
   is an encoded data-URI SVG in the token block below, because the markup is
   generated and cannot gain a <use>; brackets/beads/diamonds/halos are plain
   CSS. Motion lives in 98-fx.css and is motion-guarded there.

   Contrast kept: #D4AF37 on #0E1A33 is 7.4:1, on #142244 is 6.8:1 — clear AA
   at the label and heading sizes used here.
   ========================================================================== */

:root {
  /* Metal ramps, used by the sheen and ledge helpers below. */
  --fa-g-sheen:  linear-gradient(180deg, #F6E1A0 0%, #D4AF37 42%, #B8912F 58%, #E8CC72 100%);
  --fa-g-rule:   linear-gradient(90deg, transparent, var(--fa-gold-a60) 18%, var(--fa-gold) 50%, var(--fa-gold-a60) 82%, transparent);
  --fa-g-ledge:  linear-gradient(90deg, transparent, var(--fa-gold-a60), transparent);

  /* Beaded rule: a row of tiny gold studs over a faint continuous hairline —
     the Art-Deco "····" tell. Two layers, composited at use. */
  --fa-g-bead:
    radial-gradient(circle, var(--fa-gold) 0 0.9px, transparent 1.4px) 0 50% / 7px 100% repeat-x,
    linear-gradient(90deg, transparent, var(--fa-gold-a30) 20%, var(--fa-gold-a30) 80%, transparent);

  /* Shaped motifs (encoded SVG, gold baked in — a data URI can't read
     currentColor). Generated by scratchpad/gen-motifs.js. */
  --fa-motif-wing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2044%2014%22%3E%3Cg%20fill%3D%22%23D4AF37%22%3E%3Cpath%20d%3D%22M18%207C13%207%208.5%205.7%202.5%204.2%205.4%207%205.4%207%202.5%209.8%208.5%208.3%2013%207%2018%207Z%22%20opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M26%207C31%207%2035.5%205.7%2041.5%204.2%2038.6%207%2038.6%207%2041.5%209.8%2035.5%208.3%2031%207%2026%207Z%22%20opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M22%202.1%2026.4%207%2022%2011.9%2017.6%207Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M22%203.6%2024.6%207%2022%2010.4%2019.4%207Z%22%20fill%3D%22%23F6E1A0%22%2F%3E%3C%2Fsvg%3E");
  --fa-motif-medallion: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2215.2%22%20fill%3D%22%230E1A33%22%20stroke%3D%22%23D4AF37%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2211.6%22%20fill%3D%22none%22%20stroke%3D%22%238A6E1F%22%20stroke-width%3D%220.8%22%20opacity%3D%220.7%22%2F%3E%3Cg%20fill%3D%22%23D4AF37%22%3E%3Cpath%20d%3D%22M13%2024C10%2024%207%2023%203.5%2022%206.5%2024%206.5%2024%203.5%2026%207%2025%2010%2024%2013%2024Z%22%20opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M35%2024C38%2024%2041%2023%2044.5%2022%2041.5%2024%2041.5%2024%2044.5%2026%2041%2025%2038%2024%2035%2024Z%22%20opacity%3D%220.8%22%2F%3E%3Cpath%20d%3D%22M24%2014.5%2031%2024%2024%2033.5%2017%2024Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M24%2017%2028.6%2024%2024%2031%2019.4%2024Z%22%20fill%3D%22%23F6E1A0%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%221.6%22%20fill%3D%22%238A6E1F%22%2F%3E%3C%2Fsvg%3E");

  /* Art-Deco corner brackets, drawn as eight thin gradients (an L per corner)
     on ONE pseudo, so a single element carries all four corners. --fa-brk is
     the arm length, --fa-brk-c the stroke colour; both are set at the use site
     so panels and cards can differ. */
  --fa-brk-img:
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45))),
    linear-gradient(var(--fa-brk-c, var(--fa-gold-a45)), var(--fa-brk-c, var(--fa-gold-a45)));
  --fa-brk-pos:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  --fa-brk-size:
    var(--fa-brk, 14px) 1px, 1px var(--fa-brk, 14px),
    var(--fa-brk, 14px) 1px, 1px var(--fa-brk, 14px),
    var(--fa-brk, 14px) 1px, 1px var(--fa-brk, 14px),
    var(--fa-brk, 14px) 1px, 1px var(--fa-brk, 14px);
}

/* --------------------------------------------------------------------------
   1. THE OUTER FRAME — double gold line + warm masthead wash
   -------------------------------------------------------------------------- */

.fa-frame {
  border-color: var(--fa-gold-a60);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, .16),   /* inner companion line */
    inset 0 1px 0 rgba(246, 225, 160, .22),    /* top bevel            */
    0 24px 70px rgba(0, 0, 0, .55);
}

.fa-frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 420px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(212, 175, 55, .13), transparent 62%),
    linear-gradient(180deg, rgba(212, 175, 55, .07), transparent 70%);
}

/* --------------------------------------------------------------------------
   2. PANELS — brighter edge, warm bevel, inner double-frame + corner brackets,
      and a winged-diamond crest on the numbered section panels.
   -------------------------------------------------------------------------- */

.fa-panel {
  border-color: var(--fa-gold-a45);
  box-shadow:
    inset 0 1px 0 rgba(246, 225, 160, .16),        /* lit top bevel */
    inset 0 0 26px rgba(6, 15, 31, .35),           /* soft inner vignette */
    var(--fa-sh-panel);
}

/* The inner double-frame line + Art-Deco corner brackets, on ONE pseudo.
   A whisper of a full frame (a12) with defined gold corners (a45). */
.fa-panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border: 1px solid var(--fa-gold-a12);
  border-radius: calc(var(--fa-r-lg) - 4px);
  --fa-brk: 16px;
  --fa-brk-c: var(--fa-gold-a45);
  background-image: var(--fa-brk-img);
  background-position: var(--fa-brk-pos);
  background-size: var(--fa-brk-size);
  background-repeat: no-repeat;
}

/* Sub-panels stay quiet: no inner frame/brackets on nested tiles or bleeds. */
.fa-panel--inset::before,
.fa-panel--flush::before,
.fa-panel--tight::before { content: none; }

.fa-panel--inset  { border-color: var(--fa-gold-a35); }
.fa-panel--raised { border-color: var(--fa-gold-a45); }

/* --deco already carries the base double hairline (::after, inset 4px); drop
   the extra frame line so it never triples, but keep the brackets. */
.fa-panel--deco::before { border-color: transparent; inset: 5px; }

/* Winged-diamond crest cresting the top edge of every numbered section panel
   (those that hold a .fa-sec header). --deco panels are already the richest
   treatment, so they skip it. Uses :has — graceful no-op where unsupported. */
.fa-panel:has(> .fa-sec)::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 40px;
  height: 13px;
  transform: translateX(-50%);
  background: var(--fa-motif-wing) center / contain no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.fa-panel--deco:has(> .fa-sec)::after { content: none; }

/* --------------------------------------------------------------------------
   3. SECTION HEADERS — struck-metal number + halo, winged-diamond title
      flourish, beaded connecting rule with a diamond end-cap.
   -------------------------------------------------------------------------- */

.fa-sec__num {
  position: relative;
  background: var(--fa-g-sheen);
  color: var(--fa-bg-2);
  border-color: var(--fa-gold-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 2px 8px rgba(212, 175, 55, .28);
}

/* Faint ring halo around the struck-metal disc. */
.fa-sec__num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--fa-r-circle);
  border: 1px solid var(--fa-gold-a30);
  box-shadow: 0 0 10px rgba(212, 175, 55, .22);
  pointer-events: none;
}

/* Brushed-metal sheen across the title (falls back to flat gold where
   background-clip:text is unsupported). */
.fa-sec__title {
  color: var(--fa-gold);
  background: linear-gradient(180deg, #F6E1A0 8%, #D4AF37 52%, #BE9A33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* Winged-diamond flourish flanking the title on its trailing side. */
.fa-sec__title::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 11px;
  margin-left: 12px;
  vertical-align: 0.14em;
  background: var(--fa-motif-wing) center / contain no-repeat;
  -webkit-text-fill-color: initial;   /* not the clipped-text fill of the h2 */
}

/* Beaded connecting rule with a lozenge end-cap. */
.fa-sec__rule {
  position: relative;
  background: var(--fa-g-bead);
  background-repeat: repeat-x, no-repeat;
}

.fa-sec__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: linear-gradient(135deg, var(--fa-gold-hi), var(--fa-gold-dim));
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(212, 175, 55, .5);
}

.fa-sec__icon { color: var(--fa-gold); }
.fa-sec__link { color: var(--fa-gold); }
.fa-sec__link:hover { color: var(--fa-gold-hi); }

/* --------------------------------------------------------------------------
   4. CARDS — gold frame, matted inner frame + corner brackets that brighten
      and draw in on hover, warm shadow with a soft gold glow.
   -------------------------------------------------------------------------- */

.fa-card {
  border-color: var(--fa-gold-a45);
  box-shadow:
    inset 0 1px 0 rgba(246, 225, 160, .12),
    var(--fa-sh-card, 0 8px 24px rgba(0, 0, 0, .38));
}

/* Matted inner frame + corner brackets. Excludes the ivory paper ticket. */
.fa-card:not(.fa-card--paper)::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--fa-gold-a08);
  border-radius: calc(var(--fa-r) - 3px);
  --fa-brk: 11px;
  --fa-brk-c: var(--fa-gold-a30);
  background-image: var(--fa-brk-img);
  background-position: var(--fa-brk-pos);
  background-size: var(--fa-brk-size);
  background-repeat: no-repeat;
  transition: inset var(--fa-t-slow) var(--fa-ease), border-color var(--fa-t-slow) var(--fa-ease);
}

.fa-card:hover,
.fa-card:focus-within {
  border-color: var(--fa-gold);
  box-shadow:
    inset 0 1px 0 rgba(246, 225, 160, .16),
    var(--fa-sh-lg),
    0 0 22px rgba(212, 175, 55, .20);              /* soft gold glow */
}

.fa-card:not(.fa-card--paper):hover::before,
.fa-card:not(.fa-card--paper):focus-within::before {
  inset: 6px;                                       /* frame draws in */
  border-color: var(--fa-gold-a45);
  --fa-brk-c: var(--fa-gold-a60);
}

/* --flat cards do not lift; keep their inner frame from drawing in either. */
.fa-card--flat:hover::before,
.fa-card--flat:focus-within::before { inset: 4px; border-color: var(--fa-gold-a08); --fa-brk-c: var(--fa-gold-a30); }

/* Image cards get an inner gold ring so the photograph sits in a frame. */
.fa-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(212, 175, 55, .24);
  border-radius: inherit;
}

/* Zoom the photograph inside its clipped media box on card hover (). */
.fa-media > img,
.fa-media > picture > img {
  transition: transform var(--fa-t-slow) var(--fa-ease);
}
.fa-card:hover .fa-media > img,
.fa-card:focus-within .fa-media > img { transform: scale(1.05); }

.fa-card--art { border-color: var(--fa-gold-a60); }

/* --------------------------------------------------------------------------
   5. LABELS, EYEBROWS, STATS — warm the greys toward gold
   -------------------------------------------------------------------------- */

.fa-label,
.fa-eyebrow,
.fa-stat__label { color: #C0A65E; }

.fa-label--gold { color: var(--fa-gold); }
.fa-stat__value { color: var(--fa-gold); }

.fa-medallion {
  border-color: var(--fa-gold-a60);
  color: var(--fa-gold);
  box-shadow: inset 0 1px 0 rgba(246, 225, 160, .16);
}

.fa-medallion--active,
.fa-medallion--done {
  background: var(--fa-g-sheen);
  color: var(--fa-bg-2);
  border-color: var(--fa-gold-deep);
}

/* --------------------------------------------------------------------------
   6. SMALL COMPONENTS
   -------------------------------------------------------------------------- */

.fa-chip { border-color: var(--fa-gold-a45); }
.fa-chip--gold { background: var(--fa-g-sheen); color: var(--fa-btn-ink); border-color: var(--fa-gold-deep); }

/* Badges as vintage luggage stamps: keep the 4deg tilt, add a struck inner
   hairline so they read as a rubber-stamp double edge.
   position:relative is scoped OFF pinned badges: a --pin badge is already
   position:absolute in the base sheet, and re-declaring position here (equal
   specificity, later in the cascade) was clobbering that absolute placement —
   which is why the  / promotions pinned stamps flowed to the thumbnail seam
   instead of parking in a corner. :not(--pin) leaves the pin's absolute intact
   while still giving flat/inline badges the positioning context the ::before
   double-edge needs. */
.fa-badge:not(.fa-badge--pin) { position: relative; }
.fa-badge::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .38;
  pointer-events: none;
}
.fa-badge--new,
.fa-badge--vip { border-color: var(--fa-gold-a60); }

.fa-progress__fill { background: var(--fa-g-sheen); }
.fa-progress { border: 1px solid var(--fa-gold-a30); }

.fa-tabs__tab[aria-selected="true"] {
  color: var(--fa-gold);
  border-color: var(--fa-gold);
}

/* Reusable divider: beaded rule with a central gem medallion (the polish pass). */
.fa-deco-rule:not(.fa-deco-rule--vert) {
  height: 1px;
  background: var(--fa-g-bead);
  background-repeat: repeat-x, no-repeat;
}
.fa-deco-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  background: var(--fa-motif-medallion) center / contain no-repeat;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
}
.fa-deco-rule--plain::after { content: none; }
.fa-deco-rule--vert::after { content: none; }   /* medallion is for the horizontal rule */

/* --- Footer sobriety fix (bug: stray gold gem over the "News" column) -------
   The warm footer's divider ships as a bare <span class="fa-deco-rule"> sitting
   directly in the footer's block flow. The base primitive never sets
   display:block, so the span collapses to an inline zero-width box at the far
   left — the width:100% hairline never draws, and the 34px gem medallion above
   (::after at left:50% of a 0-width box) lands at the footer's top-left, right
   over the first column's "News" link. Make the footer divider a real
   full-width block rule and drop the floating gem, so the footer reads sober
   like the Rules page: a clean divider line, no ornament crowding the columns.
   Scoped to --warm so no other deco-rule on the site changes. */
.fa-panel--warm .fa-deco-rule { display: block; }
.fa-panel--warm .fa-deco-rule::after { content: none; }

/* Belt-and-suspenders: keep the winged-diamond section crest off the footer
   panel too. It never applies today (the footer has no direct > .fa-sec child),
   but this guards a future footer that adds one. */
.fa-panel--warm:has(> .fa-sec)::after { content: none; }

.fa-link { color: var(--fa-gold); }
.fa-link:hover { color: var(--fa-gold-hi); }

/* Ghost buttons read as plain outlines against all the new gold — warm them. */
.fa-btn--ghost {
  border-color: var(--fa-gold-a60);
  color: var(--fa-gold);
}
.fa-btn--ghost:hover {
  border-color: var(--fa-gold);
  background: rgba(212, 175, 55, .1);
  color: var(--fa-gold-hi);
}

/* Header LOGIN (a ghost button): a resting gold halo so it no longer reads as
   a bare outline beside the gold boarding-pass CTA, firming up on hover/focus.
   A soft blur only (no hard spread ring) so it hugs the notched silhouette; the
   ghost variant carries no drop-shadow of its own, so this shows cleanly. The
   transition is a colour-only change (00-base neutralises it under reduced
   motion, where the hover end-state still applies instantly). */
.fa-01-header__login {
  box-shadow: 0 0 9px rgba(212, 175, 55, .20);
  transition: box-shadow var(--fa-t) var(--fa-ease);
}
.fa-01-header__login:hover,
.fa-01-header__login:focus-visible {
  box-shadow: 0 0 16px rgba(212, 175, 55, .42);
}

/* --------------------------------------------------------------------------
   7. BUTTON METAL — finer bevel + a thin inner hairline. Sizes unchanged.
   -------------------------------------------------------------------------- */

.fa-btn--gold {
  --fa-btn-inset:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(0, 0, 0, .3),
    inset 0 0 0 1px rgba(255, 251, 235, .16);      /* thin inner hairline */
}
.fa-btn--teal {
  --fa-btn-inset:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(196, 154, 69, .28);
}
.fa-btn--burgundy {
  --fa-btn-inset:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 220, 205, .12);
}

/* --------------------------------------------------------------------------
   8. HERO — restrained corner filigree matting the poster.
      (The faint vignette/grain and the drifting sparkles are texture + motion,
      so they live on .fa-02-hero::after in 98-fx.css. This ::before is the
      static gold mat: an inset hairline frame with Art-Deco corner brackets,
      sitting BELOW the copy at z-index 1, so it never touches text contrast.)
   -------------------------------------------------------------------------- */

.fa-02-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--fa-gold-a12);
  border-radius: var(--fa-r-sm);
  --fa-brk: 30px;
  --fa-brk-c: var(--fa-gold-a45);
  background-image: var(--fa-brk-img);
  background-position: var(--fa-brk-pos);
  background-size: var(--fa-brk-size);
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   9. MOTION — one static-paint exception: the gold CTA's hover position sweep.
      (The rest of the motion, and its reduced-motion guard, lives in 98-fx.)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .fa-btn--gold {
    background-size: 100% 100%, 220% 100%;
    transition: background-position 420ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .fa-btn--gold:hover { background-position: 0 0, 100% 0; }
}

/* --------------------------------------------------------------------------
   10. Keep the ornament from swamping small screens: the corner brackets and
       the frame wash cost the most where panels are narrow and stacked.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .fa-panel::before { --fa-brk-c: transparent; inset: 5px; }   /* frame line only */
  .fa-panel:has(> .fa-sec)::after { width: 32px; top: -7px; }
  .fa-card:not(.fa-card--paper)::before { --fa-brk-c: transparent; }
  .fa-02-hero::before { inset: 8px; --fa-brk: 20px; }
  .fa-frame::before { height: 260px; }
  /* Drop the title's winged-diamond flourish on phones — the base sheet hides
     the beaded rule here too, so the mobile section header is a clean
     number + title with no decoration crowding the text. */
  .fa-sec__title::after { display: none; }
}

/* ==========================================================================
   BUILT FILE — DO NOT EDIT. Generated by scratchpad/build.js.
   Source: css/98-fx.css
   ========================================================================== */
/* ==========================================================================
   FORTUNE AIRLINES — FX LAYER
   --------------------------------------------------------------------------
   Structural + "luxury" additions requested 2026-07-20: boarding preloader,
   left-gutter scroll plane, right-edge Fortune Wheel popup, and a set of
   restrained glow / shimmer touches.

   Appended after the section sheets and 99-gold.css by scratchpad/build.js, so
   it wins on order without !important. Every motion here is disabled under
   prefers-reduced-motion at the foot of the file.
   ========================================================================== */

:root {
  --fa-fx-navy: radial-gradient(120% 90% at 50% 12%, #12245A 0%, #0B123B 46%, #060F1F 100%);
  --fa-fx-z-pre: 10000;
  --fa-fx-z-pop: 9000;
  --fa-fx-z-tab: 820;
  /* Left-gutter flight route: x-position of the route line (and the plane's
     centre) from the viewport's left edge. The 46px floor keeps the plane box
     clear of the screen edge; from there the line hugs the left so labels get
     the rest of the gutter. Only meaningful at the >=1760px widths where the
     route + plane are shown. */
  --fa-route-x: clamp(46px, calc((100vw - var(--fa-maxw, 1440px)) * 0.12), 96px);
  /* Faint film grain for the hero (printed-poster depth). Encoded fractalNoise,
     desaturated; sits over the photo BELOW the copy so it never touches text. */
  --fa-fx-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20filter%3D%22url(%23g)%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
}

/* scroll locks -------------------------------------------------------------- */
.fa-preloading,
.fa-noscroll { overflow: hidden; }

/* ==========================================================================
   1. PRELOADER — navy splash, wordmark, spinning propeller
   ========================================================================== */
.fa-preloader {
  position: fixed;
  inset: 0;
  z-index: var(--fa-fx-z-pre);
  display: grid;
  place-items: center;
  background: var(--fa-fx-navy);
  opacity: 1;
  transition: opacity .55s ease;
}
.fa-preloader.is-done { opacity: 0; pointer-events: none; }

.fa-preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 24px;
  text-align: center;
}

.fa-preloader__logo {
  width: min(280px, 62vw);
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(212, 175, 55, .35));
  animation: fa-pre-in .6s ease both;
}

/* propeller: gold vanes spinning around a bright hub */
.fa-preloader__prop { position: relative; display: grid; place-items: center; }
.fa-preloader__prop::before {           /* soft halo behind the propeller */
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, .28), transparent 68%);
  animation: fa-pre-pulse 1.8s ease-in-out infinite;
}
.fa-preloader__blades {
  color: var(--fa-gold);
  animation: fa-prop-spin .9s linear infinite;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.fa-preloader__vanes { fill: currentColor; }
.fa-preloader__hub {
  fill: var(--fa-gold-hi);
  stroke: #6E561B;
  stroke-width: 2;
}

.fa-preloader__label {
  font-family: var(--fa-font-ui, Montserrat, sans-serif);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fa-gold);
  opacity: .82;
  animation: fa-pre-blink 1.6s ease-in-out infinite;
}

@keyframes fa-prop-spin { to { transform: rotate(360deg); } }
@keyframes fa-pre-pulse { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes fa-pre-blink { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes fa-pre-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   2. FLIGHT ROUTE + FLYBY — a persistent gold DOTTED route down the LEFT
   gutter, one lit waypoint per page section, and the nose-DOWN plane that
   travels it as you scroll. Built by the `route` runtime (the DOM) and driven
   by the `flyby` runtime (the progress var). ONE clean line, not two: the
   route's dotted rail is the persistent path; the plane descends it and a
   brighter "flown" overlay grows behind the plane (this replaces the old
   growing contrail). Only shown at >=1700px, where the centred 1440 frame
   leaves real gutter room for the labels; below that nothing here renders and
   there is no horizontal scroll.
   ========================================================================== */

/* --- the plane (kept: a straight NOSE-DOWN dive the whole way) ------------ */
.fa-flyby {
  position: fixed;
  top: 0;
  /* sit the 90px plane box so its centre (left 45px) lands on the route line */
  left: calc(var(--fa-route-x) - 45px);
  z-index: 40;
  width: 90px;
  height: 100vh;
  pointer-events: none;
  display: none;                         /* enabled at wide widths below */
  color: var(--fa-gold);
}
.fa-flyby__plane {
  position: absolute;
  top: 0;
  left: 17px;                            /* (90 box - 56 plane) / 2 → centre at 45px */
  width: 56px;
  height: 56px;
  will-change: transform;
  /* The plane's CENTRE tracks 6vh + p*76vh — the exact band the waypoints sit
     on — so it arrives dead-centre on each dot (the -28px is half the 56px box).
     No horizontal drift: its centre stays on the route line, so the line always
     runs through it. #i-plane points straight UP at rest, so a constant
     rotate(180deg) is a straight nose-DOWN dive — no tilt, no "straightening". */
  transform:
    translateY(calc(6vh + var(--fa-fly-p, 0) * 76vh - 28px))
    rotate(180deg);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(212, 175, 55, .4));
}

/* --- the route rail: fixed, fills the left gutter ------------------------- */
.fa-route {
  position: fixed;
  top: 0;
  left: 0;
  width: calc((100vw - var(--fa-maxw, 1440px)) / 2);   /* the left gutter */
  height: 100vh;
  z-index: 39;                           /* just under the plane */
  pointer-events: none;
  display: none;                         /* enabled at wide widths below */
  color: var(--fa-gold);
  font-family: var(--fa-font-ui, Montserrat, sans-serif);
}

/* the persistent dotted line — dim gold, the not-yet-flown path */
.fa-route__line {
  position: absolute;
  left: var(--fa-route-x);
  top: 6vh;
  width: 2px;
  height: 76vh;
  transform: translateX(-1px);           /* centre the 2px on the line x */
  background: rgba(212, 175, 55, .4);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 12px);
          mask-image: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 12px);
}
/* the flown overlay — brighter, grows top-down to meet the descending plane */
.fa-route__flown {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--fa-route-p, 0) * 100%);
  background: linear-gradient(180deg, rgba(240, 213, 132, .5), rgba(240, 213, 132, .92));
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 12px);
          mask-image: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 12px);
}

/* --- waypoints ----------------------------------------------------------- */
.fa-route__stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.fa-route__stop {
  position: absolute;
  left: var(--fa-route-x);
  right: 12px;                           /* bound labels to the gutter */
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translateY(-50%);           /* centre on the stop's `top` */
}

/* the pin — an Art-Deco diamond ON the line, dim until the plane passes */
.fa-route__pin {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: -6px;                     /* straddle the line */
  transform: rotate(45deg);
  background: var(--fa-graphite, #1C2541);
  border: 1.5px solid var(--fa-gold-a60, rgba(212, 175, 55, .6));
  box-shadow: 0 0 0 3px rgba(6, 15, 31, .9);   /* navy moat: line reads behind it */
  transition: background .45s var(--fa-ease), border-color .45s var(--fa-ease),
              box-shadow .45s var(--fa-ease), transform .45s var(--fa-ease);
}
.fa-route__stop.is-lit .fa-route__pin {
  background: linear-gradient(135deg, var(--fa-gold-hi) 0%, var(--fa-gold) 50%, var(--fa-gold-dim) 100%);
  border-color: var(--fa-gold-hi);
  box-shadow: 0 0 0 3px rgba(6, 15, 31, .9), 0 0 12px 2px rgba(240, 213, 132, .7);
  transform: rotate(45deg) scale(1.18);
}

/* the label — the section's own name, hidden until its waypoint lights */
.fa-route__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.16;
  text-transform: uppercase;
  color: var(--fa-ivory-dim, #C9BFA6);
  text-shadow: 0 1px 3px rgba(6, 15, 31, .95), 0 0 8px rgba(6, 15, 31, .8);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .5s var(--fa-ease), transform .5s var(--fa-ease), color .45s var(--fa-ease);
  /* wrap naturally to fill the gutter; break a long word rather than spill it
     past the frame (which would look cramped, though overflow-x:clip already
     prevents any horizontal scroll) */
  overflow-wrap: anywhere;
}
.fa-route__stop.is-lit .fa-route__label {
  opacity: 1;
  transform: none;
  color: var(--fa-gold-hi, #F0D584);
}

/* --- departure / landing caps: the route's endpoints ---------------------
   The plane takes OFF from the DEPART cap (top:6vh) and LANDS at the LAND cap
   (top:82vh). Styled a touch larger/stronger than a waypoint pin — a gold ring
   holding the control-tower / destination-pin icon, the label beside it —
   reusing the .fa-route__pin + .fa-route__label vocabulary (navy moat, gold,
   glow-on-lit). Centred on the same route line x as the waypoints. Dim until
   lit; the runtime keeps DEPART always lit and lights LAND when the plane
   arrives at the bottom. Children of .fa-route, so they inherit its >=1760px
   display gate and never render (or scroll) on narrow viewports. */
.fa-route__cap {
  position: absolute;
  left: var(--fa-route-x);
  right: 12px;                           /* bound the label to the gutter */
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);           /* centre on the cap's `top` */
}
.fa-route__cap--depart { top: 6vh; }
.fa-route__cap--land   { top: 82vh; }

.fa-route__cap-ring {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -14px;                    /* straddle the line, centred on x */
  border-radius: 50%;
  color: var(--fa-gold, #D4AF37);
  background: radial-gradient(circle at 50% 38%, rgba(28, 37, 65, .95), rgba(6, 15, 31, .95));
  border: 1.5px solid var(--fa-gold-a60, rgba(212, 175, 55, .6));
  box-shadow: 0 0 0 3px rgba(6, 15, 31, .9);   /* navy moat, like the pins */
  transition: border-color .45s var(--fa-ease), box-shadow .45s var(--fa-ease),
              color .45s var(--fa-ease), transform .45s var(--fa-ease);
}
.fa-route__cap-ring .fa-icon { --fa-icon-size: 15px; }

.fa-route__cap-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--fa-ivory-dim, #C9BFA6);
  text-shadow: 0 1px 3px rgba(6, 15, 31, .95), 0 0 8px rgba(6, 15, 31, .8);
  transition: color .45s var(--fa-ease), opacity .45s var(--fa-ease);
  overflow-wrap: anywhere;
}

/* dim until the endpoint is reached */
.fa-route__cap:not(.is-lit) .fa-route__cap-ring  { opacity: .5; }
.fa-route__cap:not(.is-lit) .fa-route__cap-label { color: var(--fa-muted, #8A93A8); opacity: .72; }

/* lit — gold ring, gold glow, gold label (stronger than a lit waypoint pin) */
.fa-route__cap.is-lit .fa-route__cap-ring {
  color: var(--fa-gold-hi, #F0D584);
  border-color: var(--fa-gold-hi, #F0D584);
  background: radial-gradient(circle at 50% 34%, rgba(240, 213, 132, .28), rgba(6, 15, 31, .95) 72%);
  box-shadow: 0 0 0 3px rgba(6, 15, 31, .9), 0 0 14px 2px rgba(240, 213, 132, .55);
  transform: scale(1.05);
}
.fa-route__cap.is-lit .fa-route__cap-label { color: var(--fa-gold-hi, #F0D584); }

@media (min-width: 1760px) { .fa-flyby, .fa-route { display: block; } }

/* ==========================================================================
   3. SPINPOP — right-edge launcher tab + Fortune Wheel popup
   ========================================================================== */
.fa-spinpop-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--fa-fx-z-tab);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--fa-gold-deep, #8A6E1F);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #F6E1A0 0%, #D4AF37 45%, #B8912F 58%, #E8CC72 100%);
  color: var(--fa-btn-ink, #0B123B);   /* theme-constant navy on the bright-gold tab (light-safe) */
  font: 700 12px/1 var(--fa-font-ui, Montserrat, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -4px 4px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fa-spinpop-tab:hover { transform: translateY(-50%) translateX(-3px); filter: brightness(1.05); }
.fa-spinpop-tab__ico { width: 22px; height: 22px; animation: fa-prop-spin 6s linear infinite; }
.fa-spinpop-tab__txt { writing-mode: vertical-rl; text-orientation: mixed; }
@media (max-width: 620px) {
  .fa-spinpop-tab__txt { display: none; }
  .fa-spinpop-tab { padding: 12px; border-radius: 14px 0 0 14px; }
}

.fa-spinpop {
  position: fixed;
  inset: 0;
  z-index: var(--fa-fx-z-pop);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.fa-spinpop.is-open { opacity: 1; }
.fa-spinpop[hidden] { display: none; }

.fa-spinpop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, .74);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.fa-spinpop__dialog {
  position: relative;
  width: min(440px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 30px 28px 24px;
  text-align: center;
  border: 1px solid var(--fa-gold-a60, rgba(212, 175, 55, .6));
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, .12), transparent 60%),
    var(--fa-panel, #0E1A33);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(246, 225, 160, .18);
  transform: translateY(14px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.fa-spinpop.is-open .fa-spinpop__dialog { transform: none; }

.fa-spinpop__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fa-gold-a30, rgba(212, 175, 55, .3));
  border-radius: 50%;
  background: rgba(6, 15, 31, .6);
  color: var(--fa-gold);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.fa-spinpop__x:hover { border-color: var(--fa-gold); background: rgba(212, 175, 55, .12); }

.fa-spinpop__eyebrow {
  font: 600 11px/1 var(--fa-font-ui, Montserrat, sans-serif);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fa-gold);
  margin: 0 0 4px;
}
.fa-spinpop__h {
  font-family: var(--fa-font-display, Cinzel, serif);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.15;
  color: var(--fa-ivory);
  margin: 0 auto 14px;
  max-width: 22ch;
}
.fa-spinpop__stage { display: grid; place-items: center; margin: 0 auto 14px; }
.fa-spinpop__stage .fa-07-wheel-svg { width: min(300px, 74vw); height: auto; }
.fa-spinpop__controls { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fa-spinpop__controls .fa-btn { width: 100%; max-width: 300px; }
.fa-spinpop__result {
  min-height: 1.2em;
  margin: 12px auto 6px;
  max-width: 34ch;
  font-weight: 600;
  color: var(--fa-gold-hi);
}

/* ==========================================================================
   3B. AUTH MODAL — login / register (front-end demo)
   Mirrors the spinpop overlay conventions (fixed grid overlay, blurred
   backdrop, gold-framed dialog, sprite ✕) for visual consistency. All tap
   targets (tabs, controls, buttons, checkbox row) are >=44px.
   ========================================================================== */
.fa-auth {
  position: fixed;
  inset: 0;
  z-index: var(--fa-fx-z-pop);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.fa-auth.is-open { opacity: 1; }
.fa-auth[hidden] { display: none; }

.fa-auth__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 18, .74);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.fa-auth__dialog {
  position: relative;
  width: min(460px, 100%);
  max-height: 92vh;
  /* never scroll horizontally: a CTA sheen sweep must not raise an x-scrollbar */
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 26px 26px;
  border: 1px solid var(--fa-gold-a60);
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 175, 55, .12), transparent 60%),
    var(--fa-panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(246, 225, 160, .18);
  transform: translateY(14px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.fa-auth.is-open .fa-auth__dialog { transform: none; }

.fa-auth__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fa-gold-a30);
  border-radius: 50%;
  background: rgba(6, 15, 31, .6);
  color: var(--fa-gold);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.fa-auth__x:hover { border-color: var(--fa-gold); background: rgba(212, 175, 55, .12); }

.fa-auth__eyebrow {
  font: 600 11px/1 var(--fa-font-ui);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fa-gold);
  text-align: center;
  margin: 0 0 4px;
}
.fa-auth__h {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: clamp(20px, 5vw, 26px);
  line-height: 1.15;
  color: var(--fa-ivory);
  text-align: center;
  margin: 0 auto 18px;
  max-width: 20ch;
}

/* tabs — switching owned by the shared `tabs` runtime -------------------- */
.fa-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--fa-gold-a22);
  border-radius: var(--fa-r-xl);
  background: var(--fa-bg-2);
}
.fa-auth__tab {
  min-height: 44px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1 var(--fa-font-ui);
  letter-spacing: var(--fa-ls-wide);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
  background: transparent;
  border: 0;
  border-radius: var(--fa-r-lg);
  cursor: pointer;
  transition: color .2s var(--fa-ease), background .2s var(--fa-ease), box-shadow .2s var(--fa-ease);
}
.fa-auth__tab:hover { color: var(--fa-ivory); }
.fa-auth__tab[aria-selected="true"],
.fa-auth__tab.is-on {
  color: var(--fa-bg-2);
  background: linear-gradient(180deg, var(--fa-gold-hi) 0%, var(--fa-gold) 55%, var(--fa-gold-mid) 100%);
  box-shadow: var(--fa-sh-btn);
}

/* fields ------------------------------------------------------------------ */
.fa-auth__field { display: grid; gap: 6px; margin: 0 0 14px; }
.fa-auth__label {
  font: 600 var(--fa-fs-label)/1.2 var(--fa-font-ui);
  letter-spacing: var(--fa-ls-label);
  text-transform: uppercase;
  color: var(--fa-ivory-dim);
}
.fa-auth__opt { color: var(--fa-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }

.fa-auth__control {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: 400 14px/1.2 var(--fa-font-ui);
  color: var(--fa-ivory);
  background: var(--fa-graphite);
  border: 1px solid var(--fa-gold-a30);
  border-radius: var(--fa-r);
  transition: border-color .18s var(--fa-ease), box-shadow .18s var(--fa-ease);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.fa-auth__control::placeholder { color: var(--fa-muted); }
.fa-auth__control:focus {
  outline: none;
  border-color: var(--fa-gold);
  box-shadow: 0 0 0 3px var(--fa-gold-a22);
}
.fa-auth__control[aria-invalid="true"] {
  border-color: var(--fa-burgundy-hi);
  box-shadow: 0 0 0 3px rgba(167, 71, 45, .22);
}
/* select: appearance stripped, so draw our own chevron */
.fa-auth__select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C9BFA6%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%209.5%2012%2016%2018.5%209.5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.fa-auth__field--check { margin-top: 2px; }
.fa-auth__check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}
.fa-auth__checkbox {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--fa-gold);
  cursor: pointer;
}
.fa-auth__checkbox[aria-invalid="true"] { outline: 2px solid var(--fa-burgundy-hi); outline-offset: 2px; }
.fa-auth__check-txt { font: 400 13px/1.4 var(--fa-font-ui); color: var(--fa-ivory-dim); }

.fa-auth__err {
  margin: 0;
  font: 500 var(--fa-fs-xs)/1.4 var(--fa-font-ui);
  color: var(--fa-burgundy-hi);
}
.fa-auth__err[hidden] { display: none; }

/* overflow:hidden clips the base gold-button shimmer sweep to the button so it
   can't briefly push an x-scrollbar in the dialog. Safe here (width:100% block,
   not a shrinkable flex item) unlike the header CTA. */
.fa-auth__submit { width: 100%; min-height: 44px; margin-top: 4px; overflow: hidden; }
.fa-auth__fine { text-align: center; margin: 12px 0 0; }

/* demo confirmation (shown in place of the form on a valid submit) --------- */
.fa-auth__done { text-align: center; padding: 8px 0 2px; }
.fa-auth__done[hidden] { display: none; }
.fa-auth__done:focus { outline: none; }
.fa-auth__done-ico { --fa-icon-size: 40px; color: var(--fa-green); margin: 0 auto 10px; }
.fa-auth__done-h {
  font-family: var(--fa-font-display);
  font-weight: 700;
  font-size: clamp(18px, 4vw, 22px);
  color: var(--fa-ivory);
  margin: 0 0 8px;
}
.fa-auth__done-p {
  font: 400 14px/1.55 var(--fa-font-ui);
  color: var(--fa-ivory-dim);
  max-width: 34ch;
  margin: 0 auto 16px;
}
.fa-auth__done-btn { min-height: 44px; }

/* ==========================================================================
   4. WHEEL — grand-prize segment glow + winning result flourish
   ========================================================================== */
.fa-07-wheel-seg--win .fa-07-wheel-wedge {
  stroke: var(--fa-gold-hi);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(240, 213, 132, .8));
  animation: fa-win-throb 1.9s ease-in-out infinite;
}
.fa-07-wheel-seg-label--win { fill: var(--fa-bg-2, #0B123B); font-weight: 700; }

/* when a wheel has landed on the win, make the result glow */
[data-wheel].has-won .fa-07-wheel-result,
[data-wheel].has-won .fa-spinpop__result,
.fa-spinpop__wheel.has-won .fa-spinpop__result {
  color: var(--fa-gold-hi);
  text-shadow: 0 0 14px rgba(240, 213, 132, .5);
}
@keyframes fa-win-throb {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(240, 213, 132, .55)); }
  50%      { filter: drop-shadow(0 0 9px rgba(240, 213, 132, .95)); }
}

/* ==========================================================================
   5. LUXURY POLISH — restrained, all motion-guarded
   ========================================================================== */

/* Hero headline: a slow gold sheen crossing the letters once in a while. */
.fa-02-hero__title,
.fa-hero__title {
  background-image: linear-gradient(100deg,
    var(--fa-gold) 0%, var(--fa-gold-hi) 42%, #FFFDF3 50%, var(--fa-gold-hi) 58%, var(--fa-gold) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: fa-sheen 7s ease-in-out infinite;
}
@keyframes fa-sheen { 0%, 70%, 100% { background-position: 120% 0; } 85% { background-position: -20% 0; } }

/* Welcome-bonus panel: a soft breathing gold ring. Targets the hero bonus
   panel by its common hooks without assuming one exact class. */
.fa-02-hero__bonus,
.fa-hero__bonus {
  animation: fa-bonus-glow 5s ease-in-out infinite;
}
@keyframes fa-bonus-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212, 175, 55, .5), 0 10px 34px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 0 1px rgba(240, 213, 132, .72), 0 10px 38px rgba(212, 175, 55, .16); }
}

/* Section numbers are struck-metal and now stay STATIC (99-gold). An infinite
   twinkle on every numbered disc read as constant page-wide motion, which the
   uplift brief rules out ("no motion that never rests"). The twinkle moved to
   the divider medallions below, which are few and far between. */

/* HERO printed-poster depth: a faint vignette + film grain and a few very
   subtle drifting sparkles, HERO ONLY (the polish pass). z-index 1 keeps the
   whole layer BELOW the copy (which sits at z-index 2), so text contrast is
   never touched; only the sparkle layer breathes, at a low delta. */
.fa-02-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(2px 2px at 74% 24%, rgba(255, 251, 235, .90), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255, 251, 235, .70), transparent 60%),
    radial-gradient(2px 2px at 66% 60%, rgba(255, 251, 235, .70), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 66%, rgba(255, 251, 235, .80), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 34%, rgba(255, 251, 235, .55), transparent 60%),
    radial-gradient(120% 120% at 50% 42%, transparent 58%, rgba(6, 15, 31, .34) 100%),
    var(--fa-fx-grain);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, auto, auto, 150px 150px;
  animation: fa-hero-sparkle 5.5s ease-in-out infinite;
}
@keyframes fa-hero-sparkle {
  0%, 100% { opacity: .58; }
  50%      { opacity: .92; }
}

/* Divider medallions: a gentle twinkle (the polish pass). Few per page, so this
   reads as an occasional glint rather than restless motion. */
.fa-deco-rule::after { animation: fa-medallion-twinkle 4.6s ease-in-out infinite; }
@keyframes fa-medallion-twinkle {
  0%, 100% { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); opacity: .9; }
  50%      { filter: drop-shadow(0 0 9px rgba(240, 213, 132, .7)); opacity: 1; }
}

/* Primary gold CTAs — the LARGE hero / wheel calls only — get a slow periodic
   sheen. Every other gold button keeps the base sheet's hover-only shimmer, so
   the page reads as an elegant occasional sheen, never a wall of flashing
   buttons (the polish pass). */
.fa-btn--gold.fa-btn--lg {
  position: relative;
  overflow: hidden;
}
.fa-btn--gold.fa-btn--lg::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  animation: fa-cta-shimmer 7.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fa-cta-shimmer { 0%, 66% { left: -60%; } 82%, 100% { left: 130%; } }

/* Header GET BOARDING PASS — the masthead's primary call. A slow gold glow
   that BREATHES (2.8s) plus a periodic diagonal sheen, so it invites a click
   without ever flashing. The glow rides the button's own drop-shadow filter,
   so it follows the notched Art-Deco silhouette (a box-shadow would sit as a
   rectangle behind the notch); the base + a hint of the hover drop-shadow are
   folded into the keyframes so the button never loses its footing. Whole block
   is inside prefers-reduced-motion:no-preference — nothing here runs when the
   user asks for less motion. */
.fa-01-header__pass {
  animation: fa-pass-glow 2.8s ease-in-out infinite;
}
@keyframes fa-pass-glow {
  0%, 100% {
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35))
            drop-shadow(0 0 3px rgba(240, 213, 132, .22));
  }
  50% {
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .40))
            drop-shadow(0 0 12px rgba(240, 213, 132, .70));
  }
}

/* Periodic sheen. Reuses the base .fa-btn::after AS IS — inset:0, z-index:-1 and
   the notch clip-path — so NO overflow:hidden is needed on the button. (Setting
   overflow on the button is a trap: as a flex item its automatic min-size drops
   to 0, and at 375 the label clips.) The highlight fades to 0 at both ends of
   the sweep, so it is only ever visible while it overlays the metal — it never
   bleeds past the notched edge even without a clip on the moving layer. Two
   classes so it outranks the base --gold hover one-shot and the glint stays one
   consistent sweep. Parked ~4s of the 6s cycle: an occasional catch of light. */
.fa-01-header__btn.fa-01-header__pass::after {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  animation: fa-pass-sheen 6s ease-in-out infinite;
}
@keyframes fa-pass-sheen {
  0%, 72% { opacity: 0; transform: translateX(-120%); }
  80%     { opacity: 1; }
  100%    { opacity: 0; transform: translateX(120%); }
}

/* Reveal-on-scroll for below-the-fold panels (paired with the `reveal`
   initialiser, which sets [data-reveal] / .is-in). Above-the-fold stays put. */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }

/* overflow:hidden on .fa-btn--gold (00-base) drops a flex item's automatic
   min-size to 0; keep the header CTA at least its label width so the label never
   clips at narrow widths (the documented 375 trap). max-content sees only the
   visible label span, so it never widens the button beyond what it already is. */
.fa-01-header__pass { min-width: max-content; }

/* ==========================================================================
   6. REDUCED MOTION — kill every loop above; keep everything legible/usable
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fa-preloader__blades,
  .fa-preloader__prop::before,
  .fa-preloader__label,
  .fa-preloader__logo,
  .fa-spinpop-tab__ico,
  .fa-07-wheel-seg--win .fa-07-wheel-wedge,
  .fa-02-hero__title, .fa-hero__title,
  .fa-02-hero__bonus, .fa-hero__bonus,
  .fa-02-hero::after,
  .fa-deco-rule::after,
  .fa-sec__num,
  .fa-btn--gold::after,
  .fa-01-header__pass {
    animation: none !important;
  }
  /* No image zoom-in-frame on card hover either. */
  .fa-card:hover .fa-media > img,
  .fa-card:focus-within .fa-media > img,
  .fa-card:hover .fa-media > picture > img,
  .fa-card:focus-within .fa-media > picture > img { transform: none !important; }
  .fa-flyby { display: none !important; }
  /* Route stays visible but STATIC: the runtime lights every waypoint; kill the
     travel/reveal transitions and drop the growing flown overlay. The plane is
     hidden with .fa-flyby above, so nothing here moves. */
  .fa-route__pin,
  .fa-route__label,
  .fa-route__cap-ring,
  .fa-route__cap-label { transition: none !important; }
  .fa-route__flown { display: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fa-spinpop, .fa-spinpop__dialog, .fa-preloader { transition: none; }
  .fa-auth, .fa-auth__dialog { transition: none; }
}

/* --------------------------------------------------------------------------
   TOUCH TAP-TARGETS — guarantee >=44px hit areas on coarse pointers (phones,
   tablets, touch laptops). Fine-pointer (mouse) users keep the compact sizes;
   inline text links stay in the flow (WCAG 2.5.8 inline exemption). min-height
   / min-width so nothing shrinks and cascade order is irrelevant. */
@media (pointer: coarse) {
  .fa-btn--sm,
  .fa-tabs__tab,
  .fa-auth__tab,
  .fa-faq__q,
  .fa-08-map-challenge__pin { min-height: 44px; }

  .fa-01-header__navlink { display: inline-flex; align-items: center; min-height: 44px; }
  .fa-01-header__drawerlink { display: flex; align-items: center; min-height: 44px; }

  .fa-auth__x,
  .fa-spinpop__x,
  .fa-01-header__close,
  .fa-01-header__burger,
  .fa-06-upgrades-dialog__close,
  .fa-rail__btn { min-width: 44px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   USER MOTION TOGGLE — the same suppression as prefers-reduced-motion, driven
   by the persisted html.fa-reduce-motion class the footer button sets. A single
   catch-all so every current and future animation/transition dies at once; the
   gutter plane + route line (which animate structure, not just style) are
   dropped outright, mirroring their reduced-motion treatment. */
html.fa-reduce-motion *,
html.fa-reduce-motion *::before,
html.fa-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}
html.fa-reduce-motion .fa-flyby,
html.fa-reduce-motion .fa-route { display: none !important; }

/* --------------------------------------------------------------------------
   LIGHT THEME — component layer (beyond the token swap in tokens.css). A real
   light design, not an inversion: it lifts the hardcoded-dark chrome to light,
   gives content genuine surface hierarchy (crisp cards + soft shadows), and
   KEEPS text over dark imagery light. Appended last so it wins over sections.
   Dark theme is untouched (all rules are scoped to [data-theme="light"]).
   -------------------------------------------------------------------------- */

/* chrome — header bar + footer were hardcoded dark navy */
:root[data-theme="light"] .fa-01-header__bar {
  background: rgba(252, 250, 244, .90);
  border-bottom: 1px solid var(--fa-line);
}
:root[data-theme="light"] .fa-panel--warm {
  background: linear-gradient(180deg, #F6EFE0 0%, #EFE6D2 100%);
  border-top: 1px solid var(--fa-line);
}

/* content definition — crisp cards/panels that lift off the cream page */
:root[data-theme="light"] .fa-panel {
  border-color: var(--fa-gold-a35);
  box-shadow: 0 1px 2px rgba(34, 24, 6, .04), 0 14px 34px rgba(34, 24, 6, .06);
}
:root[data-theme="light"] .fa-card {
  border-color: var(--fa-gold-a30);
  box-shadow: 0 2px 10px rgba(34, 24, 6, .08);
}
:root[data-theme="light"] .fa-card:hover { box-shadow: 0 8px 22px rgba(34, 24, 6, .13); }

/* faint gold-wash icon medallions need a touch more presence on cream */
:root[data-theme="light"] .fa-medallion {
  background: var(--fa-gold-a12);
  border-color: var(--fa-gold-a45);
}

/* KEEP text over dark imagery light: the hero photo + any image-overlay box
   (.fa-media holds the picture + its scrim overlays). Re-declaring the tokens
   on the container makes every descendant use the dark-theme (light) values. */
:root[data-theme="light"] .fa-02-hero,
:root[data-theme="light"] .fa-media,
:root[data-theme="light"] .fa-04-destinations__caption,
:root[data-theme="light"] .fa-game-stage {
  --fa-ivory:     #F5EBD4;
  --fa-ivory-dim: #C9BFA6;
  --fa-muted:     #8A93A8;
  --fa-gold:      #D4AF37;
  --fa-gold-hi:   #F0D584;
}
/* .fa-game-stage keeps its dark "screen" look in light (a blurred game-art bg
   under a dark scrim = a realistic player); re-declaring the tokens on it keeps
   the demo note / launch copy legible on that dark surface. */
/* the destination city name (.fa-h4 = --fa-ivory) sits in the caption, which is
   a SIBLING of .fa-media, so the override above (added to that group) is what
   keeps it light over its dark scrim; the button metal is unchanged. */

/* wordmark swap: gold on dark, higher-contrast teal on light surfaces */
.fa-01-header__logo--light,
.fa-12-news-trust-footer__brand-logo--light { display: none; }
:root[data-theme="light"] .fa-01-header__logo--dark,
:root[data-theme="light"] .fa-12-news-trust-footer__brand-logo--dark { display: none; }
:root[data-theme="light"] .fa-01-header__logo--light,
:root[data-theme="light"] .fa-12-news-trust-footer__brand-logo--light { display: revert; }

/* kill the dark navy/gold TEXT-glows — designed for dark bg, they read as dirty
   halos on cream. Over-image copy keeps legibility from its scrims, not shadow. */
:root[data-theme="light"] * { text-shadow: none !important; }

/* map waypoint pill was a dark navy scrim with navy text = dark-on-dark ->
   light pill so the city name + percentage read on the cream map */
:root[data-theme="light"] .fa-08-map-challenge__tag {
  background: rgba(255, 253, 247, .92);
  border: 1px solid var(--fa-gold-a45);
}
:root[data-theme="light"] .fa-08-map-challenge__city { color: var(--fa-ivory-dim); }

/* spinpop popup close: its translucent dark circle goes faint on the light
   popup — make it a solid dark disc with a bright gold X in light theme */
:root[data-theme="light"] .fa-spinpop__x {
  background: rgba(27, 36, 64, .92); color: #E3C25E; border-color: var(--fa-gold-a45);
}

/* left-gutter flight route — the waypoint diamonds + airport/destination caps
   were near-black (navy #060F1F moats + navy fills) and read as BLACK on cream.
   In light, use a lighter STEEL-BLUE for the fills + soft-blue moats (not black)
   so they read as blue markers; gold border/glow stay. */
:root[data-theme="light"] .fa-route__pin {
  background: #4E6493;
  box-shadow: 0 0 0 3px rgba(78, 100, 147, .38);
}
:root[data-theme="light"] .fa-route__cap-ring {
  background: radial-gradient(circle at 50% 38%, #52679A, #3B4F79);
  box-shadow: 0 0 0 3px rgba(78, 100, 147, .38);
  color: #E3C25E;                                 /* brighter gold icon on the blue roundel */
}
:root[data-theme="light"] .fa-route__stop.is-lit .fa-route__pin {
  box-shadow: 0 0 0 3px rgba(78, 100, 147, .38), 0 0 12px 2px rgba(240, 213, 132, .6);
}
:root[data-theme="light"] .fa-route__cap.is-lit .fa-route__cap-ring {
  background: radial-gradient(circle at 50% 34%, rgba(240, 213, 132, .30), #45598A 72%);
  box-shadow: 0 0 0 3px rgba(78, 100, 147, .38), 0 0 14px 2px rgba(240, 213, 132, .55);
}

/* --------------------------------------------------------------------------
   LIGHT — section fixes found in visual QA (all scoped to [data-theme="light"])
   -------------------------------------------------------------------------- */

/* compliance strip: --fa-muted on the deeper-cream band was ~4:1 / washed.
   Bump the disclaimer to navy-dim so it reads as intentional fine print. */
:root[data-theme="light"] .fa-01-header__compliance-line { color: var(--fa-ivory-dim); }

/* 06 UPGRADE cards read as four heavy dark blocks beside the light deal panel
   (the classic "inverted dark theme" tell). Give each promo a LIGHT copy plate
   so the photo sits on top and the text on cream — the same premium treatment
   as the destination / news / featured cards. The photo scrims stay dark (a
   toned photo strip under a cream plate is the house pattern), only the copy
   plate + its type flip to light. */
:root[data-theme="light"] .fa-06-upgrades-promo__body {
  background: linear-gradient(180deg, transparent 0, var(--fa-panel) 30px, var(--fa-panel) 100%);
  border-top: 1px solid var(--fa-gold-a30);
}
:root[data-theme="light"] .fa-06-upgrades-promo__title   { color: var(--fa-ivory-dim); }
:root[data-theme="light"] .fa-06-upgrades-promo__value   { color: var(--fa-gold); }
:root[data-theme="light"] .fa-06-upgrades-promo__support { color: var(--fa-muted); }