/* ============================================================================
   AMP · ALICE MARKET PLACE — GLOBAL DESIGN SYSTEM (apply-ready)
   Append into every page's <head> AFTER existing island <style> blocks.
   Selector-scoped. !important used ONLY to override inline island values.
   Changes tokens + nav/sub-nav prominence + sticky offsets + contrast.
   Does NOT alter layout structure. Safe to apply site-wide.
   Author: AMP Design Systems Director · 2026-06-03
   ========================================================================== */

:root {
  /* ---- Foundation (navy steps) ---- */
  --amp-navy-deep: #06101F;
  --amp-navy-2:    #050E22;
  --amp-navy:      #0A1A3D;
  --amp-navy-lift: #0F2256;

  /* ---- Accent (single accent: gold; hot-gold reserved) ---- */
  --amp-gold:        #C9A84C;
  --amp-gold-lt:     #D9BA72;
  --amp-gold-hot:    #FFD56B;
  --amp-amber:       #f4b860;
  --amp-gold-fog:    rgba(201,168,76,0.18);
  --amp-gold-border: rgba(201,168,76,0.30);
  --amp-rule:        rgba(201,168,76,0.15);

  /* ---- Text / neutral (cream family; muted+dim raised to clear AA) ---- */
  --amp-cream:    #F3EFE6;
  --amp-offwhite: #E8E4D6;
  --amp-muted:    rgba(232,228,214,0.72);
  --amp-dim:      rgba(232,228,214,0.50);

  /* ---- Semantic (red = errors only; green toned off neon) ---- */
  --amp-green: #1FB87A;
  --amp-coral: #FF7A6B;
  --amp-red:   #FF5252;

  /* ---- Fonts ---- */
  --amp-serif: 'IBM Plex Serif', Georgia, serif;
  --amp-sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --amp-mono:  'IBM Plex Mono', monospace;

  /* ---- Spacing (4px grid) ---- */
  --amp-s1:4px; --amp-s2:8px; --amp-s3:12px; --amp-s4:16px; --amp-s5:24px;
  --amp-s6:32px; --amp-s7:48px; --amp-s8:64px; --amp-s9:96px; --amp-s10:128px;
  --amp-section-y: clamp(64px, 9vw, 128px);
  --amp-section-x: clamp(20px, 4vw, 32px);
  --amp-measure: 1280px;

  /* ---- Radius ---- */
  --amp-r-sm:4px; --amp-r-md:8px; --amp-r-lg:14px;

  /* ---- Motion ---- */
  --amp-dur-fast:120ms; --amp-dur:180ms; --amp-dur-slow:320ms;
  --amp-ease: cubic-bezier(0.16,0.84,0.36,1);
  --amp-ease-inout: cubic-bezier(0.65,0,0.35,1);

  /* ---- Sticky offsets ---- */
  --amp-masthead-h: 64px;          /* masthead height = sub-nav top offset */

  /* ---- Type scale (Major Third, fluid) ---- */
  --amp-fs-display: clamp(56px, 8vw, 112px);
  --amp-fs-h1:      clamp(40px, 5vw, 64px);
  --amp-fs-h2:      clamp(30px, 3.4vw, 44px);
  --amp-fs-h3:      clamp(20px, 1.8vw, 26px);
  --amp-fs-lead:    clamp(18px, 1.5vw, 22px);
  --amp-fs-body:    16px;
  --amp-fs-caption: 13px;
  --amp-fs-eyebrow: 11px;
  --amp-fs-nav:     14px;    /* masthead links — MORE PRONOUNCED */
  --amp-fs-subnav:  14px;    /* section sub-nav tabs — matches masthead (was 12.5px) */
}

/* ============================================================================
   TYPE SCALE — role classes (opt-in) + sensible element defaults
   ========================================================================== */
