*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --color-bg:#f5f4f0;
  --color-surface:#faf9f7;
  --color-surface-2:#ffffff;
  --color-surface-offset:#eeece7;
  --color-border:oklch(0.28 0.02 240 / 0.12);
  --color-divider:#dddbd6;
  --color-text:#1a1917;
  --color-text-muted:#6b6965;
  --color-text-faint:#b0aeaa;
  --color-text-inverse:#f9f8f4;
  --color-primary:#1b3a6b;
  --color-primary-hover:#142d54;
  --color-primary-active:#0e2140;
  --color-primary-light:#dce5f3;
  --color-gold:#b8860b;
  --color-gold-light:#f5edd6;
  --color-success:#2e6b3e;
  --color-success-light:#d4e8da;
  --color-warning:#944a0c;
  --color-warning-light:#fde8d0;
  --color-error:#9b1c2e;
  --color-error-light:#fbd5db;
  --radius-sm:0.375rem;
  --radius-md:0.5rem;
  --radius-lg:0.75rem;
  --radius-xl:1rem;
  --radius-full:9999px;
  --shadow-sm:0 1px 2px oklch(0.2 0.03 240/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.03 240/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.03 240/0.12);
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;
  --content-default:960px;--content-wide:1200px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --font-display:'Montserrat',sans-serif,serif;
  --font-body:'Inter','serif',sans-serif;
}

html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:var(--space-16)}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);min-height:100dvh;line-height:1.6}
img,svg{display:block;max-width:100%}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select{font:inherit;color:inherit}
a,button,[role="button"],input,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
::selection{background:oklch(from var(--color-primary) l c h/0.2);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty;max-width:72ch}
table{border-collapse:collapse;width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* === LAYOUT === */

.hero{background:linear-gradient(135deg,var(--color-primary) 0%,#0e2140 100%);color:var(--color-text-inverse);padding:var(--space-12) var(--space-6);text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);background:oklch(1 0 0/0.12);border:1px solid oklch(1 0 0/0.2);border-radius:var(--radius-full);padding:var(--space-1) var(--space-4);font-size:var(--text-xs);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:var(--space-5)}
.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-style:italic;font-weight:400;margin-bottom:var(--space-4);max-width:700px;margin-inline:auto}
.hero p{font-size:var(--text-sm);opacity:0.85;max-width:560px;margin-inline:auto;line-height:1.7}

.main-container{max-width:var(--content-wide);margin-inline:auto;padding:var(--space-10) var(--space-6);display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media(min-width:1024px){.main-container{grid-template-columns:420px 1fr;align-items:start}}

/* === TABS === */
.tab-nav{display:flex;gap:var(--space-1);background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-1);margin-bottom:var(--space-6)}
.tab-btn{flex:1;padding:var(--space-2) var(--space-3);border-radius:calc(var(--radius-lg) - 2px);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-align:center;cursor:pointer;white-space:nowrap}
.tab-btn.active{background:var(--color-surface-2);color:var(--color-text);box-shadow:var(--shadow-sm)}
.tab-btn:hover:not(.active){color:var(--color-text);background:oklch(from var(--color-primary) l c h/0.05)}
.tab-pane{display:none}.tab-pane.active{display:block}

/* === FORM CARD === */
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.form-section-title{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-primary-light)}
.form-group{margin-bottom:var(--space-4)}
.form-group label{display:block;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2);color:var(--color-text)}
.form-group .hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-prefix,.input-suffix{position:absolute;font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;pointer-events:none}
.input-prefix{left:var(--space-3)}
.input-suffix{right:var(--space-3)}
.form-group input[type="number"],.form-group select{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text);appearance:none;-webkit-appearance:none}
.form-group input.has-prefix{padding-left:var(--space-8)}
.form-group input.has-suffix{padding-right:var(--space-8)}
.form-group input[type="number"]:focus,.form-group select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h/0.15)}
.form-group input[type="number"]:hover,.form-group select:hover{border-color:var(--color-text-muted)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}

/* Toggle switch */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.toggle-row label{font-size:var(--text-sm);font-weight:500;flex:1}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--color-divider);border-radius:var(--radius-full);transition:background var(--transition)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--transition)}
.toggle input:checked~.toggle-slider{background:var(--color-primary)}
.toggle input:checked~.toggle-slider::before{transform:translateX(20px)}

/* CTA button */
.btn-primary{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;padding:var(--space-4);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:600;cursor:pointer;margin-top:var(--space-6);transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:none;background:var(--color-primary-active)}
.btn-secondary{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer}
.btn-secondary:hover{background:var(--color-surface-offset);border-color:var(--color-text-muted)}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--color-primary);cursor:pointer}
.btn-ghost:hover{background:var(--color-primary-light)}

/* === RESULTS PANEL === */
.results-panel{display:flex;flex-direction:column;gap:var(--space-6)}
.panel-empty{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-8);text-align:center;color:var(--color-text-muted)}
.panel-empty svg{margin:0 auto var(--space-4);color:var(--color-text-faint)}

/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
@media(min-width:640px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}
.kpi-label{font-size:var(--text-xs);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.kpi-value{font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text)}
.kpi-value.positive{color:var(--color-success)}
.kpi-value.negative{color:var(--color-error)}
.kpi-value.gold{color:var(--color-gold)}
.kpi-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}
.kpi-card.highlight{background:var(--color-primary);border-color:var(--color-primary)}
.kpi-card.highlight .kpi-label{color:oklch(1 0 0/0.7)}
.kpi-card.highlight .kpi-value{color:#fff}
.kpi-card.highlight .kpi-sub{color:oklch(1 0 0/0.65)}

/* Section card */
.section-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm)}
.section-card-header{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.section-card-header h3{font-size:var(--text-base);font-weight:600;color:var(--color-text)}
.section-card-body{padding:var(--space-6)}

/* Tax breakdown table */
.breakdown-table{width:100%}
.breakdown-table td{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);vertical-align:middle}
.breakdown-table tr{border-bottom:1px solid var(--color-divider)}
.breakdown-table tr:last-child{border-bottom:none}
.breakdown-table .label-col{color:var(--color-text-muted)}
.breakdown-table .val-col{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.breakdown-table .total-row td{font-weight:700;color:var(--color-text);padding-top:var(--space-3);border-top:2px solid var(--color-divider);border-bottom:none}
.breakdown-table .deferred-row td{color:var(--color-success);font-weight:700;font-size:var(--text-base)}
.breakdown-table .highlight-row{background:var(--color-success-light)}
.breakdown-table .highlight-row td{color:var(--color-success)}

/* Alert boxes */
.alert{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);display:flex;gap:var(--space-3);align-items:flex-start}
.alert svg{flex-shrink:0;margin-top:2px}
.alert-success{background:var(--color-success-light);color:var(--color-success)}
.alert-warning{background:var(--color-warning-light);color:var(--color-warning)}
.alert-info{background:var(--color-primary-light);color:var(--color-primary)}
.alert-gold{background:var(--color-gold-light);color:var(--color-gold)}

/* Chart canvas */
.chart-wrap{position:relative;height:280px;width:100%}

