/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GOLASO LANDING — "LUXE" LAYER   (index.php only)
   ───────────────────────────────────────────────────────────────────────────────────────────
   The operator's verdict on the FM27 landing was that it still did not feel מפואר. Five agents
   each took one visual lane of the login/registration page; this file is their work concatenated
   in lane order, and it is the LAST stylesheet in the landing chain:

     landing.css → fm26-*-landing → golaso-auth-upgrade.css → gm2040-landing-auto.css
     → gm2040-landing.css → golaso-feature-shots.css → gm2040-fm27-landing.css → THIS FILE

   ⚠ THE POSITION IS LOAD-BEARING. Three of the five lanes reported rules that tie an earlier
   sheet on specificity and win only on document order. Linked any earlier, the country tile
   reverts and the list slices mid-row again.

   LANES
     01 auth-panels  the two panels as cased instruments (housing, gold hairline, crest, wells)
     02 hero-stage   depth of field, key light, god-rays, presenter rim light, the seam dissolved
     03 brand-type   the type system, the lockup, headings, the tagline ornament
     04 lower-page   feature cards, the stats band, and a real closing for the page
     05 phone-luxe   the #mob phone login/registration (every rule prefixed html.mob #mob)

   DE-CONFLICTED AT INTEGRATION — 21 selectors were claimed by two lanes. Resolved by ownership:
     · everything under #gmlStats  → lane 04 (it repainted the band; its white numerals are
       guaranteed to sit on its own surface, and it already sets tabular figures)
     · #ldMore::before/::after     → lane 03 (the tagline is its mandate; its ornament is an image
       rule, lane 04's was a 1px line — mixing inline-block and absolute would have broken it)
     · .ld-ph b + ::before/::after → lane 01 (the panel header is its mandate and it uses ::before
       for the gold crest inside an inline-flex lockup; lane 03 wanted both pseudos for rules)
     · .ld-div                     → lane 01 (near-identical, but lane 03's drops the gap)
     · html.mob .m-*               → lane 05 by document order (it owns the phone layer)
   Each removal is marked in place. The source partials in scratchpad/fm27/luxe/ are untouched.

   TO DISABLE THE WHOLE PASS: delete the <link> to this file from index.php. Nothing else
   depends on it — every earlier layer still stands on its own.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════════════════
   LANE 01   ·   source: scratchpad/fm27/luxe/01-auth-panels.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LUXE · 01 · THE TWO AUTH PANELS   —   #ldSign / #ldClub on index.php
   Loads AFTER gm2040-fm27-landing.css. Extends the --f27-* token set (never forks it).

   ART DIRECTION — "A CASED INSTRUMENT".
   The panels stop being sheets of white and become machined cases. A milled steel-navy
   housing is inlaid around a white lacquer face; one warm gold hairline runs where the two
   meet, and that is the only gold on the panel besides the crest and two corner brackets.
   A single 315°/62° key light governs everything: a rim on every top edge, a weighted
   three-layer shadow on every floor, wells that are dark at the top because the light comes
   from above. The face carries a bespoke pressed-linen + guilloché substrate so white reads
   as a material, not as paper. The header is a brushed-navy ribbon — engraved title, one
   small gold crest, the aurora crown kept as the single spectrum on the panel. The country
   list becomes a glass-fronted tray that dissolves into its own floor above a gold rail
   instead of guillotining a row, and both gameplay windows are seated in a navy mount with
   a brass nameplate instead of floating like pasted banners. Nothing here is loud: it is
   meant to read expensive at a glance and precise on inspection.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── zone tokens. --lx-* only; every --f27-* is consumed, never redefined. ─────────────── */
body.ld {
  /* the one warm accent — hairlines, the crest, the corner brackets. Never a fill. */
  --lx-gold:        #d8ad5f;
  --lx-gold-lit:    #f3dba6;
  --lx-hair-gold:   rgba(216,173,95,.46);   /* on the white face      */
  --lx-hair-gold-d: rgba(240,208,140,.40);  /* on navy / on dark art  */

  /* the housing: milled steel-navy. Key light on the top edge, bounce off the deck on the
     bottom edge — without that lift the case's foot merges into the dark deck behind it. */
  --lx-case:      linear-gradient(168deg,#33587f 0%,#1e3c5e 24%,#112640 62%,#193752 100%);
  --lx-case-ink:  #0c1e37;
  --lx-case-rim:  rgba(163,209,250,.34);

  /* the face */
  --lx-face-hi:   #ffffff;
  --lx-face-lo:   #eef3f9;

  /* wells (a control is a cut, so it is dark at the top) */
  --lx-well-face: linear-gradient(180deg,#e9f0f7 0%,#f6fafd 58%,#fbfdfe 100%);
  --lx-well-edge: #ccdaea;
  --lx-well-cut:  inset 0 2px 3px rgba(13,36,64,.11), inset 0 0 0 1px rgba(255,255,255,.62);

  /* bespoke art for this zone (root-absolute — index.php is served from the site root) */
  --lx-art-substrate: url('/assets/img/ui/luxe/auth-panels-substrate-v1.jpg');
  --lx-art-ribbon:    url('/assets/img/ui/luxe/auth-panels-ribbon-v1.jpg');
  --lx-art-crest:     url('/assets/img/ui/luxe/auth-panels-crest-v1.png');
  --lx-art-corner:    url('/assets/img/ui/luxe/auth-panels-corner-v1.png');
  --lx-art-corner-r:  url('/assets/img/ui/luxe/auth-panels-corner-flip-v1.png');
}


/* ═════════════════════════ 1 · THE CASE — the panel shell ═════════════════════════
   The white face keeps the exact 529×470 / 418×470 footprint gm2040-landing.css:125
   pins; the housing is drawn INSIDE that footprint (a masked ring on ::after), so the
   10px seam between the two panels and the 32px deck reveal are both untouched. */

#ldstage .ld-panel {
  border: 1px solid rgba(163,209,250,.42) !important;
  border-radius: 16px !important;
  background-color: var(--lx-face-hi) !important;
  /* the veil is deliberately thin — at .88 the substrate is arithmetically invisible and
     the face goes back to being paper. .50 leaves the guilloché at ~4% and the linen at ~2%. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.42) 42%, rgba(239,244,250,.74) 100%),
    var(--lx-art-substrate) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  /* one key light: a rim on the top edge, then a three-layer shadow that falls DOWN
     and slightly RIGHT (x:y = 1:4), then the contact darkening under the case. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 3px rgba(2,8,20,.30),
    3px 16px 30px rgba(2,8,20,.42),
    6px 40px 78px rgba(2,8,20,.34) !important;
}
#ldstage #ldSign,
#ldstage #ldClub {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 3px rgba(2,8,20,.30),
    3px 16px 30px rgba(2,8,20,.42),
    6px 40px 78px rgba(2,8,20,.34) !important;
}
/* the panels are bolted to the deck — they do not levitate (FM27's ruling, kept) */
#ldstage .ld-panel:hover {
  transform: none;
  border-color: rgba(190,230,255,.58) !important;
}
/* index.php:1360 adds .gm-pick to invite the country pick. gm2040-landing.css:363 states it
   at (1,1,0) — already outranked by fm27's (2,0,0) panel shadow, so the invite has been
   silently dead. Restated here at (2,1,0) as a cyan collar ON TOP of the case's own light. */
#ldstage #ldClub.gm-pick {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 2px rgba(79,211,232,.60),
    0 0 26px rgba(79,211,232,.30),
    0 2px 3px rgba(2,8,20,.30),
    3px 16px 30px rgba(2,8,20,.42),
    6px 40px 78px rgba(2,8,20,.34) !important;
}

/* ── the housing: a 5px milled ring painted ONLY in the ring, via the
      content-box XOR border-box mask (the same trick landing.css:198 already uses). */
#ldstage .ld-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 15px;
  padding: 5px;
  background: var(--lx-case);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow: inset 0 1px 0 var(--lx-case-rim);
}

/* ── the jewellery line + the two corner brackets, just inside the housing.
      (This releases gm2040-landing.css:132 / fm27:520 — the folded-corner wash — whose
      geometry is re-cut as the key-light bloom on .ld-body::before below.) */
#ldstage .ld-panel::before {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 5px; bottom: 5px;
  width: auto; height: auto;
  z-index: 5;
  pointer-events: none;
  border-radius: 11px;
  /* the brackets sit on the white face, so they start just under the ribbon (58 − 5) */
  background:
    var(--lx-art-corner)   left 0 top 53px  / 54px 54px no-repeat,
    var(--lx-art-corner-r) right 0 top 53px / 54px 54px no-repeat !important;
  box-shadow:
    inset 0 0 0 1px var(--lx-hair-gold),
    inset 0 1px 0 1px rgba(255,255,255,.55);
  opacity: 1;
}


/* ═════════════════════ 2 · THE HEADER RIBBON — .ld-ph ═════════════════════
   FINISH FIX: golaso-auth-upgrade.css:51 sets .ld-ph{position:relative}, which re-enables
   landing.css:70's left:6px/top:4px as RELATIVE offsets — the shipped ribbon is shoved 6px
   right and 4px down, overflows the panel and is silently clipped by .ld-panel{overflow:
   hidden}. Zeroing the offsets makes it a true flush ribbon seated in the housing. */

#ldstage .ld-ph {
  position: relative !important;
  left: 0 !important; right: auto !important; top: 0 !important; bottom: auto !important;
  height: 58px !important;
  overflow: hidden;
  isolation: isolate;
  background-color: #0d2140 !important;
  background-image:
    var(--f27-ld-aurora-lit, linear-gradient(90deg,#43d8ff,#8054ff 52%,#df3b9d)),
    linear-gradient(180deg, var(--lx-hair-gold-d), var(--lx-hair-gold-d)),
    var(--lx-art-ribbon) !important;
  background-size: 100% 2px, 100% 1px, cover !important;
  background-position: bottom, bottom 2px center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(190,226,255,.24),
    0 6px 14px rgba(3,10,22,.30) !important;
}

/* the engraved lockup: crest + letter-spaced display caps */
#ldstage .ld-ph b {
  display: inline-flex !important;
  align-items: center;
  gap: 13px;
  margin-right: -5.4px;                    /* undo the trailing letter-space, optically centre */
  font: 800 16px/1 var(--f27-ld-display, 'Saira Semi Condensed', sans-serif) !important;
  letter-spacing: 5.4px !important;
  color: #f4f8ff !important;
  text-shadow: 0 1px 0 rgba(2,8,20,.62), 0 0 18px rgba(120,200,255,.20) !important;
}
#ldstage .ld-ph b::before {
  content: "";
  width: 27px; height: 27px; flex: 0 0 27px;
  background: var(--lx-art-crest) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(2,8,20,.55));
}

/* the broadcast pin — a 5px jewel in a brass collar, not a lamp */
#ldstage .ld-ph::before {
  inset-inline-start: 19px !important;
  width: 5px !important; height: 5px !important;
  background: var(--f27-ld-teal-lit, #4fd3e8) !important;
  box-shadow:
    0 0 0 1px rgba(216,173,95,.55),
    0 0 0 4px rgba(79,211,232,.10),
    0 0 10px rgba(79,211,232,.65) !important;
}
/* the travelling highlight stays on the crown, one third the width, dimmer */
#ldstage .ld-ph::after {
  height: 2px !important;
  width: 26% !important;
  opacity: .8;
}


/* ═════════════════ 3 · THE KEY LIGHT + THE SHELF inside the body ═════════════════
   ⚠ .ld-body is position:absolute (landing.css:79). Nothing below changes that — the two
   pseudo-elements are position:absolute themselves, so they never enter its flex flow. */

#ldstage .ld-panel > .ld-body { z-index: 1; }

/* the bloom the 315°/62° key leaves on the face's top-left */
#ldstage .ld-body::before {
  content: "";
  position: absolute;
  left: -26px; top: -12px;
  width: 250px; height: 190px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(58% 58% at 30% 26%,
              rgba(255,255,255,.95), rgba(233,244,255,.42) 46%, rgba(233,244,255,0) 74%);
}

/* the engraved shelf that lands the gameplay window: a cut line with a light line under
   it, tapered at both ends so it reads as a rule and not as a stray border. */
#ldstage .ld-body::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px;
  bottom: 100px;                      /* #ldSign: 88px window + 12px reveal */
  height: 2px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,36,64,0), rgba(13,36,64,.17) 16%, rgba(13,36,64,.17) 84%, rgba(13,36,64,0)),
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 16%, rgba(255,255,255,.95) 84%, rgba(255,255,255,0));
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 1px, 100% 1px;
  background-position: 0 0, 0 1px;
}
/* #ldClub needs no shelf: the country well already closes on its own gold rail 13px
   above the window, and a second rule in that gap would be noise. */
#ldstage #ldClub .ld-body::after { display: none; }


/* ═══════════════════════ 4 · PANEL COPY ═══════════════════════
   The heading gets an engraved trailing rule — zero height cost, so every downstream
   offset (and the country well's budget) is unchanged. */

#ldstage .ld-hd {
  display: flex !important;
  align-items: center;
  gap: 13px;
  font: 800 20px/1.15 var(--f27-ld-display, 'Saira Semi Condensed', sans-serif) !important;
  letter-spacing: .4px !important;
  color: var(--f27-ld-ink-1, #071b33) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
#ldstage .ld-hd::after {
  content: "";
  /* flex-basis 0 + min-width 0 — the rule takes leftover space only, so a long localized
     heading can never be forced onto a second line by the ornament. */
  flex: 1 1 0;
  min-width: 0;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(216,173,95,.62), rgba(216,173,95,.10) 78%, rgba(216,173,95,0));
}
#ldstage .ld-sub {
  font: 500 11.5px/1.45 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  color: var(--f27-ld-ink-3, #33465f) !important;
  letter-spacing: .1px !important;
}


/* ═══════════════════════ 5 · THE FIELDS — every state ═══════════════════════ */

#ldstage .ld-f {
  border-radius: 10px !important;
  border: 1px solid var(--lx-well-edge) !important;
  background: var(--lx-well-face) !important;
  box-shadow: var(--lx-well-cut), 0 1px 0 rgba(255,255,255,.92) !important;
  transition: border-color var(--f27-ld-t,180ms) var(--f27-ld-ease, ease),
              box-shadow var(--f27-ld-t,180ms) var(--f27-ld-ease, ease),
              background-color 120ms ease !important;
}
#ldstage .ld-f input { color: var(--f27-ld-ink-2, #0d2440) !important; letter-spacing: .1px; }
#ldstage .ld-f input::placeholder { color: var(--f27-ld-ink-4, #5d7490) !important; opacity: 1; }
#ldstage .ld-f .fi { color: #7d93ac !important; }

/* HOVER — the lid catches a little more light */
#ldstage .ld-f:hover {
  border-color: #b4c9dd !important;
  background: linear-gradient(180deg,#eef4fa 0%,#f9fcfe 58%,#ffffff 100%) !important;
}
/* FOCUS — the one teal ring, plus a warm rim so the cut still reads */
#ldstage .ld-f:focus-within {
  transform: none !important;
  border-color: var(--f27-ld-teal, #129fc4) !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 2px rgba(13,36,64,.06),
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 3px rgba(19,145,196,.20),
    0 4px 12px rgba(13,80,110,.13) !important;
}
#ldstage .ld-f:focus-within .fi { color: var(--f27-ld-teal-deep, #0d7ea0) !important; }
/* FILLED — a value has been committed: the well brightens and the icon takes the brand */
#ldstage .ld-f:has(input:not(:placeholder-shown)) {
  background: #ffffff !important;
  border-color: #b0c6da !important;
}
#ldstage .ld-f:has(input:not(:placeholder-shown)) .fi { color: var(--f27-ld-teal-deep, #0d7ea0) !important; }
/* ERROR — :user-invalid only, so an untouched required field is never accused */
#ldstage .ld-f:has(input:user-invalid) {
  border-color: var(--f27-loss, #d33f3f) !important;
  background: linear-gradient(180deg,#fdeeee 0%,#fff7f7 62%,#fffbfb 100%) !important;
  box-shadow: inset 0 2px 3px rgba(120,20,20,.10), inset 0 0 0 1px rgba(255,255,255,.6),
              0 0 0 3px rgba(211,63,63,.13) !important;
}
#ldstage .ld-f:has(input:user-invalid) .fi { color: var(--f27-loss, #d33f3f) !important; }
/* DISABLED */
#ldstage .ld-f:has(input:disabled) {
  border-color: #dde5ee !important;
  background: #eff3f7 !important;
  box-shadow: inset 0 1px 2px rgba(13,36,64,.05) !important;
}
#ldstage .ld-f:has(input:disabled) input,
#ldstage .ld-f:has(input:disabled) .fi { color: #9aabbe !important; cursor: not-allowed; }

/* the reveal-password key */
#ldstage .eye { color: #7d93ac !important; border-radius: 6px; }
#ldstage .eye:hover { color: var(--f27-ld-ink-2, #0d2440) !important; }
#ldstage .eye:focus-visible { outline: none; box-shadow: var(--f27-ld-focus) !important; }


/* ═══════════════ 6 · REMEMBER ME + FORGOT PASSWORD ═══════════════ */

