/* ============================================================
   GOLDSTEIN & CO. — SITE-WIDE DESIGN SYSTEM (v3 — RLF editorial luxury)
   Playfair Display serif headlines + Source Sans body
   Matches the RLF design DNA the user loved
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@400;600;700;800&display=swap');

/* === DESIGN TOKENS === */
:root{
  --navy:#0F2847; --navy-2:#1a3a6a; --navy-3:#2a4a7a;
  --gold:#C5A059; --gold-light:#e3c989; --gold-bg:#fff8e1;
  --green:#0d7c5f; --green-light:#a3d4b3;
  --red:#c0392b;
  --bg:#fafbfc; --surface:#ffffff;
  --text:#1f2937; --text-muted:#5c6878; --text-faint:#94a3b8;
  --border:#e2e8f0; --border-soft:#f0f4f9;
  --container:1140px;
  --section-y:72px; --section-y-mob:48px;
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
  --shadow-1:0 1px 3px rgba(15,40,71,.06),0 8px 20px rgba(15,40,71,.05);
  --shadow-2:0 4px 14px rgba(15,40,71,.08),0 16px 40px rgba(15,40,71,.08);
  --type-scale:1.250;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box !important}
html{overflow-x:hidden !important;scroll-behavior:smooth;margin:0 !important;padding:0 !important}
body{overflow-x:hidden !important;max-width:100vw !important;margin:0 !important}
img,svg,video,iframe{max-width:100%;height:auto;display:block}