/* Wealth projection table */
.wealth-table-wrap{overflow-x:auto;max-height:280px;overflow-y:auto}
.wealth-table{font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.wealth-table th{position:sticky;top:0;background:var(--color-surface);padding:var(--space-2) var(--space-3);font-weight:600;text-align:right;color:var(--color-text-muted);font-size:var(--text-xs);letter-spacing:0.04em;border-bottom:2px solid var(--color-divider)}
.wealth-table th:first-child{text-align:left}
.wealth-table td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-divider);text-align:right;color:var(--color-text)}
.wealth-table td:first-child{text-align:left;color:var(--color-text-muted)}
.wealth-table .milestone-row td{background:oklch(from var(--color-gold) l c h/0.08);color:var(--color-gold);font-weight:600}

/* Deadline tracker */
.deadline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3)}
.deadline-card{background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center}
.deadline-day{font-size:var(--text-xl);font-weight:700;color:var(--color-primary);font-variant-numeric:tabular-nums}
.deadline-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);margin-top:var(--space-1)}
.deadline-date{font-size:var(--text-sm);font-weight:500;color:var(--color-text);margin-top:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-surface-2);border-radius:var(--radius-full);display:inline-block}
.deadline-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.progress-bar-wrap{margin:var(--space-4) 0}
.progress-label{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.progress-bar{height:8px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-success),var(--color-primary));transition:width 0.6s cubic-bezier(0.16,1,0.3,1)}

/* Boot calculator */
.boot-summary{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)}
.boot-card{background:var(--color-surface-offset);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.boot-card-label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.boot-card-val{font-size:var(--text-lg);font-weight:700;margin-top:var(--space-1);font-variant-numeric:tabular-nums}

/* Identification rules */
.id-rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.id-rule-card{border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);cursor:pointer;transition:border-color var(--transition),background var(--transition)}
.id-rule-card.active{border-color:var(--color-primary);background:var(--color-primary-light)}
.id-rule-card h4{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-1)}
.id-rule-card p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.5}

/* Exchange type pills */
.exchange-type-group{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.exchange-type-pill{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:all var(--transition)}
.exchange-type-pill.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.exchange-type-pill:hover:not(.active){border-color:var(--color-primary);color:var(--color-primary)}

/* QI cost estimator */
.qi-cost-row{display:flex;justify-content:space-between;padding:var(--space-2) 0;font-size:var(--text-sm);border-bottom:1px solid var(--color-divider)}
.qi-cost-row:last-child{border-bottom:none;font-weight:700;color:var(--color-text)}
.qi-cost-row span:last-child{font-variant-numeric:tabular-nums}

/* Sell vs Exchange comparison */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.compare-col{border-radius:var(--radius-lg);padding:var(--space-5);border:2px solid var(--color-border)}
.compare-col.winner{border-color:var(--color-success);background:var(--color-success-light)}
.compare-col h4{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.compare-col .big-num{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text)}
.compare-col.winner .big-num{color:var(--color-success)}
.compare-col .sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-1)}

/* Action bar */
.action-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}

/* Footer */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-8) var(--space-6);text-align:center;margin-top:var(--space-12)}
.site-footer p{font-size:var(--text-xs);color:var(--color-text-muted);max-width:680px;margin-inline:auto;line-height:1.7}

/* Collapsible */
.collapse-section{margin-bottom:var(--space-4);border-bottom:1px solid var(--color-divider)}
.collapse-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--space-3) 0;font-size:var(--text-sm);font-weight:600;color:var(--color-text);text-align:left;cursor:pointer}
.collapse-toggle svg{transition:transform var(--transition);flex-shrink:0}
.collapse-toggle.open svg{transform:rotate(180deg)}
.collapse-body{padding-bottom:var(--space-4)}

/* Hide/show util */
.hidden{display:none !important}

/* Stepped up basis special */
.stepped-up-box{background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-gold-light) 100%);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-top:var(--space-4)}
.stepped-up-box h4{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-2)}
.stepped-up-box p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.6}
.stepped-up-box .val{font-size:var(--text-lg);font-weight:700;color:var(--color-gold);margin:var(--space-2) 0}

@media(max-width:639px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .compare-grid{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .id-rules-grid{grid-template-columns:1fr}
  .boot-summary{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────
   SHARED SECTION SHELL
   ───────────────────────────────────────────────── */
.ed-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-10, 2.5rem);
  padding: 0 var(--space-6, 1.5rem);
}
.ed-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ed-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.ed-card-head svg {
  width: 18px; height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.ed-card-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}
.ed-card-head .ed-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ─────────────────────────────────────────────────
   SECTION 1: HOW IT WORKS
   ───────────────────────────────────────────────── */

/* Formula strip */
.hiw-formula-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--color-primary);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.hiw-formula-strip .fv-sym {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: #fff;
  font-weight: 400;
}
.hiw-formula-strip .fv-arrow {
  color: rgba(255,255,255,0.5);
  font-size: 1.3rem;
  padding: 0 var(--space-2);
}
.hiw-formula-strip .fv-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hiw-formula-strip .fv-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* 6-module grid */
.hiw-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
}
.hiw-module {
  background: var(--color-surface);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hiw-module-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.hiw-module-badge span {
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.mod-navy span  { background: var(--color-primary); }
.mod-gold span  { background: var(--color-gold); }
.mod-green span { background: var(--color-success); }

.mod-navy  .hiw-module-badge  { color: var(--color-primary); }
.mod-gold  .hiw-module-badge  { color: var(--color-gold); }
.mod-green .hiw-module-badge  { color: var(--color-success); }

.hiw-module h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}
.hiw-module p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}
.hiw-module ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hiw-module ul li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.hiw-module ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: 10px;
  top: 1px;
}

/* Step-by-step flow */
.hiw-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.hiw-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}
.hiw-step:last-child { border-bottom: none; }
.hiw-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.hiw-step-body { flex: 1; min-width: 0; }
.hiw-step-body strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 4px;
}
.hiw-step-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.hiw-step-tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-gold-light);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────
   SECTION 2: EDUCATIONAL CONTENT
   ───────────────────────────────────────────────── */

/* Intro banner */
.ed-intro-banner {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-gold-light) 100%);
}
.ed-intro-banner h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.ed-intro-banner p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
  max-width: 72ch;
}

/* Content 2-col layout */
.ed-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ed-col {
  padding: var(--space-6);
  border-right: 1px solid var(--color-border);
}
.ed-col:last-child { border-right: none; }

/* Topic blocks within columns */
.ed-topic {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.ed-topic:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ed-topic-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ed-topic-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.icon-navy  { background: var(--color-primary-light); }
.icon-gold  { background: var(--color-gold-light); }
.icon-green { background: var(--color-success-light); }

.ed-topic h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.ed-topic p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-3);
}
.ed-topic p:last-child { margin-bottom: 0; }
.ed-topic strong { color: var(--color-text); font-weight: 600; }
.ed-topic a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.ed-topic a:hover { text-decoration: underline; }