.amp-display { font-family:var(--amp-serif); font-size:var(--amp-fs-display); font-weight:300; line-height:1.02; letter-spacing:-0.02em; text-wrap:balance; }
.amp-h1      { font-family:var(--amp-serif); font-size:var(--amp-fs-h1); font-weight:300; line-height:1.06; letter-spacing:-0.015em; text-wrap:balance; }
.amp-h2      { font-family:var(--amp-serif); font-size:var(--amp-fs-h2); font-weight:400; line-height:1.12; letter-spacing:-0.01em; text-wrap:balance; }
.amp-h3      { font-family:var(--amp-sans);  font-size:var(--amp-fs-h3); font-weight:600; line-height:1.22; letter-spacing:-0.005em; }
.amp-lead    { font-family:var(--amp-serif); font-size:var(--amp-fs-lead); font-weight:300; line-height:1.5; max-width:56ch; text-wrap:pretty; }
.amp-body    { font-family:var(--amp-sans);  font-size:var(--amp-fs-body); font-weight:400; line-height:1.6; max-width:72ch; text-wrap:pretty; }
.amp-caption { font-family:var(--amp-sans);  font-size:var(--amp-fs-caption); line-height:1.45; color:var(--amp-muted); }
.amp-mono-num{ font-family:var(--amp-mono);  font-size:14px; font-weight:500; line-height:1.2; letter-spacing:0.02em; font-variant-numeric:tabular-nums; }

/* ============================================================================
   EYEBROW (unified)
   ========================================================================== */
.amp-eyebrow {
  font-family:var(--amp-mono); font-size:var(--amp-fs-eyebrow); font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--amp-gold);
  display:inline-block; margin-bottom:var(--amp-s3);
}

/* ============================================================================
   MASTHEAD — MORE PRONOUNCED (14px links). Covers home .nav + interior .amp-v14-nav
   ========================================================================== */
.nav__trigger,
.amp-v14-nav__trigger {
  font-family:var(--amp-mono) !important;
  font-size:var(--amp-fs-nav) !important;   /* 14px */
  font-weight:600 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  padding:10px 14px !important;
}
.nav__trigger:hover,
.amp-v14-nav__trigger:hover { background:var(--amp-gold-fog) !important; color:var(--amp-gold) !important; }

/* active page underline */
.nav__trigger[aria-current="page"],
.amp-v14-nav__trigger[aria-current="page"] {
  color:var(--amp-gold) !important;
  box-shadow: inset 0 -2px 0 var(--amp-gold) !important;
}

/* crisper masthead edge */
.nav, .amp-v14-nav { border-bottom:1px solid var(--amp-gold-border) !important; }

/* CTA pill — unified weight/size */
.nav__cta, .amp-v14-nav__cta {
  font-family:var(--amp-mono) !important;
  font-size:13px !important; font-weight:700 !important; letter-spacing:0.06em !important;
}

/* unify masthead motion + interior CTA press across home (.nav) + interior (.amp-v14-nav) */
.nav__trigger, .amp-v14-nav__trigger {
  transition: background var(--amp-dur) var(--amp-ease), color var(--amp-dur) var(--amp-ease) !important;
}
.nav__cta, .amp-v14-nav__cta {
  transition: background var(--amp-dur) var(--amp-ease), transform var(--amp-dur-fast) var(--amp-ease) !important;
}
.nav__cta:hover, .amp-v14-nav__cta:hover { background: var(--amp-gold-lt) !important; }
.nav__cta:active, .amp-v14-nav__cta:active { transform: scale(0.98) !important; }
@media (prefers-reduced-motion: reduce) {
  .nav__cta:active, .amp-v14-nav__cta:active { transform: none !important; }
}

/* trademark mark — one disciplined treatment (matches the island .amp-tm spec
   so footer/brand-strip/inline ™ render identically on every page, incl. the
   three pages that carry no island definition: door / numbers / offerings) */
.amp-tm {
  font-family: var(--amp-mono);
  font-size: 11px;
  color: var(--c-gold, var(--amp-gold));
  vertical-align: super;
  margin-left: 2px;
}

/* ============================================================================
   STICKY SECTION SUB-NAV — MORE PRONOUNCED + DOCK BELOW MASTHEAD
   The critical fix: top must equal masthead height so both bars stay visible.
   ========================================================================== */