#ldstage .chk { color: var(--f27-ld-ink-3, #33465f) !important; }
#ldstage .chk .box {
  border-radius: 5px !important;
  border: 1px solid #bccfe1 !important;
  background: linear-gradient(180deg,#e6edf5,#fbfdfe) !important;
  box-shadow: inset 0 2px 3px rgba(13,36,64,.12), 0 1px 0 rgba(255,255,255,.9) !important;
}
#ldstage .chk input:checked + .box {
  border-color: #0d7ea0 !important;
  background: linear-gradient(180deg,#4fd3e8,#0f93b8 62%,#0b7fa3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(4,60,82,.35),
    0 2px 5px rgba(13,126,160,.42) !important;
}
#ldstage .chk:hover .box { border-color: #9db8cf !important; }
#ldstage .chk input:focus-visible + .box { box-shadow: var(--f27-ld-focus) !important; }

#ldstage .forgot {
  position: relative;
  color: var(--f27-ld-teal-deep, #0d7ea0) !important;
  font: 600 11.5px/1 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  text-decoration: none !important;
}
#ldstage .forgot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, rgba(216,173,95,0), var(--lx-gold), rgba(216,173,95,0));
  opacity: 0;
  transition: opacity 140ms ease;
}
#ldstage .forgot:hover { color: var(--f27-ld-ink-2, #0d2440) !important; text-decoration: none !important; }
#ldstage .forgot:hover::after { opacity: 1; }
#ldstage .forgot:focus-visible { outline: none; box-shadow: var(--f27-ld-focus) !important; }


/* ═══════════════ 7 · THE PRIMARY ACTION ═══════════════
   ⚠ fm26-v11-landing.css:115 is `#btnSignin` + !important — a class-only rule silently
   loses and the button reverts to a flat teal slab. Every id is named here. The aurora
   fill and its raster come from fm27 §5 and are deliberately NOT overridden: only the
   metal around it changes. */

#ldstage .ld-btn,
#ldstage #btnSignin,
#ldstage #btnCreateSide,
#ldstage #btnJoin,
#ldstage .ld-btn.grn {
  border-radius: 10px !important;
  border: 1px solid rgba(7,18,36,.55) !important;
  letter-spacing: 2.6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(240,208,140,.20),
    inset 0 -12px 20px rgba(4,8,26,.30),
    0 2px 0 rgba(6,12,30,.34),
    0 10px 22px rgba(24,12,64,.34),
    0 24px 44px rgba(8,5,28,.24) !important;
}
#ldstage .ld-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 0 0 1px rgba(243,219,166,.34),
    inset 0 -12px 20px rgba(4,8,26,.26),
    0 2px 0 rgba(6,12,30,.30),
    0 16px 30px rgba(24,12,64,.40),
    0 32px 56px rgba(8,5,28,.26) !important;
}
#ldstage .ld-btn:active:not(:disabled) {
  transform: translateY(1px) !important;
  box-shadow: inset 0 3px 8px rgba(4,8,26,.55), inset 0 0 0 1px rgba(240,208,140,.16) !important;
}
#ldstage .ld-btn:focus-visible {
  outline: none;
  box-shadow: var(--f27-ld-focus-dark), 0 10px 22px rgba(24,12,64,.34) !important;
}
#ldstage .ld-btn:disabled,
#ldstage #btnSignin:disabled,
#ldstage #btnJoin:disabled {
  border-color: #c7d6e4 !important;
  box-shadow: inset 0 2px 3px rgba(13,36,64,.10), inset 0 0 0 1px rgba(255,255,255,.6) !important;
}


/* ═══════════════ 8 · THE DIVIDER + THE SOCIAL KEYS ═══════════════ */

#ldstage .ld-div {
  font: 700 9.5px/1 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  letter-spacing: 2.1px !important;
  text-transform: uppercase;
  color: var(--f27-ld-ink-4, #5d7490) !important;
  gap: 13px !important;
}
/* a letterpress rule: one cut line with a light line under it */
#ldstage .ld-div::before,
#ldstage .ld-div::after {
  height: 2px !important;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(13,36,64,.14) 0 1px, rgba(255,255,255,.92) 1px 2px) !important;
}

#ldstage .ld-socials .social {
  border-radius: 10px !important;
  border: 1px solid #d2dfec !important;
  background: linear-gradient(180deg,#ffffff 0%,#ffffff 52%,#f1f6fb 100%) !important;
  color: var(--f27-ld-ink-3, #33465f) !important;
  font: 600 11.5px/1 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(13,36,64,.11),
    0 5px 11px rgba(13,36,64,.07) !important;
}
#ldstage .ld-socials .social:hover {
  transform: translateY(-2px);
  border-color: #b6cbdf !important;
  color: var(--f27-ld-ink-2, #0d2440) !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(13,36,64,.12),
    0 10px 20px rgba(13,36,64,.12) !important;
}
#ldstage .ld-socials .social:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(13,36,64,.16) !important;
}
#ldstage .ld-socials .social:focus-visible { outline: none; box-shadow: var(--f27-ld-focus) !important; }


/* ═══════════════ 9 · THE COUNTRY PICKER ═══════════════
   FINISH FIX (a): in the shipped build the well's content box is 236px and a tile row is
   84.9px, so row three is sliced at 78% of its height and Australia / Austria / Azerbaijan
   read as broken furniture. The tile is re-cut to a 68px row, so three WHOLE rows plus an
   8px hint of the fourth fill the same 254px well; the hint then dissolves under a fade,
   over a gold rail, beside a designed scrollbar. max-height is untouched, so nothing
   downstream of the well moves. */

#ldstage .ld-cselsearch {
  border-radius: 10px !important;
  border: 1px solid var(--lx-well-edge) !important;
  background-color: #f2f7fb !important;
  color: var(--f27-ld-ink-2, #0d2440) !important;
  box-shadow: var(--lx-well-cut), 0 1px 0 rgba(255,255,255,.92) !important;
}
#ldstage .ld-cselsearch:hover { border-color: #b4c9dd !important; }
#ldstage .ld-cselsearch:focus {
  transform: none !important;
  background-color: #ffffff !important;
  border-color: var(--f27-ld-teal, #129fc4) !important;
  box-shadow:
    inset 0 1px 2px rgba(13,36,64,.06),
    0 0 0 3px rgba(19,145,196,.20),
    0 4px 12px rgba(13,80,110,.13) !important;
}

/* ── the tray: a recess cut into the face, lit from above */
#ldstage .ld-cselmenu {
  padding: 8px 8px 8px 8px !important;
  border-radius: 12px !important;
  border: 1px solid #c8d8e8 !important;
  background-color: #e4edf6 !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.66) 22%, rgba(246,250,253,.90)),
    var(--lx-art-substrate) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow:
    inset 0 4px 7px rgba(13,36,64,.16),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 1px 0 rgba(255,255,255,.92) !important;
  /* ⚠ Chrome drops every ::-webkit-scrollbar rule on a scroller that declares a non-auto
     scrollbar-width / scrollbar-color — fm27:836 sets both, which is why the shipped well
     has a hairline system bar. Returning them to auto hands the bar back to the rules below. */
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
  overscroll-behavior: contain;
}
/* the designed scrollbar — a groove with a milled thumb, not the platform default */
#ldstage .ld-cselmenu::-webkit-scrollbar { width: 10px; }
/* the track stops 16px short of the floor, so the thumb can never travel under the rail */
#ldstage .ld-cselmenu::-webkit-scrollbar-track,
#ldstage .ld-cselmenu::-webkit-scrollbar-track-piece {
  background: linear-gradient(90deg, rgba(13,36,64,.05), rgba(13,36,64,.10));
  border-radius: 999px;
  margin: 8px 0 16px;
}
#ldstage .ld-cselmenu::-webkit-scrollbar-thumb {
  min-height: 34px;
  background: linear-gradient(180deg,#8fa8c0,#5f7c99 52%,#4d6c8b) !important;
  border: 2px solid transparent;
  background-clip: padding-box !important;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
#ldstage .ld-cselmenu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#7c98b4,#4d6c8b 52%,#3d5b79) !important;
  background-clip: padding-box !important;
}

/* the well is re-cut to a whole number of rows. In the shipped build the content box is
   236px against a 76px row pitch, so row three is sliced at 78%. 244px against the new 68px
   row holds THREE WHOLE ROWS (8 + 3x68 + 2x8 = 228) and puts the fourth row's edge under
   the rail — no row is ever guillotined at rest, and the well still ends 13px clear of the
   gameplay window below it. (landing.js measures nothing inside the stage.) */
/* scoped to the OPEN picker (guest mode). Register mode swaps in .ld-csel-dd, whose own
   208px dropdown height is index.php's business — this rule deliberately stays out of it. */
#ldstage #ldClub .ld-csel-open .ld-cselmenu { max-height: 244px !important; }

/* the terminated edge: rows dissolve into the tray floor … */
#ldstage #ldCsel::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg,
              rgba(246,250,253,0) 0%, rgba(246,250,253,.72) 46%, rgba(240,246,251,.98) 100%) !important;
}
/* … and land on a gold rail that closes the well, with the scroll mark on it */
#ldstage #ldCsel::before {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 11px;
  z-index: 3;
  pointer-events: none;
  border-radius: 0 0 11px 11px;
  border-top: 1px solid var(--lx-hair-gold);
  background-color: #e6eef7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'%3E%3Cpath d='M3 2.2 11 5.4 19 2.2' fill='none' stroke='%235d7490' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 2.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
/* register mode swaps the open well for a dropdown — the well furniture goes with it */
#ldstage #ldCsel.ld-csel-dd::after,
#ldstage #ldCsel.ld-csel-dd::before { display: none; }

/* ── the tile: a crest plate. 68px rows = three whole rows in the same 254px well. */
#ldstage .ld-cselopt {
  min-height: 68px !important;
  padding: 6px 3px 5px !important;
  gap: 4px !important;
  justify-content: center;
  border-radius: 8px !important;
  border: 1px solid #dae5f1 !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg,#ffffff 0%,#ffffff 54%,#eef5fb 100%) !important;
  color: var(--f27-ld-ink-3, #33465f) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(13,36,64,.10) !important;
}
#ldstage .ld-cselopt img {
  width: 38px !important; height: 25px !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 0 1px rgba(13,36,64,.22),
    0 1px 3px rgba(13,36,64,.28),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}
#ldstage .ld-cselopt span {
  font: 700 10px/1.15 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  color: var(--f27-ld-ink-2, #0d2440) !important;
}
#ldstage .ld-cselopt .ld-cclubs {
  font: 700 8px/1.15 var(--f27-ld-ui, 'Inter', sans-serif) !important;
  color: var(--f27-ld-ink-4, #5d7490) !important;
}
#ldstage .ld-cselopt:hover {
  transform: translateY(-2px) !important;
  border-color: #a9c6dd !important;
  background-image: linear-gradient(180deg,#ffffff 0%,#f7fcfe 54%,#e8f4fa 100%) !important;
  box-shadow: 0 2px 4px rgba(13,36,64,.10), 0 10px 20px rgba(13,60,100,.16) !important;
}
#ldstage .ld-cselopt:active { transform: translateY(0) !important; box-shadow: inset 0 2px 5px rgba(13,36,64,.16) !important; }
#ldstage .ld-cselopt:focus-visible { outline: 2px solid var(--f27-ld-teal, #129fc4); outline-offset: -2px; }
/* SELECTED — the one place a tile is allowed a gold hairline */
#ldstage .ld-cselopt.sel {
  border-color: var(--f27-ld-teal, #129fc4) !important;
  background-image: linear-gradient(180deg,#ffffff 0%,#eaf7fc 60%,#dcf0f8 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(216,173,95,.55),
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(13,36,64,.10),
    0 10px 20px rgba(13,90,120,.20) !important;
}
#ldstage .ld-cselopt.sel img { box-shadow: 0 0 0 1px var(--f27-ld-teal, #129fc4), 0 1px 4px rgba(13,126,160,.4) !important; }

/* the empty state keeps the tray's material */
#ldstage .ld-cselnr {
  border: 1px dashed #b9cddf !important;
  background: #eef4fa !important;
  box-shadow: inset 0 2px 4px rgba(13,36,64,.08) !important;
}

/* register-mode inputs inherit the same well */
#ldstage .ld-inp,
#ldstage .ld-ddtrig {
  border-radius: 10px !important;
  border: 1px solid var(--lx-well-edge) !important;
  background: var(--lx-well-face) !important;
  box-shadow: var(--lx-well-cut), 0 1px 0 rgba(255,255,255,.92) !important;
}
#ldstage .ld-inp:hover,
#ldstage .ld-ddtrig:hover { border-color: #b4c9dd !important; }
#ldstage .ld-inp:focus,
#ldstage .ld-ddtrig:focus-visible {
  background: #ffffff !important;
  border-color: var(--f27-ld-teal, #129fc4) !important;
  box-shadow: inset 0 1px 2px rgba(13,36,64,.06), 0 0 0 3px rgba(19,145,196,.20) !important;
}


/* ═══════════════ 10 · THE GAMEPLAY WINDOW — seated, not pasted ═══════════════
   FINISH FIX (b): the window was a full-bleed slab butted against the panel's inner edge
   with nothing between it and the form. It is now mounted: a 4px navy mount cut inside its
   own box (so #ldClub .ld-body{overflow:hidden} can never clip it), one gold hairline on
   the glass, a white reveal under the mount, and the engraved shelf above it (§3). */

#ldstage .auth-panel-shot {
  border: 4px solid var(--lx-case-ink) !important;
  border-radius: 11px !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 0 0 1px var(--lx-hair-gold-d),
    inset 0 2px 0 1px rgba(190,226,255,.16),
    inset 0 -24px 30px rgba(2,10,22,.50),
    0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(13,36,64,.20) !important;
  transition: border-color var(--f27-ld-t,180ms) var(--f27-ld-ease, ease),
              box-shadow var(--f27-ld-t,180ms) var(--f27-ld-ease, ease) !important;
}
/* the nameplate: brass-ruled, warm ivory type, 12.9:1 on its own plate */
#ldstage .auth-panel-shot::before {
  inset-inline-start: 9px !important;
  bottom: 8px !important;
  padding: 4px 9px 3px !important;
  border: 1px solid rgba(216,173,95,.34) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(9,22,42,.88), rgba(4,11,24,.92)) !important;
  color: #f3e6c9 !important;
  font: 800 8px/1 var(--f27-ld-display, 'Saira Semi Condensed', sans-serif) !important;
  letter-spacing: 1.7px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.85) !important;
}
#ldstage .ld-panel:hover .auth-panel-shot {
  border-color: #16324f !important;
  box-shadow:
    inset 0 0 0 1px rgba(243,219,166,.55),
    inset 0 2px 0 1px rgba(190,226,255,.22),
    inset 0 -24px 30px rgba(2,10,22,.46),
    0 1px 0 rgba(255,255,255,.9),
    0 12px 24px rgba(13,36,64,.24) !important;
}
#ldstage #ldClub:hover .auth-panel-shot { border-color: #16324f !important; }


/* ═══════════════ 11 · MESSAGES ═══════════════ */

