/* GAT shared site chrome — GAT-141.
   Single source of truth for nav, footer, buttons, logo and the reset.
   Loaded BEFORE each page's inline <style>, so page-specific rules still win.
   Previously these rules were duplicated in all 12 pages and had drifted:
   .page-hero had 7 different definitions, .ph-h1 four, .g-cta two. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --bg:#12151f;
  --card-bg:#1c2030;
  --surface-2:#13161f;   /* inset header strips — one shade under --card-bg */
  --border:#2e3245;      /* 1px rules ONLY. As a text colour it is 1.28:1; a test
                            enforces that, see border_token_not_used_as_text. */

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text:#e5e7eb;        /* body copy        13.06:1 on --card-bg */
  --text-strong:#fff;    /* headings         the brightest step */
  --muted:#9ca3af;       /* secondary text    6.37:1 on --card-bg, passes AA */
  --on-gold:#0f1117;     /* text on a gold fill */

  /* ── Brand and state ────────────────────────────────────────────────────────
     Each carries an -rgb triplet as well as a hex. A tint is then written
     rgba(var(--gold-rgb),.1) and follows the brand, instead of 240,180,41 being
     spelled out in nine separate places as it was. */
  --gold:#f0b429;
  --gold-rgb:240,180,41;
  --gold-dim:rgba(var(--gold-rgb),0.08);
  --success:#34d399;
  --success-rgb:52,211,153;
  --error:#f87171;
  --error-rgb:248,113,113;
  --white-rgb:255,255,255;   /* for the low-alpha lift on hover surfaces */

  /* ── Type scale ─────────────────────────────────────────────────────────────
     Eleven steps, replacing 28 ad-hoc values. Each step is the value that was
     already the most used in its band, so two thirds of declarations did not move
     and nothing moved by more than 0.80px. Icons and display numerals are NOT on
     this scale — an icon is sized in em off its own box and keeps its value at the
     point of use; folding them in would couple icon dimensions to body copy.
     NB: keep every comment in this block free of curly braces. Several tools here
     read the token list by capturing up to the first closing brace, so one inside a
     comment silently truncates the list — which cost two debugging rounds to find. */
  --fs-3xs:.62rem;
  --fs-2xs:.65rem;
  --fs-xs2:.68rem;
  --fs-xs:.72rem;
  --fs-sm:.78rem;
  --fs-md:.82rem;
  --fs-base:.9rem;
  --fs-lg:.95rem;
  --fs-xl:1.05rem;
  --fs-2xl:1.2rem;
  --fs-3xl:1.4rem;

  /* ── Spacing scale ──────────────────────────────────────────────────────────
     Thirteen steps, down from 32 ad-hoc values:
       .25  .5  .75  1  1.25  1.5  2  2.5  3  3.5  4  5  6rem
     Deliberately NOT tokens. A padding shorthand reads far worse as
     var(--sp-3) var(--sp-4) than as .75rem 1rem, and unlike a brand colour there is
     no case for changing a step globally — so the scale is enforced by a test
     (padding_margin_uses_scale) instead of by indirection.
     3.5, 5 and 6rem are real steps, not strays: they carry section padding, and
     snapping them to 3 or 4rem would have cost 8 to 32px of page rhythm.
     One documented exception, how-it-works' pipeline diagram, where padding-left
     runs 1.5 / 3 / 4.5rem as an even indent ladder and 4.5 cannot be rounded. */

  /* ── Non-colour ─────────────────────────────────────────────────────────── */
  --radius:10px;
  --mono:'Space Mono',monospace;
  --sans:'Space Grotesk',system-ui,sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);}
.skip-link{position:absolute;left:-9999px;top:.75rem;background:var(--gold);color:var(--on-gold);padding:.5rem .75rem;border-radius:4px;font-size:var(--fs-md);font-weight:700;z-index:9999;text-decoration:none;}
.skip-link:focus{left:.75rem;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.g-nav{background:var(--card-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;padding:1rem 0;}
.g-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.g-logo{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;}
.g-logo-mark{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--gold);letter-spacing:-1px;}
.g-logo-name{font-size:var(--fs-xs2);color:rgba(var(--white-rgb),.5);letter-spacing:.14em;text-transform:uppercase;}
.g-links{display:flex;align-items:center;gap:.25rem;flex-wrap:nowrap;}
/* nowrap so a link can never break mid-phrase ("How It" / "Works"). If the bar ever
   runs out of room again it overflows visibly instead of silently mangling labels. */
.g-link{font-size:var(--fs-md);font-weight:500;color:var(--muted);text-decoration:none;padding:.5rem 1rem;border-radius:6px;transition:color .2s,background .2s;white-space:nowrap;}
.g-link:hover,.g-link.on{color:var(--gold);background:var(--gold-dim);}
.g-login{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:.5rem 1rem;text-decoration:none;transition:color .2s,border-color .2s;letter-spacing:.02em;}
.g-login:hover{color:var(--gold);border-color:var(--gold);}
.g-cta{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--on-gold);background:var(--gold);border:none;border-radius:6px;padding:.5rem 1rem;text-decoration:none;transition:opacity .2s;letter-spacing:.02em;}
.g-cta:hover{opacity:.85;color:var(--on-gold);}
.ham{background:none;border:1px solid var(--border);color:var(--muted);padding:.25rem .75rem;border-radius:6px;cursor:pointer;font-size:1.1rem;line-height:1;}
.mob-menu{display:none;border-top:1px solid var(--border);}
.mob-menu.open{display:block;}