.sec-subnav,
.edu-subnav,
.prov-subnav,
.plat-subnav,
.how-subnav,
.ins-subnav {
  position:sticky !important;
  top:var(--amp-masthead-h) !important;        /* 64px — sits directly under masthead */
  z-index:60 !important;                         /* below masthead (1000): masthead wins overlap */
  background:#001033 !important;          /* opaque — matches masthead, no text bleed-through on scroll */
  border-bottom:1px solid var(--amp-gold-border) !important;
}
/* anchor jumps + scrolled content clear the stacked masthead(64) + sub-nav */
html{ scroll-padding-top:120px; }
.sec-subnav__in,
.edu-subnav__in,
.prov-subnav__in,
.plat-subnav__in,
.how-subnav__in,
.ins-subnav__in {
  padding:14px 32px !important;                  /* taller bar (was 11px) */
  max-width:var(--amp-measure);
  margin:0 auto !important;
  display:flex !important; gap:8px !important;
  align-items:center !important; flex-wrap:wrap !important;
}
.sec-subnav__lbl,
.edu-subnav__lbl,
.prov-subnav__lbl,
.plat-subnav__lbl,
.how-subnav__lbl,
.ins-subnav__lbl {
  font-family:var(--amp-mono) !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:0.18em !important; text-transform:uppercase !important;
  color:var(--amp-gold) !important;
  margin-right:14px !important;
}
.sec-subnav__a,
.edu-subnav__a,
.prov-subnav__a,
.plat-subnav__a,
.how-subnav__a,
.ins-subnav__a {
  font-family:var(--amp-mono) !important;
  font-size:var(--amp-fs-subnav) !important;     /* 14px — matches masthead */
  font-weight:600 !important;
  letter-spacing:0.05em !important;
  color:var(--amp-cream) !important;             /* full-strength (was 0.72 muted) */
  padding:10px 17px !important;                   /* bigger tab — reads more prominent */
  border:1px solid var(--amp-gold-border) !important;  /* 0.30 (was 0.22) */
  border-radius:5px !important;
  text-decoration:none !important; white-space:nowrap !important;
  transition: color var(--amp-dur) var(--amp-ease), background var(--amp-dur) var(--amp-ease), border-color var(--amp-dur) var(--amp-ease), transform var(--amp-dur-fast) var(--amp-ease) !important;
}
.sec-subnav__a:hover, .sec-subnav__a[aria-current="page"],
.edu-subnav__a:hover, .edu-subnav__a[aria-current="page"],
.prov-subnav__a:hover, .prov-subnav__a[aria-current="page"],
.plat-subnav__a:hover, .plat-subnav__a[aria-current="page"],
.how-subnav__a:hover, .how-subnav__a[aria-current="page"],
.ins-subnav__a:hover, .ins-subnav__a[aria-current="page"] {
  color:var(--amp-navy) !important;
  background:var(--amp-gold) !important;
  border-color:var(--amp-gold) !important;
}
.sec-subnav__a:active, .edu-subnav__a:active,
.prov-subnav__a:active, .plat-subnav__a:active,
.how-subnav__a:active, .ins-subnav__a:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .sec-subnav__a:active, .edu-subnav__a:active,
  .prov-subnav__a:active, .plat-subnav__a:active,
  .how-subnav__a:active, .ins-subnav__a:active { transform: none !important; }
}

/* anchor jumps land below the stacked masthead + sub-nav */
:target,
[id]:not(body):not(html) { scroll-margin-top:120px; }
html { scroll-behavior:smooth; }

/* ============================================================================
   BUTTONS (unified) — opt-in classes; do not touch existing bespoke buttons
   ========================================================================== */
.amp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--amp-mono); font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:12px 24px; border-radius:var(--amp-r-sm);
  text-decoration:none; cursor:pointer; min-height:44px;
  transition: background var(--amp-dur), color var(--amp-dur), border-color var(--amp-dur), transform var(--amp-dur-fast);
}
.amp-btn--primary { background:var(--amp-gold); color:var(--amp-navy); border:1px solid var(--amp-gold); }
.amp-btn--primary:hover { background:var(--amp-gold-lt); border-color:var(--amp-gold-lt); }
.amp-btn--primary:active { transform:scale(0.98); }
.amp-btn--secondary { background:transparent; color:var(--amp-gold); border:1px solid var(--amp-gold-border); }
.amp-btn--secondary:hover { background:var(--amp-gold-fog); border-color:var(--amp-gold); }

/* ============================================================================
   CARDS (unified) — opt-in
   ========================================================================== */