/* Data table inside topic */
.ed-data-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}
.ed-data-table th {
  background: var(--color-surface-offset);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.ed-data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: middle;
}
.ed-data-table tr:last-child td { border-bottom: none; }
.ed-data-table .td-muted { color: var(--color-text-muted); }
.ed-data-table .td-pos   { color: var(--color-success); font-weight: 600; }
.ed-data-table .td-neg   { color: var(--color-error); }
.ed-data-table .td-gold  { color: var(--color-gold); font-weight: 600; }
.ed-data-table .td-head-row td { font-weight: 700; background: var(--color-primary-light); color: var(--color-primary); }

/* Alert callout inside topic */
.ed-callout {
  display: flex;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.ed-callout-icon { font-size: 16px; flex-shrink: 0; line-height: 1.4; }
.ed-callout-navy  { background: var(--color-primary-light); color: var(--color-primary); }
.ed-callout-gold  { background: var(--color-gold-light);    color: var(--color-gold); }
.ed-callout-green { background: var(--color-success-light); color: var(--color-success); }
.ed-callout-warn  { background: var(--color-warning-light); color: var(--color-warning); }

/* Gov reference links panel (bottom strip) */
.ed-ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  align-items: center;
}
.ed-ref-strip-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.ed-ref-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.ed-ref-link:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}
.ed-ref-link .gov-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 3px;
  padding: 1px 4px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* ─── MOBILE ─── */
@media screen and (max-width: 860px) {
  .ed-section-wrap       { padding: 0 var(--space-4) !important; }
  .ed-card-head          { padding: var(--space-4) !important; flex-wrap: wrap; }
  .hiw-modules-grid      { grid-template-columns: 1fr 1fr !important; }
  .hiw-steps             { padding: var(--space-4) !important; }
  .hiw-formula-strip     { padding: var(--space-4) !important; gap: var(--space-1) !important; }
  .hiw-formula-strip .fv-sym { font-size: clamp(1rem,5vw,1.4rem) !important; }
  .ed-content-grid       { grid-template-columns: 1fr !important; }
  .ed-col                { border-right: none !important; border-bottom: 1px solid var(--color-border); }
  .ed-col:last-child     { border-bottom: none !important; }
  .ed-ref-strip          { padding: var(--space-4) !important; }
}
@media screen and (max-width: 540px) {
  .hiw-modules-grid      { grid-template-columns: 1fr !important; }
  .ed-data-table td,
  .ed-data-table th      { padding: var(--space-1) var(--space-2) !important; }
  .hiw-step              { gap: var(--space-3) !important; }
}
/* ─────────────────────────────────────────────────
   5 REAL US EXAMPLES SECTION
   ───────────────────────────────────────────────── */
.ex-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-10, 2.5rem);
  padding: 0 var(--space-6, 1.5rem);
}
.ex-outer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Header */
.ex-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.ex-section-head svg {
  width: 18px; height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.ex-section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}
.ex-count-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Tab navigation */
.ex-tab-nav {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ex-tab-nav::-webkit-scrollbar { display: none; }

.ex-tab-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  border: none;
  background: none;
}
.ex-tab-btn .ex-tab-icon {
  font-size: 14px;
  line-height: 1;
}
.ex-tab-btn.active {
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.ex-tab-btn:hover:not(.active) {
  background: oklch(from var(--color-primary) l c h / 0.06);
  color: var(--color-text);
}

/* Example panels */
.ex-panel { display: none; }
.ex-panel.active { display: block; }

.ex-panel-inner {
  padding: var(--space-6);
}

/* Panel header */
.ex-panel-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.ex-panel-title-group { flex: 1; min-width: 0; }
.ex-exchange-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.ex-pill-delayed  { background: var(--color-primary-light);  color: var(--color-primary); }
.ex-pill-reverse  { background: var(--color-gold-light);     color: var(--color-gold); }
.ex-pill-improve  { background: var(--color-success-light);  color: var(--color-success); }

.ex-panel-hdr h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}
.ex-property-route {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.ex-property-route strong { color: var(--color-text); font-weight: 600; }
.ex-property-route .ex-arrow {
  color: var(--color-text-faint);
  font-size: 14px;
}

/* Headline KPI strip */
.ex-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.ex-kpi {
  background: var(--color-surface);
  padding: var(--space-4);
  text-align: center;
}
.ex-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.ex-kpi-val {
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1.2;
}
.ex-kpi-val.deferred { color: var(--color-success); }
.ex-kpi-val.owed     { color: var(--color-error); }
.ex-kpi-val.gold     { color: var(--color-gold); }
.ex-kpi-val.primary  { color: var(--color-primary); }
.ex-kpi-sub {
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

/* 3-col content layout */
.ex-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap: var(--space-4);
}

/* Inner content cards */
.ex-inner-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ex-inner-head {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff; /* Changed to white for readability on the dark background */
  background: #142c53; /* Your requested navy color */
}
.ex-inner-body { padding: var(--space-1) 0; }

.ex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  gap: var(--space-2);
}
.ex-row:last-child { border-bottom: none; }
.ex-row .ex-row-label { color: var(--color-text-muted); flex: 1; }
.ex-row .ex-row-val   {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}
.ex-row .ex-row-val.neg  { color: var(--color-error); }
.ex-row .ex-row-val.pos  { color: var(--color-success); }
.ex-row .ex-row-val.gold { color: var(--color-gold); }
.ex-row.ex-total-row {
  background: var(--color-surface);
}
.ex-row.ex-total-row .ex-row-label,
.ex-row.ex-total-row .ex-row-val {
  font-weight: 700;
  color: var(--color-text);
}
.ex-row.ex-deferred-row {
  background: var(--color-success-light);
}
.ex-row.ex-deferred-row .ex-row-label,
.ex-row.ex-deferred-row .ex-row-val {
  color: var(--color-success);
  font-weight: 700;
}

/* Insight callout */
.ex-insight {
  display: flex;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.65;
  align-items: flex-start;
}
.ex-insight-icon { font-size: 16px; flex-shrink: 0; line-height: 1.5; }
.ex-insight-navy  { background: var(--color-primary-light); color: var(--color-primary); }
.ex-insight-gold  { background: var(--color-gold-light);    color: var(--color-gold); }
.ex-insight-green { background: var(--color-success-light); color: var(--color-success); }
.ex-insight-warn  { background: var(--color-warning-light); color: var(--color-warning); }
.ex-insight a     { color: inherit; font-weight: 700; }

/* CTA bar */
.ex-cta-bar {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ex-cta-bar p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.ex-cta-bar p strong { color: var(--color-text); }
.ex-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.ex-cta-btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.ex-cta-btn svg { width: 13px; height: 13px; }

/* ── MOBILE ── */
@media screen and (max-width: 860px) {
  .ex-section-wrap   { padding: 0 var(--space-4) !important; }
  .ex-section-head   { padding: var(--space-4) !important; flex-wrap: wrap; }
  .ex-panel-inner    { padding: var(--space-4) !important; }
  .ex-kpi-strip      { grid-template-columns: 1fr 1fr !important; }
  .ex-content-grid   { grid-template-columns: 1fr !important; }
  .ex-panel-hdr      { flex-direction: column !important; gap: var(--space-2) !important; }
  .ex-cta-bar        { padding: var(--space-4) !important; flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 480px) {
  .ex-kpi-strip      { grid-template-columns: 1fr !important; }
  .ex-tab-btn        { padding: var(--space-2) var(--space-3) !important; font-size: 11px !important; }
}
/* ══════════════════════════════════════════════════════
   PRO & EXPERT TIPS SECTION
   ══════════════════════════════════════════════════════ */

.tips-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-12, 3rem);
  padding: 0 var(--space-6, 1.5rem);
}