#ldstage .ld-msg:not(:empty) {
  padding: 6px 10px !important;
  border: 1px solid #e2d3bb !important;
  border-left: 3px solid var(--f27-loss, #d33f3f) !important;
  border-radius: 6px !important;
  background: #fffaf3 !important;
  color: var(--f27-ld-ink-2, #0d2440) !important;
  box-shadow: 0 2px 6px rgba(13,36,64,.10) !important;
}
#ldstage .ld-msg.ok:not(:empty) {
  border-color: rgba(23,160,90,.34) !important;
  border-left-color: var(--f27-win, #17a05a) !important;
  background: #f1faf4 !important;
  color: #0d7440 !important;
}


/* ═══════════════ 12 · REDUCED MOTION ═══════════════
   The art stays lit — only the movers stop. (fm27 §14 already freezes .ld-ph::after,
   .ld-btn::after and the hover transforms; this adds the transitions introduced above.) */

@media (prefers-reduced-motion: reduce) {
  #ldstage .ld-f,
  #ldstage .forgot::after,
  #ldstage .auth-panel-shot { transition: none !important; }
  #ldstage .forgot::after { opacity: 0; }
  #ldstage .forgot:hover::after { opacity: 1; }
  /* every bespoke surface, hairline, crest and bracket stays exactly as drawn */
}


/* ══════════════════════════════════════════════════════════════════════════════
   LANE 02   ·   source: scratchpad/fm27/luxe/02-hero-stage.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   FM27 · LUXE · ZONE 02 — THE HERO STAGE
   index.php · #gmlHero · #gmlArc · #gmlField · #gmlPres · and the ground the panels sit on.
   Load AFTER gm2040-fm27-landing.css. Extends the shared --f27-* set; invents no new palette.

   ART DIRECTION — "DUSK OVER THE STADIUM: one key, one horizon."
   The city stops being wallpaper and becomes a lit set seen through a lens. ONE key light sits
   low in the upper-left sky, exactly where the photograph's own sunset already is, and every
   layer on this stage obeys it: parallel volumetric shafts rake down-and-right from it, the
   presenter takes a warm rim on that side and a cool bounce on the other, and the floor below
   catches the same warm spill on the left and the stadium's cool spill on the right. Distance
   is real, not implied — a pre-blurred plate of the same photograph is laid over the sharp one
   and masked open around the SIGN IN panel, so the frame is genuinely in focus where the eye
   must land and genuinely defocused at the stadium, and a cinematic vignette closes the corners
   on the same centre. The presenter finally stands on something: a warm light pool and a
   contact shadow that falls down-and-right like every other object in the product. And the page
   no longer STOPS — the hero's lower third becomes ground haze, the aurora is masked out before
   it can leave a hard blend edge, and below the old seam the city returns as a faint reflection
   on a polished floor lit by the same key, so night above and morning below read as one room.
   Ambient life is deliberately tiny and cheap: one tower beacon and one floodlight bloom that
   breathes. Nothing else on this stage moves.

   GEOMETRY (stage is 1935 × 940; landing.js only scales it, it measures nothing in here):
     #ldTopBar 0..64 · #gmlHero / #gmlArc 64..618 · #gmlPres 88..626 (height-driven, width:auto)
     #ldAuthBg deck 474..1495 × 90..640 · #ldSign 506..1035 × 114..584 (its centre, stage 770/349,
     is the focal point every mask and vignette below is built on) · #gmlField 560..1460
     · #ldFeatureBackdrop 596..872 · .ld-card 658..858 · #gmlStats 866..940.
     Only two columns of the hero are ever visible (x 0..474 and x 1495..1935) — the deck covers
     the rest — so all of the light in the art plate is spent there and nowhere else.

   PAINT ORDER used below (z within #ldstage):
     0 #gmlField (+ reflection, + floor spill) · 1 #gmlHero (city + DOF) → #gmlArc (aurora)
     → .gml-presfloor (contact shadow + the two ambient lights) · 2 #ldSweep (additive
     atmosphere) → #ldHeroFade (the grade: vignette + washes) → #gmlPres · 3 #ldAuthBg · 4 panels.

   REVIVED, NOT ADDED: #ldSweep, #ldHeroFade and .gml-presfloor are empty aria-hidden decorative
   nodes that already exist in index.php and are parked at display:none by gm2040-landing.css:25
   -27 / :115. This partial needs NO new markup — there is no MARKUP REQUEST in its report.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── zone-scoped tokens (ARTBIBLE §0 namespacing). Every one resolves through the shared
      --f27-* block, with the bible's own literal as the fallback, so this file renders
      identically whether or not the token block ships above it. */
body.ld {
  --f27-hs-night:   var(--f27-dark-0, #060912);          /* the deepest shadow in the frame  */
  --f27-hs-page:    var(--f27-surf-page, #edf1f7);       /* what the horizon must resolve to */
  --f27-hs-key:     255, 222, 178;                       /* THE key light — warm, upper-left */
  --f27-hs-fill:    168, 214, 255;                       /* the cool bounce off the stadium  */
  --f27-hs-shadow:  10, 26, 48;                          /* ground shadow, navy-black        */
  --f27-hs-veil:    4, 11, 26;                           /* the vignette / wash ink          */
  --f27-hs-t-amb:   var(--f27-t-slow, 280ms);
  --f27-hs-ease:    var(--f27-ease, cubic-bezier(.2,.6,.2,1));
}

/* ═════════════════════ 1 · DEPTH OF FIELD — the frame gets a lens ══════════════════════════
   A 484×272 pre-blurred plate of the SAME photograph, drawn over the sharp one at the same
   `center 62%/cover` crop and masked open around the SIGN IN panel. The browser's own 4×
   upscale IS the bokeh, so this costs one 11 KB decode and ZERO runtime filter — a live
   blur() on a 1935×554 surface is the single most expensive thing this hero could do.
   ⚠ This releases gm2040-landing.css:96's `width:620px` left wash; the wash is not lost, it
   moves onto #ldHeroFade below (§4/3) where it sits above the aurora instead of under it. */
#ldstage #gmlHero::before {
  content: "";
  position: absolute;
  left: -26px !important;
  right: -26px !important;
  top: -26px !important;
  bottom: -26px !important;
  width: auto !important;
  height: auto !important;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/img/ui/luxe/hero-stage-dof-v1.jpg') center 62% / cover no-repeat !important;
  /* the hole in the blur is centred on the SIGN IN panel: stage 770/349 → 40%/51% of this box.
     The mask tops out at .52, never at 1 — a real lens keeps the far plane READABLE, and the
     city here is good art that this pass is meant to deepen, not dissolve. */
  -webkit-mask-image: radial-gradient(ellipse 76% 92% at 40% 51%,
            rgba(0,0,0,0) 0 36%, rgba(0,0,0,.13) 60%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.44) 100%);
          mask-image: radial-gradient(ellipse 76% 92% at 40% 51%,
            rgba(0,0,0,0) 0 36%, rgba(0,0,0,.13) 60%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.44) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}

/* ═════════════════ 2 · THE HORIZON — where the page used to simply stop ════════════════════
   Was an 84px ramp straight to a flat page colour, ending on a hard rule at y=618 (the single
   most web-page thing on the screen). It becomes 208px of ground haze: the city loses contrast
   into an atmospheric mid-tone, picks up one warm band of low sun, and only then resolves to
   the colour of the floor — and the last 9% dissolves in ALPHA as well, so whatever the light
   section paints underneath shows through and the two surfaces cannot disagree. */
#ldstage #gmlHero::after {
  content: "";
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 208px !important;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg,
      rgba(210,226,243,0)    0%,
      rgba(210,226,243,.10) 28%,
      rgba(219,231,245,.34) 52%,
      rgba(230,238,248,.72) 71%,
      rgba(232,239,248,.95) 87%,
      /* ⚠ the haze resolves to the measured colour of the floor directly beneath the hero
         (rgb 188,211,232 — #gmlField's glow art plus §7's spill), NOT to the page white.
         Ending on #eef2f8 was the old build's mistake: it made a pale bar, then a step down. */
      rgba(200,219,238,1)   96%,
      rgba(196,216,236,1)  100%),
    /* one warm band of low sun sitting inside the haze — the horizon, not a rule */
    linear-gradient(180deg,
      rgba(var(--f27-hs-key),0)   38%,
      rgba(var(--f27-hs-key),.13) 55%,
      rgba(var(--f27-hs-key),.05) 66%,
      rgba(var(--f27-hs-key),0)   76%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: bottom, bottom !important;
}
/* and the last rows leave in ALPHA as well, so the hero's box edge literally cannot draw a line
   of its own: by y=618 the layer is gone and what you are looking at is already the floor. */
#ldstage #gmlHero {
  -webkit-mask-image: linear-gradient(180deg, #000 0 91%, rgba(0,0,0,.62) 96.5%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0 91%, rgba(0,0,0,.62) 96.5%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}

/* ═══════════════════ 3 · THE AURORA SWEEP — it must not end on an edge ═════════════════════
   #gmlArc is mix-blend-mode:screen over an OPAQUE jpg, so its compositing layer terminated in
   a hard 2px seam exactly on the hero's bottom edge (measured: rgb(159,178,190) between two
   rows of rgb(≈205,216,227)). Masking the blend layer out before it reaches its own boundary
   removes the artefact by construction, and the sky reads better for it: aurora belongs high,
   not down at the horizon. Opacity drops .92 → .74 so the sweep stops competing with the key. */
#ldstage #gmlArc {
  opacity: .74 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0 46%, rgba(0,0,0,.62) 72%, rgba(0,0,0,0) 93%);
          mask-image: linear-gradient(180deg, #000 0 46%, rgba(0,0,0,.62) 72%, rgba(0,0,0,0) 93%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}

/* ════════════════ 4 · THE ATMOSPHERE PLATE — the one bespoke light layer ═══════════════════
   #ldSweep is an empty aria-hidden div parked at display:none since the dark era. It comes back
   as a single additive plate: volumetric shafts from the key, the stadium's floodlight bloom, a
   distant crowd shimmer and a band of ground haze — all painted on black and screened, so it can
   only ADD light and can never mud the photograph. 36 KB for every atmospheric effect here.
   ⚠ It is NOT a virgin element: index.php:1066 gives it `inset:0` (overridden below) and
   index.php:1145 hangs an infinite 11s translateX(430%) sweep on #ldSweep::before. §8 kills that
   pseudo outright — un-hiding this div without doing so silently restores a full-width infinite
   animation that an earlier performance pass deliberately removed. */
#ldstage #ldSweep {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 64px !important;
  right: auto !important;
  bottom: auto !important;
  width: 1935px !important;
  height: 554px !important;
  z-index: 2 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  background: url('/assets/img/ui/luxe/hero-stage-airglow-v1.jpg') left top / 100% 100% no-repeat !important;
  mix-blend-mode: screen;
  opacity: .92;
}

/* ═══════════════════════ 5 · THE GRADE — vignette, washes, scrim ═══════════════════════════
   #ldHeroFade (another parked decorative div) becomes the single colour-grade layer that sits
   above BOTH the city and the aurora, so nothing can brighten the corners back. Three jobs, one
   element, one paint: close the frame on the SIGN IN panel; hold the left column down so the
   presenter reads as the brightest thing in it; and tuck the top edge under the chrome. */
#ldstage #ldHeroFade {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 64px !important;
  right: auto !important;
  bottom: auto !important;
  width: 1935px !important;
  height: 554px !important;
  z-index: 2 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
  background-image:
    /* 1 · the vignette, centred on SIGN IN (stage 770/349 → 40%/51% of this box).
          .32 at the extreme corner: enough to close the frame, never enough to lose the city. */
    radial-gradient(ellipse 62% 76% at 40% 51%,
      rgba(var(--f27-hs-veil),0) 0 34%,
      rgba(var(--f27-hs-veil),.09) 62%,
      rgba(var(--f27-hs-veil),.21) 84%,
      rgba(var(--f27-hs-veil),.32) 100%),
    /* 2 · top scrim: the hero slides under the chrome instead of butting against it */
    linear-gradient(180deg, rgba(var(--f27-hs-veil),.46) 0, rgba(var(--f27-hs-veil),0) 15%),
    /* 3 · the left wash inherited from gm2040-landing.css:96 — now ABOVE the aurora */
    linear-gradient(90deg,
      rgba(6,18,38,.56) 0, rgba(6,18,38,.23) 17%, rgba(6,18,38,0) 32%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  box-shadow: none !important;
  /* ⚠ the grade must LET GO before the horizon. Measured: with the wash and the vignette
     running to the hero's bottom edge, the lower-left corner held at rgb(80,90,103) while the
     floor 4px below it was rgb(188,211,232) — a 110-level cliff, i.e. the exact seam this pass
     exists to kill, just moved. The grade now fades out across the bottom third and the horizon
     (§2) owns everything below it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.12) 90%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 0 52%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.12) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}

/* ═════════════ 6 · THE PRESENTER — a lit figure, not a cut-out on a photo ══════════════════
   ⚠ HANDS OFF THE BOX. #gmlPres is height-driven with width:auto on purpose (gm2040-landing
   .css:109-114) — a figure baked into a background that gets resized is a shipped bug here.
   Nothing below sets width, height, left or top; only the light on him changes.
   The filter chain is read in order: warm KEY rim on his upper-left, cool BOUNCE rim on his
   right, then the cast shadow last so it is thrown from the already-rimmed silhouette.
   ⚠ NO `0 0 Npx` shadow in this chain. A symmetrical drop-shadow behind a cut-out figure is a
   halo, not a rim — it was tried at .14 and it read as a Photoshop stroke around his whole
   silhouette. Every shadow here is OFFSET, so light only appears on the side it comes from. */
#ldstage img#gmlPres {
  filter:
    drop-shadow(-3px -4px 7px rgba(var(--f27-hs-key),.30))
    drop-shadow(4px 2px 6px rgba(var(--f27-hs-fill),.18))
    drop-shadow(6px 22px 38px rgba(2,10,26,.55)) !important;
}

/* the ground he stands on. `.gml-presfloor` is an empty <i> that has sat at display:none since
   the half-body crop landed; it comes back as the pool of key light at his feet plus the
   contact shadow, which falls DOWN and slightly RIGHT on the product's 315°/62° key — the same
   x:y = 1:4 offset every card in GOLASO uses. It is what turns the PNG's bottom alpha fade from
   "the artwork ran out" into "he is standing in the light". */
#ldstage .gml-presfloor {
  display: block !important;
  position: absolute;
  left: -14px;
  top: 536px;
  width: 452px;
  height: 168px;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 25% 22% at 52% 52%,
      rgba(var(--f27-hs-shadow),.42), rgba(var(--f27-hs-shadow),.14) 54%, rgba(var(--f27-hs-shadow),0) 80%),
    radial-gradient(ellipse 46% 40% at 45% 34%,
      rgba(var(--f27-hs-key),.40), rgba(var(--f27-hs-key),.11) 44%, rgba(var(--f27-hs-key),0) 74%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ═══════════ 7 · THE FLOOR — the light section is the same room, lit by the same key ═══════
   Two layers on #gmlField, which already sits under everything at z-index 0.
   ::before  the city comes back as a reflection on a polished floor. It is the SAME 11 KB
             pre-blurred plate as the depth-of-field layer, drawn at the hero's exact box and
             mirrored about the hero's bottom edge, so the reflection is registered to the
             skyline that casts it. No filter, no second decode.
   ::after   the spill: the key's warm light pooling on the left of the floor, the stadium's
             cool light on the right, and one soft horizon glow across the width. */
#ldstage #gmlField::before {
  content: "";
  position: absolute;
  left: 0;
  top: -496px;          /* = stage 64: the hero's own box, so the crop matches exactly */
  width: 1935px;
  height: 554px;
  z-index: 0;
  pointer-events: none;
  /* read right-to-left: mirror about the element's bottom edge (stage 618, the old seam), then
     lift the whole reflection 24px so it RAMPS IN behind the still-opaque hero. Letting it begin
     exactly on 618 put a 20-level step there — a reflection with a visible starting line is just
     the seam again, wearing a reflection. */
  transform: translateY(-24px) scaleY(-1);
  transform-origin: 50% 100%;
  opacity: .13;
  background: url('/assets/img/ui/luxe/hero-stage-dof-v1.jpg') center 62% / cover no-repeat;
  /* keep only the rows nearest the horizon; after the flip this is the 92px below it */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0 83.4%, rgba(0,0,0,.34) 92%, rgba(0,0,0,.92) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0 83.4%, rgba(0,0,0,.34) 92%, rgba(0,0,0,.92) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
}
#ldstage #gmlField::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;               /* = stage 560, i.e. 58px BEHIND the hero, so it can ramp in with no edge */
  width: 1935px;
  height: 280px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 26% 84% at 9% 21%,  rgba(var(--f27-hs-key),.34),  rgba(var(--f27-hs-key),0) 74%),
    radial-gradient(ellipse 28% 84% at 89% 21%, rgba(var(--f27-hs-fill),.36), rgba(var(--f27-hs-fill),0) 74%),
    linear-gradient(180deg,
      rgba(212,232,250,0) 0%, rgba(212,232,250,.58) 21%, rgba(226,237,249,.22) 52%,
      rgba(238,243,249,0) 82%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ═════════════════ 8 · AMBIENT LIFE — one beacon, one breathing floodlight ═════════════════
   ⛔ NOT hosted on #ldBallFx, even though it looks like the perfect parked container (an empty
   <i> with exactly three empty .sp children). Three reasons, all verified in the shipped file:
     · index.php:1244 writes `ballfx.style.transform` on EVERY pointermove — an inline transform
       no stylesheet can beat, so anything mounted there slides ±14px with the cursor;
     · index.php:1097 puts `transform:scale(.35); margin:-10px` on `.sp` (measured: my 26px
       beacon rendered at 9px) and index.php:1092 hangs a masked sheen on #ldBallFx::before;
     · index.php:1145 attaches an infinite 11s translateX(430%) sweep to #ldSweep::before — one
       of the four full-width infinite animations a previous pass had to kill. Un-hiding #ldSweep
       silently brings it back, so §4's element explicitly re-kills it below.
   The two lights therefore live on the floor's own pseudos. `.gml-presfloor` is a plain z-index
   stacking context — no opacity, no filter, no mask, no blend — so it does NOT force a render
   surface, and an opacity animation on a pseudo inside it stays a compositor-only job on that
   pseudo alone. Total ambient motion on this page: one 22px dot and one 400×240 soft ellipse. */
#ldstage #ldSweep::before { display: none !important; content: none !important; }

/* the aircraft-warning light on the tall block behind the presenter (stage 316/160 = its spire).
   Its alphas are pitched ~30% hot because §5's left wash and vignette sit ABOVE it and take
   roughly that much back out. */
#ldstage .gml-presfloor::before {
  content: "";
  position: absolute;
  left: 316px;            /* .gml-presfloor's own origin is stage (-14, 536) */
  top: -378px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,238,202,1) 0 14%, rgba(255,198,132,.42) 36%, rgba(255,178,106,0) 72%);
  animation: hsBeacon 4.6s ease-in-out infinite;
}
/* the stadium's floodlights, breathing. Sized and placed on the bowl the art plate lights. */
#ldstage .gml-presfloor::after {
  content: "";
  position: absolute;
  left: 1530px;
  top: -354px;
  width: 400px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(202,233,255,.20) 0, rgba(134,197,255,.07) 42%, rgba(110,180,255,0) 74%);
  animation: hsBloom 9.4s ease-in-out infinite;
}
@keyframes hsBeacon { 0%, 100% { opacity: .24 } 50% { opacity: 1 } }
@keyframes hsBloom  { 0%, 100% { opacity: .50 } 50% { opacity: 1 } }