.amp-card {
  background:var(--amp-navy-lift); border:1px solid var(--amp-rule);
  border-radius:var(--amp-r-md); padding:var(--amp-s6);
  transition: border-color var(--amp-dur), transform var(--amp-dur), box-shadow var(--amp-dur);
}
.amp-card--interactive:hover {
  border-color:var(--amp-gold-border); transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
}
.amp-card--keyline { border-top:3px solid var(--amp-gold); }

/* ============================================================================
   DIVIDERS (unified) — opt-in
   ========================================================================== */
.amp-rule  { border:0; border-top:1px solid var(--amp-rule); width:100%; }
.amp-rule--emphasis { border:0; border-top:2px solid var(--amp-gold); width:48px; }

/* ============================================================================
   CONTRAST + ACCENT-DISCIPLINE OVERRIDES (token-level safety)
   Retire neon green + lift legacy muted/dim to clear WCAG AA on near-black.
   ========================================================================== */
:root {
  --c-green: var(--amp-green);             /* home island used #00FF9F neon */
  --c-muted: var(--amp-muted);             /* lift 0.62 -> 0.72 */
  --c-dim:   var(--amp-dim);               /* lift 0.42 -> 0.50 */
}

/* ============================================================================
   MOTION RESTRAINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================================
   FOCUS-VISIBLE (accessibility, site-wide)
   ========================================================================== */
a:focus-visible, button:focus-visible,
.nav__trigger:focus-visible, .amp-v14-nav__trigger:focus-visible,
.sec-subnav__a:focus-visible, .edu-subnav__a:focus-visible,
.amp-btn:focus-visible {
  outline:2px solid var(--amp-gold-hot) !important; outline-offset:2px !important;
}

/* ████████████████████████████████████████████████████████████████████████████
   === 10x UNIFICATION ===
   ONE coherent system. Collapses the legacy token families (--c-* / --st-* /
   --pj-* / --rev-* / bare --mono/--sans/--serif) onto the canonical --amp-*
   scale, normalizes every button family to ONE shape, and unifies every card
   treatment (border / radius / hover). Appended (not a rewrite) so the original
   apply-ready system above is preserved verbatim.

   Cascade contract: this file is loaded AFTER each page's island <style> blocks,
   so these :root re-declarations win at equal specificity. !important is used
   ONLY where it must defeat inline / island !important on buttons & cards.
   All hover motion is transform-based and therefore already neutralized by the
   reduced-motion kill-switch at the top of this file; explicit guards added below
   for belt-and-braces. No layout structure is changed — only token VALUES,
   button SHAPE, and card border/radius/hover.
   Author: AMP Design-System Engineer · 2026-06-03
   ████████████████████████████████████████████████████████████████████████████ */

/* ----------------------------------------------------------------------------
   1 · TOKEN COLLAPSE — alias every legacy family onto canonical --amp-*
   The legacy palettes were near-identical to canonical; the only true drift was
   neon green (#00FF9F) and bright amber (#F2B845 / #ffd56b used as a base accent).
   Aliasing here pins ALL of them to the toned canonical accent so the whole site
   renders from one palette without touching island markup.
   -------------------------------------------------------------------------- */