/* ── Outer card ─────────────────────────────────────── */
.tips-outer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Section header ─────────────────────────────────── */
.tips-section-head {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0e2140 100%);
  color: var(--color-text-inverse);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.tips-head-icon {
  width: 44px; height: 44px;
  background: oklch(from var(--color-primary) l c h / 0.3);
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}
.tips-head-text { flex: 1; min-width: 0; }
.tips-head-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: oklch(1 0 0 / 0.12);
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  margin-bottom: var(--space-2);
}
.tips-head-badge svg { width: 10px; height: 10px; }
.tips-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: #fff;
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.tips-section-head p {
  font-size: var(--text-xs);
  opacity: 0.82;
  margin: 0;
  max-width: 640px;
  line-height: 1.65;
}

/* ── Category filter bar ─────────────────────────────── */
.tips-filter-bar {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.tips-filter-bar::-webkit-scrollbar { display: none; }
.tips-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: var(--font-body);
}
.tips-filter-btn.active,
.tips-filter-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.tips-filter-btn .tips-filter-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Tips body ───────────────────────────────────────── */
.tips-body {
  padding: var(--space-6);
}

/* ── Category label ──────────────────────────────────── */
.tips-category-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.tips-category-label:first-child { margin-top: 0; }
.tips-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Tips grid: 2 cols on desktop ────────────────────── */
.tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

/* ── Individual tip card ─────────────────────────────── */
.tip-card {
  background: var(--color-surface-offset);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.tip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  border-radius: 3px 0 0 3px;
}
.tip-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* accent stripe colours */
.tip-card.tip-navy::before    { background: var(--color-primary); }
.tip-card.tip-gold::before    { background: var(--color-gold); }
.tip-card.tip-green::before   { background: var(--color-success); }
.tip-card.tip-warn::before    { background: var(--color-warning); }
.tip-card.tip-error::before   { background: var(--color-error); }

/* hover tints */
.tip-card.tip-navy:hover  { border-color: var(--color-primary); }
.tip-card.tip-gold:hover  { border-color: var(--color-gold); }
.tip-card.tip-green:hover { border-color: var(--color-success); }
.tip-card.tip-warn:hover  { border-color: var(--color-warning); }
.tip-card.tip-error:hover { border-color: var(--color-error); }

/* tip header row */
.tip-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.tip-icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
.tip-card.tip-navy  .tip-icon-wrap { background: var(--color-primary-light); }
.tip-card.tip-gold  .tip-icon-wrap { background: var(--color-gold-light); }
.tip-card.tip-green .tip-icon-wrap { background: var(--color-success-light); }
.tip-card.tip-warn  .tip-icon-wrap { background: var(--color-warning-light); }
.tip-card.tip-error .tip-icon-wrap { background: var(--color-error-light); }

.tip-title-group { flex: 1; min-width: 0; }
.tip-number {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.tip-card.tip-navy  .tip-number { color: var(--color-primary); }
.tip-card.tip-gold  .tip-number { color: var(--color-gold); }
.tip-card.tip-green .tip-number { color: var(--color-success); }
.tip-card.tip-warn  .tip-number { color: var(--color-warning); }
.tip-card.tip-error .tip-number { color: var(--color-error); }

.tip-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

/* body text */
.tip-body {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
  flex: 1;
}
.tip-body strong { color: var(--color-text); }
.tip-body code {
  font-family: monospace;
  font-size: 11px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text);
}

/* data callout inside tip */
.tip-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  gap: var(--space-3);
}
.tip-data-row .tip-dl { color: var(--color-text-muted); }
.tip-data-row .tip-dv {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
.tip-card.tip-navy  .tip-data-row .tip-dv { color: var(--color-primary); }
.tip-card.tip-gold  .tip-data-row .tip-dv { color: var(--color-gold); }
.tip-card.tip-green .tip-data-row .tip-dv { color: var(--color-success); }
.tip-card.tip-warn  .tip-data-row .tip-dv { color: var(--color-warning); }
.tip-card.tip-error .tip-data-row .tip-dv { color: var(--color-error); }

/* irc citation tag */
.tip-cite {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity var(--transition);
}
.tip-cite:hover { opacity: 1; }
.tip-card.tip-navy  .tip-cite { color: var(--color-primary); }
.tip-card.tip-gold  .tip-cite { color: var(--color-gold); }
.tip-card.tip-green .tip-cite { color: var(--color-success); }
.tip-card.tip-warn  .tip-cite { color: var(--color-warning); }
.tip-card.tip-error .tip-cite { color: var(--color-error); }

/* tip footer row (cite + action) */
.tip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

/* ── "Featured" / wide tip card ─────────────────────── */
.tip-card.tip-featured {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-5);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-gold-light) 100%);
}
.tip-card.tip-featured::before { background: var(--color-gold); width: 4px; }
.tip-card.tip-featured .tip-icon-wrap {
  width: 48px; height: 48px;
  font-size: 22px;
  background: var(--color-gold-light);
  border: 1.5px solid var(--color-gold);
  flex-shrink: 0;
}
.tip-card.tip-featured .tip-number { color: var(--color-gold); }
.tip-card.tip-featured .tip-body  { color: var(--color-text); }
.tip-featured-content { flex: 1; min-width: 0; }
.tip-featured-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.tip-featured-stat {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.tip-featured-stat .tsv {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
  display: block;
}
.tip-featured-stat .tsl {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: block;
}

/* ── Warning banner ──────────────────────────────────── */
.tips-warning-banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-warning);
  line-height: 1.65;
}
.tips-warning-banner svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.tips-warning-banner strong { color: var(--color-warning); }

/* ── CTA bar ─────────────────────────────────────────── */
.tips-cta-bar {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.tips-cta-bar p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}
.tips-cta-bar p strong { color: var(--color-text); }
.tips-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
}
.tips-cta-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}
.tips-cta-btn svg { width: 13px; height: 13px; }

/* ── Responsive ──────────────────────────────────────── */
@media screen and (max-width: 860px) {
  .tips-section-wrap  { padding: 0 var(--space-4) !important; }
  .tips-body          { padding: var(--space-4) !important; }
  .tips-grid          { grid-template-columns: 1fr !important; }
  .tip-card.tip-featured { flex-direction: column !important; }
  .tip-featured-data  { grid-template-columns: 1fr 1fr !important; }
  .tips-filter-bar    { padding: var(--space-2) var(--space-4) !important; }
  .tips-cta-bar       { padding: var(--space-4) !important; flex-direction: column; align-items: flex-start; }
  .tips-section-head  { padding: var(--space-4) !important; }
}
@media screen and (max-width: 480px) {
  .tip-featured-data  { grid-template-columns: 1fr !important; }
  .tips-filter-btn    { font-size: 10px !important; padding: 4px 8px !important; }
}