/* ══════════════════════════════ 9 · REDUCED MOTION ═════════════════════════════════════════
   The art stays lit; only the movers stop. Each light is parked at the midpoint of its own
   cycle rather than hidden, so a reduced-motion visitor sees the same composition, held. */
@media (prefers-reduced-motion: reduce) {
  #ldstage .gml-presfloor::before { animation: none !important; opacity: .78 !important; }
  #ldstage .gml-presfloor::after  { animation: none !important; opacity: .80 !important; }
}

/* ══════════════════════════ 10 · SAFETY: the phone layer ═══════════════════════════════════
   #ldstage is desktop-only (html.mob renders #mob instead) but every id above also exists in
   the shipped DOM on a phone, where the stage is hidden. Belt and braces: nothing in this
   partial may resurrect a 1935px layer inside a 390px viewport. */
html.mob #ldstage #ldSweep,
html.mob #ldstage #ldHeroFade,
html.mob #ldstage .gml-presfloor { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════════
   LANE 03   ·   source: scratchpad/fm27/luxe/03-brand-type.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LUXE ZONE 03 · BRAND & TYPOGRAPHY   ·   index.php ONLY
   Loads AFTER gm2040-fm27-landing.css. Extends the --f27-* token set with a
   namespaced --f27-lx-* block; it forks nothing and redefines no --f27-* name.

   ── ART DIRECTION ────────────────────────────────────────────────────────────
   ENGRAVED METAL ON NIGHT GLASS. The page already owns one accent — the aurora.
   Gold is not a second accent here; it is the *material of the marque*, and it
   is allowed on exactly four things: a hairline rule, the crest's inner line,
   one struck ornament, and one 24px headline clause. Never a fill, never below
   20px of type, never twice on the same edge. Everything the reader must READ
   is cut rather than printed: the wordmark, the plate titles and the scoreboard
   figures carry a narrow platinum ramp (white → #c9dcef → white) clipped to the
   glyph with the shadow moved into a `filter`, so the letters look struck into
   the chrome instead of laid on top of it. Under that, every remaining string
   in the product speaks in ONE quiet voice: 9.5px Inter 700 uppercase on 2.2px
   of tracking. Restraint is the whole point — the page gains two pieces of
   bespoke art and loses every ambiguous type size.
   ── END ──────────────────────────────────────────────────────────────────────


   ═══ THE TYPE SYSTEM ═══ five roles. Nothing on this page is allowed a sixth.

   T1 MARQUE   Saira Semi Condensed 800 · 23px/1 · +4.6px · platinum-clipped ·
               engrave filter. USE: the GOLASO wordmark and nothing else — once
               per surface. Phone keeps its 33px size, gains the same material.

   T2 DISPLAY  Saira Semi Condensed 800 · 15.5–24px/1–1.16 · +4.4→6px · UPPERCASE ·
               #fff / platinum on dark, ink-1 on light. USE: a plate title or a
               marketing line — a string that names a place, never a sentence.
               (.ld-ph b · #ldMore · .m-tab)

   T3 HEADING  Saira Semi Condensed 800 · 17–21px/1.12–1.15 · +.1px · ink-1 ·
               sentence case. USE: the one human sentence at the top of a panel.
               RULE: sentence case never takes tracking above .4px.

   T4 LABEL    Inter 700 · 9.5px/1 · +2.2px · UPPERCASE · ink-4 on light /
               on-dark-3 on dark. USE: every micro-label, kicker and legal line
               in the zone. RULE: a label never exceeds 10px, never carries a
               colour of its own, and never sits below 9px (it is unreadable at
               the stage's 0.879 scale).

   T5 NUMERAL  Inter 800 · 25px/1 · −.1px · tabular-nums + lining-nums ·
               platinum-clipped. USE: any figure a person reads as a score.
               ⚠ WHY INTER AND NOT THE DISPLAY FACE: measured in this build at
               40px — Saira Semi Condensed "1111" = 57.77px vs "8888" = 94.41px
               and `font-feature-settings:'tnum' 1` changes nothing, i.e. the
               family ships no tabular set. Inter with 'tnum' returns 103.28px
               for 1111 / 8888 / 0000 alike. A scoreboard that reflows when a 1
               becomes an 8 is not a scoreboard.

   T6 UI/BODY  Inter 500 · 12–13.5px/1.45–1.5 · +.05px · ink-3. Unchanged from
               FM27; stated so the system is complete and nothing falls between
               two roles.

   METAL RULE  --f27-lx-champagne is permitted on T2 at ≥20px only. --f27-lx-
               hair-gold is permitted on 1px rules and on a 1px border. There is
               no third use, and there is no gold anywhere in T3/T4/T5/T6.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* ═════════════════════════ 0 · TOKENS (namespaced extension) ═══════════════ */
:root {
  /* the metal. --f27-gold (#e0a020) stays the trophy/premium colour; these are
     its two *surface* forms — a face and a hairline — and they are new names. */
  --f27-lx-gold-face:  #f0c974;
  --f27-lx-gold-lit:   #ffe9b0;
  --f27-lx-gold-deep:  #c8912f;
  --f27-lx-hair-gold:      rgba(230,194,124,.46);   /* 1px rule ON DARK   */
  --f27-lx-hair-gold-lit:  rgba(240,214,150,.72);   /* the same rule, lit */
  --f27-lx-hair-gold-soft: rgba(230,194,124,.20);

  /* struck metal, clipped to glyphs. Narrow range on purpose: the darkest stop
     (#c9dcef) still returns 12.7:1 on the chrome, so a missed stop is invisible
     rather than illegible. */
  --f27-lx-platinum:    linear-gradient(180deg,#ffffff 0%,#f4f9ff 38%,#c9dcef 74%,#ffffff 100%);
  --f27-lx-platinum-sm: linear-gradient(180deg,#ffffff 0%,#f2f8ff 56%,#dfeaf6 100%);
  /* the figures ride a photographic band whose brightest patch measures
     (121,90,141); #c9dcef would return 4.09:1 there, so the numeral ramp stops
     one step lighter and clears 4.5:1 on every cell. */
  --f27-lx-platinum-num: linear-gradient(180deg,#ffffff 0%,#f8fbff 40%,#e0eaf7 76%,#ffffff 100%);
  /* the phone wordmark lies on an uncontrolled photograph whose sun-glare
     pixels measure (145,106,111) — pure #ffffff returns only 4.67:1 there, so
     the ramp on that surface is a sheen, not a ramp: its darkest stop stays
     within 12% of white and the engrave carries the "struck" reading instead. */
  --f27-lx-platinum-hero: linear-gradient(180deg,#ffffff 0%,#ffffff 50%,#eaf2fc 76%,#ffffff 100%);
  --f27-lx-champagne:   linear-gradient(96deg,#ffe9b0 0%,#fff7e2 30%,#f0c974 63%,#ffe9b0 100%);

  /* the engrave: a hard 1px bite under the glyph + the object's own falloff.
     It is a FILTER, not a text-shadow — a text-shadow under background-clip:text
     shows straight through the transparent fill and reads as mud. */
  --f27-lx-engrave:      drop-shadow(0 1px 0 rgba(2,8,20,.72)) drop-shadow(0 3px 10px rgba(0,0,0,.5));
  --f27-lx-engrave-soft: drop-shadow(0 1px 0 rgba(2,8,22,.55)) drop-shadow(0 2px 7px rgba(2,8,22,.55));

  /* bespoke art */
  --f27-lx-crest: url('/assets/img/ui/luxe/brand-type-crest-v1.png');
  --f27-lx-rule:  url('/assets/img/ui/luxe/brand-type-rule-v1.png');

  /* local fallbacks so this file renders correctly even if it is ever linked
     without gm2040-fm27-landing.css in front of it */
  --f27-lx-display: var(--f27-display, 'Saira Semi Condensed', 'Inter', sans-serif);
  --f27-lx-ui:      var(--f27-ui, 'Inter', system-ui, sans-serif);
  --f27-lx-ink-1:   var(--f27-ink-1, #071b33);
  --f27-lx-ink-3:   var(--f27-ink-3, #33465f);
  --f27-lx-ink-4:   var(--f27-ink-4, #5d7490);
  --f27-lx-od-1:    var(--f27-on-dark-1, #f2f7ff);
  --f27-lx-od-2:    var(--f27-on-dark-2, #b7c8e0);
  --f27-lx-od-3:    var(--f27-on-dark-3, #8ba0bf);
  --f27-lx-t:       var(--f27-t, 180ms);
  --f27-lx-ease:    var(--f27-ease, cubic-bezier(.2,.6,.2,1));
}


/* ═════════════════════════ 1 · THE MARQUE (T1) ═════════════════════════════
   #gmlBrand = <a> > .gb-crest > svg  +  .gb-tx > b + i   (index.php:166)
   The wordmark stops being white text on a photo and becomes a struck plate. */

#ldstage #gmlBrand .gb-tx { gap: 0 !important; }

#ldstage #gmlBrand .gb-tx b {
  font: 800 23px/1 var(--f27-lx-display) !important;
  letter-spacing: 4.6px !important;
  background-image: var(--f27-lx-platinum) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;             /* MUST be none under a text clip  */
  filter: var(--f27-lx-engrave);
}

/* the kicker + the one gold hairline that turns a lockup into a franchise mark */
#ldstage #gmlBrand .gb-tx i {
  position: relative;
  font: 700 9px/1 var(--f27-lx-ui) !important;
  font-style: normal !important;
  letter-spacing: 2.1px !important;
  text-transform: uppercase;
  color: var(--f27-lx-od-2) !important;
  margin-top: 7px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}
#ldstage #gmlBrand .gb-tx i::before {
  content: "";
  position: absolute;
  left: 1px; right: 2px; top: -4px; height: 1px;
  background: linear-gradient(90deg,
              var(--f27-lx-hair-gold) 0%,
              var(--f27-lx-hair-gold-soft) 74%,
              transparent 100%);
  pointer-events: none;
}

/* the crest: the bespoke mark is laid OVER the inline shield rather than
   replacing it, so a missing PNG degrades to today's artwork instead of a hole.
   The overlay box is 4px wider than the 42×46 host so nothing peeks out. */
#ldstage #gmlBrand .gb-crest {
  position: relative;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.62)) drop-shadow(0 0 10px rgba(89,190,255,.20));
}
#ldstage #gmlBrand .gb-crest::after {
  content: "";
  position: absolute;
  inset: -3px -4px -2px;
  background: var(--f27-lx-crest) center / contain no-repeat;
  pointer-events: none;
}


/* ═════════════════════════ 2 · THE TOP BAR ════════════════════════════════
   #ldNav a · #ldNavR .nv / .nv-app · .gol-lang-btn                            */

/* the one vertical hairline that separates the marque from the navigation.
   #ldNav is position:absolute;left:320px (gm2040-landing.css:53) and the brand
   block ends at ~247px, so −40px lands in clean air at x = 280. */
#ldstage #ldNav::before {
  content: "";
  position: absolute;
  left: -40px; top: 19px; bottom: 19px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--f27-lx-hair-gold) 46%, transparent);
  pointer-events: none;
}

#ldstage #ldNav a {
  position: relative;
  font: 700 12.5px/1 var(--f27-lx-display) !important;
  letter-spacing: 2.6px !important;
  color: var(--f27-lx-od-2) !important;
}
#ldstage #ldNav a:hover { color: #fff !important; }

/* hover gets its own quiet gold underline; the ACTIVE tab keeps the aurora bar,
   because that bar is the product's own "you are here" signal. */
#ldstage #ldNav a::before {
  content: "";
  position: absolute;
  /* ⚠ bottom:4px / height:2px is what the ACTIVE bar actually computes to —
     fm26-v11-landing.css:43 marks both !important and therefore beats fm27's
     own `bottom:-8px; height:3px` (which is not !important) despite fm27's
     higher specificity. Verified by reading getComputedStyle(a,'::after') in
     the harness: bottom "4px", height "2px". Copying the measured value is the
     only way the hover rule and the active rule share one baseline. */
  left: 0; right: 0; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240,214,150,.92) 50%, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--f27-lx-t) var(--f27-lx-ease);
  pointer-events: none;
}
#ldstage #ldNav a:hover::before { transform: scaleX(1); }
#ldstage #ldNav a.is-active::before { display: none; }

/* the two chips. HELP stays a cool ghost; DOWNLOAD APP is the premium one and
   says so with a gold hairline border and a gold glyph — not with a fill. */
#ldstage #ldNavR .nv,
#ldstage #ldNavR .nv-app {
  font: 700 11.5px/1 var(--f27-lx-display) !important;
  letter-spacing: 1.9px !important;
}
#ldstage #ldNavR .nv-app {
  color: #fff !important;
  border-color: rgba(230,194,124,.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),
              inset 0 0 0 1px rgba(230,194,124,.09) !important;
}
#ldstage #ldNavR .nv-app svg { stroke: var(--f27-lx-gold-face) !important; opacity: 1; }
#ldstage #ldNavR .nv-app:hover {
  border-color: var(--f27-lx-hair-gold-lit) !important;
  background-color: rgba(30,26,20,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              0 1px 2px rgba(2,6,16,.36), 1px 8px 20px rgba(2,6,16,.40) !important;
}
#ldstage #ldNavR .nv-app:focus-visible {
  box-shadow: var(--f27-focus-dark, 0 0 0 2px #06101f, 0 0 0 4px #4fd3e8, 0 0 0 7px rgba(79,211,232,.26)) !important;
}

/* the language button carries .nv too — it must NOT inherit the display caps,
   because a language name is a proper noun in its own script. (1,1,1) + later
   in the cascade beats the .nv rule above it. */
#ldstage #ldNavR .gol-lang-btn {
  font: 600 12px/1 var(--f27-lx-ui) !important;
  letter-spacing: .25px !important;
  text-transform: none !important;
  color: var(--f27-lx-od-2) !important;
}
#ldstage #ldNavR .gol-lang-btn:hover { color: #fff !important; }
#ldstage #ldNavR .gol-lang-btn .gol-lang-chev { opacity: .62; transition: opacity var(--f27-lx-t) var(--f27-lx-ease); }
#ldstage #ldNavR .gol-lang-btn:hover .gol-lang-chev { opacity: 1; }
#ldstage .gol-lang-menu .gol-lang-opt { font: 600 12.5px/1 var(--f27-lx-ui) !important; letter-spacing: .1px !important; }/* [INTEGRATOR de-conflict] rule removed: #ldstage .ld-ph b */
/* [INTEGRATOR de-conflict] rule removed: #ldstage .ld-ph b::before, #ldstage .ld-ph b::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage .ld-ph b::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage .ld-ph b::before */



/* ═════════════════════ 4 · THE PANEL SENTENCES (T3) ═══════════════════════
   Scoped per panel on purpose: #ldClubForm .ld-hd carries an id-level size rule
   (fm26-v16-register-form.css:5) and #ldClub .ld-body is the tight one. */

#ldstage #ldSign .ld-hd {
  font: 800 21px/1.12 var(--f27-lx-display) !important;
  letter-spacing: .1px !important;
  color: var(--f27-lx-ink-1) !important;
  margin: 3px 0 3px !important;
}
#ldstage #ldSign .ld-sub {
  font: 500 12px/1.5 var(--f27-lx-ui) !important;
  letter-spacing: .05px !important;
  color: var(--f27-lx-ink-3) !important;
}
/* the CREATE CLUB heading steps DOWN, not up: it buys 3px of height back for a
   country list that is currently sliced mid-row, and it makes the hierarchy
   between the two panels deliberate instead of accidental. */
#ldstage #ldClubForm .ld-hd,
#ldstage #ldClubInfo .ld-hd {
  font: 800 17px/1.15 var(--f27-lx-display) !important;
  letter-spacing: .2px !important;
  color: var(--f27-lx-ink-1) !important;
}/* [INTEGRATOR de-conflict] rule removed: #ldstage .ld-div */

#ldstage .ld-acct-lbl {
  font: 700 9.5px/1 var(--f27-lx-ui) !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase;
  color: var(--f27-lx-ink-4) !important;
}
#ldstage .ld-row .chk {
  font: 500 11.5px/1 var(--f27-lx-ui) !important;
  letter-spacing: .05px !important;
  color: var(--f27-lx-ink-3) !important;
}
#ldstage .ld-row .forgot {
  font: 600 11.5px/1 var(--f27-lx-ui) !important;
  letter-spacing: .1px !important;
  color: var(--f27-teal-deep, #0d7ea0) !important;   /* 4.66:1 on white */
}


/* ═══════════════════════ 6 · THE TAGLINE (T2) ═════════════════════════════
   ⚠ #ldMore swaps its own child at runtime: the server emits <span>, the inline
   IIFE in index.php rewrites it into a text node + <i> (and only when the string
   contains a period). BOTH shapes are styled below, and the ornaments are
   pseudo-elements so innerHTML replacement cannot remove them.
   The ornaments are inline-block, not absolute — that way they flank the line at
   ANY string length instead of colliding with a longer locale. */