:root {
  /* —— --c-* family (the heaviest: ~57 decls) —— */
  --c-navy:        var(--amp-navy);
  --c-navy-2:      var(--amp-navy-2);
  --c-navy-deep:   var(--amp-navy-deep);
  --c-navy-lift:   var(--amp-navy-lift);
  --c-deep:        var(--amp-navy-deep);
  --c-deep-2:      var(--amp-navy-2);
  --c-ink:         var(--amp-navy-deep);
  --c-gold:        var(--amp-gold);
  --c-gold-2:      var(--amp-gold);        /* was #F2B845 — pin to toned gold */
  --c-gold-lt:     var(--amp-gold-lt);
  --c-gold-hot:    var(--amp-gold-hot);
  --c-gold-fog:    var(--amp-gold-fog);
  --c-gold-border: var(--amp-gold-border);
  --c-cream:       var(--amp-cream);
  --c-ivory:       var(--amp-cream);
  --c-offwhite:    var(--amp-offwhite);
  --c-muted:       var(--amp-muted);       /* lift 0.62 -> 0.72 (AA) */
  --c-dim:         var(--amp-dim);          /* lift 0.42 -> 0.50 (AA) */
  --c-fog:         var(--amp-cream);
  --c-fog-2:       var(--amp-muted);
  --c-fog-3:       var(--amp-dim);
  --c-rule:        var(--amp-rule);
  --c-rule-2:      var(--amp-rule);
  --c-green:       var(--amp-green);        /* was #00FF9F neon -> toned green */
  --c-success:     var(--amp-green);
  --c-coral:       var(--amp-coral);
  --c-red:         var(--amp-red);
  --c-amp-sunflower-fog: var(--amp-gold-fog);

  /* —— --st-* family (Stack / structuring island) —— */
  --st-navy:        var(--amp-navy);
  --st-navy-2:      var(--amp-navy-2);
  --st-navy-card:   var(--amp-navy-lift);
  --st-navy-card-2: var(--amp-navy);
  --st-gold:        var(--amp-gold);
  --st-amber:       var(--amp-amber);
  --st-amber-bright: var(--amp-gold-hot);   /* was #ffd56b base accent */
  --st-cream:       var(--amp-cream);
  --st-muted:       var(--amp-muted);
  --st-dim:         var(--amp-dim);
  --st-green:       var(--amp-green);        /* was #00FF9F neon */
  --st-rule:        var(--amp-rule);
  --st-rule-soft:   var(--amp-gold-fog);
  --st-card-border: var(--amp-gold-border);
  --st-serif:       var(--amp-serif);
  --st-sans:        var(--amp-sans);
  --st-mono:        var(--amp-mono);

  /* —— --pj-* family (project-journey island) —— */
  --pj-navy:        var(--amp-navy);
  --pj-navy-lift:   var(--amp-navy-lift);
  --pj-gold:        var(--amp-gold);
  --pj-amber:       var(--amp-amber);
  --pj-amber-bright: var(--amp-gold-hot);    /* was #ffd56b */
  --pj-cream:       var(--amp-cream);
  --pj-muted:       var(--amp-muted);
  --pj-dim:         var(--amp-dim);
  --pj-green:       var(--amp-green);         /* was #00FF9F neon */
  --pj-rule:        var(--amp-rule);
  --pj-rule-soft:   var(--amp-gold-fog);
  --pj-serif:       var(--amp-serif);
  --pj-sans:        var(--amp-sans);
  --pj-mono:        var(--amp-mono);

  /* —— --rev-* family (homepage reveal island) —— */
  /* Keep the dawn/paper tones bespoke to the flagship hero, but pin the accent
     trio so rev buttons & rules read in the canonical gold, not bright amber. */
  --rev-amber:        var(--amp-amber);
  --rev-amber-bright: var(--amp-gold-hot);   /* was #ffd56b */
  --rev-amber-soft:   var(--amp-gold-fog);
  --rev-cream:        var(--amp-cream);
  --rev-rule-cream:   var(--amp-rule);

  /* —— bare font tokens used by a few islands —— */
  --mono:  var(--amp-mono);
  --sans:  var(--amp-sans);
  --serif: var(--amp-serif);
}

/* ----------------------------------------------------------------------------
   2 · BUTTON NORMALIZATION — ONE shape for every button family
   Targets: .amp-btn / .amp-btn-gold / .amp-btn-ghost / .amp-btn-outline,
   .rev-btn (+--primary/--ghost/--reel), .amp-pj__pillar-cta, .amp-start__arrow.
   Unifies radius (--amp-r-sm = 4px), weight 600, letter-spacing 0.08em,
   text-transform, gap, min-height, and motion. Island padding kept where it
   reads (these are the larger marketing CTAs) but radius/weight forced to one.
   !important required to defeat island !important & inline gradient/radius.
   -------------------------------------------------------------------------- */
.amp-btn,
.amp-btn-gold,
.amp-btn-ghost,
.amp-btn-outline,
.rev-btn,
.rev-btn--primary,
.rev-btn--ghost,
.rev-btn--reel,
.amp-pj__pillar-cta {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  font-family:var(--amp-mono) !important;
  font-weight:600 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  border-radius:var(--amp-r-sm) !important;   /* ONE radius (4px) — kills 2px/3px drift */
  min-height:44px !important;                   /* one tap target */
  text-decoration:none !important;
  cursor:pointer !important;
  transition: background var(--amp-dur), color var(--amp-dur),
              border-color var(--amp-dur), box-shadow var(--amp-dur),
              transform var(--amp-dur-fast) !important;
}