/* ══════════════════════════════════════════════════════
   RELATED CALCULATORS SECTION
   ══════════════════════════════════════════════════════ */

.related-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-16, 4rem);
  padding: 0 var(--space-6, 1.5rem);
}

/* ── Outer shell ─────────────────────────────────────── */
.related-outer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Section header ──────────────────────────────────── */
.related-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.related-head-icon-wrap {
  width: 40px; height: 40px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.related-head-icon-wrap svg {
  width: 18px; height: 18px;
  color: var(--color-primary);
}
.related-head-text { flex: 1; min-width: 0; }
.related-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-text);
  margin: 0 0 2px;
  line-height: 1.2;
}
.related-section-head p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}
.related-count-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Body ─────────────────────────────────────────────── */
.related-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Tier label ──────────────────────────────────────── */
.related-tier-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.related-tier-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.related-tier-label.tier-navy   .related-tier-dot { background: var(--color-primary); }
.related-tier-label.tier-gold   .related-tier-dot { background: var(--color-gold); }
.related-tier-label.tier-green  .related-tier-dot { background: var(--color-success); }
.related-tier-label.tier-navy   { color: var(--color-primary); }
.related-tier-label.tier-gold   { color: var(--color-gold); }
.related-tier-label.tier-green  { color: var(--color-success); }

/* ── Cards grid: 3-col on desktop ───────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── Individual card ─────────────────────────────────── */
.related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-offset);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.related-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.related-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.related-card.rc-navy::before   { background: var(--color-primary); }
.related-card.rc-gold::before   { background: var(--color-gold); }
.related-card.rc-green::before  { background: var(--color-success); }

.related-card.rc-navy:hover   { border-color: var(--color-primary); }
.related-card.rc-gold:hover   { border-color: var(--color-gold); }
.related-card.rc-green:hover  { border-color: var(--color-success); }

/* card inner */
.related-card-inner {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* icon + title row */
.rc-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.rc-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}
.related-card.rc-navy  .rc-icon { background: var(--color-primary-light); }
.related-card.rc-gold  .rc-icon { background: var(--color-gold-light); }
.related-card.rc-green .rc-icon { background: var(--color-success-light); }

.rc-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

/* description */
.rc-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
}

/* why tag */
.rc-why {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  align-self: flex-start;
  margin-top: auto;
}
.related-card.rc-navy  .rc-why { color: var(--color-primary); background: var(--color-primary-light); border-color: oklch(from var(--color-primary) l c h / 0.25); }
.related-card.rc-gold  .rc-why { color: var(--color-gold); background: var(--color-gold-light); border-color: oklch(from var(--color-gold) l c h / 0.25); }
.related-card.rc-green .rc-why { color: var(--color-success); background: var(--color-success-light); border-color: oklch(from var(--color-success) l c h / 0.25); }

/* card footer arrow */
.rc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-5) var(--space-3);
  border-top: 1px solid var(--color-divider);
  margin-top: auto;
}
.rc-use-text {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.rc-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition);
  flex-shrink: 0;
}
.related-card.rc-navy  .rc-arrow { background: var(--color-primary-light); color: var(--color-primary); }
.related-card.rc-gold  .rc-arrow { background: var(--color-gold-light);    color: var(--color-gold); }
.related-card.rc-green .rc-arrow { background: var(--color-success-light); color: var(--color-success); }
.related-card:hover .rc-arrow { transform: translateX(3px); }
.rc-arrow svg { width: 11px; height: 11px; }

/* ── "All Calculators" banner ────────────────────────── */
.related-all-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, #0e2140 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}
.related-all-banner-text { flex: 1; min-width: 0; }
.related-all-banner-text h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  color: #fff;
  margin: 0 0 3px;
}
.related-all-banner-text p {
  font-size: var(--text-xs);
  color: oklch(1 0 0 / 0.7);
  margin: 0;
}
.related-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gold);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.related-all-btn:hover {
  background: oklch(from var(--color-gold) calc(l - 0.05) c h);
  transform: translateY(-1px);
}
.related-all-btn svg { width: 13px; height: 13px; }

/* ── Responsive ──────────────────────────────────────── */
@media screen and (max-width: 960px) {
  .related-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media screen and (max-width: 600px) {
  .related-section-wrap { padding: 0 var(--space-4) !important; }
  .related-body         { padding: var(--space-4) !important; }
  .related-grid         { grid-template-columns: 1fr !important; }
  .related-all-banner   { flex-direction: column; align-items: flex-start; }
  .related-section-head { padding: var(--space-4) !important; }
}
/* ══════════════════════════════════════════════════════
   LEGAL DISCLAIMER & EDITORIAL TRANSPARENCY SECTION
   ══════════════════════════════════════════════════════ */

.legal-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-16, 4rem);
  padding: 0 var(--space-6, 1.5rem);
}

/* ── Outer card ──────────────────────────────────────── */
.legal-outer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Big red disclaimer banner ──────────────────────── */
.legal-disclaimer-banner {
  background: var(--color-error-light);
  border-bottom: 2px solid var(--color-error);
  padding: var(--space-5) var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.legal-banner-icon {
  width: 44px; height: 44px;
  background: var(--color-error);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.legal-banner-icon svg { width: 22px; height: 22px; }
.legal-banner-text { flex: 1; }
.legal-banner-text h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--color-error);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}
.legal-banner-text p {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin: 0;
  line-height: 1.7;
  opacity: 0.9;
}
.legal-banner-text p strong { color: var(--color-error); opacity: 1; }

/* ── Body layout: 2-col on desktop ──────────────────── */
.legal-body {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* ── Full-width rows inside body ─────────────────────── */
.legal-full { grid-column: 1 / -1; }

/* ── Section headings ─────────────────────────────────── */
.legal-block-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-light);
}
.legal-block-title svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Block cards ─────────────────────────────────────── */
.legal-block {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.legal-block p,
.legal-block li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
}
.legal-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.legal-block ul li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.legal-block ul li::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.legal-block strong { color: var(--color-text); }
.legal-block a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: oklch(from var(--color-primary) l c h / 0.35);
  text-underline-offset: 2px;
  transition: color var(--transition), text-decoration-color var(--transition);
}
.legal-block a:hover {
  color: var(--color-primary-hover);
  text-decoration-color: var(--color-primary);
}

/* ── Methodology table ───────────────────────────────── */
.legal-methodology-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.legal-methodology-table th {
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-divider);
}
.legal-methodology-table td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.6;
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.legal-methodology-table tr:last-child td { border-bottom: none; }
.legal-methodology-table td:first-child {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  width: 32%;
}
.legal-methodology-table code {
  font-family: monospace;
  font-size: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text);
}