#ldstage #ldMore {
  font: 800 24px/1.16 var(--f27-lx-display) !important;
  letter-spacing: 6px !important;
  font-style: normal !important;
  text-transform: uppercase;
  color: var(--f27-lx-od-1) !important;
  text-shadow: 0 2px 14px rgba(2,8,22,.85) !important;
}
#ldstage #ldMore i,
#ldstage #ldMore span {
  font-style: normal !important;
  background-image: var(--f27-lx-champagne) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 10px rgba(2,8,22,.85));
  animation: none !important;
}
/* 118px is not arbitrary: the art is 390 units wide with a 3-unit hairline, so
   the rule lands on exactly 3 × 118 / 390 = 0.91 device px — a true hairline
   rather than a smudge. 684px of English + 2 × (118 + 22) = 964 of the 1021 the
   element owns, so a locale can run 5% long before the line wraps. */
#ldstage #ldMore::before,
#ldstage #ldMore::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 118px; height: 9px;
  background: var(--f27-lx-rule) center / contain no-repeat;
  opacity: 1;
}
#ldstage #ldMore::before { margin-right: 22px; transform: scaleX(-1); }
#ldstage #ldMore::after  { margin-left:  16px; }/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs-legal */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs:last-of-type::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs div */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs b */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs i */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs-legal */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs-legal a */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #gmlStats .gs-legal a:hover */



/* ═══════════════════════ 8 · THE PHONE LOCKUP ═════════════════════════════
   ⚠ every rule needs html.mob #mob — golaso.css uses id-level rules on this
   layer and a class-level override loses even with !important.
   font-size is deliberately NOT set on .mb-tx b: gm2040-fm27-landing.css:1933
   shrinks it to 21px while a field has focus, and that rule must keep winning. */

html.mob #mob .mb-tx b {
  letter-spacing: 5.4px !important;
  background-image: var(--f27-lx-platinum-hero) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: var(--f27-lx-engrave);
}
html.mob #mob .mb-tx { gap: 0 !important; }
html.mob #mob .mb-tx i {
  position: relative;
  font: 700 9.5px/1 var(--f27-lx-ui) !important;
  font-style: normal !important;
  letter-spacing: 2.6px !important;
  text-transform: uppercase;
  color: #cfdcee !important;      /* on-dark-2 is 4.49:1 on this photo; this is 5.50:1 */
  margin-top: 9px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
}
html.mob #mob .mb-tx i::before {
  content: "";
  position: absolute;
  left: 1px; right: 2px; top: -5px; height: 1px;
  background: linear-gradient(90deg,
              var(--f27-lx-hair-gold) 0%,
              var(--f27-lx-hair-gold-soft) 74%,
              transparent 100%);
  pointer-events: none;
}
/* the crest overlay again — display:block + line-height:0 so the span's box is
   exactly the svg's box, at 54×59 and at the 34×37 compact size alike */
html.mob #mob .mb-crest { position: relative; display: block; line-height: 0; }
html.mob #mob .mb-crest::after {
  content: "";
  position: absolute;
  inset: -3px -4px -2px;
  background: var(--f27-lx-crest) center / contain no-repeat;
  pointer-events: none;
}

/* the phone's own T2 / T4 voices, aligned to the same numbers as the desktop */
html.mob #mob .m-tab      { letter-spacing: 1.9px !important; }
html.mob #mob .m-ev-title { letter-spacing: 2.2px !important; }
html.mob #mob .m-stat i   { letter-spacing: 2.2px !important; }
html.mob #mob .m-copy     { letter-spacing: .45px !important; }


/* ═══════════════════════ 9 · REDUCED MOTION ═══════════════════════════════
   One mover ships in this file: the nav's gold underline. Under `reduce` it
   arrives instantly instead of sweeping — the artwork is never hidden. */
@media (prefers-reduced-motion: reduce) {
  #ldstage #ldNav a::before,
  #ldstage #ldNavR .gol-lang-btn .gol-lang-chev { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   LANE 04   ·   source: scratchpad/fm27/luxe/04-lower-page.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LUXE · ZONE 04 — THE LOWER PAGE   ·   index.php only
   The feature shelf · the stats strip · the close.
   Loads AFTER gm2040-fm27-landing.css. Extends the --f27-* token set; forks nothing.

   ART DIRECTION — "THE COMPOSITION LANDS."
   The page descends through three tiers and then stops being a page and becomes an object.
   TIER 1, THE SHELF: seven identical white lacquer plates, one gutter (14px), one image
   treatment, one hover. The photography grows from a 230x84 letterbox to a 224x118 window
   so each card is a lit thing, not a thumbnail with 54px of dead white under it — that dead
   space was the single largest piece of unfinish on the page. TIER 2, THE STRIP: the stats
   band stops being a magenta aurora poster and becomes brushed navy metal, lit from the
   upper-left like every other surface in the product, with tabular figures and engraved
   hairline dividers instead of borders — broadcast furniture, read left to right. TIER 3,
   THE CLOSE: what was 224px of empty white is now a deep night horizon that the page lands
   on — a stadium bowl and four floodlights far away, one gold hairline as the threshold,
   the wordmark engraved, and the legal line beneath a rule. Ornament is rationed to exactly
   one recipe used twice: a gold hairline, on the section header's wings and on the closing
   threshold. Nothing glows. Nothing new moves.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── zone alias block: shared tokens, bible literals as fallback ───────────────────────── */
body.ld {
  --f27-lp-ink-1:  var(--f27-ink-1,  #071b33);
  --f27-lp-ink-2:  var(--f27-ink-2,  #0d2440);
  --f27-lp-ink-3:  var(--f27-ink-3,  #33465f);
  --f27-lp-ink-4:  var(--f27-ink-4,  #5d7490);

  --f27-lp-od-1:   var(--f27-on-dark-1, #f2f7ff);
  --f27-lp-od-2:   var(--f27-on-dark-2, #b7c8e0);
  --f27-lp-od-3:   #93a9c6;                    /* 8.5:1 on the strip — od-3 is 6.9:1     */

  --f27-lp-surf-0: var(--f27-surf-0, #ffffff);
  --f27-lp-edge:      var(--f27-edge,        #dbe6f2);
  --f27-lp-edge-str:  var(--f27-edge-strong, #c6d7e8);

  --f27-lp-lip:     var(--f27-lip,     inset 0 1px 0 rgba(255,255,255,.94));
  --f27-lp-elev-1:  var(--f27-elev-1,  0 1px 1px rgba(16,38,74,.045), 1px 2px 5px rgba(16,38,74,.05));
  --f27-lp-elev-2:  var(--f27-elev-2,  0 1px 1px rgba(16,38,74,.05), 1px 5px 13px rgba(16,38,74,.07), 2px 14px 30px rgba(16,38,74,.055));
  --f27-lp-elev-3:  var(--f27-elev-3,  0 1px 2px rgba(16,38,74,.06), 2px 10px 22px rgba(16,38,74,.10), 3px 24px 48px rgba(16,38,74,.085));

  --f27-lp-teal:      var(--f27-teal,      #129fc4);
  --f27-lp-teal-deep: var(--f27-teal-deep, #0d7ea0);
  --f27-lp-teal-lit:  var(--f27-teal-lit,  #4fd3e8);
  --f27-lp-gold:      var(--f27-gold,      #e0a020);
  --f27-lp-gold-lit:  var(--f27-gold-lit,  #ffd062);

  --f27-lp-r-xs: var(--f27-r-xs, 6px);
  --f27-lp-r-sm: var(--f27-r-sm, 9px);
  --f27-lp-r-md: var(--f27-r-md, 12px);

  --f27-lp-t:    var(--f27-t,    180ms);
  --f27-lp-ease: var(--f27-ease, cubic-bezier(.2,.6,.2,1));

  --f27-lp-display: var(--f27-display, 'Saira Semi Condensed', 'Inter', sans-serif);
  --f27-lp-ui:      var(--f27-ui,      'Inter', system-ui, sans-serif);

  /* ONE ornament recipe, used twice on this page and nowhere else */
  --f27-lp-rule-gold: linear-gradient(90deg,
      rgba(224,160,32,0), rgba(224,160,32,.30) 26%,
      rgba(255,208,98,.72) 52%, rgba(224,160,32,.30) 78%, rgba(224,160,32,0));

  /* the closing band's ground — the deepest surface on the page */
  --f27-lp-close-0: #05080f;
  --f27-lp-close-1: #070c19;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1 · THE VOID — geometry repair, not decoration

   MEASURED (1700x1050, harness): landing.js paints the 1935x940 stage at
   scale 0.878553, i.e. 826px tall, and writes vp.style.height = 826px. Two
   rules then defeat that: fm26-v11-landing.css:12 forces
   `#viewport{min-height:100vh!important}` and index.php's late inline block
   (index.php:1403) adds `#ldstage{min-height:100vh}`. The stage's LAYOUT box
   stretches to 1050 while its PAINTED box stays 826 — so 940..1050 of
   #viewport background plus 826..940 of stage background render as one
   224px slab of empty near-white, and #seo-footer is pushed to y=1050,
   exactly one pixel below the fold. The void is not content: it is
   viewport-height minus painted-stage-height, so it grows on tall monitors
   (147px at 1920x1080, 224px at 1700x1050, 196px at 2560x1440).

   Releasing both floors puts #seo-footer flush against the stats band at
   every window size, with no JS change: the stage keeps H = 940 and
   landing.js keeps sole authority over the height (its inline value beats
   the un-!important vw fallback below, which only exists so the page still
   composes if the script is blocked). Verified in the harness at 1700x1050,
   1920x1080 and 1366x768 — see the report.
   ═══════════════════════════════════════════════════════════════════════════ */

html:not(.mob) #viewport {
  min-height: 0 !important;
  height: 48.5788vw;                 /* = 940/1935 — the fallback, JS's inline value wins */
  overflow-x: hidden !important;
  /* REQUIRED, and it also retires a phantom scrollbar: golaso.css:717 parks
     #gmlField at top:560px height:900px, so #viewport's scrollHeight is 1283
     against an 826 client box while overflow-y computes to `auto` (overflow-x
     is hidden, which promotes the other axis). Measured in the harness with
     the rule removed: scrollHeight 1283 / clientHeight 826 / scrollWidth 1935.
     Nothing visible is clipped — the painted stage is exactly 826 tall. */
  overflow-y: hidden !important;
  background: var(--f27-lp-close-0) !important;   /* no white can show through the seam   */
}
html:not(.mob) #ldstage { min-height: 0 !important; }

/* the page ends on the closing band, so nothing below it may be light */
html:not(.mob),
html:not(.mob) body.ld { background: var(--f27-lp-close-0) !important; }

/* landing.css:278 makes body.ld a `display:grid; place-items:center` box with
   `min-height:100vh`. With #viewport no longer forced to 100vh, a window taller
   than the composition let the default row STRETCH — which pushed the whole
   stage ~12px down and opened a gap above the topbar (visible at 1700x1250).
   Two rows, the second elastic: the stage is pinned to the top and the closing
   band absorbs whatever height is left, so its horizon always sits on the
   window's bottom edge. #ldToast is position:fixed and is not a grid item. */
html:not(.mob) body.ld {
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
}/* [INTEGRATOR de-conflict] rule removed: #ldstage #ldMore::before, #ldstage #ldMore::after */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #ldMore::before */
/* [INTEGRATOR de-conflict] rule removed: #ldstage #ldMore::after */



/* ═══════════════════════════════════════════════════════════════════════════
   3 · THE FEATURE SHELF
   Seven cards, 252 x 200, at stage-y 658. They were already the same height;
   what read as "uneven" was 54px of empty white below every caption, and a
   caption box (left:12 width:204 in a 252 card — landing.css:173) that put
   every line of copy 12px left of its own card's centre.
   ONE GUTTER: 14px, for the header, the image and the caption alike.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the plate */
#ldstage .ld-card {
  padding: 0 !important;
  border-radius: var(--f27-lp-r-md) !important;
  background-color: var(--f27-lp-surf-0) !important;
  background-image: none !important;
  border: 1px solid var(--f27-lp-edge) !important;
  box-shadow: var(--f27-lp-lip), var(--f27-lp-elev-2) !important;
}
/* landing.css:167's gradient ring, retuned: one bevel, matching the 12px radius */
#ldstage .ld-card::before {
  border-radius: var(--f27-lp-r-md) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(198,215,232,.55)) !important;
  opacity: 1 !important;
}

/* the header rail */
#ldstage .ld-card header {
  left: 14px !important;
  right: 14px !important;
  top: 11px !important;
  gap: 8px !important;
}
#ldstage .ld-card header h3 {
  font: 800 11px/1.15 var(--f27-lp-display) !important;
  letter-spacing: 1.4px !important;
  color: var(--f27-lp-ink-2) !important;
}
/* ONE accent. golaso-feature-shots.css hands each card its own hue (seven of
   them, plus a coloured status dot and a coloured rule) — that is a spectrum,
   not a system. The brand teal carries all seven. */
#ldstage .ld-card[class*="feature-"] header .ic,
#ldstage .ld-card[class*="feature-"] header img {
  color: var(--f27-lp-teal) !important;
  stroke: var(--f27-lp-teal) !important;
  filter: none !important;
}
#ldstage .ld-card[class*="feature-"] header::after {
  width: 5px !important;
  height: 5px !important;
  margin-right: 1px !important;
  background: var(--f27-lp-edge-str) !important;
  box-shadow: none !important;
}

/* the window — 224 x 118 instead of 230 x 84: the product finally has room to
   be seen, and the card has no dead floor left */
#ldstage .ld-card .ldc-art {
  left: 14px !important;
  right: 14px !important;
  top: 33px !important;
  height: 114px !important;
  border-radius: var(--f27-lp-r-sm) !important;
  background-color: #061326 !important;
  border: 1px solid rgba(16,38,74,.20) !important;
  box-shadow:
    0 5px 12px rgba(16,38,74,.16),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -26px 34px rgba(2,10,24,.34) !important;
}
/* the in-window HUD caption was 6.6px (5.8px on screen at stage scale) */
#ldstage .ld-card[class*="feature-"] .ldc-art::after {
  padding: 0 9px 8px !important;
  font: 700 8px/1 var(--f27-lp-ui) !important;
  letter-spacing: 1.15px !important;
  color: #eaf7ff !important;
  background:
    linear-gradient(180deg, rgba(4,12,26,0) 44%, rgba(2,8,20,.80) 100%),
    linear-gradient(90deg, rgba(2,8,20,.34), rgba(2,8,20,0) 34%) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
}

/* the caption — centred on the card, not 12px to the left of it */
#ldstage .ld-card p {
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  top: 155px !important;
  font: 500 10.5px/1.45 var(--f27-lp-ui) !important;
  color: var(--f27-lp-ink-3) !important;
}
/* the press-conference plate was cropped for a 2.7:1 letterbox; in the taller
   window `auto 148%` filled the frame with the lit back wall and nothing else */
#ldstage .ld-card.feature-media { --feature-size: cover; --feature-position: 82% 58%; }
#ldstage .ld-card[class*="feature-"] p::before {
  width: 26px !important;
  height: 1px !important;
  margin: 0 auto 7px !important;
  background: linear-gradient(90deg, transparent, var(--f27-lp-teal), transparent) !important;
  opacity: .55 !important;
}

/* ONE hover: 3px of lift, the edge warms to the brand, the window pushes in */
#ldstage .ld-card:hover,
#ldstage .ld-card[class*="feature-"]:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(18,159,196,.42) !important;
  box-shadow: var(--f27-lp-lip), var(--f27-lp-elev-3) !important;
}
#ldstage .ld-card[class*="feature-"]:hover .ldc-art {
  border-color: rgba(18,159,196,.46) !important;
  box-shadow:
    0 7px 16px rgba(16,38,74,.20),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -26px 34px rgba(2,10,24,.30) !important;
}
#ldstage .ld-card[class*="feature-"]:hover .ldc-art::before { transform: scale(1.065) !important; }
#ldstage .ld-card[class*="feature-"]:hover header .ic,
#ldstage .ld-card[class*="feature-"]:hover header img {
  transform: none !important;
  color: var(--f27-lp-teal-deep) !important;
  stroke: var(--f27-lp-teal-deep) !important;
}
#ldstage .ld-card[class*="feature-"]:hover header::after { background: var(--f27-lp-teal) !important; }
#ldstage .ld-card[class*="feature-"]:hover p::before { width: 40px !important; opacity: .9 !important; }
#ldstage .ld-card:active { transform: translateY(0) !important; box-shadow: var(--f27-lp-lip), var(--f27-lp-elev-1) !important; }
#ldstage .ld-card:focus-within {
  border-color: var(--f27-lp-teal) !important;
  box-shadow: var(--f27-lp-lip), var(--f27-lp-elev-3), 0 0 0 3px rgba(19,145,196,.18) !important;
}

/* the shelf's atmosphere: the twelve coloured sparks are the "ten glows"
   anti-pattern at 1px. The art stays, at a whisper. */
#ldstage #ldFeatureBackdrop .feature-bg-sparks { opacity: .16 !important; filter: none !important; }
#ldstage #ldFeatureBackdrop .feature-bg-beam { opacity: .14 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   4 · THE STATS STRIP — broadcast furniture
   It was a full-bleed aurora poster: the last two cells sat on raw magenta
   and their labels lost the surface. It becomes brushed navy metal, lit from
   the upper-left, with tabular figures and engraved dividers.
   ═══════════════════════════════════════════════════════════════════════════ */