/* PRIMARY / solid-gold family — one fill, no gradient, navy ink */
.amp-btn-gold,
.rev-btn--primary {
  background:var(--amp-gold) !important;
  color:var(--amp-navy) !important;
  border:1px solid var(--amp-gold) !important;
  background-image:none !important;            /* strips the rev gradient */
  font-size:13px !important;
  padding:13px 26px !important;
  box-shadow:none !important;                   /* strips the bright-amber glow */
}
.amp-btn-gold:hover,
.rev-btn--primary:hover {
  background:var(--amp-gold-lt) !important;
  border-color:var(--amp-gold-lt) !important;
  color:var(--amp-navy) !important;
  box-shadow:0 8px 28px rgba(201,168,76,0.22) !important;
}

/* GHOST / OUTLINE / SECONDARY family — transparent, gold keyline */
.amp-btn,
.amp-btn-ghost,
.amp-btn-outline,
.rev-btn,
.rev-btn--ghost,
.rev-btn--reel,
.amp-pj__pillar-cta {
  background:transparent !important;
  color:var(--amp-gold) !important;
  border:1px solid var(--amp-gold-border) !important;
  font-size:13px !important;
  padding:13px 26px !important;
}
.amp-btn:hover,
.amp-btn-ghost:hover,
.amp-btn-outline:hover,
.rev-btn:hover,
.rev-btn--ghost:hover,
.rev-btn--reel:hover,
.amp-pj__pillar-cta:hover {
  background:var(--amp-gold-fog) !important;
  border-color:var(--amp-gold) !important;
  color:var(--amp-gold) !important;
}

/* shared press feedback (transform => auto-neutralized under reduced-motion) */
.amp-btn:active,
.amp-btn-gold:active,
.amp-btn-ghost:active,
.amp-btn-outline:active,
.rev-btn:active,
.rev-btn--primary:active,
.rev-btn--ghost:active,
.rev-btn--reel:active,
.amp-pj__pillar-cta:active { transform:scale(0.98) !important; }

/* —— canonical opt-in block: add --ghost + --reel so the kit is self-complete —— */
.amp-btn--ghost {
  background:transparent; color:var(--amp-gold);
  border:1px solid var(--amp-gold-border);
}
.amp-btn--ghost:hover { background:var(--amp-gold-fog); border-color:var(--amp-gold); }
.amp-btn--reel { gap:6px; padding-inline:18px; }

/* ----------------------------------------------------------------------------
   3 · CARD UNIFICATION — one border, one radius, one hover
   Targets the dominant island card (.amp-card + --gold/--blue/--soft, ~231 uses),
   the homepage cinema tiles (.rev-cinema__tile), and assorted bespoke cards.
   Forces ONE radius (--amp-r-md = 8px) + ONE keyline + ONE lift-on-hover.
   Background/padding left to the islands (layout-bearing); only the unifying
   surface treatment is overridden.
   -------------------------------------------------------------------------- */
.amp-card,
.rev-cinema__tile,
.rev-getrisk__card,
.rev-doors__card,
.edu-card,
.step-card,
.pc-card,
.desk-panel,
.form-card {
  border-radius:var(--amp-r-md) !important;     /* ONE radius — kills 2/3/4px drift */
  border:1px solid var(--amp-rule) !important;
  transition: border-color var(--amp-dur), transform var(--amp-dur),
              box-shadow var(--amp-dur), background var(--amp-dur) !important;
}
/* keyline accent variants keep their gold top-rule but on the unified radius */
.amp-card--gold,
.amp-card--keyline,
.rev-getrisk__card--get { border-top:3px solid var(--amp-gold) !important; }

/* ONE hover: subtle gold keyline + 2px lift + soft shadow (no neon, no jump) */
.amp-card:hover,
.rev-cinema__tile:hover,
.rev-getrisk__card:hover,
.rev-doors__card:hover,
.edu-card:hover,
.step-card:hover,
.pc-card:hover,
.desk-panel:hover {
  border-color:var(--amp-gold-border) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 32px rgba(0,0,0,0.35) !important;
}