/* ── Nav breakpoint correction ───────────────────────────────────────────────
   The markup switches to the full bar at Bootstrap's md (768px), but the bar needs
   about 1040px: logo ~142, seven links ~598 (text plus .9rem padding each), MEMBER
   LOGIN ~116, GET STARTED ~136, three 1rem gaps 48. The container is 720px at md
   and 960px at lg, so from 768px to 1199px the bar did not fit and the links were
   being squeezed — every tablet and small laptop. It only fits at xl (1140px).

   Fixed here rather than in the markup on purpose: the nav is copied into all 12
   pages and a drift guard requires those copies stay byte-identical, so a CSS
   override is one edit instead of twelve and cannot desynchronise them.

   These beat Bootstrap's .d-md-* utilities on specificity (0,0,3,0 against 0,0,1,0),
   so they win regardless of load order, though gat.css also loads after Bootstrap.
   Nothing is lost below 1200px: .mob-menu already carries all seven links plus
   Member Login and the CTA. */
@media(max-width:1199.98px){
  .g-nav .g-links.d-md-flex{display:none!important;}
  .g-nav .g-login.d-md-inline,
  .g-nav .g-cta.d-md-inline{display:none!important;}
  /* inline-block, not inline-flex: that is the button's native display, which is what
     it already renders as below 768px, so the icon sits identically at every width. */
  .g-nav .ham.d-md-none{display:inline-block!important;}
}
/* Leaving the panel open and widening the window would otherwise strand it below the
   full bar, since .open only toggles a class and nothing watches the viewport. */
@media(min-width:1200px){
  .g-nav .mob-menu,
  .g-nav .mob-menu.open{display:none!important;}
}
.mob-link{display:block;color:var(--muted);text-decoration:none;padding:.75rem 0;font-size:var(--fs-base);font-weight:500;border-bottom:1px solid var(--border);}
.mob-link:hover,.mob-link.on{color:var(--gold);}
.mob-cta{display:block;background:var(--gold);color:var(--bg);font-family:var(--mono);font-size:var(--fs-md);font-weight:700;text-align:center;padding:.75rem;border-radius:6px;text-decoration:none;margin-top:.75rem;margin-bottom:.75rem;}
.btn-g{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;padding:.75rem 1.5rem;border-radius:6px;text-decoration:none;transition:opacity .2s,transform .15s;display:inline-block;letter-spacing:.02em;}
.btn-g.solid{background:var(--gold);color:var(--on-gold);}
.btn-g.solid:hover{opacity:.85;transform:translateY(-1px);color:var(--on-gold);}
.btn-g.ghost{color:var(--gold);border:1.5px solid var(--gold);background:transparent;}
.btn-g.ghost:hover{background:var(--gold-dim);transform:translateY(-1px);color:var(--gold);}
footer{background:var(--card-bg);border-top:1px solid var(--border);padding:3rem 0 2rem;}
.f-brand{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--gold);}
.f-disc{font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:600px;margin-top:.75rem;}
.f-links a{color:var(--muted);font-size:var(--fs-md);text-decoration:none;display:block;padding:.25rem 0;transition:color .2s;}
.f-links a:hover{color:var(--gold);}
/* --border is a 1px-rule colour; as text on --card-bg it renders at 1.28:1, which
   put "NOT FINANCIAL ADVICE" — the one line that must be readable — effectively
   invisible. --muted is the site's muted-text token and gives 6.37:1. */
.f-copy{font-family:var(--mono);font-size:var(--fs-xs2);color:var(--muted);margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);}

/* Section heading, shared by how-it-works, methodology and plans — the only three
   pages that use it. It had drifted into three definitions: a fixed 1.4rem on plans
   against clamps on the other two whose floors differed by 0.1rem, plus a different
   colour and letter-spacing on plans. The clamp wins because two of the three already
   had it and a section heading should scale with the viewport; the 1.5rem floor wins
   over 1.6rem because it is the safer of the two on a narrow screen.
   margin-bottom is deliberately NOT set here — each page keeps its own rhythm. */