/* === BASE TYPE — Playfair serif headings + Source Sans body (BUMPED for readability) === */
body{
  font-family:'Source Sans 3','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  font-size:19px !important;
  line-height:1.7 !important;
  color:var(--text);
  background:var(--bg);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{
  font-family:'Playfair Display','Georgia',serif !important;
  font-weight:700 !important;
  line-height:1.18 !important;
  letter-spacing:-.2px !important;
}
h1{font-size:48px !important;margin-bottom:20px;font-weight:700}
h2{font-size:36px !important;margin-bottom:18px;font-weight:700}
h3{font-size:24px !important;margin-bottom:14px;font-weight:700}
h4{font-size:20px !important;margin-bottom:10px;font-weight:700}
p{font-size:19px !important;line-height:1.7 !important;margin-bottom:16px}
li{font-size:19px !important;line-height:1.7 !important}
/* Body text inside cards stays at 19px (the readable baseline) */
.card p, .card li, .card div, section p, section li{font-size:19px !important}
/* Fine print stays small */
.hint, .compliance, .compliance p, footer .compliance, footer .compliance p,
[class*="disclaimer"], [class*="footnote"], small{
  font-size:13.5px !important;
  line-height:1.65 !important;
}
/* Eyebrow stays at small caps */
.eyebrow, [class*="eyebrow"]{font-size:12px !important}
/* Container slightly narrower for better reading line length */
.container, .gco-container{max-width:1080px !important}
@media(max-width:760px){
  body, p, li{font-size:18px !important}
  h1{font-size:32px !important}
  h2{font-size:26px !important}
  h3{font-size:21px !important}
}
/* Logo + nav + buttons stay in Source Sans (sans is for utility text) */
header a.logo, header a.logo span, .gco-header a.gco-logo, .gco-header a.gco-logo span,
header nav, .gco-header nav, .btn, button, .cta, .eyebrow{
  font-family:'Source Sans 3','Open Sans',sans-serif !important;
}
/* CRITICAL: dark/hero sections preserve their own text colors */
section[style*="background:#0F2847"], section[style*="background:#1a3a6a"], section[style*="background:linear-gradient(135deg,#0F2847"], section[style*="background:linear-gradient(135deg, #0F2847"], .hero[style*="background:#0F2847"], .hero{color:#fff}
section.hero.hero-navy h1, section.hero.hero-navy h2, section.hero.hero-navy h3, section[style*="#0F2847"] h1, section[style*="#0F2847"] h2, section[style*="#0F2847"] h3, section[style*="linear-gradient(135deg,#0F2847"] h1, section[style*="linear-gradient(135deg,#0F2847"] h2, section[style*="linear-gradient(135deg,#0F2847"] h3{color:#fff !important}
section.hero.hero-navy p, section[style*="#0F2847"] p, section[style*="linear-gradient(135deg,#0F2847"] p{color:#ffffff}
section[style*="background:#0F2847"] strong, .hero strong{color:#fff}
em{font-style:italic}
/* ============================================================
   SAFER HERO TEXT OVERRIDE — only color, no layout/bg force
   ============================================================ */
section.hero.hero-navy, section.hero[style*="#0F2847"], section.hero[style*="#1a3a6a"], section.hero[style*="linear-gradient(135deg,#0F2847"]{color:#fff !important}
section.hero.hero-navy h1, .hero-navy h1, section.hero.hero-navy h2, .hero-navy h2, section.hero.hero-navy h3, .hero-navy h3{color:#fff !important}
section.hero.hero-navy p, .hero-navy p, section.hero.hero-navy li, .hero-navy li, section.hero.hero-navy span, .hero-navy span, section.hero.hero-navy strong, .hero-navy strong{color:#ffffff !important}
section.hero.hero-navy h1 em, .hero-navy h1 em, section.hero h1 em, .hero h1 em{color:#C5A059 !important;font-style:normal !important}
section.hero .tag, .hero .tag, section.hero .eyebrow, .hero .eyebrow{color:#C5A059 !important;background:rgba(197,160,89,.18) !important}
section.hero.hero-navy strong, .hero-navy strong{color:#fff !important;font-weight:800 !important}
section.hero.hero-navy .lead, .hero-navy .lead{color:#ffffff !important}
section.hero a:not(.btn), .hero a:not(.btn){color:#C5A059 !important}
section.hero .btn-primary, .hero .btn-primary{background:#C5A059 !important;color:#0F2847 !important}
section.hero .btn-outline, .hero .btn-outline{border:1.5px solid rgba(255,255,255,.4) !important;color:#fff !important;background:transparent !important}
/* UNIFIED LOGO TREATMENT — bigger, more white padding */
.gco-header{padding:18px 0 !important;background:#fff !important;border-bottom:1px solid #e8edf3 !important}
header .gco-container, .gco-header .gco-container{padding:0 32px !important}
.gco-logo, header a.logo, header a.gco-logo, .gco-header a.logo, .gco-header a.gco-logo{display:flex !important;align-items:center !important;gap:12px !important;text-decoration:none !important;color:#0F2847 !important}
.gco-logo img, header a.logo img, .gco-header a.gco-logo img{height:52px !important;width:auto !important;max-height:52px !important}
.gco-logo span, header a.logo span, .gco-header a.gco-logo span{font-family:'Source Sans 3',sans-serif !important;font-weight:800 !important;font-size:19px !important;line-height:1.1 !important;color:#0F2847 !important;letter-spacing:.2px !important}
.gco-logo small, header a.logo small, .gco-header a.gco-logo small{display:block !important;font-weight:600 !important;font-size:10.5px !important;color:#C5A059 !important;letter-spacing:1.3px !important;text-transform:uppercase !important;margin-top:2px !important}
/* body{padding-top:84px !important} removed - was breaking calc */

a{color:var(--gold);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--navy)}

/* === CONTAINERS === */
.container, .gco-container{
  max-width:var(--container) !important;
  margin:0 auto !important;
  padding:0 28px !important;
  box-sizing:border-box;
  width:100%;
}

/* === UNIFIED HEADER (smart auto-hide on scroll) === */
header, .gco-header{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border) !important;
  padding:14px 0 !important;
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:50;
  box-shadow:0 1px 0 rgba(15,40,71,.04);
  transform:translateY(0);
  transition:transform .35s ease, box-shadow .25s ease;
}
header.header-hidden, .gco-header.header-hidden{transform:translateY(-100%)}
header.header-scrolled, .gco-header.header-scrolled{box-shadow:0 4px 18px rgba(15,40,71,.08)}
/* Push body content down so it doesn't hide under fixed header */
body{padding-top:72px !important}
@media(max-width:760px){body{padding-top:64px !important}}
/* Reduce top whitespace on first section */
body > section:first-of-type, body > header + section{padding-top:36px !important}
@media(max-width:760px){body > section:first-of-type, body > header + section{padding-top:24px !important}}
/* Subtitle no-wrap fix */
header a.logo small, .gco-header a small{white-space:nowrap !important;display:block !important}
header a.logo, .gco-header a.gco-logo{flex-shrink:0 !important}
header > .container, .gco-header > .gco-container{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px;
  position:relative;
}
header a.logo, header a.gco-logo, .gco-header a.logo, .gco-header a.gco-logo{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:var(--navy) !important;
  font-family:'Montserrat',sans-serif !important;
  font-weight:800 !important;
  font-size:18px !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
header a.logo img, .gco-header a.gco-logo img, .gco-header a.logo img{
  height:52px !important;
  max-height:52px !important;
  width:auto !important;
  display:block !important;
}
header a.logo small, .gco-header a.gco-logo small, .gco-header a.logo small{
  display:block !important;
  font-weight:600 !important;
  font-size:10.5px !important;
  color:var(--gold) !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  margin-top:2px !important;
  white-space:nowrap !important;
}
header nav, .gco-header nav.gco-nav{
  display:flex !important;
  gap:22px !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
}
header nav a, .gco-header nav.gco-nav a{
  color:var(--text) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  letter-spacing:.1px !important;
  transition:color .15s ease;
}
header nav a:hover, .gco-header nav.gco-nav a:hover{color:var(--gold) !important}
header nav a.cta, header nav .cta, .gco-header nav.gco-nav a.gco-cta, .gco-header nav.gco-nav a.cta{
  background:var(--navy) !important;
  color:#fff !important;
  padding:10px 18px !important;
  border-radius:8px !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
header nav a.cta:hover, .gco-header nav.gco-nav a.gco-cta:hover{background:var(--navy-2) !important;color:#fff !important}
@media(max-width:1180px){
  header a.logo small, .gco-header a.logo small, .gco-header a.gco-logo small{display:none !important}
  header nav, .gco-header nav.gco-nav{gap:18px !important}
}
@media(max-width:980px){
  header nav a, .gco-header nav.gco-nav a{font-size:12.5px !important;letter-spacing:0 !important}
  header nav, .gco-header nav.gco-nav{gap:14px !important}
}
@media(max-width:780px){
  header nav, .gco-header nav.gco-nav{display:none !important}
  .ham-btn, .gco-ham{display:flex !important}
}

/* === BUTTONS === */
.btn, button.btn, a.btn, .cta-primary{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:14px 28px !important;
  border-radius:8px !important;
  font-weight:700 !important;
  font-size:16px !important;
  text-decoration:none !important;
  transition:all .2s ease !important;
  border:0;
  cursor:pointer;
  font-family:'Open Sans',sans-serif !important;
}
.btn-primary, .cta-primary{background:var(--navy) !important;color:#fff !important}
.btn-primary:hover, .cta-primary:hover{background:var(--navy-2) !important;transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-gold{background:var(--gold) !important;color:var(--navy) !important}
.btn-gold:hover{background:var(--gold-light) !important;transform:translateY(-1px)}
.btn-outline{background:transparent !important;color:var(--navy) !important;border:1.5px solid var(--navy) !important}
.btn-outline:hover{background:var(--navy) !important;color:#fff !important}

/* === SECTIONS === */
section{padding:var(--section-y) 0 !important}
@media(max-width:760px){
  section{padding:var(--section-y-mob) 0 !important}
  h1{font-size:30px !important}
  h2{font-size:24px !important}
  h3{font-size:20px !important}
  body, p{font-size:17.5px !important;line-height:1.65 !important}
  /* Container padding — unified with Margin Police standard */
  .container{padding:0 32px !important}
  .gco-container{padding:0 18px !important}
}

/* === CARDS — generous breathing room === */
.card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  padding:36px !important;
  box-shadow:var(--shadow-1);
  transition:box-shadow .2s ease;
  margin-bottom:22px;
}
.card:hover{box-shadow:var(--shadow-2)}
@media(max-width:760px){
  .card{padding:26px 22px !important;border-radius:12px !important;margin-bottom:18px}
}

/* === ANTI-LUMPY — smooth vertical rhythm across sections === */
/* All sections same vertical padding so eye flows top-to-bottom without "lumps" */
section{padding-top:64px !important;padding-bottom:64px !important}
@media(max-width:760px){section{padding-top:44px !important;padding-bottom:44px !important}}
/* No double-borders between adjacent sections */
section + section{border-top:0 !important;margin-top:0 !important}
/* Card lists in a column get consistent spacing */
section > .container > .card + .card, section > .container > div + .card, section > .container > div > .card + .card{margin-top:18px}
/* Headings inside sections don't have huge top-margin */
section h2, section h3{margin-top:0 !important}
/* First child of any section has no top margin (eliminates the "stacking" lumpy feel) */
section > .container > *:first-child{margin-top:0 !important}
/* Eyebrows always have consistent bottom margin */
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3, [class*="eyebrow"] + h1, [class*="eyebrow"] + h2, [class*="eyebrow"] + h3{margin-top:8px !important}

/* === ANTI-CRAMMING — global generous padding for "card-like" elements === */
/* Any inline-styled div with rounded border + padding gets minimum breathing room */
[style*="border-radius"][style*="padding:14"], [style*="border-radius"][style*="padding:16"], [style*="border-radius"][style*="padding:18"]{
  padding:24px !important;
}
[style*="border-radius:8px"][style*="padding:10"], [style*="border-radius:10px"][style*="padding:10"], [style*="border-radius:10px"][style*="padding:12"]{
  padding:20px 24px !important;
}
/* Inner padding-bearing divs in dark hero/callout */
[style*="background:rgba(255,255,255,.06)"], [style*="background:rgba(255,255,255,.08)"], [style*="background:rgba(255,255,255,.04)"]{
  padding:24px 28px !important;
  border-radius:12px !important;
}
/* Three-up grids get more gap */
[style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns:repeat(3"]{
  gap:24px !important;
}
@media(max-width:880px){
  [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}
/* Ensure paragraphs in cards have line-height generous */
.card p, [style*="background:#fff"] p, [style*="background:var(--surface)"] p{line-height:1.7 !important}
/* Section title margin from prior content */
.section-title, h2.section-title, h2{margin-top:0 !important}
/* Eyebrow margin */
.eyebrow, [class*="eyebrow"]{margin-bottom:14px !important;display:block}
/* List spacing inside cards */
.card ul li, .card ol li{margin-bottom:10px;line-height:1.7}

/* === COMPLIANCE DISCLOSURES — always readable === */
footer .compliance, .compliance{
  font-size:13.5px !important;
  line-height:1.7 !important;
  color:#e2e8f0 !important;
}
footer .compliance p, .compliance p{
  color:#e2e8f0 !important;
  font-size:13.5px !important;
  margin-bottom:10px !important;
}
footer .compliance strong, .compliance strong{color:#fff !important;font-weight:700 !important}

/* === FOCUS STATES (accessibility) === */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(197,160,89,.5) !important;
  outline-offset:2px;
}

/* === SCROLLBAR (luxury detail) === */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--border-soft)}
::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* === CONTRAST SAFETY — blue text on blue background never works === */
/* Any element with navy/blue background gets bright text + bright strong/em */
[style*="background:#0F2847"], [style*="background:#1a3a6a"], [style*="background:#2a4a7a"],
[style*="background:linear-gradient(135deg,#0F2847"], [style*="background:linear-gradient(135deg, #0F2847"],
[style*="background:linear-gradient(160deg,#0F2847"], [style*="background:linear-gradient(180deg,#0F2847"],
.hero, .callout-navy{
  color:#ffffff;
}
[style*="background:#0F2847"] strong, [style*="background:#1a3a6a"] strong,
[style*="background:linear-gradient(135deg,#0F2847"] strong,
[style*="background:linear-gradient(160deg,#0F2847"] strong,
.hero strong, .callout-navy strong{
  color:#ffffff !important;
}
[style*="background:#0F2847"] em, [style*="background:#1a3a6a"] em,
[style*="background:linear-gradient(135deg,#0F2847"] em,
.hero em, .callout-navy em{
  color:#C5A059 !important;  /* gold on navy = elite contrast */
  font-style:normal;
  font-weight:700;
}
[style*="background:#0F2847"] a:not(.cta-primary):not(.btn), [style*="background:#1a3a6a"] a:not(.cta-primary):not(.btn),
.hero a:not(.cta-primary):not(.btn), .callout-navy a:not(.cta-primary):not(.btn){
  color:#C5A059 !important;
}
/* Headings inside any navy block always white */
[style*="background:#0F2847"] h1, [style*="background:#0F2847"] h2, [style*="background:#0F2847"] h3, [style*="background:#0F2847"] h4,
[style*="background:#1a3a6a"] h1, [style*="background:#1a3a6a"] h2, [style*="background:#1a3a6a"] h3,
[style*="background:linear-gradient(135deg,#0F2847"] h1, [style*="background:linear-gradient(135deg,#0F2847"] h2, [style*="background:linear-gradient(135deg,#0F2847"] h3,
.hero h1, .hero h2, .hero h3, .callout-navy h1, .callout-navy h2, .callout-navy h3{
  color:#ffffff !important;
}

/* === CALC INPUT POLISH — Fidelity-style wide, easy-on-eyes === */
/* Bump the calc input column wider + bigger text */
.grid.grid-2, div.grid.grid-2{max-width:900px !important;margin:0 auto !important;grid-template-columns:1fr !important;gap:18px}
/* Stack input BELOW label, full-width, big readable */
.calc-container .row, .card .row{grid-template-columns:1fr !important;gap:8px !important;margin:16px 0 !important}
.row input[type=text], .row input[type=number], .row select, .card input[type=text], .card input[type=number], .card select{
  width:100% !important;
  padding:16px 18px !important;
  font-size:20px !important;
  font-weight:700 !important;
  border:1.5px solid var(--border) !important;
  border-radius:10px !important;
  background:#fafbfc !important;
  color:var(--navy) !important;
  text-align:right !important;
  font-variant-numeric:tabular-nums;
  transition:all .15s ease;
}
.row input:hover, .row select:hover, .card input:hover, .card select:hover{border-color:#cbd5e1;background:#fff}
.row input:focus, .row select:focus, .card input:focus, .card select:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(197,160,89,.15)}
.row label, .card .row label{font-size:16px !important;font-weight:700 !important;color:var(--navy) !important;letter-spacing:0;display:block;margin-bottom:4px}
.row label span, .card .row label span{font-size:13.5px !important;font-weight:400 !important;color:var(--text-muted) !important;display:block;margin-top:3px;letter-spacing:0;text-transform:none !important}
.row .hint, .hint{font-size:14px !important;line-height:1.6 !important;color:var(--text-muted) !important;margin-top:6px !important}
/* Slider rows */
.slider-wrap{margin:20px 0 !important}
.slider-wrap .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.slider-wrap .lbl{font-size:16px !important;font-weight:700 !important;color:var(--navy) !important}
.slider-wrap .val{font-size:18px !important;font-weight:800 !important;color:var(--navy) !important;font-family:Montserrat,sans-serif;letter-spacing:-.3px}
.slider-wrap input[type=range]{height:8px;border-radius:99px}
/* Card heading polish for THE DEAL etc. */
.card h2{font-size:14px !important;letter-spacing:1.6px !important;color:var(--gold) !important;font-weight:800 !important;margin-bottom:18px !important;padding-bottom:14px !important;border-bottom:1px solid var(--border) !important}
/* Inline gain readout text bigger */
#gainCalc, #gainReadout, [id*="gainCalc"]{font-size:15.5px !important;line-height:1.7 !important}
#gainCalc strong, #gainReadout strong{font-size:16px !important}
@media(max-width:760px){
  .row input[type=text], .row input[type=number], .row select{font-size:18px !important;padding:14px 16px !important}
  .row label{font-size:15.5px !important}
  .slider-wrap .lbl{font-size:15px !important}
  .slider-wrap .val{font-size:17px !important}
}

/* === MISC POLISH === */
.eyebrow{
  font-size:12px !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  font-weight:800 !important;
  margin-bottom:12px !important;
  display:block !important;
}
.section-title{
  font-size:34px !important;
  color:var(--navy) !important;
  margin-bottom:20px !important;
  line-height:1.18 !important;
}
.lead, .lead-text, .section-sub{
  font-size:19px !important;
  line-height:1.7 !important;
  color:var(--text) !important;
  margin-bottom:24px;
  max-width:780px;
}

/* === TABLES (always responsive) === */
table:not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table):not(#sisYearTable){font-size:15px !important}
table.rwd-tbl thead{display:table-header-group}
@media(max-width:760px){
  table.rwd-tbl thead{display:none !important}
  table.rwd-tbl tbody, table.rwd-tbl tr, table.rwd-tbl td{display:block !important;width:100%}
  table.rwd-tbl tr{background:#fff !important;border:1px solid var(--border) !important;border-radius:10px;margin-bottom:14px !important;padding:14px 16px !important;box-shadow:var(--shadow-1)}
  table.rwd-tbl td{padding:8px 0 !important;border-bottom:1px dashed var(--border-soft) !important;font-size:15px !important}
  table.rwd-tbl td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:4px}
}

/* ============================================================
   CTA BUTTON NUCLEAR — force white text on any dark CTA
   ============================================================ */
.gco-cta-phone, .gco-cta, a.gco-cta-phone, a[href^="tel:"][style*="0F2847"], a[href^="tel:"][style*="background:#0F2847"]{color:#fff !important;background:#0F2847 !important}
.gco-cta-phone *, .gco-cta *{color:#fff !important}
header nav a[href^="tel:"], .gco-header nav a[href^="tel:"], header .gco-cta-phone, .gco-header .gco-cta-phone{color:#fff !important;background:#0F2847 !important}
/* Universal: no dark text on dark backgrounds, no light text on light */
[style*="background:#0F2847"]:not(.bar-keep):not([class*="keep"]), [style*="background:#1a3a6a"], [style*="background:linear-gradient(135deg,#0F2847"]{color:#fff !important}
[style*="background:#0F2847"] h1, [style*="background:#0F2847"] h2, [style*="background:#0F2847"] h3, [style*="background:#0F2847"] h4, [style*="background:#0F2847"] strong{color:#fff !important}
[style*="background:#0F2847"] a:not(.btn):not(.gco-cta-phone){color:#C5A059 !important}

/* Defensive: any header logo img max 50px tall — prevents giant logo bug */
header img, .gco-header img{max-height:50px !important;width:auto !important;height:auto;display:inline-block}

/* ============================================================
   NUMBERED LISTS — premium feel (replaces cheap default 1. 2. 3.)
   ============================================================ */
ol{counter-reset:premium-list;list-style:none !important;padding-left:0 !important}
ol > li{counter-increment:premium-list;position:relative;padding-left:46px !important;margin-bottom:14px !important;line-height:1.65 !important}
ol > li::before{content:counter(premium-list);position:absolute;left:0;top:1px;width:30px;height:30px;background:#fff8e1;border:1.5px solid #C5A059;color:#0F2847;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;font-family:'Source Sans 3',sans-serif !important}
/* Dark backgrounds: invert numbered circle */
section[style*="background:#0F2847"] ol > li::before, .hero ol > li::before{background:rgba(197,160,89,.2);border-color:#C5A059;color:#C5A059}
/* Nested ol */
ol ol{counter-reset:premium-sub;margin-top:10px}
ol ol > li{counter-increment:premium-sub}
ol ol > li::before{content:counter(premium-sub, lower-alpha);background:#fff;border-color:#e2e8f0;font-size:12px;width:24px;height:24px}

/* ============================================================
   CTA READABILITY NUCLEAR — never let CTA text become invisible
   ============================================================ */
.cta-end, .final, [class*="cta"], section.final{color:#fff !important}
.cta-end h2, .cta-end h3, .cta-end h4, .cta-end p, .cta-end li, .cta-end span, .cta-end strong, .cta-end em, .cta-end div, .cta-end div:not([class*="btn"]){color:#fff !important}
.cta-end p, .cta-end .fine, .cta-end .small{color:#ffffff !important}
.cta-end h3{color:#fff !important;font-family:'Playfair Display',serif !important}
.cta-end .btn{display:inline-block !important;padding:14px 26px !important;border-radius:8px !important;font-weight:700 !important;font-size:15px !important;text-decoration:none !important;margin:0 6px}
.cta-end .btn.gold, .cta-end a.btn.gold, .cta-end .btn-gold{background:#C5A059 !important;color:#0F2847 !important}
.cta-end .btn.outline, .cta-end a.btn.outline, .cta-end .btn-out{border:1.5px solid rgba(255,255,255,.5) !important;color:#fff !important;background:transparent !important}
.final{color:#fff !important;background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important}
.final h2, .final h2 em, .final p, .final .lead, .final span, .final strong{color:#fff !important}
.final h2 em{color:#C5A059 !important;font-style:normal !important}
.final .lead, .final p.lead{color:#ffffff !important;font-size:19px !important}
.final .btn{display:inline-flex !important;align-items:center !important;gap:8px !important;padding:18px 32px !important;border-radius:10px !important;font-weight:700 !important;font-size:16px !important;text-decoration:none !important}
.final .btn.btn-gold, .final a.btn-gold{background:#C5A059 !important;color:#0F2847 !important}
.final .btn.btn-out, .final a.btn-out{border:1.5px solid rgba(255,255,255,.5) !important;color:#fff !important;background:transparent !important}

/* Belt-and-suspenders: pre-JS render shows static nav (no flash if JS slow) */


@keyframes gcoFadeIn{from{opacity:.5}to{opacity:1}}
/* Final CTA brighter pop */
.final h2{text-shadow:0 2px 12px rgba(0,0,0,.18) !important}
.final h2 em{color:#e3c989 !important;font-style:normal !important;text-shadow:0 2px 12px rgba(197,160,89,.3) !important}
.final .lead, .final p.lead{color:#fff !important;font-weight:500 !important;font-size:20px !important}
.final{background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important}

/* ============================================================
   WHITE HERO — explicit light-background hero, navy text
   ============================================================ */
section.hero.hero-white{background:linear-gradient(180deg,#fff 0%,#fafbfc 100%) !important;color:#0F2847 !important}
section.hero.hero-white h1, .hero-white h1{color:#0F2847 !important}
section.hero.hero-white h1 em, .hero-white h1 em{color:#C5A059 !important;font-style:normal !important}
section.hero.hero-white h2, .hero-white h2, section.hero.hero-white h3, .hero-white h3{color:#0F2847 !important}
section.hero.hero-white p, .hero-white p, section.hero.hero-white .lead, .hero-white .lead{color:#1f2937 !important}
section.hero.hero-white strong, .hero-white strong{color:#0F2847 !important;font-weight:800 !important}
section.hero.hero-white .tag, .hero-white .tag, section.hero.hero-white .eyebrow, .hero-white .eyebrow{background:#fff8e1 !important;color:#8b6b1a !important;border:1px solid #f0d97f}

/* ============================================================
   FINAL WHITE-HERO OVERRIDE (latest rule wins cascade)
   ============================================================ */
section.hero.hero-white, .hero-white{background:linear-gradient(180deg,#fff 0%,#fafbfc 100%) !important;color:#0F2847 !important}
section.hero.hero-white h1, .hero-white h1, section.hero.hero-white h2, .hero-white h2{color:#0F2847 !important}
section.hero.hero-white h1 em, .hero-white h1 em, section.hero.hero-white h2 em, .hero-white h2 em{color:#C5A059 !important;font-style:normal !important}
section.hero.hero-white p, .hero-white p, section.hero.hero-white .lead, .hero-white .lead{color:#1f2937 !important}
section.hero.hero-white strong, .hero-white strong{color:#0F2847 !important}
section.hero.hero-white .tag, .hero-white .tag{background:#fff8e1 !important;color:#8b6b1a !important;border:1px solid #f0d97f}
section.hero.hero-white .fine, .hero-white .fine{color:#5c6878 !important}
/* Make sure nav is ALWAYS visible regardless of JS timing */
header nav, .gco-header nav{visibility:visible !important;opacity:1 !important}


/* ============================================================
   ABSOLUTE LAST WORD — runs after every other rule
   Fixes: hero-white strong invisible, Final CTA washed out
   ============================================================ */
section.hero.hero-white, .hero-white, section.hero.hero-white *, .hero-white *{
  /* default cascade: everything inside hero-white starts navy unless explicitly overridden */
}
section.hero.hero-white h1, .hero-white h1{color:#0F2847 !important;font-weight:800 !important}
section.hero.hero-white h1 *, .hero-white h1 *{color:inherit !important}
section.hero.hero-white h1 em, .hero-white h1 em, section.hero.hero-white h1 .gold, .hero-white h1 .gold{color:#C5A059 !important}
section.hero.hero-white p, section.hero.hero-white .lead, .hero-white p, .hero-white .lead{color:#1f2937 !important;font-weight:500}
section.hero.hero-white p strong, section.hero.hero-white .lead strong, .hero-white p strong, .hero-white .lead strong, section.hero.hero-white strong, .hero-white strong{color:#0F2847 !important;font-weight:800 !important}
section.hero.hero-white em, .hero-white em{color:#C5A059 !important}
section.hero.hero-white .tag, .hero-white .tag{background:#fff8e1 !important;color:#8b6b1a !important;border:1px solid #f0d97f !important}
section.hero.hero-white .fine, .hero-white .fine{color:#5c6878 !important}

/* Final CTA — POP the text with shadow + bold + brighter accent */
section.final, .final{background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important;color:#fff !important}
section.final h2, .final h2{color:#fff !important;font-weight:800 !important;text-shadow:0 2px 18px rgba(0,0,0,.35) !important;font-size:44px !important;line-height:1.15 !important}
section.final h2 em, .final h2 em{color:#e3c989 !important;font-style:normal !important;text-shadow:0 2px 18px rgba(197,160,89,.45) !important}
section.final .lead, section.final p.lead, .final .lead, .final p.lead, .final p{color:#fff !important;font-weight:500 !important;font-size:20px !important;line-height:1.6 !important;text-shadow:0 1px 8px rgba(0,0,0,.25) !important;letter-spacing:.2px !important}
section.final strong, .final strong{color:#e3c989 !important;font-weight:800 !important}
section.final em, .final em{color:#e3c989 !important;font-style:normal !important}
section.final a:not(.btn), .final a:not(.btn){color:#e3c989 !important}


/* ============================================================
   CONTRAST SAFETY NET — final word on every component
   Guarantees: no white-on-white, no dark-on-dark, no blue-on-blue
   ============================================================ */

/* ---- WHITE / LIGHT BACKGROUNDS → always dark text ---- */
body, main, article, section.body-section, section.how, section.about, section.explore,
[style*="background:#fff"], [style*="background:#fafbfc"], [style*="background:#f7f8fa"],
.card, .scenario, .pie-card-light, .related,
section[class*="white"]{
  color:#1f2937;
}
body h1, body h2, body h3, body h4, body h5,
section.body-section h1, section.body-section h2, section.body-section h3,
section.how h1, section.how h2, section.how h3,
.card h2, .card h3, .scenario h3{color:#0F2847}

/* ---- DARK / NAVY BACKGROUNDS → always white text ---- */
section.hero.hero-navy, .hero-navy,
section.final, .final,
section.taxbox, .taxbox,
section[style*="background:#0F2847"], section[style*="background:#1a3a6a"],
section[style*="background:linear-gradient(135deg,#0F2847"],
section[style*="background:linear-gradient(135deg, #0F2847"],
[style*="background:#0F2847"]:not(input):not(button):not(.bar-keep):not(.btn-keep),
[style*="background:#1a3a6a"]:not(input):not(button){
  color:#fff !important;
}
section.hero.hero-navy h1, section.hero.hero-navy h2, section.hero.hero-navy h3, section.hero.hero-navy p, section.hero.hero-navy strong, section.hero.hero-navy li,
.hero-navy h1, .hero-navy h2, .hero-navy h3, .hero-navy p, .hero-navy strong, .hero-navy li,
section.final h1, section.final h2, section.final h3, section.final p, section.final strong, section.final li,
.taxbox h1, .taxbox h2, .taxbox h3, .taxbox p, .taxbox strong, .taxbox li,
section[style*="background:#0F2847"] h1, section[style*="background:#0F2847"] h2, section[style*="background:#0F2847"] h3, section[style*="background:#0F2847"] p, section[style*="background:#0F2847"] strong, section[style*="background:#0F2847"] li,
section[style*="background:linear-gradient(135deg,#0F2847"] h1, section[style*="background:linear-gradient(135deg,#0F2847"] h2, section[style*="background:linear-gradient(135deg,#0F2847"] h3, section[style*="background:linear-gradient(135deg,#0F2847"] p, section[style*="background:linear-gradient(135deg,#0F2847"] strong{
  color:#fff !important;
}
/* Gold accents preserved inside dark sections */
section.hero.hero-navy em, .hero-navy em, section.final em, .final em, .taxbox em,
section[style*="background:#0F2847"] em, section[style*="background:linear-gradient(135deg,#0F2847"] em,
.hero-navy h1 em, .hero-navy h2 em,
.pie-card .pie-card-title, .pie-card .pie-summary strong{color:#C5A059 !important;font-style:normal !important}

/* ---- WHITE/LIGHT HEROS → dark text (last word) ---- */
section.hero.hero-white, .hero-white{color:#1f2937 !important}
section.hero.hero-white h1, .hero-white h1, section.hero.hero-white h2, .hero-white h2{color:#0F2847 !important;font-weight:800 !important}
section.hero.hero-white h1 em, .hero-white h1 em{color:#C5A059 !important;font-style:normal !important}
section.hero.hero-white p, section.hero.hero-white .lead, .hero-white p, .hero-white .lead{color:#1f2937 !important;font-weight:500}
section.hero.hero-white strong, .hero-white strong{color:#0F2847 !important;font-weight:800 !important}
section.hero.hero-white .tag, .hero-white .tag{background:#fff8e1 !important;color:#8b6b1a !important;border:1px solid #f0d97f !important}
section.hero.hero-white .fine, .hero-white .fine{color:#5c6878 !important}

/* ---- CTA BUTTONS — always white text on navy, navy text on gold ---- */
a.btn-gold, .btn-gold, a.gco-btn-gold, .cta-end .btn.gold, .final .btn.btn-gold, .hero-white .btn-gold, .hero-navy .btn-gold{background:#C5A059 !important;color:#0F2847 !important;font-weight:800 !important}
a.btn-out, .btn-out, .cta-end .btn.outline, .final .btn.btn-out{border:1.5px solid rgba(255,255,255,.5) !important;color:#fff !important;background:transparent !important;font-weight:700 !important}
.hero-white .btn-out{border:1.5px solid #0F2847 !important;color:#0F2847 !important;background:transparent !important}
a[href^="tel:"].gco-cta-phone, .gco-cta-phone, header a.gco-cta-phone, .gco-header a.gco-cta-phone{background:#0F2847 !important;color:#fff !important}
a[href^="tel:"].gco-cta-phone *, .gco-cta-phone *{color:#fff !important}
.gco-cta-phone, .gco-phone{color:#fff !important}

/* ---- DROPDOWN MENU — light bg, dark text ---- */
.gco-more-menu{background:#fff !important;color:#0F2847 !important}
.gco-more-menu a{color:#0F2847 !important}
.gco-more-menu a:hover{background:#fff8e1 !important;color:#0F2847 !important}

/* ---- MOBILE DRAWER — white panel, navy text ---- */
#gcoDrawer .gco-drawer-panel{background:#fff !important}
#gcoDrawer .gco-drawer-panel a{color:#0F2847 !important}
#gcoDrawer .gco-drawer-panel a[href^="tel:"]{background:#0F2847 !important;color:#fff !important}

/* ---- PIE CARD (always navy bg, white/gold text) ---- */
.pie-card{background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important;color:#fff !important}
.pie-card .pie-card-title{color:#C5A059 !important}
.pie-card .pct{color:#fff !important}
.pie-card .lbl, .pie-card .sam{color:#ffffff !important}
.pie-card .sam strong{color:#fff !important}
.pie-card .pie-summary{color:#ffffff !important}
.pie-card .pie-summary strong{color:#C5A059 !important}

/* ---- CASCADE GUARDS — eliminate text-shadow washout where it caused readability issues ---- */
section.hero.hero-white h1{text-shadow:none !important}
section.hero.hero-white p{text-shadow:none !important}

/* ---- TABLE READABILITY ---- */
/* Use inherit so dark-bg tables (Genius year-by-year) keep their white text.
   Only force dark on tables that don't have explicit color set. */
table{color:inherit}
table thead th{color:inherit}
table tbody td{color:inherit}
/* Default tables (white bg, no explicit color) get dark text */
.body-section table:not([style*="color"]) tbody td,
section:not([style*="background:linear-gradient(135deg,#0F2847"]):not([style*="background:#0F2847"]) table:not([style*="color"]) tbody td{
  color:#1f2937;
}

/* ---- BLOCKQUOTE on any bg ---- */
blockquote{background:#fff8e1;color:#5c4a1a;border-left:4px solid #C5A059;padding:14px 18px;border-radius:0 6px 6px 0}

/* ---- Nav always visible (belt + suspenders) ---- */
header nav, .gco-header nav{visibility:visible !important;opacity:1 !important}


/* ============================================================
   VISUAL POLISH PASS — premium touches across all pages
   ============================================================ */
/* Smoother card hover lifts */
.card, .scenario, .how-card, .pie-card, .related a, .explore a{transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .18s !important}
.card:hover, .how-card:hover, .related a:hover, .explore a:hover{transform:translateY(-3px) !important;box-shadow:0 8px 24px rgba(15,40,71,.10),0 18px 40px rgba(15,40,71,.10) !important;border-color:#C5A059 !important}

/* Tighter, more luxurious section spacing on desktop */
@media(min-width:980px){
  section.body-section, section.how, section.about, section.taxbox, section.final{padding-top:80px !important;padding-bottom:80px !important}
  section.related, section.explore{padding-top:56px !important;padding-bottom:56px !important}
}

/* Premium link underline on body text */
section.body-section a:not(.btn):not(.gco-cta-phone), .body-section a:not(.btn){
  text-decoration: underline;
  text-decoration-color: rgba(197,160,89,.4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease, color .15s ease;
}
section.body-section a:not(.btn):hover{text-decoration-color:#C5A059;color:#0F2847}

/* Big-money numbers in Playfair */
.big-number, .scenario .punchline .v, .scenario [id$="Net"], .scenario [id$="Total"]:not([id*="cashTotal"]){
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing:-.4px !important;
}

/* Selection color matches brand */
::selection{background:rgba(197,160,89,.35);color:#0F2847}
::-moz-selection{background:rgba(197,160,89,.35);color:#0F2847}

/* Smooth scroll for anchor links */
html{scroll-behavior:smooth}

/* Image polish: rounded + subtle border */
section.about img, section.body-section img:not(.no-frame){border-radius:14px;box-shadow:0 4px 14px rgba(15,40,71,.10)}

/* Tag pills consistent */
.tag, .eyebrow, .brand-tag{
  display:inline-block;
  font-size:11.5px !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  padding:8px 16px !important;
  border-radius:99px !important;
}

/* Footer polish: cleaner heading hierarchy */
footer h4{color:#fff !important;font-size:13px !important;letter-spacing:1.2px !important;text-transform:uppercase !important;margin-bottom:12px !important;font-family:'Source Sans 3',sans-serif !important}
footer a{transition:color .15s ease}
footer a:hover{color:#e3c989 !important}

/* Numbered lists: prettier circles */
ol > li::before{box-shadow:0 1px 3px rgba(15,40,71,.08)}

/* Tables: a touch of polish */
table{border-collapse:collapse;width:100%}
table thead{background:#0F2847}
table tbody tr:hover{background:rgba(197,160,89,.04)}

/* Buttons: subtle press feedback */
.btn, a.btn, button{transition:transform .1s ease, box-shadow .15s ease}
.btn:active, a.btn:active, button:active{transform:translateY(1px)}


/* ============================================================
   PIE CARD TEXT POP — make every label crisp on navy
   ============================================================ */
.pie-card{background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important;color:#fff !important}
.pie-card .pie-card-title{color:#C5A059 !important;font-weight:800 !important;letter-spacing:2px !important}
.pie-card .pct{color:#fff !important;font-weight:800 !important}
.pie-card .lbl{color:#fff !important;font-weight:800 !important;letter-spacing:1.2px !important}
.pie-card .sam{color:#fff !important;font-weight:500 !important}
.pie-card .sam strong{color:#C5A059 !important;font-weight:800 !important}
.pie-card .pie-summary{color:#fff !important;font-weight:500 !important}
.pie-card .pie-summary strong{color:#C5A059 !important;font-weight:800 !important}


/* ============================================================
   ELITE FINISH — small refinements that scream "premium"
   ============================================================ */
/* Refined hover lifts */
.card:hover, .scenario:hover, .how-card:hover, .related a:hover{transform:translateY(-4px) !important;transition:transform .25s cubic-bezier(.2,.8,.2,1) !important;box-shadow:0 12px 28px rgba(15,40,71,.12),0 24px 50px rgba(15,40,71,.10) !important}

/* Subtle inline-link hover (gold underline grows) */
section a:not(.btn):not(.gco-cta-phone):not(.gco-phone):not([class*="btn"]){
  background-image:linear-gradient(transparent calc(100% - 2px), #C5A059 2px);
  background-repeat:no-repeat;
  background-size:0 100%;
  transition:background-size .25s cubic-bezier(.2,.8,.2,1);
}
section a:not(.btn):not(.gco-cta-phone):not(.gco-phone):hover{
  background-size:100% 100%;
}

/* Headings get a subtle text-rendering optimization */
h1, h2, h3{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Premium serif italic for em inside headings */
h1 em, h2 em{font-style:normal;color:#C5A059}

/* Big numbers get tighter letterspacing */
.big-number, .punchline .v, [class*="-num"]{font-feature-settings:"tnum" 1, "lnum" 1;letter-spacing:-.5px !important}

/* Subtle page-load fade-in on hero */
section.hero{animation:gcoFadeUp .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes gcoFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Refined scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#fafbfc}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Premium focus rings (accessibility + polish) */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid #C5A059;outline-offset:3px;border-radius:4px}

/* Image rendering polish */
img{image-rendering:-webkit-optimize-contrast}


/* ============================================================
   LUXURY TIER — refined micro-details
   ============================================================ */

/* Refined navy & gold palette (subtle deepening) */
:root{
  --navy-rich:#0a1d3a;
  --gold-rich:#b8954a;
  --gold-glow:rgba(197,160,89,.5);
}

/* Headlines: tighter optical tracking + slight weight refinement */
h1, h2, h3, .h1, .h2, .h3,
h1.gco, h2.gco, h3.gco{
  font-feature-settings:"liga" 1,"kern" 1,"calt" 1 !important;
  -webkit-font-feature-settings:"liga" 1,"kern" 1;
  letter-spacing:-.4px !important;
  text-rendering:geometricPrecision;
}

/* Hero h1: bigger, more confident on desktop */
@media(min-width:880px){
  section.hero h1, .hero h1{font-size:62px !important;line-height:1.04 !important;letter-spacing:-.8px !important;font-weight:800}
  section.hero h2, .hero h2{font-size:42px !important}
}

/* Body type: refined leading + slight letterspacing */
body{
  font-feature-settings:"liga" 1,"kern" 1 !important;
  -webkit-font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
}

/* Card polish: subtler border, deeper hover lift, refined shadow */
.card, .scenario, .how-card{
  border:1px solid rgba(15,40,71,.08) !important;
  box-shadow:0 1px 2px rgba(15,40,71,.04), 0 4px 12px rgba(15,40,71,.06) !important;
  transition:transform .35s cubic-bezier(.16,.86,.36,1), box-shadow .35s cubic-bezier(.16,.86,.36,1), border-color .25s !important;
}
.card:hover, .scenario:hover, .how-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(197,160,89,.4) !important;
  box-shadow:0 4px 14px rgba(15,40,71,.08), 0 24px 56px rgba(15,40,71,.12), 0 0 0 1px rgba(197,160,89,.15) !important;
}

/* Buttons: refined letterspacing, premium hover */
.btn, a.btn, button.btn, .btn-gold, .btn-out, [class*="cta"] a{
  letter-spacing:.5px !important;
  text-transform:none;
  transition:all .25s cubic-bezier(.16,.86,.36,1) !important;
}
.btn-gold:hover, a.btn-gold:hover{
  background:#d8b56e !important;
  box-shadow:0 8px 20px rgba(197,160,89,.35) !important;
  transform:translateY(-2px);
}
.btn-out:hover, a.btn-out:hover{
  background:rgba(255,255,255,.08) !important;
  transform:translateY(-2px);
}

/* Section dividers: subtle gold hairlines between sections */
section + section{
  position:relative;
}
section + section::before{
  content:"";
  position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:60px;height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(197,160,89,.4) 50%, transparent 100%);
}

/* Tag pills: refined gold ring */
.tag, .eyebrow, .brand-tag{
  background:linear-gradient(180deg,#fffbe6 0%,#fff8e1 100%) !important;
  color:#8b6b1a !important;
  border:1px solid rgba(197,160,89,.35) !important;
  box-shadow:0 1px 2px rgba(197,160,89,.10), inset 0 1px 0 rgba(255,255,255,.6) !important;
  padding:8px 18px !important;
  font-weight:800 !important;
  letter-spacing:1.8px !important;
}

/* Number rendering: tabular figures for all big numbers */
.big-number, .punchline .v, [class*="-num"], .scenario .v{
  font-feature-settings:"tnum" 1, "lnum" 1, "ss01" 1 !important;
  letter-spacing:-.6px !important;
}

/* Refined link hover (the gold underline animation) */
section a:not(.btn):not(.gco-cta-phone):not(.gco-phone):not([class*="btn"]):not(.gco-logo){
  background-image:linear-gradient(transparent calc(100% - 1.5px), #C5A059 1.5px) !important;
  background-repeat:no-repeat !important;
  background-size:0 100% !important;
  transition:background-size .35s cubic-bezier(.16,.86,.36,1), color .2s !important;
}
section a:not(.btn):not(.gco-cta-phone):not(.gco-phone):hover{
  background-size:100% 100% !important;
  color:#0F2847 !important;
}

/* Refined images — premium frame */
.about img, section.body-section img:not(.no-frame), .photo-frame img{
  border-radius:14px !important;
  box-shadow:0 4px 14px rgba(15,40,71,.10), 0 1px 3px rgba(15,40,71,.06) !important;
}

/* Footer: refined typography */
footer{
  letter-spacing:.2px;
}
footer h4{
  font-family:'Source Sans 3',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:1.5px !important;
}

/* Smooth scroll snap on sections (premium feel without jankiness) */
html{scroll-behavior:smooth;scroll-padding-top:90px}

/* Refined scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(197,160,89,.35);border-radius:4px;border:2px solid #fff}
::-webkit-scrollbar-thumb:hover{background:rgba(197,160,89,.6)}

/* Hero stage: more dramatic on desktop */
@media(min-width:980px){
  section.hero{padding-top:96px !important;padding-bottom:120px !important}
}

/* Pie card refinement (homepage navy card) */
.pie-card{
  box-shadow:0 8px 24px rgba(15,40,71,.18), 0 32px 80px rgba(15,40,71,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
  border:1px solid rgba(197,160,89,.18) !important;
}


/* ============================================================
   UNIVERSAL MOBILE SVG / DIAGRAM HANDLING (no :has() dependency)
   ============================================================ */
@media(max-width:780px){
  /* Scroll container ONLY for wide diagram SVGs (viewBox >= 800 wide), NOT for pies/icons */
  div:has(> svg[viewBox^="0 0 800"]),
  div:has(> svg[viewBox^="0 0 900"]),
  div:has(> svg[viewBox^="0 0 1000"]),
  div:has(> svg[viewBox^="0 0 1100"]),
  div:has(> svg[viewBox^="0 0 1200"]),
  .svg-wrap, [data-svg-scroll]{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    max-width:100%;
  }
  /* Wide SVGs get min-width to preserve readability */
  svg[viewBox^="0 0 1000"],
  svg[viewBox^="0 0 1100"],
  svg[viewBox^="0 0 900"],
  svg[viewBox^="0 0 800"],
  svg[viewBox^="0 0 1200"]{
    min-width:680px !important;
    height:auto !important;
  }
  /* If a wide SVG is direct child of a card, give the card scroll behavior */
  .card svg[viewBox^="0 0 1"],
  .card svg[viewBox^="0 0 9"],
  .card svg[viewBox^="0 0 8"]{display:block}
  /* All images responsive */
  img{max-width:100% !important;height:auto !important}
  /* Tables become scrollable horizontally */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  table thead, table tbody{display:table;width:100%}
}

/* Phone CTA hardening — even more aggressive override */
.gco-cta-phone, a.gco-cta-phone, a.gco-phone{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  min-width:170px !important;
  justify-content:center !important;
  background:#0F2847 !important;
  color:#fff !important;
  line-height:1 !important;
}
.gco-cta-phone svg, a.gco-cta-phone svg, a.gco-phone svg{
  flex-shrink:0 !important;
  display:inline-block !important;
  width:14px !important;
  height:14px !important;
  stroke:#fff !important;
}
.gco-cta-phone span, a.gco-cta-phone span, a.gco-phone span{
  color:#fff !important;
  white-space:nowrap !important;
}


/* ============================================================
   APPLE-ELITE REFINEMENT — restraint, rhythm, mobile fit
   ============================================================ */

/* SYSTEM PRINCIPLE: 8pt grid spacing rhythm */
:root{
  --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:64px;--space-7:88px;--space-8:120px;
}

/* TYPOGRAPHY: tighten weights, reduce color noise */
body{
  font-feature-settings:"liga" 1, "kern" 1, "calt" 1, "ss01" 1 !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  letter-spacing:-.005em;
  color:#0F2847;
}

/* Headings: refined letter-spacing + tighter line-height (Apple style) */
h1, h2, h3, .h1, .h2, .h3{
  font-feature-settings:"liga" 1, "kern" 1, "ss01" 1 !important;
  letter-spacing:-.03em !important;
  line-height:1.1 !important;
  font-weight:800 !important;
}
@media(min-width:980px){
  section.hero h1, .hero h1{font-size:64px !important;line-height:1.02 !important;letter-spacing:-.04em !important}
}

/* RESTRAINED GOLD — use only for highlights, not everywhere */
em, strong em{color:#C5A059;font-style:normal}
.tag, .eyebrow, .brand-tag{
  background:transparent !important;
  border:1px solid rgba(197,160,89,.4) !important;
  color:#8b6b1a !important;
  padding:6px 14px !important;
  letter-spacing:1.6px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

/* SUBTLE shadows — restraint > drama */
.card, .scenario, .how-card{
  box-shadow:0 1px 3px rgba(15,40,71,.04), 0 4px 12px rgba(15,40,71,.04) !important;
  border:1px solid rgba(15,40,71,.06) !important;
}
.card:hover, .scenario:hover, .how-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 4px 14px rgba(15,40,71,.06), 0 16px 40px rgba(15,40,71,.10) !important;
  border-color:rgba(197,160,89,.30) !important;
}

/* SECTIONS: more breathing room (Apple-style whitespace) */
section.body-section, section.how, section.about, section.taxbox, section.final{
  padding-top:96px !important;
  padding-bottom:96px !important;
}
@media(max-width:880px){
  section.body-section, section.how, section.about, section.taxbox, section.final{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }
}

/* MOBILE TABLE FIX — all wide tables become horizontal-scroll cards */
@media(max-width:780px){
  table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    white-space:nowrap !important;
    border:1px solid rgba(15,40,71,.08) !important;
    border-radius:8px !important;
  }
  table thead, table tbody, table tr{display:table !important;width:100% !important;table-layout:fixed}
  table th, table td{
    padding:11px 10px !important;
    font-size:13.5px !important;
    white-space:nowrap !important;
  }
  table thead th{font-size:11px !important;letter-spacing:1.2px !important}
  /* For the Genius table specifically — keep it readable */
  table tbody td:first-child{position:sticky;left:0;background:inherit;z-index:1}
}

/* MOBILE TYPE BUMP — make body text comfortable on phone */
@media(max-width:780px){
  body{font-size:17px !important;line-height:1.65 !important}
  h1{font-size:32px !important}
  h2{font-size:24px !important}
  h3{font-size:19px !important}
  .hero h1{font-size:32px !important;line-height:1.12 !important}
  .hero p, .hero .lead{font-size:17px !important;line-height:1.55 !important}
  p, li{font-size:16px !important;line-height:1.65 !important}
  section{padding-left:20px !important;padding-right:20px !important}
}

/* BUTTONS — Apple-style refined */
.btn, a.btn, button.btn, .btn-gold, .btn-out, [class*="cta"] a.btn{
  border-radius:980px !important;  /* Apple-style fully rounded pills */
  padding:14px 28px !important;
  font-weight:600 !important;
  letter-spacing:-.005em !important;
  transition:all .2s cubic-bezier(.4,0,.2,1) !important;
  min-height:48px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.btn-gold:hover, a.btn-gold:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(197,160,89,.30) !important;
}
.btn-out:hover, a.btn-out:hover{
  background:rgba(255,255,255,.06) !important;
}

/* GRID SYSTEMS — uniform mobile collapse */
@media(max-width:780px){
  [class*="grid"], [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:repeat(2"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
}

/* HERO STAGE — bigger, more dramatic (Apple landing-page style) */
@media(min-width:980px){
  section.hero{
    padding-top:120px !important;
    padding-bottom:140px !important;
    min-height:auto;
  }
}

/* The Genius table on mobile — tighten + ensure scroll */
@media(max-width:780px){
  section table[style*="border-collapse:collapse"]{font-size:12.5px !important}
  section table th, section table td{padding:10px 8px !important}
}

/* SVG diagrams on mobile — ensure scroll containers ONLY for wide diagram SVGs (viewBox >= 800 wide), NOT for small icons or pie charts */
@media(max-width:780px){
  div:has(> svg[viewBox^="0 0 800"]),
  div:has(> svg[viewBox^="0 0 900"]),
  div:has(> svg[viewBox^="0 0 1000"]),
  div:has(> svg[viewBox^="0 0 1100"]),
  div:has(> svg[viewBox^="0 0 1200"]){
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:16px !important;
  }
  svg[viewBox^="0 0 800"],
  svg[viewBox^="0 0 900"],
  svg[viewBox^="0 0 1000"],
  svg[viewBox^="0 0 1100"],
  svg[viewBox^="0 0 1200"]{min-width:680px !important}
}

/* Refined focus rings — Apple-style */
*:focus-visible{
  outline:2px solid #007AFF !important;
  outline-offset:2px;
}
button:focus-visible, a:focus-visible{
  outline:2px solid #C5A059 !important;
}

/* Image rendering polish */
img{image-rendering:-webkit-optimize-contrast}

/* Footer: more refined */
footer{padding:48px 0 !important;font-size:14px !important;letter-spacing:.2px}


/* ============================================================
   STEVE JOBS MOBILE POLISH — kill cramping site-wide
   ============================================================ */
@media(max-width:780px){
  /* Any element using fixed-width grid with text labels — make sure text doesn't wrap word-by-word */
  [style*="grid-template-columns:140px"],
  [style*="grid-template-columns:160px"],
  [style*="grid-template-columns:170px"],
  [style*="grid-template-columns:180px"]{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }

  /* (Tables are handled by .gco-table-wrap auto-injected by nav.js — no display:block hacks) */
  /* (Eyebrow tags MUST wrap on mobile, see MOBILE OVERFLOW FIX below) */

  /* Card text doesn't get crushed by tight padding */
  .card, .scenario, .how-card{padding:24px 20px !important}

  /* Big bold numbers stay on one line */
  [class*="big-num"], [id*="Total"], [id*="Net"], [class*="punchline"] > .v{
    white-space:nowrap !important;
  }
}


/* ============================================================
   MOBILE TABLE RESPONSE — proper pattern, no layout breakage
   Tables stay tables; a wrapper div handles horizontal scroll.
   The companion JS in nav.js auto-wraps every <table> at load.
   ============================================================ */
.gco-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  margin-bottom:1em;
}
.gco-table-wrap table{
  margin-bottom:0;
}
@media(max-width:780px){
  .gco-table-wrap::-webkit-scrollbar{height:6px;background:rgba(15,40,71,.04);border-radius:3px}
  .gco-table-wrap::-webkit-scrollbar-thumb{background:rgba(197,160,89,.5);border-radius:3px}
  /* Tables get a soft hint if there's hidden content to the right */
  .gco-table-wrap{
    background:linear-gradient(to right,#fff 0%,#fff 95%,rgba(197,160,89,.06) 100%);
  }
  .gco-table-wrap table th, .gco-table-wrap table td{
    white-space:nowrap;
    padding:10px 14px;
    font-size:13.5px;
  }
  /* GRIDS — collapse 3-col to 1, 4-col to 2 on mobile (skip special classes) */
  [style*="grid-template-columns:1fr 1fr 1fr"]:not([class*="bracket"]):not([class*="mtn"]):not([class*="hans"]):not([class*="leverage"]):not([class*="decision"]):not([class*="adv-row"]){
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  @media(max-width:520px){
    [style*="grid-template-columns:1fr 1fr"]:not([class*="bracket"]):not([class*="hp-bracket"]):not([class*="mtn"]):not([class*="adv-row"]){
      grid-template-columns:1fr !important;
    }
  }
  /* Big numbers don't break mid-value */
  [class*="big-num"], .punchline .v{
    white-space:nowrap !important;
    word-break:keep-all !important;
  }
}

/* Make the scroll behavior visible (mobile scroll hint) */
@media(max-width:780px){
  div[style*="overflow-x:auto"]::-webkit-scrollbar{height:6px;background:rgba(15,40,71,.04);border-radius:3px}
  div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb{background:rgba(197,160,89,.5);border-radius:3px}
  table::-webkit-scrollbar{height:6px;background:rgba(15,40,71,.04)}
  table::-webkit-scrollbar-thumb{background:rgba(197,160,89,.5);border-radius:3px}
}

/* Ensure section containers don't clip the scrollable tables */
@media(max-width:780px){
  section{overflow-x:hidden !important}
  section > div, section > .container, section > [style*="max-width"]{overflow-x:visible !important}
}

/* ============================================================
   CONTRAST SAFETY NET — gold-bg + white-text is unreadable
   Force navy text on any gold background, regardless of inline styles
   ============================================================ */
/* ONLY target the exact element that has both gold-bg AND white-text inline.
   Earlier descendant selector forced navy text onto navy buttons nested
   inside gold callouts → blue-on-blue. */
[style*="background:#C5A059"][style*="color:#fff"],
[style*="background: #C5A059"][style*="color:#fff"],
[style*="background:#C5A059"][style*="color: #fff"]{
  color:#0F2847 !important;
}

/* BLUE-ON-BLUE GUARD — site-wide. Any hero or CTA section with navy
   gradient bg gets white text. Catches calculator + tools + any other
   page that uses .cta-section or .hero with linear-gradient navy bg.
   The earlier `.hero-navy` rule didn't catch generic `.hero` sections. */
section.cta-section, section.cta-section h1, section.cta-section h2, section.cta-section h3,
section[class*="cta"] h1, section[class*="cta"] h2, section[class*="cta"] h3,
.cta-section h2, .cta-section h3,
section.hero, section.hero h1, section.hero h2, section.hero h3,
.hero, .hero h1, .hero h2, .hero h3{
  color:#fff !important;
}
section.hero p, section.hero p.lead, section.hero .lead,
.hero p, .hero p.lead, .hero .lead,
section.cta-section p, .cta-section p,
section[class*="cta"] p{
  color:#ffffff !important;
  opacity:1 !important;
}
section.hero h1 em, section.hero h2 em, .hero h1 em, .hero h2 em,
.cta-section h2 em, .cta-section h3 em,
section[class*="cta"] em{
  color:#C5A059 !important;
}
/* Exception: white-bg heroes keep their dark text */
section.hero.hero-white h1, section.hero.hero-white h2, .hero-white h1, .hero-white h2{
  color:#0F2847 !important;
}
section.hero.hero-white p, section.hero.hero-white .lead, .hero-white p, .hero-white .lead{
  color:#1f2937 !important;
}
/* Same for dim-gold text on cream */
[style*="background:#fff8e1"][style*="color:#b8860b"],
[style*="background: #fff8e1"][style*="color:#b8860b"]{
  color:#6b4708 !important;
}

/* ============================================================
   MOBILE OVERFLOW FIX — eyebrow pills overflowing viewport
   playwright audit at 375px found 17 pages with overflowing
   ".tag" / ".eyebrow" pills due to long single-line text
   ============================================================ */
@media(max-width:520px){
  .hero .tag, .hero .eyebrow, .eyebrow, span.tag{
    white-space:normal !important;
    line-height:1.4 !important;
    max-width:calc(100% - 28px) !important;
    word-break:break-word !important;
    display:inline-block !important;
  }
  .hero h1, .hero h2, h1, h2{
    word-break:break-word !important;
    overflow-wrap:break-word !important;
  }
  .hero em, h1 em, h2 em{
    word-break:break-word !important;
    overflow-wrap:break-word !important;
  }
}

/* ============================================================
   COMPREHENSIVE MOBILE EVERYTHING — typography, spacing, sizing
   Final pass: tackles every section, font, dimension on mobile.
   ============================================================ */
@media(max-width:780px){
  /* Body baseline — comfortable read size */
  body{font-size:16px !important;line-height:1.6 !important}

  /* Headings — generous + balanced */
  h1{font-size:30px !important;line-height:1.12 !important;letter-spacing:-.3px !important;margin-bottom:14px !important}
  h2{font-size:24px !important;line-height:1.2 !important;letter-spacing:-.2px !important;margin:28px 0 12px !important}
  h3{font-size:19px !important;line-height:1.25 !important;margin:20px 0 10px !important}
  h4{font-size:16px !important;line-height:1.3 !important}

  /* Hero — keep big and centered */
  .hero h1, section.hero h1{font-size:32px !important;line-height:1.1 !important}
  .hero h2, section.hero h2{font-size:28px !important;line-height:1.15 !important}
  .hero p, .hero .lead, section.hero p, section.hero .lead{font-size:16.5px !important;line-height:1.55 !important;max-width:100% !important}

  /* Body copy — readable */
  p, li{font-size:16px !important;line-height:1.65 !important}
  p strong, li strong{font-weight:700}
  .body-section p, .body-section li{font-size:16.5px !important;line-height:1.7 !important;margin-bottom:14px !important}
  .body-section h2{font-size:24px !important;margin-top:32px !important;margin-bottom:12px !important}
  .body-section h3{font-size:20px !important;margin-top:24px !important;margin-bottom:10px !important}

  /* Lists — proper indent */
  ul, ol{padding-left:22px !important;margin:12px 0 18px !important}
  li{margin-bottom:6px !important}

  /* Section padding — breathing room */
  section{padding-top:44px !important;padding-bottom:44px !important}
  .hero, section.hero{padding-top:36px !important;padding-bottom:36px !important}

  /* Container padding — unified with Margin Police standard (32px mobile) */
  .container, [class*="container"], .body-section > div{padding-left:32px !important;padding-right:32px !important}
  .body-section{padding:48px 0 !important}

  /* Buttons — finger-friendly */
  .btn, button, a.btn, a.gco-cta, .gco-cta{
    min-height:48px !important;
    padding:14px 22px !important;
    font-size:15px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Cards — comfy padding */
  .card, .scenario, .how-card, .ds-card, .liq-bucket, .result-card, .tool-card,
  [class*="callout"], [class*="-card"]{
    padding:22px 20px !important;
    border-radius:12px !important;
  }

  /* Eyebrow pills — wrap nicely */
  .tag, .eyebrow, span.tag, .pill, .badge{
    font-size:11px !important;
    padding:6px 12px !important;
    line-height:1.4 !important;
    white-space:normal !important;
    word-break:break-word !important;
    max-width:calc(100vw - 36px) !important;
    display:inline-block !important;
  }

  /* Big numbers — keep crisp, no wrap */
  [class*="big-num"], [class*="punchline"] > .v, .stat-num, .ic-num{
    white-space:nowrap !important;
    word-break:keep-all !important;
    font-size:28px !important;
    line-height:1.1 !important;
  }

  /* Tables — restrained mobile typography */
  table th, table td{font-size:13.5px !important;padding:9px 10px !important;line-height:1.4 !important}
  table th{font-size:10.5px !important;letter-spacing:1px !important}

  /* Inputs — tap-comfortable */
  input[type=text], input[type=number], input[type=email], select, textarea{
    font-size:16px !important;  /* prevents iOS zoom-on-focus */
    padding:13px 14px !important;
    border-radius:10px !important;
  }
  /* Sliders — bigger thumb on mobile */
  input[type=range]::-webkit-slider-thumb{width:28px !important;height:28px !important}
  input[type=range]::-moz-range-thumb{width:28px !important;height:28px !important}

  /* Footer — single column */
  footer{padding:32px 18px !important;font-size:13px !important}
  footer .container, footer .ftr{grid-template-columns:1fr !important;gap:18px !important}
  footer .compliance{font-size:12px !important;line-height:1.6 !important}
}

/* SVG mobile fit — body content SVGs must never overflow viewport */
@media(max-width:780px){
  body svg{max-width:100% !important;height:auto !important}
  body svg[viewBox^="0 0 1000"], body svg[viewBox^="0 0 1100"], body svg[viewBox^="0 0 1200"]{min-width:680px !important}
}

/* ============================================================
   2-COL TABLES REFLOW TO DEFINITION-LIST STYLE ON MOBILE
   Fixes the Q&A text-bleed bug on /not-a-dst/ and similar pages.
   Wider tables (≥3 cols) stay as horizontal scrolling via .gco-table-wrap.
   ============================================================ */
@media(max-width:600px){
  /* Detect 2-col tables by checking the first row has exactly 2 cells */
  .gco-table-wrap table:not([data-keep-cols]) {
    width: 100% !important;
    display: block !important;
  }
  .gco-table-wrap table:not([data-keep-cols]) thead {
    display: none !important;  /* Hide thead — labels become inline within reflowed cells */
  }
  .gco-table-wrap table:not([data-keep-cols]) tbody,
  .gco-table-wrap table:not([data-keep-cols]) tr {
    display: block !important;
    width: 100% !important;
  }
  .gco-table-wrap table:not([data-keep-cols]) tr {
    border-bottom: 1px solid #e8edf3 !important;
    padding: 12px 0 !important;
    background: transparent !important;
  }
  .gco-table-wrap table:not([data-keep-cols]) td {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .gco-table-wrap table:not([data-keep-cols]):not(.genius-tbl):not([style*="color:#fff"]) td:first-child {
    font-weight: 700 !important;
    color: #0F2847 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }
  .gco-table-wrap table:not([data-keep-cols]):not(.genius-tbl):not([style*="color:#fff"]) td:not(:first-child) {
    color: #5c6878 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  /* Only apply reflow to tables with exactly 2 columns — others scroll */
  .gco-table-wrap table:has(tbody tr:first-child td:nth-child(3)){
    display: table !important;
  }
  .gco-table-wrap table:has(tbody tr:first-child td:nth-child(3)) tbody,
  .gco-table-wrap table:has(tbody tr:first-child td:nth-child(3)) tr,
  .gco-table-wrap table:has(tbody tr:first-child td:nth-child(3)) td,
  .gco-table-wrap table:has(tbody tr:first-child td:nth-child(3)) thead{
    display: revert !important;
  }
}

/* iPhone SE and narrow phones (<400px) — even tighter */
@media(max-width:400px){
  body{font-size:15.5px !important}
  .hero h1, section.hero h1{font-size:28px !important}
  .hero h2, section.hero h2{font-size:24px !important}
  h2{font-size:22px !important}
  .body-section p, .body-section li{font-size:16px !important}
  /* Tiny phones — unified with Margin Police standard (26px) */
  .container, [class*="container"], .body-section > div{padding-left:26px !important;padding-right:26px !important}
  .card, .result-card, .tool-card{padding:18px 16px !important}
  [class*="big-num"]{font-size:24px !important}
}

/* ============================================================
   NUCLEAR FINAL — every body table becomes a card-stack on mobile.
   No more horizontal scroll. Every row stacks as a card; cells
   stack vertically inside the card with bold first-cell labels.
   ============================================================ */
@media(max-width:600px){
  /* Every body table reflows */
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl){
    display:block !important;
    width:100% !important;
    border:none !important;
    background:transparent !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) thead{
    display:none !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) tbody,
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) tr{
    display:block !important;
    width:100% !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) tr{
    background:#fff !important;
    border:1px solid #e8edf3 !important;
    border-radius:10px !important;
    padding:14px 16px !important;
    margin-bottom:12px !important;
    box-shadow:0 2px 8px rgba(15,40,71,.04) !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) td{
    display:block !important;
    width:100% !important;
    padding:6px 0 !important;
    border:none !important;
    text-align:left !important;
    white-space:normal !important;
    line-height:1.5 !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) td:first-child{
    font-weight:700 !important;
    color:#0F2847 !important;
    font-size:14.5px !important;
    margin-bottom:6px !important;
    padding-bottom:8px !important;
    border-bottom:1px solid #f0f4f9 !important;
  }
  body:not(.no-reflow) table:not(.keep-cols):not([data-keep]):not(.genius-tbl) td:not(:first-child){
    color:#1f2937 !important;
    font-size:15px !important;
    padding-top:4px !important;
  }
  /* ===== GENIUS TABLE: keep readable on mobile ===== */
  .genius-tbl td:first-child{color:#fff !important;font-weight:700 !important}
  .genius-tbl tbody td[style*="#e76060"]{color:#e76060 !important}
  .genius-tbl tbody td[style*="#7fcfa9"]{color:#7fcfa9 !important}
  .genius-tbl tbody td[style*="#C5A059"]{color:#C5A059 !important}
  .genius-tbl tbody tr:last-child td{color:#fff !important;font-weight:800 !important}
  .genius-tbl tbody tr:last-child td[style*="#e76060"]{color:#e76060 !important}
  .genius-tbl tbody tr:last-child td[style*="#7fcfa9"]{color:#7fcfa9 !important}
  .genius-tbl tbody tr:last-child td[style*="#C5A059"]{color:#C5A059 !important}
  /* Kill any horizontal-scroll on the wrapper since reflow handles it */
  .gco-table-wrap{
    overflow:visible !important;
    background:transparent !important;
  }

  /* Images: ALWAYS fit viewport AND widen to full width so they don't feel narrow */
  body img:not(.gco-logo img){
    max-width:100% !important;
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  /* Side-by-side image grids → stack on mobile so each photo gets full width */
  [class*="img-grid"], [class*="photo-grid"], [class*="mtn-grid"]{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  /* Image-pair sections */
  [style*="grid-template-columns:1fr 1fr"] img,
  [style*="grid-template-columns:repeat(2"] img{
    width:100% !important;
    max-width:100% !important;
  }
  /* Headers/footers keep their image sizing */
  header img, footer img{max-width:none !important;width:auto !important;margin:0 !important}
}

/* ============================================================
   FINAL MOBILE — WIDEN EVERYTHING + BIGGER TEXT
   User feedback: site feels too narrow; text too small on mobile.
   ============================================================ */
@media(max-width:780px){
  /* MAX-WIDTH containers — let them fill the viewport edge-to-edge */
  .container, [class*="container"], [class*="-inner"],
  .body-section > div, section > div, .hero-inner, .calc-shell{
    max-width:100% !important;
    width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Inner cards reach the edges */
  .card, .scenario, .how-card, .result-card, .tool-card, .liq-bucket,
  .pie-card, [class*="callout"]{
    width:100% !important;
    max-width:100% !important;
  }

  /* WIDEN text blurbs */
  p, li, .lead, .pie-summary, .ds-lead, blockquote{
    max-width:100% !important;
    width:auto !important;
  }

  /* TEXT SIZES — bigger */
  body, p, li{font-size:17px !important;line-height:1.65 !important}
  .body-section p, .body-section li{font-size:17.5px !important;line-height:1.7 !important}
  h1{font-size:34px !important;line-height:1.1 !important;letter-spacing:-.3px !important}
  h2{font-size:28px !important;line-height:1.18 !important;letter-spacing:-.2px !important}
  h3{font-size:22px !important;line-height:1.25 !important}
  .hero h1, section.hero h1{font-size:36px !important;line-height:1.06 !important}
  .hero h2, section.hero h2{font-size:30px !important}
  .hero p, .hero .lead{font-size:18px !important;line-height:1.55 !important}
  /* Buttons larger */
  .btn, a.btn, button.btn{font-size:16.5px !important;padding:16px 26px !important}
  /* Eyebrow pills slightly bigger */
  .tag, .eyebrow, .hero .tag, .hero .eyebrow{font-size:12px !important;padding:7px 14px !important}
  /* Card padding — comfy but not huge so content stays wide */
  .card, .scenario, .result-card, .tool-card, .liq-bucket, .pie-card,
  .how-card, [class*="callout"]{padding:24px 18px !important}
  /* Result-card big-num bigger */
  .result-card .big-num{font-size:34px !important}
  .delta-callout .big{font-size:38px !important}
  .ic-num{font-size:30px !important}
  /* Stat-bars bigger */
  [class*="stat-num"], [class*="big-num"]{font-size:32px !important}

  /* Images: fill width */
  img{width:100% !important;max-width:100% !important;height:auto !important}
  header img, footer img, .gco-logo img{width:auto !important;max-width:none !important}
}

@media(max-width:420px){
  /* iPhone SE — slightly trim padding but keep text big */
  body, p, li{font-size:16.5px !important}
  .body-section p, .body-section li{font-size:17px !important}
  h1{font-size:30px !important}
  .hero h1, section.hero h1{font-size:32px !important}
  h2{font-size:25px !important}
}

/* ============================================================
   KILL DOUBLE-PADDING ON MOBILE — make content fill viewport
   Many sections have inline style="padding:0 32px" containers
   wrapping cards that ALSO have padding. On mobile, both stack
   = ~60px of wasted side space. Override aggressively.
   ============================================================ */
@media(max-width:780px){
  /* Outer wrapper divs with inline padding → kill on mobile */
  [style*="padding:0 32px"],
  [style*="padding:0 28px"],
  [style*="padding:0 24px"],
  [style*="padding:0 20px"]{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  [style*="padding:0 36px"],
  [style*="padding:48px 40px"],
  [style*="padding:40px 36px"]{
    padding-left:10px !important;
    padding-right:10px !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
  /* Inner cards/callouts — trim their own padding so content gets more width */
  [style*="padding:32px 28px"],
  [style*="padding:36px"],
  [style*="padding:30px 28px"],
  [style*="padding:30px 34px"],
  [style*="padding:28px 26px"],
  [style*="padding:24px 26px"]{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Generic max-width containers fill the viewport */
  [style*="max-width:1100px"],
  [style*="max-width:1080px"],
  [style*="max-width:1140px"],
  [style*="max-width:920px"],
  [style*="max-width:760px"]{
    max-width:100% !important;
  }
  /* Sections that wrap content */
  section{padding-left:8px !important;padding-right:8px !important}
  section.hero{padding-left:0 !important;padding-right:0 !important}
  .hero-inner{padding:0 16px !important}
  /* The big cards (.calc-card, .pie-card, .delta-callout, etc.) get edge-to-edge */
  .calc-card, .pie-card, .delta-callout, .liq-bucket, .income-callout, .adv-panel,
  [class*="result-card"], [class*="tool-card"], [class*="how-card"], [class*="ds-card"]{
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* ============================================================
   ULTRA WIDE — every container fills 95%+ of viewport on mobile
   Aggressive: kill nested padding stacking that creates narrow content
   ============================================================ */
@media(max-width:780px){
  /* SECTIONS: minimal side padding (was eating space) */
  section, .section, body > section{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  /* SECTION INNER WRAPPERS (the divs with style="max-width:...padding:0 32px") */
  section > div:not([class*="card"]):not([class*="callout"]):not([class*="bucket"]):not([class*="pie"]):not([class*="genius"]),
  section > div[style*="max-width"]:not([class*="card"]):not([class*="callout"]){
    padding-left:0 !important;
    padding-right:0 !important;
    max-width:100% !important;
  }
  /* CARDS: comfy padding but content fills */
  .calc-card, .result-card, .tool-card, .liq-bucket, .pie-card,
  .delta-callout, .income-callout, .adv-panel, .ds-card,
  [style*="border-radius:1"][style*="padding"]{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }
  /* TABLE CARDS specifically — full width */
  .gco-table-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    padding:0 !important;
  }
  /* GENIUS table card — fill */
  section[style*="background:linear-gradient(135deg,#0F2847"] > div,
  section[style*="background:#0F2847"] > div{
    padding:0 4px !important;
    max-width:100% !important;
  }
  section[style*="background:linear-gradient(135deg,#0F2847"] > div > div,
  section[style*="background:#0F2847"] > div > div{
    padding:18px 12px !important;
    margin:0 !important;
  }
  /* HERO inner */
  .hero-inner, section.hero > div{
    max-width:100% !important;
    padding:0 14px !important;
  }
  /* Lists: don't lose space on indent */
  ul, ol{padding-left:18px !important}
}

/* ============================================================
   ULTRA-WIDE SEO PAGES — match homepage edge-to-edge feel
   User feedback: SEO pages feel narrow with small print on mobile.
   Cause: section has padding 20px + container has padding 28px = 48px lost on each side.
   Fix: collapse outer section padding to 0, container to 12px, total = 12px each side.
   Also bump body-section p/li from 16-16.5px → 17.5px for easier reading.
   ============================================================ */
@media(max-width:780px){
  /* Force ALL sections (incl. inline-padded) to have minimal horizontal padding */
  section[style*="padding"], section.body-section, section.hero, section.how, section.about,
  section.taxbox, section.final, section.related, section.cta-end, section.explore,
  section[class*="section"], body > section{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Force ALL container wrappers to ~12px so content reaches ~370px on 393px viewport */
  .container, .gco-container, [class*="container"],
  .body-section > div, section > div:not([class*="card"]):not([class*="grid"]):not([style*="background:"]),
  section.body-section > div, section > .container,
  div[style*="max-width:1080px"][style*="margin:0 auto"],
  div[style*="max-width:1140px"][style*="margin:0 auto"],
  div[style*="max-width:920px"][style*="margin:0 auto"],
  div[style*="max-width:880px"][style*="margin:0 auto"],
  div[style*="max-width:760px"][style*="margin:0 auto"],
  div[style*="max-width:1100px"][style*="margin:0 auto"]{
    padding-left:12px !important;
    padding-right:12px !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Keep header/footer/nav containers their own (don't collapse the header brand row) */
  header .gco-container, header .container, footer .container, footer .gco-container,
  .gco-header > div, .gco-footer > div{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Body-section paragraphs: bigger text for easier reading */
  .body-section p, .body-section li{
    font-size:17.5px !important;
    line-height:1.7 !important;
    margin-bottom:14px !important;
  }
  .body-section h2{font-size:26px !important;line-height:1.18 !important}
  .body-section h3{font-size:21px !important}
  /* Statute/quote/blockquote boxes — readable + edge-to-edge */
  .body-section blockquote, .body-section .statute-box, blockquote{
    margin-left:0 !important;
    margin-right:0 !important;
    padding:16px 18px !important;
    font-size:16.5px !important;
  }
  /* Disclaimer boxes — full width on mobile */
  .disclaimer{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    padding:18px !important;
  }
}

/* === BLUE HERO ON SUBPAGES — full-bleed navy with gold trim === */
/* Subpages use <section class="hero"> with a navy/blue gradient. Pull the hero up
   under the fixed header so the entire top of the viewport reads as one continuous
   navy band. Add gold horizontal trim at the bottom edge for the luxury / Goldstein
   & Co. signature accent. */
section.hero:not(.hero-white){
  margin-top:-72px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top:120px !important;
  padding-bottom:84px !important;
  width:100vw !important;
  max-width:100vw !important;
  border-bottom:3px solid #C5A059 !important;
  box-shadow:inset 0 1px 0 rgba(197,160,89,0.55), 0 1px 0 rgba(197,160,89,0.35) !important;
}
@media(max-width:760px){
  section.hero:not(.hero-white){
    margin-top:-64px !important;
    padding-top:120px !important;
    padding-bottom:100px !important;
  }
  /* Generous edge breathing room on phones — feel premium */
  section.hero:not(.hero-white) > .container,
  section.hero:not(.hero-white) > div[class*="container"]{
    padding-left:32px !important;
    padding-right:32px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  /* Hero H1 smaller + airier so it reads on a phone instead of wall-of-text */
  section.hero:not(.hero-white) h1{
    font-size:28px !important;
    line-height:1.22 !important;
    letter-spacing:-.2px !important;
    margin-bottom:20px !important;
    margin-top:8px !important;
  }
  section.hero:not(.hero-white) .lead,
  section.hero:not(.hero-white) p{
    font-size:16px !important;
    line-height:1.7 !important;
    margin-bottom:14px !important;
  }
  /* Tag/eyebrow pill — proper proportions */
  section.hero:not(.hero-white) .tag,
  section.hero:not(.hero-white) .eyebrow{
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.5 !important;
    padding:8px 14px !important;
    font-size:11px !important;
    letter-spacing:1.4px !important;
    margin-bottom:18px !important;
    display:inline-block !important;
  }
  /* Same generous padding for ALL body sections on subpages */
  body.gco-blue-hero section .container,
  body.gco-blue-hero section div[class*="container"]{
    padding-left:32px !important;
    padding-right:32px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  /* More vertical breathing in body sections too */
  body.gco-blue-hero .body-section,
  body.gco-blue-hero section.body-section{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
}
@media(max-width:480px){
  section.hero:not(.hero-white){
    padding-top:108px !important;
    padding-bottom:88px !important;
  }
  section.hero:not(.hero-white) > .container,
  section.hero:not(.hero-white) > div[class*="container"],
  body.gco-blue-hero section .container,
  body.gco-blue-hero section div[class*="container"]{
    padding-left:26px !important;
    padding-right:26px !important;
  }
  section.hero:not(.hero-white) h1{
    font-size:25px !important;
    line-height:1.25 !important;
  }
  section.hero:not(.hero-white) .lead,
  section.hero:not(.hero-white) p{font-size:15.5px !important}
}

/* === FORCE NO HORIZONTAL PAGE OVERFLOW ON MOBILE ====================
   Wide SVG diagrams (min-width:680px) were causing the entire page to
   scroll horizontally on phones, leaving visible white strips on the
   sides. Clamp everything to viewport width with higher-specificity
   selectors (html body ...) so per-page inline CSS doesn't win.       */
@media(max-width:760px){
  html, body{
    overflow-x:clip !important;
    width:100% !important;
    max-width:100vw !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* High-specificity SVG override for WIDE diagram SVGs only — beats per-page
     `.hero svg{min-width:680px}`. Critically: scoped to viewBox patterns that
     match diagrams, NOT every <svg> on the page (which would blow up the
     14×14 phone-icon SVGs inside buttons). */
  html body svg[viewBox^="0 0 1000"],
  html body svg[viewBox^="0 0 900"],
  html body svg[viewBox^="0 0 1100"],
  html body svg[viewBox^="0 0 800"],
  html body svg[viewBox^="0 0 700"]{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }
  /* Icon SVGs inside buttons/links — keep them their declared pixel size */
  html body a svg, html body button svg, html body .btn svg{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    max-width:14px !important;
    flex-shrink:0 !important;
  }
  /* Slightly larger for hero CTA buttons */
  html body section.hero a.btn svg, html body section.hero a[href^="tel:"] svg{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    max-width:16px !important;
  }
  /* Every element with explicit min-width that exceeds typical phone width — clamp */
  html body [style*="min-width:680px"],
  html body [style*="min-width: 680px"],
  html body [style*="min-width:720px"],
  html body [style*="min-width:800px"],
  html body [style*="min-width:900px"]{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  /* Tables wider than viewport get wrapped */
  html body table{
    max-width:100% !important;
    width:100% !important;
  }
  /* Any direct child of body is clamped to viewport width */
  body > *{
    max-width:100vw !important;
    box-sizing:border-box !important;
  }
  /* Belt-and-suspenders on the hero — force edge-to-edge */
  section.hero:not(.hero-white){
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  /* Defensive against long unbreakable tokens (URLs, technical terms) — break only
     when needed, never auto-hyphenate (which produces ugly "es-/crow" mid-word breaks). */
  html body p, html body h1, html body h2, html body h3, html body li{
    overflow-wrap:break-word !important;
    word-wrap:break-word !important;
    hyphens:manual !important;
    -webkit-hyphens:manual !important;
  }
}

/* === MARGIN POLICE — ONE STANDARD across the whole site ====================
   ONE inner-gutter, every page, every breakpoint. Aggressive multi-segment
   selectors so per-page inline CSS (.container{padding:0 20px !important})
   gets beaten on specificity even though it uses !important.              */

/* Maximum specificity wrapper — selector chain explicitly hits every variant.
   Selector specificity counts: html body section > div.container = (0,1,4) */
html:root body section .container,
html:root body section div.container,
html:root body section div[class*="container"]:not(.gco-container),
html:root body section > div[style*="max-width"],
html:root body section > div > div[style*="max-width"],
html:root body .how-grid,
html:root body .related-grid,
html:root body main .container,
html:root body main div[class*="container"]:not(.gco-container),
html:root body main div[style*="max-width"]{
  padding-left:40px !important;
  padding-right:40px !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:760px){
  html:root body section .container,
  html:root body section div.container,
  html:root body section div[class*="container"]:not(.gco-container),
  html:root body section > div[style*="max-width"],
  html:root body section > div > div[style*="max-width"],
  html:root body .how-grid,
  html:root body .related-grid,
  html:root body main .container,
  html:root body main div[class*="container"]:not(.gco-container),
  html:root body main div[style*="max-width"]{
    padding-left:32px !important;
    padding-right:32px !important;
  }
  /* Even tighter belt-and-suspenders override for the specific known inline patterns */
  html:root body section > div[style*="max-width:920px"],
  html:root body section > div[style*="max-width:1080px"],
  html:root body section > div[style*="max-width:1100px"],
  html:root body section > div[style*="max-width:1140px"],
  html:root body section > div[style*="max-width: 920px"],
  html:root body section > div[style*="max-width: 1080px"]{
    padding-left:32px !important;
    padding-right:32px !important;
  }
}

@media(max-width:380px){
  html:root body section .container,
  html:root body section div.container,
  html:root body section div[class*="container"]:not(.gco-container),
  html:root body section > div[style*="max-width"],
  html:root body .how-grid,
  html:root body .related-grid,
  html:root body main .container,
  html:root body main div[class*="container"]:not(.gco-container){
    padding-left:26px !important;
    padding-right:26px !important;
  }
}

/* === MOBILE EDGE BREATHING ROOM (ALL PAGES) ============================
   Legacy mobile rules — supplementary to the Margin Police above.        */
@media(max-width:760px){
  body, body main, body section{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  body section{ overflow-x:clip }
  /* Cards: comfortable internal padding */
  body .how-card,
  body .scenario,
  body .card{
    padding:30px 28px !important;
    box-sizing:border-box !important;
    max-width:100% !important;
  }
  /* Inline-styled gold/yellow callouts (1080px max-width boxes) get full-width with side margin */
  /* Inline-styled max-width:1080px wrappers (callouts, alerts) — align with
     the Margin Police standard: 24px outer gutter on mobile */
  body div[style*="max-width:1080px"],
  body div[style*="max-width: 1080px"]{
    max-width:calc(100% - 48px) !important;
    margin-left:24px !important;
    margin-right:24px !important;
    box-sizing:border-box !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
  /* General body copy gets more line-height on mobile */
  body main p, body section p, body article p{
    line-height:1.75 !important;
  }
}
@media(max-width:480px){
  body section > .container,
  body section > div.container,
  body section > div[class*="container"]:not(.gco-container),
  body section .container,
  body section div.container,
  body section div[class*="container"]:not(.gco-container),
  body .how-grid,
  body .related-grid,
  html body section .container,
  html body section div[class*="container"]:not(.gco-container){
    padding-left:30px !important;
    padding-right:30px !important;
  }
  body div[style*="max-width:1080px"],
  body div[style*="max-width: 1080px"]{
    max-width:calc(100% - 24px) !important;
    margin-left:12px !important;
    margin-right:12px !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
}
/* Override the body > section:first-of-type {padding-top:36px} rule for blue heroes */
body > section.hero:not(.hero-white):first-of-type,
body > header + section.hero:not(.hero-white){
  padding-top:120px !important;
}
@media(max-width:760px){
  body > section.hero:not(.hero-white):first-of-type,
  body > header + section.hero:not(.hero-white){
    padding-top:96px !important;
  }
}
/* On subpages with blue hero, paint the fixed header to BLEND with the hero —
   so the entire top of the viewport reads as one continuous navy band, edge to edge.
   No white "trim" at top, just blue all the way up. */
body.gco-blue-hero > header,
body.gco-blue-hero > .gco-header{
  background:linear-gradient(135deg,#0F2847 0%,#1a3a6a 100%) !important;
  border-bottom:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Flip ALL header text white on the navy header (overrides JS-injected dark colors) */
body.gco-blue-hero > header a,
body.gco-blue-hero > .gco-header a,
body.gco-blue-hero > header .gco-logo span,
body.gco-blue-hero > .gco-header .gco-logo span,
body.gco-blue-hero > header .gco-logo small,
body.gco-blue-hero > .gco-header .gco-logo small,
body.gco-blue-hero > .gco-header .gco-more-btn{
  color:#fff !important;
}
/* Gold accent for the subtitle small text so it pops on navy */
body.gco-blue-hero > header .gco-logo small,
body.gco-blue-hero > .gco-header .gco-logo small{
  color:#C5A059 !important;
}
/* Mobile hamburger — invert to white box with navy bars on navy header */
body.gco-blue-hero > .gco-header .gco-ham{
  background:rgba(255,255,255,0.18) !important;
  border:1px solid rgba(255,255,255,0.35) !important;
}
body.gco-blue-hero > .gco-header .gco-ham span{
  background:#fff !important;
}
/* "More ▾" dropdown popup — keep white bg (it's a menu floating over content) */
body.gco-blue-hero > .gco-header .gco-more-menu{
  background:#fff !important;
}
body.gco-blue-hero > .gco-header .gco-more-menu a{
  color:#0F2847 !important;
}
/* Phone CTA button on navy header — keep dark navy bg, add gold edge so it pops */
body.gco-blue-hero > .gco-header .gco-cta-phone{
  border:1.5px solid rgba(197,160,89,0.55) !important;
}
/* SCROLLED state: once user scrolls past hero, flip header back to white for body legibility */
body.gco-blue-hero > header.gco-scrolled,
body.gco-blue-hero > .gco-header.gco-scrolled{
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:saturate(180%) blur(10px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(10px) !important;
  box-shadow:0 4px 16px rgba(15,40,71,.10) !important;
}
body.gco-blue-hero > header.gco-scrolled a,
body.gco-blue-hero > .gco-header.gco-scrolled a,
body.gco-blue-hero > .gco-header.gco-scrolled .gco-logo span,
body.gco-blue-hero > .gco-header.gco-scrolled .gco-more-btn{
  color:#0F2847 !important;
}
body.gco-blue-hero > .gco-header.gco-scrolled .gco-logo small{
  color:#C5A059 !important;
}
body.gco-blue-hero > .gco-header.gco-scrolled .gco-ham{
  background:#0F2847 !important;
  border:none !important;
}
body.gco-blue-hero > .gco-header.gco-scrolled .gco-ham span{
  background:#fff !important;
}

/* === MOBILE COMPARISON-TABLE STACKING ============================================
   Tables with thead+tbody (SIS vs Traditional, CRT vs SIS, etc.) collapse together
   on phones — users can't tell which column an answer belongs to. Stack each row as
   a card on mobile, with the column-header text shown as a tag above each value
   (data-label is populated by labelTables() in nav.js).                            */
@media(max-width:680px){
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) thead{display:none}
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table),
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody,
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr,
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) td{
    display:block !important;
    width:100% !important;
    box-sizing:border-box;
  }
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr{
    margin:0 0 16px !important;
    border:1px solid #e2e8f0 !important;
    border-radius:10px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 2px 8px rgba(15,40,71,.06) !important;
  }
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) td{
    padding:14px 16px !important;
    border-bottom:1px solid #f0f4f9 !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:last-child{border-bottom:0 !important}
  /* First cell (question / row header) — navy bar with white bold text */
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:first-child,
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:nth-child(1){
    background:#0F2847 !important;
    color:#fff !important;
    font-weight:800 !important;
    font-size:15px !important;
    letter-spacing:.2px !important;
    padding:14px 16px !important;
    line-height:1.4 !important;
    min-height:44px !important;
  }
  /* Override any inline-styled child text colors inside the question cell */
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:first-child *,
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:first-child strong,
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:first-child em{
    color:#fff !important;
  }
  /* Show column-header tag above value cells */
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td[data-label]:not(:first-child)::before{
    content:attr(data-label);
    display:block;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:6px;
    color:#5c6878;
    opacity:.85;
  }
  /* Color-code the tag: 2nd col (typically "Traditional"/"Bad option") red,
     3rd col (typically "SIS"/"Good option") green. */
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:nth-child(2)[data-label]::before{color:#a02020 !important}
  table:not(.no-stack):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tr td:nth-child(3)[data-label]::before{color:#0d7c5f !important}
}

/* ============================================================================
   UGLY POLICE — Luxury polish on all images + all tables
   ============================================================================
   Applied site-wide. Doesn't fight per-page inline styles for layout — only
   adds visual refinement (radius, shadow, hover, alternating rows).        */

/* --- IMAGES: rounded + soft shadow + lazy by default ----------------------- */
/* General content images — exclude logos, icons, header inline imgs */
html body img:not([src*="goldstein-logo"]):not([class*="logo"]):not([alt*="logo"]):not([width="14"]):not([width="16"]){
  border-radius:12px;
  box-shadow:0 1px 3px rgba(15,40,71,0.04), 0 8px 24px rgba(15,40,71,0.08);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
html body img:not([src*="goldstein-logo"]):not([class*="logo"]):not([alt*="logo"]):not([width="14"]):not([width="16"]):hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(15,40,71,0.08), 0 18px 40px rgba(15,40,71,0.14);
}

/* Hero/cover banner images inside cards — keep their parent's rounded corners */
html body div[style*="overflow:hidden"] > img,
html body div[style*="border-radius:14px 14px 0 0"] > img{
  border-radius:0 !important;
  box-shadow:none !important;
}
html body div[style*="overflow:hidden"]:hover > img,
html body div[style*="border-radius:14px 14px 0 0"]:hover > img{
  transform:scale(1.04);
  box-shadow:none !important;
}

/* Hans portrait — premium treatment */
html body img[src*="hans"][src*=".jpg"],
html body img[alt*="Hans Goldstein"]{
  border-radius:16px !important;
  box-shadow:0 4px 12px rgba(15,40,71,0.08), 0 24px 60px rgba(15,40,71,0.16) !important;
  border:1px solid rgba(15,40,71,0.06);
}

/* Mountain/everest/molehill cover images inside parent absolute-positioned wrappers */
html body div[style*="position:relative"][style*="border-radius:16px"] img{
  border-radius:0 !important;
  box-shadow:none !important;
}
html body div[style*="position:relative"][style*="border-radius:16px"]:hover img{
  transform:scale(1.03);
  transition:transform .8s cubic-bezier(.2,.8,.2,1) !important;
}

/* --- TABLES: refined luxury treatment ------------------------------------- */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table){
  border-collapse:separate !important;
  border-spacing:0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:0 1px 3px rgba(15,40,71,0.05), 0 4px 18px rgba(15,40,71,0.06) !important;
  border:1px solid #e8edf3 !important;
  background:#fff !important;
  margin:20px 0 !important;
  width:100% !important;
}

/* Refined header */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) thead tr,
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) thead th{
  background:#0F2847 !important;
  color:#fff !important;
}
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) thead th{
  text-align:left !important;
  padding:16px 18px !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  font-family:'Source Sans 3','Open Sans',sans-serif !important;
  border-bottom:2px solid #C5A059 !important;
}

/* Refined body cells */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody td{
  padding:14px 18px !important;
  font-size:15px !important;
  line-height:1.65 !important;
  border-bottom:1px solid #f0f4f9 !important;
  vertical-align:top !important;
}
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody tr:last-child td{
  border-bottom:none !important;
}

/* Alternating row stripes — very subtle */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody tr:nth-child(even) td{
  background:#fafbfc !important;
}

/* Smooth row hover */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody tr{
  transition:background .15s ease !important;
}
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody tr:hover td{
  background:#fff8e1 !important;
}

/* First-column emphasis (questions/labels) */
html body table:not(.no-style):not(.gco-no-style):not(.rwd-tbl):not(.genius-tbl):not(.yr-table):not(.compare-table):not(.calc-tbl):not(.compare-table) tbody td:first-child{
  font-weight:700 !important;
  color:#0F2847 !important;
}

/* Mobile: the existing stacked-card treatment overrides this; both behave correctly. */

/* --- Logos: keep them clean, never apply image polish to them ------------- */
html body .gco-logo img,
html body a.gco-logo img,
html body header img[src*="goldstein-logo"],
html body img[src*="goldstein-logo"]{
  border-radius:0 !important;
  box-shadow:none !important;
}
html body .gco-logo img:hover,
html body a.gco-logo img:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* ============================================================================
   DESIGN SYSTEM v2 — Standardized spacing rhythm, generous line-height
   ============================================================================
   The "crammed" feel was caused by: (1) inconsistent spacing rhythm across
   sections, (2) tight line-height, (3) decorative noise. This block sets ONE
   standard, high-specificity, to beat per-page CSS chaos.                  */

/* ---- C: airier body line-height (single biggest perceived-airiness win) -- */
html body p, html body li, html body td, html body dd{
  line-height:1.8 !important;
}
html body .hero p, html body .hero .lead, html body section.hero p, html body section.hero .lead{
  line-height:1.7 !important;
}

/* ---- B: standardized spacing scale --------------------------------------- */
/* Paragraph rhythm */
html body section p, html body main p{
  margin-bottom:20px !important;
}
html body section p:last-child, html body main p:last-child{
  margin-bottom:0 !important;
}

/* H2/H3 vertical rhythm — generous top margin creates visual section breaks */
html body section h2, html body main h2{
  margin-top:48px !important;
  margin-bottom:18px !important;
  line-height:1.2 !important;
}
html body section h2:first-child, html body main h2:first-child,
html body section .container > h2:first-child{
  margin-top:0 !important;
}
html body section h3, html body main h3{
  margin-top:32px !important;
  margin-bottom:14px !important;
  line-height:1.25 !important;
}
html body section ul, html body section ol, html body main ul, html body main ol{
  margin-bottom:22px !important;
}
html body section li, html body main li{
  margin-bottom:10px !important;
}

/* Mobile: tighter but still consistent */
@media(max-width:760px){
  html body section h2, html body main h2{
    margin-top:40px !important;
    margin-bottom:16px !important;
    font-size:24px !important;
  }
  html body section h3, html body main h3{
    margin-top:28px !important;
    margin-bottom:12px !important;
    font-size:19px !important;
  }
  html body section p, html body main p{
    margin-bottom:18px !important;
    font-size:16.5px !important;
  }
  /* Hero — single consistent hero padding scale */
  html body section.hero:not(.hero-white){
    padding-top:96px !important;
    padding-bottom:72px !important;
  }
  html body section.hero.hero-white{
    padding-top:36px !important;
    padding-bottom:48px !important;
  }
  /* Body sections — one consistent vertical rhythm */
  html body section:not(.hero){
    padding-top:64px !important;
    padding-bottom:64px !important;
  }
  /* Cards — bigger internal padding for breathability */
  html body .reason, html body .use-card, html body .product-card,
  html body div[style*="background:#fafbfc"][style*="border-radius:14px"]{
    padding:28px 24px !important;
  }
}

/* ---- A: NUKE remaining per-page container padding conflicts -------------- */
/* The most aggressive container override — beats anything not also using
   :is/:not chains. Specificity (0, 3, 4). */
html:root body section .container,
html:root body section div.container,
html:root body main .container,
html:root body main div.container{
  padding-left:32px !important;
  padding-right:32px !important;
  box-sizing:border-box !important;
}
@media(min-width:761px){
  html:root body section .container,
  html:root body section div.container,
  html:root body main .container,
  html:root body main div.container{
    padding-left:40px !important;
    padding-right:40px !important;
  }
}

/* Defensive: also push the H1 itself in case some page's H1 has its own zero-padding */
@media(max-width:760px){
  html body section.hero h1{
    padding-left:0 !important;
    margin-left:0 !important;
    padding-right:0 !important;
  }
  /* Inline-bg callouts inside hero (the gray-tint info boxes) need their own gutter */
  html body section.hero div[style*="background:rgba(255,255,255"],
  html body section.hero div[style*="background: rgba(255,255,255"]{
    padding:14px 18px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* ============================================================
   === GOLDSTEIN & CO. DESIGN SYSTEM v4 ====================
   World-class component library. Use .gco-* prefixed classes.
   Append-only — does not break any existing styles.
   Last updated: 2026-05-20
   ============================================================ */

/* === SPACING SCALE === */
:root{
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:24px;  --space-6:32px;  --space-7:48px;  --space-8:64px;
  --space-9:80px;  --space-10:96px;

  /* SHELL widths — pick 1 of 3 per page */
  --shell-narrow:760px;     /* dense content, single column */
  --shell-standard:980px;   /* most pages, tables, cards */
  --shell-wide:1140px;      /* nav, wide grids */

  /* MOTION */
  --transition-fast:120ms cubic-bezier(.4,0,.2,1);
  --transition-base:180ms cubic-bezier(.4,0,.2,1);
  --transition-slow:280ms cubic-bezier(.4,0,.2,1);
  --easing-bounce:cubic-bezier(.34,1.56,.64,1);

  /* ELEVATION (shadow scale) */
  --elev-1:0 1px 2px rgba(15,40,71,.04),0 1px 3px rgba(15,40,71,.06);
  --elev-2:0 2px 4px rgba(15,40,71,.05),0 4px 12px rgba(15,40,71,.06);
  --elev-3:0 4px 8px rgba(15,40,71,.06),0 12px 28px rgba(15,40,71,.08);
  --elev-4:0 8px 16px rgba(15,40,71,.08),0 24px 48px rgba(15,40,71,.10);
  --elev-5:0 16px 32px rgba(15,40,71,.10),0 32px 64px rgba(15,40,71,.14);
}

/* === FOCUS RING — accessibility, AA-compliant === */
.gco-focus,
button.gco-btn-primary:focus-visible,
button.gco-btn-secondary:focus-visible,
button.gco-btn-outline:focus-visible,
a.gco-btn-primary:focus-visible,
a.gco-btn-secondary:focus-visible,
a.gco-btn-outline:focus-visible,
.gco-card-link:focus-visible,
input.gco-input:focus-visible,
select.gco-input:focus-visible,
textarea.gco-input:focus-visible{
  outline:3px solid rgba(197,160,89,.65) !important;
  outline-offset:3px;
}

/* === SHELL UTILITIES === */
.gco-shell-narrow{max-width:var(--shell-narrow);margin:0 auto;padding:0 24px}
.gco-shell-standard{max-width:var(--shell-standard);margin:0 auto;padding:0 24px}
.gco-shell-wide{max-width:var(--shell-wide);margin:0 auto;padding:0 24px}
@media(max-width:560px){
  .gco-shell-narrow,.gco-shell-standard,.gco-shell-wide{padding:0 16px}
}

/* === HERO COMPONENT === */
/* Unified pattern: eyebrow + h1 (with em gold accent) + lead + optional cred row */
.gco-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  padding:64px 0 56px;
  border-bottom:3px solid var(--gold);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.gco-hero::before{
  content:'';position:absolute;top:-40%;right:-20%;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(197,160,89,.10) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.gco-hero-inner{max-width:780px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.gco-hero-eyebrow{
  display:inline-block;
  background:rgba(197,160,89,.18);
  color:var(--gold);
  font-family:'Source Sans 3',sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:800;
  padding:7px 16px;
  border-radius:99px;
  margin-bottom:18px;
  border:1px solid rgba(197,160,89,.30);
  line-height:1.2;
}
.gco-hero h1{
  font-family:'Playfair Display',Georgia,serif !important;
  font-weight:800 !important;
  font-size:46px !important;
  line-height:1.06 !important;
  letter-spacing:-.6px !important;
  margin:0 0 16px !important;
  color:#fff !important;
}
.gco-hero h1 em{color:var(--gold) !important;font-style:normal}
.gco-hero p.gco-hero-lead{
  font-size:17.5px !important;
  color:#ffffff !important;
  max-width:660px;
  margin:0 auto !important;
  line-height:1.55 !important;
}
.gco-hero-cred{
  margin-top:24px;
  display:flex;flex-wrap:wrap;
  gap:10px 24px;
  justify-content:center;
  font-size:12px;color:#94a3b8 !important;
}
.gco-hero-cred span{display:inline-flex;align-items:center;gap:6px}
.gco-hero-cred .dot{
  width:6px;height:6px;background:var(--gold);
  border-radius:50%;display:inline-block;
}
@media(max-width:760px){
  .gco-hero{padding:44px 0 40px}
  .gco-hero h1{font-size:32px !important;line-height:1.1 !important}
  .gco-hero p.gco-hero-lead{font-size:15.5px !important}
}

/* === CARD COMPONENT (with semantic variants) === */
.gco-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:30px 32px;
  box-shadow:var(--elev-1);
  margin-bottom:24px;
  transition:box-shadow var(--transition-base),transform var(--transition-base);
}
.gco-card-link{display:block;text-decoration:none;color:inherit}
.gco-card-link:hover{box-shadow:var(--elev-3);transform:translateY(-2px);border-color:rgba(197,160,89,.40)}
.gco-card--gold{background:linear-gradient(180deg,#fff8e1 0%,#fff 38%);border-top:4px solid var(--gold);border-color:rgba(197,160,89,.40)}
.gco-card--green{background:linear-gradient(180deg,#eaf6ef 0%,#fff 38%);border-top:4px solid var(--green);border-color:rgba(13,124,95,.40)}
.gco-card--red{background:linear-gradient(180deg,#fdf0ef 0%,#fff 38%);border-top:4px solid var(--red);border-color:rgba(192,57,43,.40)}
.gco-card--dark{background:linear-gradient(180deg,#0b1d35 0%,#0F2847 100%);color:#ffffff;border:1.5px solid rgba(197,160,89,.30)}
.gco-card--dark h2,.gco-card--dark h3{color:#fff !important}
.gco-card--dark p{color:#ffffff !important}

.gco-card-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.gco-card-eyebrow{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:800;color:var(--gold);font-family:'Source Sans 3',sans-serif}
.gco-card h2,.gco-card h3{margin-top:0 !important}
.gco-card-sub{font-size:14px !important;color:var(--text-muted) !important;margin:0 0 22px !important;line-height:1.6 !important}

@media(max-width:760px){
  .gco-card{padding:24px 22px;border-radius:var(--radius-sm)}
}

/* === BUTTON SYSTEM === */
.gco-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:10px;
  font-family:'Source Sans 3',sans-serif !important;
  font-weight:800 !important;
  font-size:15.5px !important;
  letter-spacing:.2px;
  text-decoration:none !important;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background var(--transition-base),transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
  line-height:1.2;
  white-space:nowrap;
}
.gco-btn-primary{
  background:var(--gold) !important;
  color:var(--navy) !important;
  border-color:var(--gold) !important;
  box-shadow:0 2px 6px rgba(197,160,89,.30);
}
.gco-btn-primary:hover{
  background:#d8b56e !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(197,160,89,.40);
}
.gco-btn-secondary{
  background:var(--navy) !important;
  color:#fff !important;
  border-color:var(--navy) !important;
  box-shadow:0 2px 6px rgba(15,40,71,.25);
}
.gco-btn-secondary:hover{
  background:var(--navy-2) !important;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,40,71,.35);
}
.gco-btn-outline{
  background:transparent !important;
  color:var(--navy) !important;
  border:1.5px solid var(--navy) !important;
}
.gco-btn-outline:hover{
  background:var(--navy) !important;
  color:#fff !important;
}
.gco-btn-outline-light{
  background:transparent !important;
  color:#fff !important;
  border:1.5px solid #fff !important;
}
.gco-btn-outline-light:hover{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}

.gco-btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

@media(max-width:560px){
  .gco-btn{padding:12px 22px;font-size:14.5px !important}
}

/* === CTA BLOCK (full card with title + lead + buttons) === */
.gco-cta-block{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  border:2px solid var(--gold);
  border-radius:16px;
  padding:36px 34px;
  text-align:center;
  box-shadow:var(--elev-4);
  margin:24px 0;
}
.gco-cta-block h3{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:26px !important;
  color:#fff !important;
  margin:0 0 12px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}
.gco-cta-block h3 em{color:var(--gold) !important;font-style:normal}
.gco-cta-block p{
  font-size:15.5px !important;
  color:#ffffff !important;
  margin:0 0 22px !important;
  line-height:1.55 !important;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:760px){
  .gco-cta-block{padding:28px 24px}
  .gco-cta-block h3{font-size:22px !important}
}

/* === ACCORDION === */
.gco-acc{
  background:#fafbfc;
  border:1.5px solid var(--border);
  border-radius:12px;
  margin:14px 0;
  overflow:hidden;
  transition:background var(--transition-base);
}
.gco-acc[open]{background:#fff}
.gco-acc > summary{
  padding:18px 24px;
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  font-family:'Source Sans 3',sans-serif !important;
  background:linear-gradient(180deg,#fafbfc 0%,#fff 100%);
  transition:background var(--transition-base);
}
.gco-acc > summary::-webkit-details-marker{display:none}
.gco-acc > summary::after{
  content:'▾';
  color:var(--gold);
  font-size:14px;
  transition:transform var(--transition-base);
  margin-left:16px;
}
.gco-acc[open] > summary::after{transform:rotate(180deg)}
.gco-acc > summary:hover{background:rgba(197,160,89,.04)}
.gco-acc-eb{
  font-size:10.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--gold);font-weight:800;
  display:block;margin-bottom:3px;
}
.gco-acc-h{font-size:15px;color:var(--text);font-weight:700;line-height:1.3}
.gco-acc-body{
  padding:22px 26px;
  border-top:1px solid var(--border);
  background:#fff;
}

/* Dark accordion variant (math nerds, CPA deep-dive on dark bg) */
.gco-acc--dark{
  background:linear-gradient(180deg,#0b1d35 0%,#0F2847 100%) !important;
  color:#fff;
  border:1.5px solid rgba(197,160,89,.40);
}
.gco-acc--dark > summary{
  background:linear-gradient(180deg,rgba(197,160,89,.10) 0%,transparent 100%) !important;
  color:#fff;
}
.gco-acc--dark .gco-acc-eb{color:var(--gold)}
.gco-acc--dark .gco-acc-h{color:#fff}
.gco-acc--dark .gco-acc-body{background:#0F2847;color:#ffffff;border-top-color:rgba(197,160,89,.20)}

/* === METRIC GRID — 2 / 3 / 4 columns of stat cards === */
.gco-metric-grid{display:grid;gap:14px;margin:18px 0}
.gco-metric-grid--4{grid-template-columns:repeat(4,1fr)}
.gco-metric-grid--3{grid-template-columns:repeat(3,1fr)}
.gco-metric-grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:780px){.gco-metric-grid--4,.gco-metric-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gco-metric-grid--4,.gco-metric-grid--3,.gco-metric-grid--2{grid-template-columns:1fr}}
.gco-metric{
  background:#fff;border:1.5px solid var(--border);
  border-radius:10px;padding:18px 18px;text-align:center;
  transition:transform var(--transition-base),box-shadow var(--transition-base);
}
.gco-metric:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}
.gco-metric-lbl{
  font-size:10.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--text-muted);font-weight:800;
  margin-bottom:6px;
}
.gco-metric-num{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:24px !important;font-weight:800 !important;
  color:var(--text) !important;letter-spacing:-.3px;
  line-height:1.05;
}
.gco-metric-num--green{color:var(--green) !important}
.gco-metric-num--red{color:var(--red) !important}
.gco-metric-num--gold{color:var(--gold) !important}
.gco-metric-sub{font-size:11.5px;color:var(--text-muted);margin-top:5px;line-height:1.4}

/* === TRUST BAR (carrier logos) === */
.gco-trust{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:30px 24px;
  text-align:center;
  margin:24px 0;
}
.gco-trust-eb{
  font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
  font-weight:800;margin-bottom:20px;font-family:'Source Sans 3',sans-serif;
}
.gco-trust-logos{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:28px 44px;padding:0 16px;
}
.gco-trust-logos .tlogo{opacity:.72;transition:opacity var(--transition-base)}
.gco-trust-logos .tlogo:hover{opacity:1}
.gco-trust-note{
  margin-top:18px;
  font-size:11.5px;color:var(--text-muted);
  line-height:1.6;max-width:680px;
  margin-left:auto;margin-right:auto;padding:0 16px;
}

/* === UNIFIED FOOTER === */
.gco-footer{
  background:#0b1d35;color:#cdd5e0;
  padding:40px 24px;
  font-size:13px;
  margin-top:56px;
}
.gco-footer-inner{max-width:1080px;margin:0 auto;text-align:center}
.gco-footer h4{
  color:#fff !important;
  font-family:'Source Sans 3',sans-serif !important;
  font-size:12px !important;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin:0 0 10px !important;
  font-weight:800 !important;
}
.gco-footer-tagline{font-size:13.5px;color:#cdd5e0;margin-bottom:8px}
.gco-footer-credentials{font-size:12.5px;color:#94a3b8;margin-bottom:14px}
.gco-footer-links{font-size:13px;color:#cdd5e0;line-height:2;margin-bottom:0}
.gco-footer-links a{color:var(--gold) !important;text-decoration:none;margin:0 3px}
.gco-footer-links a:hover{text-decoration:underline}
.gco-footer-compliance{
  padding-top:22px;margin-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:11.5px;line-height:1.7;color:#9ba8b8;
  max-width:840px;margin-left:auto;margin-right:auto;
}
.gco-footer-compliance strong{color:#fff}

/* === DIVIDER PILL (between sections) === */
.gco-divider-pill{
  text-align:center;margin:16px 0 24px;
}
.gco-divider-pill span{
  display:inline-block;
  background:#fff8e1;color:#8b6b1a;
  padding:8px 18px;border-radius:99px;
  font-family:'Source Sans 3',sans-serif !important;
  font-size:12px !important;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;
  border:1px solid #f0d97f;
}

/* === MICRO-INTERACTIONS — hover lift + fade-in on scroll === */
.gco-lift{transition:transform var(--transition-base),box-shadow var(--transition-base)}
.gco-lift:hover{transform:translateY(-2px);box-shadow:var(--elev-3)}

@keyframes gcoFadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.gco-fade-in{animation:gcoFadeUp 600ms var(--easing-bounce) both}
@media(prefers-reduced-motion:reduce){
  .gco-fade-in{animation:none}
  .gco-lift{transition:none}
  *{transition-duration:0ms !important;animation-duration:0ms !important}
}

/* === PRINT STYLESHEET — clean output for CPA PDF sharing === */
@media print{
  body{font-size:11pt !important;line-height:1.45 !important;background:#fff !important;color:#000 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  header,nav,footer,.gco-header,#gcoFloatingHam,#gcoStaticDrawer,
  .gco-sticky-cta,.g3-sticky-cta,.saf-sticky,
  .gco-cta,.gco-cta-block,.gco-btn,
  details:not([open]) > *:not(summary){display:none !important}
  details{break-inside:avoid}
  .gco-hero{padding:24px 0 20px !important;break-after:avoid;background:#fff !important;color:#000 !important;border-bottom:2px solid #000}
  .gco-hero h1,.gco-hero p,.gco-hero-eyebrow{color:#000 !important;background:transparent !important;border-color:#000 !important}
  .gco-card{box-shadow:none !important;border:1px solid #444 !important;break-inside:avoid;page-break-inside:avoid;padding:14px 16px !important;margin-bottom:14px !important}
  .gco-card--dark{background:#fff !important;color:#000 !important;border:1px solid #444 !important}
  .gco-card--dark h2,.gco-card--dark h3,.gco-card--dark p{color:#000 !important}
  .gco-trust,.gco-footer{display:none !important}
  a{color:#000 !important;text-decoration:underline}
  h1{font-size:22pt !important;margin-bottom:8pt !important}
  h2{font-size:18pt !important;margin-bottom:6pt !important}
  h3{font-size:14pt !important;margin-bottom:5pt !important}
  table{border-collapse:collapse !important;width:100% !important}
  table th,table td{border:1px solid #888 !important;padding:4pt 6pt !important;font-size:10pt !important}
  /* Force a fresh page for the math-nerds breakdown */
  .g3-mathnerd[open],.saf-mathnerd[open]{page-break-before:always}
}

/* === END DS v4 ============================================ */