/* ----------------------------------------------------------------------------
   4 · REDUCED-MOTION BELT-AND-BRACES
   The global kill-switch above already zeroes transition/animation durations.
   This explicitly removes hover/active TRANSFORM on the unified buttons & cards
   so a reduced-motion user gets the color/border change only — never a jump.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .amp-btn:hover, .amp-btn:active,
  .amp-btn-gold:hover, .amp-btn-gold:active,
  .amp-btn-ghost:hover, .amp-btn-ghost:active,
  .amp-btn-outline:hover, .amp-btn-outline:active,
  .rev-btn:hover, .rev-btn:active,
  .rev-btn--primary:hover, .rev-btn--primary:active,
  .rev-btn--ghost:hover, .rev-btn--ghost:active,
  .rev-btn--reel:hover, .rev-btn--reel:active,
  .amp-pj__pillar-cta:hover, .amp-pj__pillar-cta:active,
  .amp-card:hover, .rev-cinema__tile:hover, .rev-getrisk__card:hover,
  .rev-doors__card:hover, .edu-card:hover, .step-card:hover,
  .pc-card:hover, .desk-panel:hover {
    transform:none !important;
  }
}
/* ████████████████████████████ end 10x UNIFICATION ███████████████████████████ */

/* ████████████████████████████████████████████████████████████████████████████
   === MOBILE / RESPONSIVE HARDENING (cross-breakpoint QA pass) ===
   Loaded AFTER every page's island <style>, so these rules win at equal
   specificity (and use !important only where island rules set fixed dims).
   Targets the SYSTEMIC mobile defects that were missing from the island CSS:
     1. interior masthead (.amp-v14-nav) never collapsed -> horizontal overflow
        on phones. We keep it ONE 64px row, shrink padding/wordmark, and let the
        link rail scroll horizontally (touch) instead of overflowing the page.
     2. sticky sub-nav rails -> horizontally scrollable on narrow screens.
     3. wide home nav drawer (min-width:720px) + un-collapsed inline grids.
     4. tap-target floor (>=44px) on nav/CTA, legible type floor on mobile.
   Reduced-motion safe: adds no animation; only layout + scroll affordance.
   Author: AMP Responsive/Mobile QA · 2026-06-03
   ████████████████████████████████████████████████████████████████████████████ */

/* —— page-level width guard ——
   NOTE: we deliberately do NOT set overflow-x:hidden on html/body. Computing
   overflow-x to a non-visible value forces overflow-y to auto and BREAKS the
   position:sticky masthead + sub-nav this system relies on. Overflow is instead
   contained at the offending elements (nav rail + sub-nav rail scroll their own
   content; grids stack via per-page @media). max-width keeps the box honest. */
html, body { max-width:100%; }