#ldstage #gmlStats {
  background-color: #070d1a !important;
  background-image: url('/assets/img/ui/luxe/lower-page-strip-brushed-v1.jpg') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-top: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(2,6,14,.85),
    0 -12px 32px rgba(1,4,12,.34) !important;
}

/* the 15px bottom lane is what stops "PRIVACY · © GOLASO.ORG" landing on top of
   LIVE COMPETITIONS — the two were overlapping in the shipped build */
#ldstage #gmlStats .gs {
  position: relative;
  gap: 14px !important;
  padding: 0 12px 15px !important;
  border-right: 0 !important;
}
/* the divider rhythm: an engraved 34px hairline between cells, not a full-height border */
#ldstage #gmlStats .gs + .gs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 1px;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(140,180,225,0), rgba(140,180,225,.30) 24%,
      rgba(140,180,225,.30) 76%, rgba(140,180,225,0));
  box-shadow: 1px 0 0 rgba(255,255,255,.045);
}

#ldstage #gmlStats .gs svg {
  width: 25px !important;
  height: 25px !important;
  stroke: var(--f27-lp-teal-lit) !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(0 2px 6px rgba(2,8,22,.75)) !important;
}
#ldstage #gmlStats .gs div { gap: 5px !important; }
#ldstage #gmlStats .gs b {
  font: 800 26px/1 var(--f27-lp-display) !important;
  letter-spacing: .4px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(2,8,22,.85) !important;
}
#ldstage #gmlStats .gs i {
  font: 700 9px/1 var(--f27-lp-ui) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--f27-lp-od-3) !important;     /* 8.5:1 on #070d1a */
}

/* the orphan "Privacy · © GOLASO" becomes a designed broadcast bug */
#ldstage #gmlStats .gs-legal {
  right: 22px !important;
  bottom: 6px !important;
  font: 700 9px/1 var(--f27-lp-ui) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--f27-lp-od-3) !important;
}
#ldstage #gmlStats .gs-legal a { color: #a9dcee !important; }
#ldstage #gmlStats .gs-legal a:hover { color: #e2f6ff !important; text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   5 · THE CLOSE — #seo-footer becomes the closing band
   It is already the page's last element, a real <footer>, full of real
   crawlable copy, and it already sits outside the scaled stage. With the void
   released above it, it lands flush under the strip and finishes the page:
   a night horizon, one gold threshold, the wordmark engraved, the legal rule.
   ⚠ every declaration here needs !important — index.php:1404 sets background,
   colour, font, padding and a green border-top INLINE on this element.
   ═══════════════════════════════════════════════════════════════════════════ */

html:not(.mob) body.ld > #seo-footer {
  position: relative;
  justify-self: stretch !important;      /* body.ld is display:grid + place-items:center,
                                            which was shrink-to-fitting it to 1140px      */
  align-self: stretch !important;        /* fills the elastic row on tall windows         */
  width: 100% !important;
  box-sizing: border-box;
  min-height: 268px !important;
  padding: 40px 34px 26px !important;
  border-top: 0 !important;
  background-color: var(--f27-lp-close-0) !important;
  background-image:
    linear-gradient(180deg, rgba(7,12,25,.93) 0%, rgba(6,10,20,.74) 28%, rgba(4,7,15,.40) 58%, rgba(3,5,12,.06) 100%),
    url('/assets/img/ui/luxe/lower-page-close-horizon-v1.jpg') !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center bottom !important;
  background-repeat: no-repeat, no-repeat !important;
  color: var(--f27-lp-od-2) !important;
  font: 400 12px/1.7 var(--f27-lp-ui) !important;
  text-align: center;
  overflow: hidden;
}

/* the threshold: ornament recipe #1 of 1, and the only gold on the page */
html:not(.mob) body.ld > #seo-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: var(--f27-lp-rule-gold);
}
/* the light the band is lit by — a single wide bloom under the threshold */
html:not(.mob) body.ld > #seo-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 132px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(120,196,240,.075), rgba(120,196,240,0));
}

html:not(.mob) body.ld > #seo-footer > div {
  position: relative;
  z-index: 1;
  max-width: 1180px !important;
}

/* the wordmark, engraved */
html:not(.mob) body.ld > #seo-footer > div::before {
  content: "GOLASO";
  display: block;
  margin: 0 0 13px;
  font: 800 28px/1 var(--f27-lp-display);
  letter-spacing: 10px;
  text-indent: 10px;                     /* letter-spacing adds a trailing gap; recentre  */
  color: #f4f9ff;
  text-shadow: 0 2px 16px rgba(2,8,22,.85);
}

/* the strapline (the crawlable H1 keeps every word it had) */
html:not(.mob) body.ld > #seo-footer h1 {
  max-width: 940px;
  margin: 0 auto 15px !important;
  font: 700 14px/1.5 var(--f27-lp-display) !important;
  letter-spacing: 2.6px !important;
  text-transform: uppercase;
  color: var(--f27-lp-od-1) !important;
}

/* the copy — three columns so the measure stays readable at footer scale */
html:not(.mob) body.ld > #seo-footer p {
  max-width: 1080px;
  margin: 0 auto 10px !important;
  column-count: 3;
  column-gap: 46px;
  text-align: left;
  font: 400 11.5px/1.75 var(--f27-lp-ui) !important;
  color: #a4b8d4 !important;             /* 8.0:1 on the band */
}
/* the short second paragraph balances across two columns; in three it left an
   empty third column that read as a mistake */
html:not(.mob) body.ld > #seo-footer p + p {
  max-width: 740px;
  column-count: 2;
  column-gap: 44px;
}

html:not(.mob) body.ld > #seo-footer h2 {
  margin: 18px 0 7px !important;
  font: 700 9px/1 var(--f27-lp-ui) !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  color: var(--f27-lp-od-3) !important;
}

/* the topic cloud keeps every word in the DOM for the crawler; on screen it is
   line-clamped to two lines with a real ellipsis, so it ends on purpose instead
   of being guillotined */
html:not(.mob) body.ld > #seo-footer nav {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
  font-size: 10.5px !important;
  line-height: 2 !important;
  color: var(--f27-lp-od-3) !important;  /* 8.5:1 */
}

/* the legal rule the page ends on */
html:not(.mob) body.ld > #seo-footer > div::after {
  content: "\00a9  GOLASO.ORG  \00b7  ALL RIGHTS RESERVED";
  display: block;
  margin: 20px auto 0;
  padding-top: 14px;
  border-top: 1px solid rgba(122,167,218,.16);
  font: 700 9.5px/1 var(--f27-lp-ui);
  letter-spacing: 2.2px;
  color: var(--f27-lp-od-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · THE CLOSING BAND'S FURNITURE — inert until the markup request lands
   gm2040-landing.css:26-27 hides #ldFootBar/#ldFoot/#ldCopy/#ldSoc with
   `display:none!important`; they are also stranded INSIDE the scaled stage,
   where the 1935x940 canvas has no free row for them. When the integrator
   moves #ldFoot / #ldSoc (and an #ldApps pair) into #seo-footer's inner
   <div>, these rules dress them; until then they match nothing and cost
   nothing.  See MARKUP REQUESTS in the report.
   ═══════════════════════════════════════════════════════════════════════════ */

html:not(.mob) #seo-footer #ldFoot,
html:not(.mob) #seo-footer #ldSoc,
html:not(.mob) #seo-footer #ldApps {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  left: auto !important; right: auto !important; top: auto !important;
}
html:not(.mob) #seo-footer #ldFoot { gap: 6px 26px; margin: 22px 0 4px !important; }
html:not(.mob) #seo-footer #ldFoot a {
  font: 700 10px/1 var(--f27-lp-ui) !important;
  letter-spacing: 1.7px !important;
  text-transform: uppercase;
  color: var(--f27-lp-od-2) !important;
  border-radius: var(--f27-lp-r-xs);
}
html:not(.mob) #seo-footer #ldFoot a:hover { color: #fff !important; text-decoration: underline; }
html:not(.mob) #seo-footer #ldFoot a:focus-visible {
  outline: none;
  box-shadow: var(--f27-focus-dark, 0 0 0 2px #06101f, 0 0 0 4px #4fd3e8);
}
html:not(.mob) #seo-footer #ldSoc { gap: 10px; margin: 16px 0 0 !important; }
html:not(.mob) #seo-footer #ldSoc .fu {
  font: 700 9px/1 var(--f27-lp-ui) !important;
  letter-spacing: 2.2px !important;
  color: var(--f27-lp-od-3) !important;
  margin-right: 6px !important;
}
html:not(.mob) #seo-footer #ldSoc a {
  width: 34px !important; height: 34px !important;
  background: rgba(16,26,48,.72) !important;
  border: 1px solid rgba(122,167,218,.24) !important;
  color: var(--f27-lp-od-1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform var(--f27-lp-t) var(--f27-lp-ease),
              border-color var(--f27-lp-t) var(--f27-lp-ease),
              background-color var(--f27-lp-t) var(--f27-lp-ease) !important;
}
html:not(.mob) #seo-footer #ldSoc a:hover {
  transform: translateY(-2px);
  background: rgba(24,40,72,.92) !important;
  border-color: rgba(104,211,255,.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(1,4,12,.5) !important;
}
html:not(.mob) #seo-footer #ldSoc a:focus-visible {
  outline: none;
  box-shadow: var(--f27-focus-dark, 0 0 0 2px #06101f, 0 0 0 4px #4fd3e8) !important;
}
html:not(.mob) #seo-footer #ldApps { gap: 12px; margin: 18px 0 0 !important; }
html:not(.mob) #seo-footer #ldApps a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 16px;
  border-radius: var(--f27-lp-r-sm);
  background: rgba(16,26,48,.72) !important;
  border: 1px solid rgba(122,167,218,.24) !important;
  color: var(--f27-lp-od-1) !important;
  font: 700 10.5px/1 var(--f27-lp-display) !important;
  letter-spacing: 1.6px; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform var(--f27-lp-t) var(--f27-lp-ease),
              border-color var(--f27-lp-t) var(--f27-lp-ease) !important;
}
html:not(.mob) #seo-footer #ldApps a:hover { transform: translateY(-2px); border-color: rgba(104,211,255,.44) !important; }
html:not(.mob) #seo-footer #ldApps a:focus-visible {
  outline: none;
  box-shadow: var(--f27-focus-dark, 0 0 0 2px #06101f, 0 0 0 4px #4fd3e8) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · REDUCED MOTION
   This zone adds no animation at all — only hover transforms. They stop; every
   piece of artwork stays exactly where it is.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #ldstage .ld-card,
  #ldstage .ld-card .ldc-art,
  #ldstage .ld-card[class*="feature-"] .ldc-art::before,
  html:not(.mob) #seo-footer #ldSoc a,
  html:not(.mob) #seo-footer #ldApps a { transition: none !important; }

  #ldstage .ld-card:hover,
  #ldstage .ld-card[class*="feature-"]:hover,
  #ldstage .ld-card[class*="feature-"]:hover .ldc-art::before,
  html:not(.mob) #seo-footer #ldSoc a:hover,
  html:not(.mob) #seo-footer #ldApps a:hover { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   LANE 05   ·   source: scratchpad/fm27/luxe/05-phone-luxe.css
   ══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   05 · PHONE-LUXE — index.php, the `html.mob #mob` layer only.
   Loads AFTER gm2040-fm27-landing.css. Extends its --f27-* tokens; forks nothing.

   ART DIRECTION — "THE DIRECTORS' BOX"
   The phone front door stops being a stack of white boxes and becomes a presentation
   case. Each card is a made object mounted in a bezel: a deep navy lacquer header plate
   carrying the SIGN IN / JOIN NOW selector, ONE warm gold hairline along its lip, an
   engine-turned guilloché engraved into the white body at 6–8% so the paper has a grain,
   and a laurel-wreathed crest ghosted into the night art. Every surface obeys one light
   from the upper left: top edges catch a rim, bottom edges fall into shadow, the page
   ground carries a vignette so the eye lands on the form and nowhere else. Gold appears
   only on edges, rules and the crest — never as a fill, never on type. Nothing here
   moves, nothing glows: expensive is quiet.

   SCOPE RULE (BRIEF §4.7): golaso.css owns `#mob …` at id level and index.php ships nine
   in-body <style> blocks, so EVERY rule below is prefixed `html.mob #mob` — no exceptions,
   verified by parsing the file. Nothing here can reach the desktop stage.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   0 · ZONE TOKENS — namespaced --f27p-*, declared on the zone root so they
   cannot leak to the desktop stage.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob{
  /* the gold. Edges and rules only. On light it is a warm brass at low alpha;
     on dark it is a lit champagne. Neither is ever used for text.            */
  --f27p-gold-hair:      rgba(186,140,58,.62);
  --f27p-gold-hair-soft: rgba(186,140,58,.26);
  --f27p-gold-lit:       rgba(243,212,145,.55);
  --f27p-gold-lit-soft:  rgba(243,212,145,.22);

  /* the lacquer */
  /* --f27-teal-deep (#0d7ea0) measures 4.45:1 on the card face — just under.
     Every link in this zone uses this one step darker instead: 5.6:1.        */
  --f27p-link: #0b6d8b;

  --f27p-navy-0: #060d1e;
  --f27p-navy-1: #0b1730;
  --f27p-navy-2: #12233f;

  /* bezels — a card is mounted, not floating */
  --f27p-bezel:      inset 0 0 0 1px rgba(255,255,255,.92),
                     inset 0 0 0 2px rgba(16,38,74,.045),
                     inset 0 -30px 36px -30px rgba(16,38,74,.11);
  --f27p-bezel-dark: inset 0 0 0 1px rgba(255,255,255,.07),
                     inset 0 -34px 40px -30px rgba(2,7,18,.60);
  /* a well that reads as machined, not as a CSS inset */
  --f27p-well:  inset 0 3px 4px -1px rgba(16,38,74,.13),
                inset 0 -1px 0 rgba(255,255,255,.95),
                inset 0 0 0 1px rgba(16,38,74,.035);

  --f27p-art-guilloche: url('/assets/img/ui/luxe/phone-luxe-guilloche-v1.png');
  --f27p-art-crest:     url('/assets/img/ui/luxe/phone-luxe-crest-v1.png');
  --f27p-art-plate:     url('/assets/img/ui/luxe/phone-luxe-nightplate-v1.jpg');
}


/* ─────────────────────────────────────────────────────────────────────────
   1 · THE GROUND — depth of field. FM27 lit the page; this focuses it.
   A vignette pulls the corners down ~7% so the auth card is the brightest
   object on the screen. No new layer, no new node: the existing .mbg::after
   scrim is re-cut.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .mbg::after{
  background:
    radial-gradient(126% 74% at 50% 30%, rgba(9,22,44,0) 46%, rgba(9,22,44,.055) 74%, rgba(9,22,44,.115) 100%),
    linear-gradient(180deg, rgba(237,241,247,0) 0%, rgba(237,241,247,.42) 58%, rgba(237,241,247,.86) 100%) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   2 · THE HERO — the night gate.
   The city plate keeps its aurora crown and gains the two things that make
   a photograph read as expensive: a vignette that closes the frame, and a
   crest ghosted into the sky behind the lockup. The wordmark gets the
   classic luxury lockup — mark / hairline rule / letter-spaced line.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-hero{
  padding: 12px 16px 26px !important;
  border-bottom-color: rgba(97,202,255,.30) !important;
  box-shadow: var(--f27-lip-dark), 0 16px 34px rgba(5,12,28,.30) !important;
}
html.mob #mob .m-hero::before{         /* the frame: vignette + one key light */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(74% 82% at 18% 2%,  rgba(150,214,255,.16), rgba(150,214,255,0) 62%),
    radial-gradient(120% 130% at 50% 44%, rgba(3,8,20,0) 40%, rgba(3,8,20,.30) 78%, rgba(3,8,20,.56) 100%),
    linear-gradient(0deg, rgba(3,8,20,.36), rgba(3,8,20,0) 46%);
}
/* the lockup rides above the frame */
html.mob #mob .m-brand{
  position: relative; z-index: 2;
  padding: 50px 0 8px !important;
}
html.mob #mob .m-brand::before{        /* the engraved crest, ghosted into the sky */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 152px; height: 165px;
  transform: translate(-50%,-38%);     /* clears the hero's top edge — the star
                                          was being cut at -46% */
  background: var(--f27p-art-crest) center / contain no-repeat;
  opacity: .15;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