/* ── Authority links grid ────────────────────────────── */
.legal-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.legal-auth-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.legal-auth-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.legal-auth-badge {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  white-space: nowrap;
  margin-top: 1px;
}
.legal-auth-badge.gov  { color: var(--color-primary);  border-color: var(--color-primary);  background: var(--color-primary-light); }
.legal-auth-badge.irs  { color: var(--color-error);    border-color: var(--color-error);    background: var(--color-error-light); }
.legal-auth-badge.reg  { color: var(--color-gold);     border-color: var(--color-gold);     background: var(--color-gold-light); }
.legal-auth-badge.cfr  { color: var(--color-success);  border-color: var(--color-success);  background: var(--color-success-light); }

.legal-auth-content { flex: 1; min-width: 0; }
.legal-auth-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 2px;
}
.legal-auth-desc {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.legal-auth-link:hover .legal-auth-name { color: var(--color-primary); }

/* ── Last reviewed + metadata bar ───────────────────── */
.legal-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-offset);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.legal-meta-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.legal-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--color-text-muted);
}
.legal-meta-item svg { width: 12px; height: 12px; color: var(--color-primary); flex-shrink: 0; }
.legal-meta-item strong { color: var(--color-text); }
.legal-copyright {
  font-size: 10px;
  color: var(--color-text-faint);
}
.legal-copyright a {
  color: var(--color-primary);
  text-decoration: none;
}
.legal-copyright a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────── */
@media screen and (max-width: 860px) {
  .legal-section-wrap { padding: 0 var(--space-4) !important; }
  .legal-body         { grid-template-columns: 1fr !important; padding: var(--space-4) !important; }
  .legal-full         { grid-column: 1 !important; }
  .legal-auth-grid    { grid-template-columns: 1fr !important; }
  .legal-disclaimer-banner { flex-direction: column; padding: var(--space-4) !important; }
  .legal-meta-bar     { padding: var(--space-3) var(--space-4) !important; flex-direction: column; align-items: flex-start; }
}
@media screen and (max-width: 480px) {
  .legal-auth-grid    { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   FAQ SECTION (1031 EXCHANGE)
   ══════════════════════════════════════════════════════ */

.faq-section-wrap {
  max-width: var(--content-wide, 1200px);
  margin: 0 auto var(--space-16, 4rem);
  padding: 0 var(--space-6, 1.5rem);
}

.faq-outer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────── */
.faq-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--color-primary) 0%, #0e2140 100%);
  color: var(--color-text-inverse);
}
.faq-head-icon-wrap {
  width: 44px; height: 44px;
  background: oklch(1 0 0 / 0.1);
  border: 1px solid oklch(1 0 0 / 0.2);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.faq-head-text { flex: 1; min-width: 0; }
.faq-section-head h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.2;
}
.faq-section-head p {
  font-size: var(--text-xs);
  opacity: 0.85;
  margin: 0;
}
.faq-count-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-gold);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Layout ────────────────────────────────────────── */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-2);
}
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }

/* ── Accordion List ────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}
.faq-item.active {
  border-color: var(--color-primary);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.faq-q:hover { background: var(--color-surface-offset); }
.faq-q-text {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}
.faq-item.active .faq-q-text { color: var(--color-primary); }

.faq-icon-wrap {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.faq-item.active .faq-icon-wrap {
  background: var(--color-primary);
  color: #fff;
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: var(--color-surface);
}
.faq-item.active .faq-a {
  padding-bottom: var(--space-4);
}
.faq-a-inner {
  padding: 0 var(--space-5) 0 calc(var(--space-5) + 8px);
  border-left: 2px solid var(--color-gold);
  margin-left: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.faq-a-inner p { margin-bottom: var(--space-2); }
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-a-inner strong { color: var(--color-text); }

.faq-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}
.faq-tag {
  font-size: 10px;
  font-weight: 600;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-divider);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  color: var(--color-text-faint);
}

/* ── Right Panel (Sticky Summary) ──────────────────── */
.faq-sidebar {
  position: sticky;
  top: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  align-self: start;
}
.faq-sidebar-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gold);
  background: var(--color-gold-light);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}
.faq-sidebar h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.faq-sidebar p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.faq-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
}
.faq-sidebar-item svg { color: var(--color-primary); }

/* Responsive */
@media screen and (max-width: 640px) {
  .faq-section-head { padding: var(--space-4); }
  .faq-layout { padding: var(--space-4); }
  .faq-q { padding: var(--space-3) var(--space-4); }
  .faq-a-inner { margin-left: var(--space-4); padding-right: var(--space-4); }
}
/* =========================================================
   HERO CENTERING & TAB WRAPPING MOBILE PATCH
   ========================================================= */

/* 1. Force Hero Content to the Absolute Center */
.hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero h1, .hero p {
  text-align: center !important;
}

/* 2. Fix Tab Navigation by Forcing it to Wrap (Like the Pills) */
.tab-nav {
  flex-wrap: wrap !important; /* Forces the tabs to drop to the next line */
  overflow-x: visible !important; /* Removes the scrolling behavior */
  height: auto !important;
  justify-content: center !important;
}

.tab-btn {
  flex: 1 1 calc(50% - 8px) !important; /* Creates a neat 2x2 grid on mobile */
  min-width: 110px !important; /* Prevents tabs from getting too squished */
  white-space: nowrap !important;
  margin-bottom: 2px !important; /* Adds slight spacing between wrapped rows */
}