@media (max-width: 760px) {
  /* ---- INTERIOR MASTHEAD ----
     The link rail (5 pillars + sep + portal + CTA) cannot fit a phone in one
     64px row. We keep the masthead a single compact 64px row (so the sticky
     sub-nav's top:64px offset stays exactly correct) and horizontally SCROLL
     the link rail. Because overflow-x:auto would clip the dropdown panel that
     drops below the rail, the panel is switched to position:fixed on mobile so
     it escapes the scroll clip and pins just under the masthead. */
  .amp-v14-nav {
    padding:0 14px !important;
    gap:10px !important;
  }
  .amp-v14-nav__wm { font-size:20px !important; }      /* tighten wordmark */
  .amp-v14-nav__mark { width:30px !important; height:30px !important; }
  .amp-v14-nav__items {
    margin-left:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap !important;
    min-width:0;            /* allow the flex rail to shrink + scroll */
  }
  .amp-v14-nav__items::-webkit-scrollbar { display:none; }
  .amp-v14-nav__items--left { margin-right:0 !important; }
  .amp-v14-nav__trigger {
    white-space:nowrap;
    flex-shrink:0;
    padding:10px 12px !important;   /* keep >=44px tap height, tighten width */
  }
  .amp-v14-sep { flex-shrink:0; }
  .amp-v14-nav__cta {
    flex-shrink:0;
    margin-left:8px !important;
    padding:11px 14px !important;   /* >=44px tap target, tighter */
    white-space:nowrap;
  }
  /* dropdown panel: fixed so the scrolling rail can't clip it; pinned under the
     64px masthead, viewport-capped, scrolls if tall */
  .amp-v14-dd {
    position:fixed !important;
    top:64px !important; left:12px !important;
    max-width:calc(100vw - 24px) !important;
    max-height:60vh; overflow-y:auto;
  }

  /* ---- HOME MASTHEAD (.nav): same compact-row + horizontal-scroll rail ---- */
  .nav { padding:0 14px !important; gap:10px !important; }
  /* the long italic tagline sub-line ("…by the people, for the people") is
     ~230px of nowrap text — it crowds the brand off a phone. Hide on mobile;
     the "AMP" wordmark + mark still carry the brand. */
  .nav__wordmark-sub { display:none !important; }
  .nav__wordmark { font-size:20px !important; }
  .nav__mark { width:30px !important; height:30px !important; }
  .nav__items, .nav__menu {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    flex-wrap:nowrap; min-width:0;
  }
  .nav__items::-webkit-scrollbar, .nav__menu::-webkit-scrollbar { display:none; }
  .nav__trigger { white-space:nowrap; flex-shrink:0; }
  .nav__cta { flex-shrink:0; white-space:nowrap; }
  /* home nav drawer is min-width:720px centered (translateX(-50%)) — it blows
     past both viewport edges AND would be clipped by the scrolling rail. Switch
     to fixed, pinned under the 64px masthead, viewport-capped, single column. */
  .nav__drawer {
    position:fixed !important;
    top:64px !important; left:12px !important;
    min-width:0 !important;
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    transform:none !important;
    grid-template-columns:1fr !important;
    max-height:60vh; overflow-y:auto;
    padding:20px !important;
  }
  /* kill the slide-in keyframe on mobile: its translateX(-50%) would fight the
     left-anchored position above and flash the drawer off-screen mid-animation */
  .nav__item--open .nav__drawer { transform:none !important; animation:none !important; }

  /* ---- STICKY SECTION SUB-NAV: scroll the tab rail horizontally ---- */
  .sec-subnav__in, .edu-subnav__in, .prov-subnav__in,
  .plat-subnav__in, .how-subnav__in, .ins-subnav__in {
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:12px 16px !important;
  }
  .sec-subnav__in::-webkit-scrollbar, .edu-subnav__in::-webkit-scrollbar,
  .prov-subnav__in::-webkit-scrollbar, .plat-subnav__in::-webkit-scrollbar,
  .how-subnav__in::-webkit-scrollbar, .ins-subnav__in::-webkit-scrollbar { display:none; }
  .sec-subnav__a, .edu-subnav__a, .prov-subnav__a,
  .plat-subnav__a, .how-subnav__a, .ins-subnav__a { flex-shrink:0; }
  .sec-subnav__lbl, .edu-subnav__lbl, .prov-subnav__lbl,
  .plat-subnav__lbl, .how-subnav__lbl, .ins-subnav__lbl { flex-shrink:0; }

  /* ---- TYPE LEGIBILITY FLOOR — body never below ~15px on phones ---- */
  .amp-body { font-size:15px; }

  /* ---- MACRO TICKER: keep within viewport, slightly tighter items ---- */
  .amp-v14-ticker { max-width:100%; }
  .amp-v14-fed-item { padding:0 22px; }
}

/* ---- finer phone tightening (<=400px: 360/390 class devices) ---- */
@media (max-width: 400px) {
  .amp-v14-nav__wm { font-size:18px !important; }
  .amp-v14-nav { padding:0 12px !important; gap:10px !important; }
  .nav { padding:0 12px !important; }
}

/* ----------------------------------------------------------------------------
   INLINE-STYLE GRID COLLAPSE (catch-all for un-classed bento/KPI grids)
   Several pages (advisor / digest / offerings / numbers) ship 3-/4-/5-/6-col
   grids as inline style="grid-template-columns:repeat(N,1fr)" with NO per-page
   mobile rule, so they squish on phones. We match BOTH spacing variants
   (repeat(N,1fr) and repeat(N, 1fr)) and stack them. Attribute selectors carry
   higher specificity than the element's own inline shorthand is NOT true — so
   !important is required to beat the inline value. Footer nav grids already
   collapse via their own rules; forcing them to <=2 col here is harmless.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 440px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}