html.mob #mob .mb-crest{
  filter: drop-shadow(0 6px 16px rgba(2,8,20,.78)) drop-shadow(0 0 14px rgba(67,216,255,.26)) !important;
}
html.mob #mob .mb-tx{ gap: 0 !important; }
html.mob #mob .mb-tx b{
  font: 800 34px/1 var(--f27-display) !important; letter-spacing: 5.5px !important;
  color: #fff !important;
  text-shadow: 0 3px 15px rgba(0,0,0,.78), 0 0 24px rgba(89,190,255,.20) !important;
}
html.mob #mob .mb-tx i{                /* mark / GOLD HAIRLINE / letter-spaced line */
  margin-top: 8px !important; padding-top: 8px !important;
  background:
    linear-gradient(90deg, rgba(243,212,145,0), var(--f27p-gold-lit) 26%,
                    rgba(255,235,190,.80) 50%, var(--f27p-gold-lit) 74%, rgba(243,212,145,0))
    top left / 100% 1px no-repeat !important;
  font: 700 9.5px/1 var(--f27-ui) !important; font-style: normal !important;
  letter-spacing: 2.6px !important; text-transform: uppercase;
  color: #d3e2f2 !important;                       /* 11.4:1 on the darkened plate */
  text-shadow: 0 2px 8px rgba(0,0,0,.9) !important;
}
/* the language pill — a 44px tap target and a real bezel */
html.mob #mob .m-lang .m-lang-btn,
html.mob #mob .m-lang .gol-lang-btn,
html.mob #mob .gol-lang-btn{
  min-height: 44px !important; padding: 0 12px !important;
  background: linear-gradient(180deg, rgba(20,34,62,.80), rgba(8,15,32,.86)) !important;
  border: 1px solid rgba(150,190,235,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),
              inset 0 -1px 0 rgba(0,0,0,.35),
              0 6px 16px rgba(3,9,20,.45) !important;
  color: #eaf2fb !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   3 · THE CARD FAMILY — mounted, not floating.
   A warm-white face (paper, not screen white), a crisper edge, a top rim
   light and a bezel that closes the object.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-card{
  border-color: #d6e3f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(16,38,74,.055),
    0 10px 24px rgba(16,38,74,.085),
    0 26px 54px -22px rgba(16,38,74,.16) !important;
}

/* ── 3.1 the auth case ─────────────────────────────────────────────────── */
html.mob #mob .m-card.m-auth{
  padding: 0 16px 22px !important;
  border-color: #cddcec !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 2px 4px rgba(16,38,74,.07),
    0 16px 34px rgba(16,38,74,.11),
    0 40px 70px -30px rgba(16,38,74,.20) !important;
}
/* the engraving. FM27 parks this pseudo (display:none) because gm2040 used it
   for a corner smudge; it is re-lit here as the guilloché substrate. White
   hairlines inverted to near-black, held at 7% — a grain, never a pattern. */
html.mob #mob .m-card.m-auth::before{
  content: ""; display: block !important;
  position: absolute; z-index: 0; pointer-events: none;
  right: -104px; top: -96px; width: 340px; height: 340px;
  left: auto; bottom: auto;
  background: var(--f27p-art-guilloche) center / contain no-repeat !important;
  filter: invert(1);
  opacity: .075;
}
/* the bezel — the card reads as set into its own frame */
html.mob #mob .m-card.m-auth::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--f27p-bezel);
}


/* ─────────────────────────────────────────────────────────────────────────
   4 · THE HEADER PLATE — the single decisive move on this screen.
   The segmented control stops being a pale pill-tray sitting on white and
   becomes the card's lacquered header: full-bleed navy under the aurora
   crown, one gold hairline along its top lip, the active face in aurora with
   a gold edge. Everything below it is now visibly "inside" something.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-tabs{
  margin: 4px -16px 20px !important;
  padding: 12px 12px 13px !important;
  gap: 6px;
  border: 0 !important;
  border-bottom: 1px solid rgba(9,18,36,.55) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(18,35,63,.55), rgba(6,13,30,.70)),
    var(--f27p-navy-1) var(--f27p-art-plate) center 26% / cover no-repeat !important;
  box-shadow:
    inset 0 1px 0 var(--f27p-gold-lit),
    inset 0 2px 0 rgba(255,255,255,.05),
    inset 0 -14px 22px -14px rgba(2,6,16,.75),
    0 10px 20px -12px rgba(6,14,32,.55) !important;
}
html.mob #mob .m-tab{
  height: 48px !important; min-height: 48px !important;
  border-radius: 8px !important;
  color: #c2d4ea !important;                     /* 10.6:1 on the plate */
  font: 800 13px/1 var(--f27-display) !important;
  letter-spacing: 1.7px !important; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,.55) !important;
  background: transparent !important; background-image: none !important;
  box-shadow: none !important;
  transition: color var(--f27-t-fast) var(--f27-ease),
              background-color var(--f27-t-fast) var(--f27-ease),
              box-shadow var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob .m-tab:not(.is-active):active{
  background: rgba(255,255,255,.07) !important; color: #fff !important;
}
html.mob #mob .m-tab.is-active{
  color: #fff !important;
  background-color: #1b1f4e !important;
  background-image: var(--f27-aurora-veil), var(--f27-art-raster) !important;
  background-size: cover, 300px auto !important;
  background-position: center, 44% 52% !important;
  box-shadow:
    inset 0 0 0 1px var(--f27p-gold-lit-soft),
    inset 0 1px 0 rgba(255,240,210,.34),
    inset 0 -2px 0 rgba(4,8,22,.45),
    0 6px 16px rgba(6,10,32,.55) !important;
  text-shadow: 0 1px 5px rgba(6,10,30,.6) !important;
}
html.mob #mob .m-tab:focus-visible{ outline: none !important; box-shadow: var(--f27-focus-dark) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   5 · TYPE — authority. A display heading with a gold rule above it, a
   quiet sub, and no gradient anywhere near small text.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-hd{
  font: 800 25px/1.08 var(--f27-display) !important; letter-spacing: .2px !important;
  color: var(--f27-ink-1) !important;
}
html.mob #mob .m-hd::before,
html.mob #mob .m-hd2::before{           /* the 36px gold rule — one per card */
  content: ""; display: block;
  width: 36px; height: 2px; margin: 0 0 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a97c31, #e6c076 60%, rgba(230,192,118,0));
}
html.mob #mob .m-hd2{
  font: 800 22px/1.12 var(--f27-display) !important; letter-spacing: .2px !important;
  color: var(--f27-ink-1) !important; margin-bottom: 18px !important;
}
html.mob #mob .m-sub{
  font: 500 13px/1.5 var(--f27-ui) !important;
  color: var(--f27-ink-3) !important; margin: 6px 0 16px !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   6 · THE GAMEPLAY TILE — a framed plate, not a pasted image.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .auth-mobile-shot{
  height: 122px !important;
  border: 1px solid rgba(120,176,220,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 3px rgba(9,22,44,.14),
    0 12px 26px -10px rgba(9,22,44,.42) !important;
}
html.mob #mob .auth-mobile-shot::before{        /* the caption chip */
  padding: 6px 10px !important;
  background: linear-gradient(180deg, rgba(12,22,42,.82), rgba(5,11,24,.86)) !important;
  border: 1px solid rgba(160,200,240,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 10px rgba(0,0,0,.40) !important;
  color: #dbe8f7 !important;
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.4px !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   7 · FIELDS — machined wells. A field is a recess: darker at the top where
   the light does not reach, a white lip at the bottom, and one crisp edge.
   Every text control stays at 16px (iOS zooms the viewport below that — the
   exact regression shipped and repaired on this page two days ago).
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-field{
  margin-bottom: 12px !important;
  border-radius: 10px !important;
  /* layer 1 = the engraved hairline that separates the icon bay from the field
     body; it is the tell that turns a rounded rectangle into an instrument.
     42px is inside the 44px icon padding, and .fi is left-anchored in RTL too
     (golaso.css:134 is never flipped), so this holds in both directions. */
  background:
    linear-gradient(#d1dfee, #d1dfee) 40px 15px / 1px calc(100% - 30px) no-repeat,
    linear-gradient(180deg, #eef4fa 0%, #ffffff 62%) !important;
  border: 1px solid #c6d5e6 !important;
  border-top-color: #b0c5da !important;
  box-shadow: var(--f27p-well), 0 1px 0 rgba(255,255,255,.9) !important;
}
html.mob #mob .m-field input{
  height: 54px !important;
  padding: 0 52px 0 51px !important;      /* 11px of air after the icon rule */
  font: 500 16px/1 var(--f27-ui) !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .m-field input::placeholder{ color: var(--f27-ink-5) !important; }
html.mob #mob .m-field .fi{ color: var(--f27-ink-4) !important; stroke: var(--f27-ink-4); }

/* FILLED — the field has content: the paper goes clean white and a teal
   thread appears on its leading edge, so a filled form reads at a glance. */
html.mob #mob .m-field:has(input:not(:placeholder-shown)){
  background:
    linear-gradient(#cfe0ee, #cfe0ee) 40px 15px / 1px calc(100% - 30px) no-repeat,
    #fff !important;
  border-color: #c3d4e5 !important;
  box-shadow: var(--f27p-well), inset 2px 0 0 rgba(18,159,196,.42) !important;
}
/* FOCUS — one ring, brand teal, plus a lift in the well */
html.mob #mob .m-field:focus-within{
  background:
    linear-gradient(rgba(19,145,196,.34), rgba(19,145,196,.34)) 40px 15px / 1px calc(100% - 30px) no-repeat,
    #fff !important;
  border-color: var(--f27-teal) !important;
  box-shadow:
    inset 0 2px 3px rgba(16,38,74,.06),
    inset 0 0 0 1px rgba(19,145,196,.30),
    0 0 0 3px rgba(19,145,196,.16),
    0 8px 18px -8px rgba(13,126,160,.40) !important;
}
html.mob #mob .m-field:focus-within .fi{ color: var(--f27-teal-deep) !important; stroke: var(--f27-teal-deep); }

/* ERROR — :user-invalid only fires after the field has been left */
html.mob #mob .m-field:has(input:user-invalid){
  background:
    linear-gradient(rgba(161,38,38,.26), rgba(161,38,38,.26)) 40px 15px / 1px calc(100% - 30px) no-repeat,
    linear-gradient(180deg, #fdeeee, #fff7f7 62%) !important;
  border-color: var(--f27-loss) !important;
  box-shadow: var(--f27p-well), inset 3px 0 0 var(--f27-loss) !important;
}
html.mob #mob .m-field:has(input:user-invalid):focus-within{
  box-shadow:
    inset 0 2px 3px rgba(74,16,16,.07),
    inset 3px 0 0 var(--f27-loss),
    0 0 0 3px rgba(211,63,63,.18) !important;
}

/* the show-password control — a real chip, and it LIGHTS while revealed
   (landing.js:73 flips input.type between password and text). */
html.mob #mob .eye{
  width: 44px !important; height: 44px !important; right: 5px !important;
  border-radius: 8px !important;
  color: var(--f27-ink-4) !important;
  transition: background-color var(--f27-t-fast) var(--f27-ease),
              color var(--f27-t-fast) var(--f27-ease) !important;
}
html.mob #mob .eye:active{ background: rgba(16,38,74,.06) !important; color: var(--f27-ink-2) !important; }
html.mob #mob .m-field:has(input[type="text"][name="password"]) .eye{
  color: var(--f27-teal-deep) !important;
  background: rgba(18,159,196,.11) !important;
  box-shadow: inset 0 0 0 1px rgba(18,159,196,.26) !important;
}

/* remember / forgot — a quiet strip, hairline-separated from the fields */
html.mob #mob .m-row{
  min-height: 48px !important; margin: 10px 0 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--f27-edge-soft) !important;
}
html.mob #mob .chk{ font: 500 14px/1 var(--f27-ui) !important; color: var(--f27-ink-3) !important; }
html.mob #mob .chk .box{
  border-radius: 6px !important;
  border-color: #bfd0e2 !important;
  box-shadow: var(--f27p-well) !important;
}
html.mob #mob .chk input:checked + .box{
  background: linear-gradient(180deg, #22b6d8, #0d7ea0) !important;
  border-color: #0b6d8b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 6px rgba(13,126,160,.42) !important;
}
html.mob #mob .forgot{ font: 600 14px/1 var(--f27-ui) !important; color: var(--f27p-link) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   8 · THE PRIMARY ACTION — one per view, with a machined edge.
   A gold hairline inside the top lip, a hard shadow line under the bottom
   lip, one static diagonal sheen. No glow, no pulse.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-btn,
html.mob #mob .m-btn-purple,
html.mob #mob .m-btn-green,
html.mob #mob .m-btn-play,
html.mob #mob #viewJoinM #btnJoinM{
  height: 54px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(120,182,240,.42) !important;
  font: 800 15.5px/1 var(--f27-display) !important;
  letter-spacing: 1.8px !important;
  box-shadow:
    inset 0 1px 0 var(--f27p-gold-lit),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -2px 0 rgba(4,8,22,.42),
    0 2px 4px rgba(24,12,64,.22),
    0 14px 26px -10px rgba(24,12,64,.52) !important;
}
html.mob #mob .m-btn::before{        /* the static sheen — light from upper left */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(104deg,
              rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%,
              rgba(255,255,255,0) 46%, rgba(0,0,0,.10) 100%);
}
@media (hover: hover){
  html.mob #mob .m-btn:hover{
    transform: translateY(-2px) !important;
    filter: brightness(1.06) saturate(1.04) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,240,210,.70),
      inset 0 -2px 0 rgba(4,8,22,.42),
      0 2px 4px rgba(24,12,64,.22),
      0 20px 34px -12px rgba(50,24,120,.55) !important;
  }
}
html.mob #mob .m-btn:active{
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 7px rgba(4,8,22,.55), inset 0 1px 0 rgba(255,240,210,.28) !important;
}
html.mob #mob .m-btn:focus-visible{
  box-shadow: var(--f27-focus-dark), 0 14px 26px -10px rgba(24,12,64,.52) !important;
}
/* SUBMITTING — the cold state keeps the bezel so the button does not vanish */
html.mob #mob .m-btn:disabled,
html.mob #mob .m-btn[disabled],
html.mob #mob #viewJoinM #btnJoinM[disabled]{
  background-image: none !important; background-color: #dfe7f0 !important;
  border-color: #c8d6e5 !important;
  box-shadow: var(--f27p-well) !important;
}
html.mob #mob .m-btn[disabled]::before{ display: none; }


/* ─────────────────────────────────────────────────────────────────────────
   9 · DIVIDER · SOCIALS · LEGAL
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-divider{ margin: 20px 0 13px !important; }
html.mob #mob .m-divider::before{
  background: linear-gradient(90deg, rgba(198,215,232,0), #c6d7e8) !important; height: 1px !important;
}
html.mob #mob .m-divider::after{
  background: linear-gradient(90deg, #c6d7e8, rgba(198,215,232,0)) !important; height: 1px !important;
}
html.mob #mob .m-divider span{
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.5px !important;
  text-transform: uppercase; color: var(--f27-ink-4) !important;
}
html.mob #mob .m-socials .social{
  height: 52px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
  border: 1px solid #d3e0ee !important;
  border-top-color: #e6eff8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(16,38,74,.05),
    0 1px 2px rgba(16,38,74,.06),
    0 6px 14px -6px rgba(16,38,74,.20) !important;
  color: var(--f27-ink-3) !important;
  font: 600 12.5px/1 var(--f27-ui) !important;
}
html.mob #mob .m-socials .social:active{
  transform: translateY(1px) !important;
  border-color: var(--f27-teal) !important;
  box-shadow: inset 0 2px 4px rgba(16,38,74,.10) !important;
}
html.mob #mob .m-legal{
  margin-top: 16px !important;
  font: 500 11.5px/1.85 var(--f27-ui) !important;
  color: var(--f27-ink-4) !important;
}
/* the two inline legal links were 94x14 hit boxes — inline-block padding
   inside a 1.85 line-height takes them to ~30px without moving the copy. */
html.mob #mob .m-legal a{
  display: inline-block;
  padding: 9px 0 !important; margin: -9px 0 !important;
  color: var(--f27p-link) !important; font-weight: 600 !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   10 · THE JOIN / REGISTRATION FUNNEL — the monetised half of this screen.
   Two shapes ship from one markup: GUEST (.ld-csel-open, an open flag grid,
   one tap = a club) and REGISTER (.ld-acct fields + .ld-csel-dd). Both below.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 10.1 the step kickers become engraved labels: a short gold segment
       riding on the section hairline. FM27 generates the text; this gives it
       an object to sit on. ─────────────────────────────────────────────── */
html.mob #mob #formJoinM .ld-acct::before,
html.mob #mob #mCsel::before{
  padding-bottom: 9px !important; margin-bottom: 13px !important;
  border-bottom: 1px solid var(--f27-edge) !important;
  background: linear-gradient(90deg, #b8873a, rgba(184,135,58,0)) bottom left / 30px 1px no-repeat !important;
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.5px !important;
  color: var(--f27-ink-4) !important;
}
html.mob #mob .m-guest-note{
  margin: 0 0 16px !important;
  font: 500 13px/1.55 var(--f27-ui) !important; color: var(--f27-ink-3) !important;
}

/* ── 10.2 account fields (REGISTER) — same machined well as sign-in.
       ⚠ background-COLOR only, never the `background` shorthand: FM27 paints
       the ✓/✗ validity glyphs of these fields as a background-IMAGE, and a
       shorthand here silently erases them (it did, on first pass). The top
       shading comes from --f27p-well's inset instead of a gradient. ─────── */