/* Shrink tab text slightly on very small screens for a better fit */
@media screen and (max-width: 500px) {
  .tab-btn {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}
/* ============================================================
   GLOBAL MOBILE RESETS
   ============================================================ */

/* Prevent horizontal scroll on all screens */
html, body {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

* {
  box-sizing: border-box !important;
  min-width: 0 !important; /* Fix Firefox/Chrome grid blowout */
}

img, svg, canvas, iframe {
  max-width: 100% !important;
}

/* ============================================================
   CALCULATOR — SITE HEADER
   ============================================================ */

@media (max-width: 639px) {
  .site-header {
    padding: var(--space-3) var(--space-4) !important;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .site-logo-text {
    font-size: var(--text-sm) !important;
  }
  .site-logo svg {
    width: 24px !important;
    height: 24px !important;
  }
  .header-actions {
    gap: var(--space-2) !important;
  }
  .theme-toggle {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ============================================================
   CALCULATOR — HERO SECTION
   ============================================================ */

@media (max-width: 768px) {
  .hero {
    padding: var(--space-8) var(--space-5) !important;
  }
  .hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
  }
  .hero p {
    font-size: var(--text-xs) !important;
  }
  .hero-badge {
    font-size: 10px !important;
    padding: var(--space-1) var(--space-3) !important;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-6) var(--space-4) !important;
  }
  .hero h1 {
    font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
  }
}

/* ============================================================
   CALCULATOR — MAIN CONTAINER & LAYOUT
   ============================================================ */

/* Tablet: single column with reduced padding */
@media (max-width: 1023px) {
  .main-container {
    grid-template-columns: 1fr !important;
    padding: var(--space-6) var(--space-5) !important;
    gap: var(--space-6) !important;
  }
}

@media (max-width: 639px) {
  .main-container {
    padding: var(--space-4) var(--space-3) !important;
    gap: var(--space-4) !important;
  }
}

@media (max-width: 374px) {
  .main-container {
    padding: var(--space-3) var(--space-2) !important;
  }
}

/* ============================================================
   CALCULATOR — FORM CARD
   ============================================================ */

@media (max-width: 639px) {
  .form-card {
    padding: var(--space-4) !important;
    border-radius: var(--radius-lg) !important;
  }
  .form-section-title {
    font-size: 9px !important;
  }
}

@media (max-width: 374px) {
  .form-card {
    padding: var(--space-3) !important;
  }
}

/* ============================================================
   CALCULATOR — TAB NAVIGATION (CRITICAL FIX)
   Tabs overflow on screens < 400px due to white-space:nowrap
   ============================================================ */

@media (max-width: 639px) {
  .tab-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
    padding: 3px !important;
  }
  .tab-btn {
    white-space: normal !important;
    font-size: 11px !important;
    padding: var(--space-2) var(--space-2) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    min-height: 36px !important;
  }
}

@media (max-width: 374px) {
  .tab-nav {
    grid-template-columns: 1fr 1fr !important;
  }
  .tab-btn {
    font-size: 10px !important;
    padding: 6px 4px !important;
  }
}

/* ============================================================
   CALCULATOR — EXCHANGE TYPE PILLS
   ============================================================ */

@media (max-width: 639px) {
  .exchange-type-group {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }
  .exchange-type-pill {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 11px !important;
    padding: var(--space-2) var(--space-2) !important;
  }
}

/* ============================================================
   CALCULATOR — FORM ROW-2 (2-COL GRIDS IN FORM)
   ============================================================ */

@media (max-width: 480px) {
  .row-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
}

/* ============================================================
   CALCULATOR — INPUT PREFIX/SUFFIX
   ============================================================ */

@media (max-width: 374px) {
  .form-group input[type="number"],
  .form-group select {
    font-size: 14px !important; /* Prevents iOS zoom on focus */
    padding: var(--space-2) var(--space-3) !important;
  }
  .form-group input[type="number"].has-prefix {
    padding-left: var(--space-7) !important;
  }
  .form-group input[type="number"].has-suffix {
    padding-right: var(--space-7) !important;
  }
}

/* Prevent iOS auto-zoom (font-size must be >= 16px on inputs) */
@media (max-width: 768px) {
  input[type="number"],
  input[type="date"],
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   CALCULATOR — IDENTIFICATION RULE CARDS
   ============================================================ */

@media (max-width: 639px) {
  .id-rules-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .id-rule-card {
    padding: var(--space-3) !important;
  }
  .id-rule-card h4 {
    font-size: var(--text-xs) !important;
  }
}

/* ============================================================
   CALCULATOR — KPI GRID (RESULTS)
   ============================================================ */

@media (max-width: 639px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }
  .kpi-card {
    padding: var(--space-3) !important;
  }
  .kpi-value {
    font-size: var(--text-sm) !important;
  }
  .kpi-label {
    font-size: 9px !important;
  }
}

@media (max-width: 374px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CALCULATOR — SECTION CARDS (RESULTS PANEL)
   ============================================================ */

@media (max-width: 639px) {
  .section-card-header {
    padding: var(--space-3) var(--space-4) !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }
  .section-card-body {
    padding: var(--space-4) !important;
  }
  .section-card-header h3 {
    font-size: var(--text-sm) !important;
  }
}

/* ============================================================
   CALCULATOR — BREAKDOWN TABLE
   ============================================================ */

@media (max-width: 639px) {
  .breakdown-table {
    font-size: 12px !important;
  }
  .breakdown-table td {
    padding: var(--space-2) var(--space-2) !important;
  }
  /* Make label column wrap */
  .breakdown-table .label-col {
    max-width: 140px !important;
    word-break: break-word !important;
  }
}

/* ============================================================
   CALCULATOR — WEALTH PROJECTION TABLE (SCROLL FIX)
   ============================================================ */

@media (max-width: 768px) {
  .wealth-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 260px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
  }
  .wealth-table {
    min-width: 420px !important; /* Force table to be scrollable */
  }
}

/* ============================================================
   CALCULATOR — DEADLINE TRACKER
   ============================================================ */

@media (max-width: 639px) {
  .deadline-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }
  .deadline-card {
    padding: var(--space-3) !important;
  }
  .deadline-day {
    font-size: var(--text-lg) !important;
  }
}

@media (max-width: 374px) {
  .deadline-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   CALCULATOR — BOOT SUMMARY & COMPARE GRID
   ============================================================ */

@media (max-width: 639px) {
  .boot-summary {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .compare-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .compare-col {
    padding: var(--space-4) !important;
  }
  .compare-col .big-num {
    font-size: var(--text-lg) !important;
  }
}

/* ============================================================
   CALCULATOR — QI COST ROW
   ============================================================ */

@media (max-width: 480px) {
  .qi-cost-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: var(--space-2) 0 !important;
  }
  .qi-cost-row span:last-child {
    font-weight: 600 !important;
    color: var(--color-text) !important;
  }
}

/* ============================================================
   CALCULATOR — ACTION BAR (PDF + SHARE BUTTONS)
   ============================================================ */

@media (max-width: 639px) {
  .action-bar {
    flex-direction: column !important;
    gap: var(--space-2) !important;
  }
  .action-bar .btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   CALCULATOR — STEPPED UP BASIS BOX
   ============================================================ */

@media (max-width: 639px) {
  .stepped-up-box {
    padding: var(--space-3) var(--space-4) !important;
  }
  .stepped-up-box .val {
    font-size: var(--text-base) !important;
  }
}

/* ============================================================
   CALCULATOR — ALERT BOXES
   ============================================================ */

@media (max-width: 480px) {
  .alert {
    flex-direction: column !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
  }
}

/* ============================================================
   CALCULATOR — CHART CANVAS
   ============================================================ */

@media (max-width: 639px) {
  .chart-wrap {
    height: 220px !important;
  }
}

@media (max-width: 374px) {
  .chart-wrap {
    height: 180px !important;
  }
}

/* ============================================================
   CALCULATOR — SITE FOOTER
   ============================================================ */

@media (max-width: 639px) {
  .site-footer {
    padding: var(--space-6) var(--space-4) !important;
  }
  .site-footer p {
    font-size: 11px !important;
    line-height: 1.65 !important;
  }
}

/* ============================================================
   REAL US EXAMPLES SECTION — MOBILE FIX
   ============================================================ */

@media (max-width: 768px) {
  .examples-section-wrap {
    padding: 0 var(--space-4) !important;
  }
  .examples-tab-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-1) !important;
    overflow: visible !important;
  }
  .examples-tab-btn {
    white-space: normal !important;
    font-size: 11px !important;
    padding: var(--space-2) var(--space-2) !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
  .examples-kpi-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }
  .examples-data-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .examples-exchange-pill {
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .examples-kpi-strip {
    grid-template-columns: 1fr 1fr !important;
  }
  .examples-tab-nav {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 374px) {
  .examples-kpi-strip {
    grid-template-columns: 1fr !important;
  }
  .examples-tab-nav {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PRO TIPS SECTION — MOBILE FIX
   ============================================================ */

@media (max-width: 768px) {
  .tips-section-wrap,
  .tips-outer-card {
    border-radius: var(--radius-lg) !important;
  }
  .tips-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .tips-tab-nav {
    flex-wrap: wrap !important;
    gap: var(--space-1) !important;
  }
  .tips-tab-btn {
    flex: 1 1 auto !important;
    font-size: 11px !important;
    padding: var(--space-2) var(--space-2) !important;
    white-space: normal !important;
    text-align: center !important;
    min-width: 80px !important;
  }
}

/* ============================================================
   RELATED CALCULATORS SECTION — MOBILE ENHANCEMENT
   ============================================================ */

@media (max-width: 768px) {
  .related-section-wrap {
    padding: 0 var(--space-3) !important;
    margin-bottom: var(--space-8) !important;
  }
  .related-body {
    padding: var(--space-4) !important;
    gap: var(--space-4) !important;
  }
  .related-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) !important;
  }
  .related-section-head {
    padding: var(--space-4) !important;
  }
}

@media (max-width: 540px) {
  .related-grid {
    grid-template-columns: 1fr !important;
  }
  .related-all-banner {
    padding: var(--space-4) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
  }
  .related-all-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .rc-title {
    font-size: 13px !important;
  }
}

@media (max-width: 374px) {
  .related-section-wrap {
    padding: 0 var(--space-2) !important;
  }
  .related-body {
    padding: var(--space-3) !important;
  }
}

/* ============================================================
   LEGAL DISCLAIMER SECTION — MOBILE FIX
   ============================================================ */

@media (max-width: 768px) {
  .legal-section-wrap {
    padding: 0 var(--space-3) !important;
    margin-bottom: var(--space-8) !important;
  }
  .legal-body {
    grid-template-columns: 1fr !important;
    padding: var(--space-4) !important;
    gap: var(--space-4) !important;
  }
  .legal-full {
    grid-column: 1 !important;
  }
  /* FIX: Inline style editorial 2-col grid */
  .legal-block > div[style*="grid-template-columns:1fr 1fr"],
  .legal-block > div[style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }
  .legal-auth-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
  .legal-disclaimer-banner {
    padding: var(--space-4) !important;
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }
  .legal-banner-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .legal-banner-text h2 {
    font-size: var(--text-base) !important;
  }
  .legal-meta-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: var(--space-3) var(--space-4) !important;
    gap: var(--space-3) !important;
  }
  .legal-meta-items {
    gap: var(--space-3) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .legal-block {
    padding: var(--space-4) !important;
  }
  .legal-banner-text p {
    font-size: 11px !important;
  }
  .legal-methodology-table th,
  .legal-methodology-table td {
    font-size: 11px !important;
    padding: var(--space-2) var(--space-2) !important;
  }
  .legal-methodology-table td:first-child {
    width: 38% !important;
  }
  .legal-copyright {
    font-size: 10px !important;
    line-height: 1.7 !important;
  }
}

/* ============================================================
   UNIVERSAL SECTION WRAPPERS — SPACING FIX ON MOBILE
   ============================================================ */

@media (max-width: 639px) {
  .related-section-wrap,
  .legal-section-wrap,
  .examples-section-wrap,
  .tips-section-wrap {
    padding-left: var(--space-3) !important;
    padding-right: var(--space-3) !important;
    margin-bottom: var(--space-8) !important;
  }

  /* All outer cards — reduce border radius on mobile */
  .related-outer-card,
  .legal-outer-card,
  .examples-outer-card,
  .tips-outer-card {
    border-radius: var(--radius-lg) !important;
  }
}

@media (max-width: 374px) {
  .related-section-wrap,
  .legal-section-wrap,
  .examples-section-wrap,
  .tips-section-wrap {
    padding-left: var(--space-2) !important;
    padding-right: var(--space-2) !important;
  }
}

/* ============================================================
   TABLE OVERFLOW — UNIVERSAL FIX FOR ALL SECTIONS
   ============================================================ */

@media (max-width: 768px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  /* Exception: Keep inline-grid tables as grid */
  .legal-methodology-table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
}

/* ============================================================
   TOUCH TARGETS — MINIMUM 44px FOR ALL INTERACTIVE ELEMENTS
   ============================================================ */

@media (max-width: 768px) {
  button,
  .tab-btn,
  .exchange-type-pill,
  .id-rule-card,
  .related-card,
  .legal-auth-link,
  input[type="checkbox"] + .toggle-slider,
  select {
    min-height: 44px !important;
  }

  /* Toggle row touch target */
  .toggle-row {
    padding: var(--space-2) 0 !important;
    min-height: 44px !important;
    align-items: center !important;
  }
}

/* ============================================================
   SAFE AREA INSETS (iPhone notch / Dynamic Island)
   ============================================================ */

@supports (padding: max(0px)) {
  .site-header {
    padding-left: max(var(--space-6), env(safe-area-inset-left)) !important;
    padding-right: max(var(--space-6), env(safe-area-inset-right)) !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Custom Navy Header for Tax Breakdown */
.ex-inner-head.navy-header {
  background-color: #142c53 !important;
  color: #ffffff !important;
  border-bottom: none !important;
}
/* =========================================================
   NUCLEAR TYPOGRAPHY PATCH (PREMIUM SAAS STYLING)
   ========================================================= */

/* 1. Force Crisp Engine Rendering */
body, input, select, button {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* 2. Massive, Tight KPI Numbers (The "Money" Shots) */
.pia-big {
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important; /* Tightens the numbers */
  line-height: 1 !important;
  color: var(--p1) !important;
}
.kpi-val {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--p3) !important;
}

/* 3. Wide, Airy, Uppercase Labels (Creates Contrast) */
.form-label {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--p2) !important;
  margin-bottom: 8px !important;
}
.kpi-lbl, .res-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--p4) !important;
}

/* 4. Bold & Clear Inputs */
.form-input, select, .iw input {
  font-size: 15px !important;
  font-weight: 700 !important; /* Bolder input text */
  color: var(--p2) !important;
  letter-spacing: -0.2px !important;
}

/* 5. Punchy Headers */
.card-h, .ui-module-title, .hero-h1 {
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
}

/* 6. Actionable Buttons & Tabs */
.tab-btn, .calc-btn, .rtab {
  letter-spacing: 0.3px !important;
  text-transform: capitalize !important;
}
.calc-btn {
  font-size: 15.5px !important;
  letter-spacing: 0.5px !important;
}

/* 7. Refined Table Typography */
.tbl th, .dtbl th {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
}
.tbl td, .dtbl td {
  font-size: 13px !important;
  font-weight: 600 !important;
}
/* =========================================================
   HERO BANNER PROPORTION FIX (Reduce Height & Spread Text)
   ========================================================= */

.hero {
  padding: 2rem 1.5rem !important; /* Cuts the massive top and bottom padding in half */
  min-height: auto !important;
}

.hero h1 {
  max-width: 900px !important; /* Allows the title to spread out left-to-right */
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important; /* Scales perfectly on all screens */
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
}

.hero p {
  max-width: 800px !important; /* Allows the description to spread out */
  margin-bottom: 0 !important;
}