.sec-h{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;color:var(--text-strong);letter-spacing:-1px;}

.ph-tag{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--gold);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;}
.ph-h1{font-size:clamp(1.9rem,4vw,2.85rem);font-weight:700;color:var(--text-strong);letter-spacing:-1.5px;margin-bottom:.75rem;}
.ph-p{color:var(--muted);font-size:var(--fs-lg);line-height:1.7;max-width:620px;}

/* Two page-header patterns, one definition each. Previously .page-hero had SEVEN
   different inline definitions (min-heights of 220/240/260/280px and two padding
   variants), so every page's header rendered at a different size.
   .page-hero         split grid — pages with a right-hand panel
   .page-hero.banner  simple banner — legal and content pages */
.page-hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border);min-height:260px;}
.page-hero.banner{display:block;grid-template-columns:none;min-height:0;padding:3.5rem 0 2.5rem;}
@media(max-width:768px){.page-hero{grid-template-columns:1fr;min-height:0;}}

/* ── Icons ──────────────────────────────────────────────────────────────────
   Usage: an svg.ico wrapping a use element pointing at icons.svg, fragment
   ico-key. (Written out rather than shown as markup on purpose: the content
   test appends this stylesheet to each page and scans for link targets, so a
   literal href example here is picked up as a broken page link.)
   Replaces the emoji that were being used as iconography. Sized in em so an icon
   tracks the type it sits beside; currentColor so one symbol serves gold, muted
   and white. aria-hidden on every instance — the adjacent text always says it. */
.ico{width:1em;height:1em;flex:none;vertical-align:-0.125em;color:inherit;}
.ico-lg{width:1.5rem;height:1.5rem;}
.ico-xl{width:1.75rem;height:1.75rem;}
.ico-gold{color:var(--gold);}
.ico-ok{color:var(--success);}
.ico-warn{color:var(--gold);}

/* Inline check/cross lists — replaces repeated inline flex styling */
.tick-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;}
.tick{display:flex;gap:.65rem;align-items:flex-start;padding:.5rem 0;font-size:var(--fs-base);
      border-bottom:1px solid var(--border);line-height:1.6;}
.tick:last-child{border-bottom:none;}
.tick > .ico{color:var(--success);margin-top:.28em;}

/* ── Motion ─────────────────────────────────────────────────────────────────
   One curve for the whole site. The browser defaults read as unconsidered; this
   is the same ease-out used across the client portal, so the two surfaces move
   alike. Durations stay short — nav and buttons are high-frequency targets. */
:root{--ease:cubic-bezier(.23,1,.32,1);}
.g-link,.g-login,.g-cta,.btn-g,.mob-link,.f-links a{
  transition:color .16s var(--ease),background-color .16s var(--ease),
             border-color .16s var(--ease),opacity .16s var(--ease),
             transform .16s var(--ease);}
/* Press feedback. Every button on the site previously had a hover but no active
   state, so a tap produced no acknowledgement at all. */
.btn-g:active,.g-cta:active,.mob-cta:active{transform:scale(.978);}
.btn-g.solid:active,.btn-g.ghost:active{transform:scale(.978);}
/* Touch fires :hover on tap and it then sticks, so the lift is pointer-gated. */
@media(hover:hover) and (pointer:fine){
  .btn-g.solid:hover,.btn-g.ghost:hover{transform:translateY(-1px);}
}
@media(hover:none){
  .btn-g.solid:hover,.btn-g.ghost:hover{transform:none;}
}

/* ── Surfaces ───────────────────────────────────────────────────────────────
   A 1px top highlight reads as a machined edge catching light. It is the one
   depth cue that suits hairline borders — a drop shadow would not, and would
   fight the flat terminal surface. */
.panel{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
       box-shadow:inset 0 1px 0 rgba(var(--white-rgb),.04);}
.panel-head{padding:.75rem 1rem;background:var(--bg);border-bottom:1px solid var(--border);
            font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.08em;
            text-transform:uppercase;display:flex;align-items:center;gap:.45rem;}
.panel-body{padding:.25rem 1.25rem 1.25rem;}

/* Muted-gold callout used for disclosures and notes */
.note-gold{background:rgba(var(--gold-rgb),.04);border:1px solid rgba(var(--gold-rgb),.15);
           border-radius:8px;padding:1rem;font-size:var(--fs-sm);color:var(--muted);
           line-height:1.6;}
.fineprint{font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:680px;}
.fineprint .ico{color:var(--gold);margin-right:.25rem;}