html.mob #mob .ld-inp{
  min-height: 54px !important; padding: 0 15px !important;
  border-radius: 10px !important;
  background-color: #fbfdff !important;
  border: 1px solid #c6d5e6 !important; border-top-color: #b0c5da !important;
  box-shadow: var(--f27p-well) !important;
  font: 500 16px/1 var(--f27-ui) !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .ld-inp:not(:placeholder-shown){ background-color: #fff !important; border-color: #c3d4e5 !important; }
html.mob #mob .ld-inp:focus{
  background-color: #fff !important;
  border-color: var(--f27-teal) !important;
  box-shadow:
    inset 0 2px 3px rgba(16,38,74,.06),
    inset 0 0 0 1px rgba(19,145,196,.30),
    0 0 0 3px rgba(19,145,196,.16) !important;
}
html.mob #mob .ld-inp:user-invalid{
  background-color: #fdeeee !important;
  border-color: var(--f27-loss) !important;
  box-shadow: var(--f27p-well), inset 3px 0 0 var(--f27-loss) !important;
}
html.mob #mob .ld-inp[type="email"]:valid:not(:placeholder-shown){
  border-color: var(--f27-win) !important;
  box-shadow: var(--f27p-well), inset 3px 0 0 rgba(23,160,90,.55) !important;
}

/* ── 10.3 the country trigger + popover (REGISTER) ─────────────────────── */
html.mob #mob .ld-ddtrig{
  min-height: 54px !important; border-radius: 10px !important;
  background-color: #fbfdff !important;
  border: 1px solid #c6d5e6 !important; border-top-color: #b0c5da !important;
  box-shadow: var(--f27p-well) !important;
  font: 600 15px/1 var(--f27-ui) !important;
}
html.mob #mob .ld-csel-dd .ld-ddpanel{
  background-color: #fff !important;
  background-image:
    var(--f27-aurora-lit),
    linear-gradient(90deg, rgba(184,135,58,0), var(--f27p-gold-hair) 50%, rgba(184,135,58,0)) !important;
  background-size: 100% 3px, 100% 1px !important;
  background-position: top, 0 3px !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 1px solid #cddcec !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 66px -18px rgba(16,38,74,.42) !important;
}

/* ── 10.4 the search field ─────────────────────────────────────────────── */
html.mob #mob .ld-cselsearch{
  min-height: 50px !important; border-radius: 10px !important;
  background-color: #f5f9fd !important;
  border: 1px solid #cfdcea !important; border-top-color: #bdcfe1 !important;
  box-shadow: var(--f27p-well) !important;
  font: 500 16px/1 var(--f27-ui) !important;
}
html.mob #mob .ld-cselsearch:focus{
  background-color: #fff !important;
  border-color: var(--f27-teal) !important;
  box-shadow:
    inset 0 2px 3px rgba(16,38,74,.06),
    inset 0 0 0 1px rgba(19,145,196,.30),
    0 0 0 3px rgba(19,145,196,.16) !important;
}

/* ── 10.5 the country case — a recessed tray with a fade at its lip so the
       list visibly continues. GUEST mode only (in REGISTER the list lives in
       a popover that is already edge-lit). ──────────────────────────────── */
html.mob #mob #mCsel.ld-csel-open{ position: relative; }
html.mob #mob .ld-cselmenu{
  padding: 9px !important;
  background: linear-gradient(180deg, #eef4fa, #f7fafd 22%) !important;
  border: 1px solid #d8e4f0 !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 3px 5px -2px rgba(16,38,74,.13),
    inset 0 0 0 1px rgba(255,255,255,.7) !important;
}
html.mob #mob #mCsel.ld-csel-open::after{
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 1px; right: 1px; bottom: 1px; height: 30px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, rgba(243,248,252,0), rgba(238,244,250,.55) 46%, rgba(238,244,250,.92));
}

/* TWO tracks, not three. At 390px a 3-column grid gives each tile ~85px of
   content, which is why index.php:803 had to set nowrap+ellipsis on the club
   counts in the first place. Two tracks give ~137px — the whole line fits, the
   flag reads as a crest and the tap target grows by half. */
html.mob #mob #mCsel.ld-csel-open .ld-cselgrid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

/* ── 10.6 a country tile.
       FIX: index.php:803 sets .ld-cclubs to nowrap+ellipsis, so on a 100px
       phone track every tile read "48 clubs · 9…" — the open-club count, the
       one number that drives the choice, was truncated on every row. It wraps
       to two lines here and the open count carries the brand teal. ──────── */
html.mob #mob .ld-cselopt{
  min-height: 92px !important; padding: 12px 8px 10px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff, #f7fafd) !important;
  border: 1px solid #dbe6f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(16,38,74,.06),
    0 5px 12px -6px rgba(16,38,74,.20) !important;
}
html.mob #mob .ld-cselopt img{
  width: 52px !important; height: 35px !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px rgba(16,38,74,.14),
    inset 0 1px 0 rgba(255,255,255,.30),
    0 2px 5px rgba(16,38,74,.24) !important;
}
html.mob #mob .ld-cselopt span{
  margin-top: 8px !important;
  font: 700 12.5px/1.2 var(--f27-ui) !important; color: var(--f27-ink-2) !important;
}
html.mob #mob .ld-cselopt .ld-cclubs{
  display: block !important; width: 100% !important;
  margin-top: 3px !important;
  white-space: normal !important;          /* was nowrap → ellipsis */
  overflow: visible !important;
  text-overflow: clip !important;
  font: 600 9.5px/1.35 var(--f27-ui) !important; font-style: normal !important;
  letter-spacing: .1px !important;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  color: var(--f27-ink-4) !important;
}
html.mob #mob .ld-cselopt .ld-cclubs b{ color: var(--f27-ink-2) !important; }
html.mob #mob .ld-cselopt .ld-cclubs b:last-child{ color: var(--f27-teal-deep) !important; }
html.mob #mob .ld-cselopt:active{
  transform: translateY(1px) !important;
  border-color: var(--f27-teal) !important;
  box-shadow: inset 0 2px 4px rgba(16,38,74,.10) !important;
}
html.mob #mob .ld-cselopt.sel{
  background: linear-gradient(180deg, #ffffff, #eef9fc) !important;
  border-color: var(--f27-teal) !important;
  box-shadow:
    inset 0 0 0 1px rgba(18,159,196,.34),
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 18px -8px rgba(13,126,160,.45) !important;
}
html.mob #mob .ld-cselopt.sel::before{
  background: linear-gradient(180deg, #22b6d8, #0d7ea0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(13,126,160,.5) !important;
}
/* rows inside the REGISTER popover stay a rhythm, not objects.
   index.php:889 hides the club counts here ("names-only, clean list") and the
   §10.6 rule above un-hides them — which is right for the funnel (the open-club
   count is the number the choice turns on) but it arrived as a full-width block
   and squeezed every country name to "Al…". Laid out as a row here: name takes
   the slack, counts sit at the end on one line. */
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt{
  min-height: 48px !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt span{
  margin-top: 0 !important; min-width: 0;
  font: 600 14px/1.2 var(--f27-ui) !important;
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt .ld-cclubs{
  display: inline-block !important;
  width: auto !important; flex: 0 0 auto;
  margin: 0 0 0 auto !important;
  white-space: nowrap !important;
  font: 600 10px/1 var(--f27-ui) !important;
}
html.mob #mob #mCsel.ld-csel-dd .ld-cselopt:active{ transform: none !important; background: var(--f27-surf-1) !important; }

/* the card's bezel (§3.1) is an overlay at z-index 2 — with the country
   popover open it drew its rim and its bottom falloff straight across the
   list. It stands down for exactly as long as the popover is open. */
html.mob #mob .m-card.m-auth:has(.ld-csel-dd.dd-open)::after{ display: none !important; }

/* the message plate keeps FM27's semantics; only the material is raised */
html.mob #mob .form-msg:not(:empty){
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -8px rgba(16,38,74,.30) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   11 · THE PITCH CARD
   FM27's corner mark is positioned at inset:auto -12px -10px auto and the
   card does not clip — on the phone it smeared past the rounded corner and
   read as a rendering fault. Clipped here, and the bullets become a
   hairline-ruled list instead of a loose stack.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-pitch{ overflow: hidden !important; padding: 22px 18px 20px !important; }
html.mob #mob .m-pitch::after{ opacity: .06 !important; }
html.mob #mob .m-bullet{
  gap: 14px !important;
  padding-bottom: 15px !important; margin-bottom: 15px !important;
  border-bottom: 1px solid var(--f27-edge-soft) !important;
}
html.mob #mob .m-bullet:nth-of-type(4){ border-bottom: 0 !important; padding-bottom: 4px !important; }
html.mob #mob .m-bullet img{
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  border-radius: 10px;
  background: linear-gradient(160deg, #ffffff, #e9f1f9) !important;
  border: 1px solid #d6e3f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(16,38,74,.07),
    0 6px 12px -6px rgba(16,38,74,.24) !important;
}
html.mob #mob .m-bullet b{ font: 700 15.5px/1.2 var(--f27-display) !important; letter-spacing: .2px !important; }
html.mob #mob .m-bullet i{ font: 500 13px/1.45 var(--f27-ui) !important; }
html.mob #mob .m-pitch .m-btn{ margin-top: 14px !important; }


/* ─────────────────────────────────────────────────────────────────────────
   12 · THE FEATURE RAIL
   The 6.5px HUD caption on the artwork was the smallest live type on the
   phone; it goes to the 9.5px micro-label spec. Scoped to the rail so the
   desktop feature row (zone 01) is untouched.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-fcard{
  height: 192px !important;
  border-color: #d6e3f0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 1px 2px rgba(16,38,74,.06),
    0 12px 26px -12px rgba(16,38,74,.30) !important;
}
html.mob #mob .m-fcard header{
  height: 36px !important;
  background-color: #f4f8fc !important;
  border-bottom: 1px solid #dde8f3 !important;
  box-shadow: inset 0 -3px 6px -4px rgba(16,38,74,.14) !important;
}
html.mob #mob .m-fcard h3{
  font: 800 12px/1.15 var(--f27-display) !important; letter-spacing: 1.3px !important;
  color: var(--f27-ink-2) !important;
}
html.mob #mob .m-fcard .ldc-art{
  top: 42px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 2px 3px rgba(9,22,44,.14),
    0 10px 20px -10px rgba(9,22,44,.44) !important;
}
html.mob #mob .m-fcard[class*="feature-"] .ldc-art::after{
  padding: 0 8px 7px !important;
  font: 800 9.5px/1.1 var(--f27-display) !important;   /* was 6.5px */
  letter-spacing: 1.1px !important;
}
html.mob #mob .m-fcard p{ top: 138px !important; font: 500 11.5px/1.45 var(--f27-ui) !important; }


/* ─────────────────────────────────────────────────────────────────────────
   13 · THE LIVE BAND — the one dark scene keeps its art and gains the same
   gold lip and bezel as the rest of the family, plus a rule that separates
   the event from the numbers.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .m-band{
  padding: 22px 18px 20px !important;
  border: 1px solid rgba(120,180,225,.34) !important;
  box-shadow:
    inset 0 1px 0 var(--f27p-gold-lit),
    inset 0 -40px 46px -34px rgba(2,7,18,.70),
    0 4px 8px rgba(4,12,28,.24),
    0 24px 42px -26px rgba(4,12,28,.46) !important;
}
html.mob #mob .m-ev{
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(243,212,145,.20) !important;
}
html.mob #mob .m-ev-title{ letter-spacing: 1.5px !important; color: #a7bcd8 !important; }
html.mob #mob .m-ev-name{ font: 800 20px/1.12 var(--f27-display) !important; }
html.mob #mob .m-stats{ margin: 17px 0 18px !important; }
html.mob #mob .m-stat b{ font: 800 25px/1 var(--f27-ui) !important; }
html.mob #mob .m-stat i{ letter-spacing: 1.5px !important; color: #9db2cd !important; }


/* ─────────────────────────────────────────────────────────────────────────
   14 · THE CLOSE — the page ended by trailing off into pale ground under a
   line of links. It now closes on an object: a night-lacquer colophon with
   the gold lip, the engraved crest and the guilloché, matching the band.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob .aon-promo-kick{
  font: 700 9.5px/1 var(--f27-ui) !important; letter-spacing: 1.5px !important;
  /* this label lands in the live band's shadow spill (~#c0c5cd), not on the
     clean page ground, so ink-4 measures 2.96:1 there. One step darker. */
  color: var(--f27-ink-3) !important;
}
html.mob #mob .aon-promo-inline img{
  box-shadow:
    0 0 0 1px rgba(186,140,58,.45),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px -12px rgba(16,38,74,.45) !important;
}

html.mob #mob .m-foot{
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 470px; margin: 24px auto 6px !important;
  padding: 26px 18px 22px !important;
  text-align: center;
  border: 1px solid rgba(120,180,225,.26) !important;
  border-radius: var(--f27-r-lg) !important;
  background:
    linear-gradient(180deg, rgba(14,28,52,.45), rgba(5,11,26,.72)),
    var(--f27p-navy-1) var(--f27p-art-plate) center 62% / cover no-repeat !important;
  box-shadow:
    inset 0 1px 0 var(--f27p-gold-lit),
    var(--f27p-bezel-dark),
    0 4px 8px rgba(4,12,28,.24),
    0 26px 50px -24px rgba(4,12,28,.55) !important;
}
html.mob #mob .m-foot::before{        /* the crest, engraved into the lacquer */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; width: 210px; height: 228px;
  transform: translate(-50%,-50%);
  background: var(--f27p-art-crest) center / contain no-repeat;
  opacity: .055;
}
html.mob #mob .m-foot::after{         /* the guilloché grain, off to one side */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -118px; bottom: -128px; width: 320px; height: 320px;
  background: var(--f27p-art-guilloche) center / contain no-repeat;
  opacity: .085;
}
html.mob #mob .m-foot > *{ position: relative; z-index: 1; }
/* four links never fit one 358px line, and unconstrained they break 3 + 1 with
   "Support" orphaned. A 300px measure breaks them 2 + 2. */
html.mob #mob .m-links{
  gap: 2px 18px !important;
  max-width: 300px; margin: 0 auto 14px !important;
}
html.mob #mob .m-links a{
  min-height: 44px !important;
  font: 500 12.5px/1 var(--f27-ui) !important;
  color: var(--f27-on-dark-2) !important;             /* 9.6:1 on the plate */
}
html.mob #mob .m-links a:active{ color: #fff !important; }
html.mob #mob .m-socs{ gap: 11px !important; margin-bottom: 16px !important; }
html.mob #mob .m-socs a{
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(24,42,72,.72), rgba(8,16,34,.80)) !important;
  border: 1px solid rgba(150,190,235,.24) !important;
  color: #cfe0f2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 5px 12px -6px rgba(2,8,20,.60) !important;
}
html.mob #mob .m-socs a:active{
  transform: translateY(1px) !important;
  border-color: var(--f27-teal-lit) !important; color: #fff !important;
  box-shadow: inset 0 2px 5px rgba(2,8,20,.60) !important;
}
html.mob #mob .m-copy{
  padding-top: 15px !important;
  border-top: 1px solid rgba(243,212,145,.18) !important;
  font: 600 10px/1.4 var(--f27-ui) !important; letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: #9db2cd !important;                          /* 6.0:1 on the plate */
}


/* ─────────────────────────────────────────────────────────────────────────
   15 · THE KEYBOARD-OPEN STATE — the ornament stands down first.
   Extends FM27 §11: the engraving, the crest ghost and the tile go, so the
   field, its message and the CTA keep the band the keyboard leaves.
   ───────────────────────────────────────────────────────────────────────── */
html.mob #mob:has(.m-auth input:focus) .m-brand{ padding: 10px 0 2px !important; }
html.mob #mob:has(.m-auth input:focus) .m-brand::before{ opacity: 0 !important; }
html.mob #mob:has(.m-auth input:focus) .m-card.m-auth::before{ opacity: .035 !important; }
html.mob #mob:has(.m-auth input:focus) .m-tabs{ margin-top: 4px !important; padding: 9px 12px 10px !important; }
html.mob #mob:has(.m-auth input:focus) .m-tab{ height: 44px !important; min-height: 44px !important; }
html.mob #mob:has(.m-auth input:focus) .m-hd::before{ display: none !important; }


/* ─────────────────────────────────────────────────────────────────────────
   16 · iOS ZOOM GUARD — belt and braces. Any text control that computes
   below 16px makes Safari zoom the viewport on focus; that regression
   shipped on this page on 2026-08-07 and was repaired the same day.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  html.mob #mob input[type="text"],
  html.mob #mob input[type="email"],
  html.mob #mob input[type="password"],
  html.mob #mob input[type="search"],
  html.mob #mob input:not([type]),
  html.mob #mob select,
  html.mob #mob textarea{ font-size: 16px !important; }
}


/* ─────────────────────────────────────────────────────────────────────────
   17 · REDUCED MOTION — this zone adds no animation at all; only the two
   pointer transforms stand down. Every piece of artwork stays visible.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html.mob #mob .m-btn,
  html.mob #mob .m-tab,
  html.mob #mob .eye,
  html.mob #mob .m-socials .social,
  html.mob #mob .m-socs a,
  html.mob #mob .ld-cselopt{ transition: none !important; }
  html.mob #mob .m-btn:hover,
  html.mob #mob .m-btn:active,
  html.mob #mob .m-socials .social:active,
  html.mob #mob .m-socs a:active,
  html.mob #mob .ld-cselopt:active{ transform: none !important; }
}