/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root{
  --p:#003d6b; --p-dark:#00284a; --p-mid:#004f8b; --p-soft:#1a5a96;
  --p-tint:#e6eef7; --p-tint2:#ccdcee;
  --gold:#b8860b; --gold-lt:#d4a017; --gold-pl:#fdf6e3;
  --white:#ffffff; --off:#f5f7fa; --off2:#edf1f6;
  --text:#1a2535; --mid:#3a4f63; --muted:#56687a;
  --border:#d8e2ec; --bdr-dk:#b8c8d8;
  --sh-xs:0 1px 3px rgba(0,40,74,.06),0 1px 2px rgba(0,40,74,.04);
  --sh-sm:0 2px 8px rgba(0,40,74,.08),0 1px 4px rgba(0,40,74,.05);
  --sh-md:0 4px 20px rgba(0,40,74,.11),0 2px 8px rgba(0,40,74,.07);
  --r:4px; --r2:8px; --r3:12px;
  --green:#15803d; --green-bg:#f0fdf4; --green-border:#bbf7d0;
  --red:#b91c1c; --red-bg:#fef2f2; --red-border:#fecaca;
  --blue:#1d4ed8; --blue-bg:#eff6ff; --blue-border:#bfdbfe;
  --purple:#7c3aed; --purple-bg:#f5f3ff; --purple-border:#ddd6fe;
  --orange:#c2410c; --orange-bg:#fff7ed; --orange-border:#fed7aa;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:108px;}
@media(max-width:768px){html{scroll-padding-top:70px;}}
@media(max-width:480px){html{scroll-padding-top:60px;}}
body{
  font-family:'Lato',Arial,sans-serif;font-size:1rem;line-height:1.72;
  color:var(--text);background:var(--white);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-top:108px;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--p-dark)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;outline:none}

/* ── TOP BAR, NAV, FOOTER, MOB-MENU, WA-FLOAT ──
   These are injected and styled by components.js / global stylesheet.
   Defining them here again causes style conflicts in normal (cached) mode.
   All component-level styles have been removed from this page CSS.
   ── */



/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.page-wrap{max-width:960px;margin:0 auto;padding:3rem 1.5rem 5rem}

/* ── PAGE HERO ── */
.page-hero{background:var(--p);padding:3rem 3rem 2.5rem;border-radius:var(--r2);margin-bottom:2rem;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(-60deg,transparent,transparent 44px,rgba(255,255,255,.016) 44px,rgba(255,255,255,.016) 45px),repeating-linear-gradient(30deg,transparent,transparent 44px,rgba(255,255,255,.01) 44px,rgba(255,255,255,.01) 45px);}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,var(--gold) 30%,var(--gold-lt) 70%,transparent 100%);}
.hero-inner{position:relative;z-index:2}
.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(184,134,11,.14);border:1px solid rgba(184,134,11,.32);color:var(--gold-lt);font-family:'Source Code Pro',monospace;font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:5px 14px;border-radius:2px;margin-bottom:1rem;}
.kicker-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.page-hero h1{font-family:'Merriweather',serif;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:900;color:var(--white);letter-spacing:-.025em;line-height:1.15;margin-bottom:.6rem;}
.page-hero h1 .gold{color:var(--gold)}
.page-hero p{font-size:.97rem;font-weight:300;color:rgba(255,255,255,.6);line-height:1.78;max-width:580px;}
.law-badge{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;background:rgba(184,134,11,.25);border:1px solid rgba(212,160,23,.6);color:#f0c040;font-family:'Source Code Pro',monospace;font-size:.7rem;font-weight:700;letter-spacing:.1em;padding:6px 14px;border-radius:3px;}

/* ── PANEL ── */
.panel{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r2);margin-bottom:1.1rem;overflow:hidden;box-shadow:var(--sh-xs);transition:box-shadow .25s;}
.panel:hover{box-shadow:var(--sh-sm)}
.panel-head{padding:1rem 1.4rem;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);background:var(--off);}
.step-badge{width:26px;height:26px;border-radius:50%;background:var(--p);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Source Code Pro',monospace;flex-shrink:0;}
.ph-title{font-family:'Merriweather',serif;font-size:.98rem;font-weight:700;color:var(--p);line-height:1.2}
.ph-sub{font-size:.78rem;color:var(--muted);margin-top:1px}
.panel-body{padding:1.25rem 1.4rem}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.2rem;}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-family:'Source Code Pro',monospace;}
.field input,.field select{width:100%;padding:.65rem .9rem;background:var(--off);border:1.5px solid var(--border);border-radius:var(--r);font-family:'Lato',sans-serif;font-size:.92rem;color:var(--text);outline:none;transition:border-color .2s,background .2s,box-shadow .2s;}
.field input:focus,.field select:focus{border-color:var(--p);background:var(--white);box-shadow:0 0 0 3px rgba(0,61,107,.1)}
.field input::placeholder{color:var(--bdr-dk)}
.field .hint{font-size:.7rem;color:var(--muted);font-family:'Source Code Pro',monospace;}

/* ── SECTION LABEL ── */
.section-label{font-family:'Source Code Pro',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--p);margin:1.6rem 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;font-weight:700;}

/* ── INPUT ROWS ── */
.input-rows{margin-top:.8rem;display:flex;flex-direction:column;gap:.6rem}

/* Default layout: #badge | name input | amount input | ✕ */
.input-row{
  display:grid;
  grid-template-columns:auto 1fr 1fr 32px;
  gap:.6rem;
  align-items:center;
  background:var(--off);
  border:1.5px solid var(--border);
  border-radius:var(--r2);
  padding:.65rem .9rem;
}
.input-row input{
  padding:.5rem .7rem;
  border:1.5px solid var(--border);
  border-radius:var(--r);
  font-size:.88rem;
  font-family:'Lato',sans-serif;
  background:var(--white);
  color:var(--text);
  outline:none;
  width:100%;
  /* KEY FIX: prevent inputs from overflowing their column */
  min-width:0;
  transition:border-color .2s;
}
.input-row input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(0,61,107,.1)}
.input-row input::placeholder{color:var(--bdr-dk);font-size:.82rem;}
.row-num{font-family:'Source Code Pro',monospace;font-size:.7rem;font-weight:700;color:var(--white);background:var(--p);border-radius:3px;padding:2px 7px;white-space:nowrap;align-self:center;}
.row-label{font-family:'Source Code Pro',monospace;font-size:.68rem;color:var(--muted);margin-top:2px;}

/* ── CATEGORY TABS ── */
.cat-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.cat-tab{padding:.4rem 1rem;border-radius:var(--r);border:1.5px solid var(--border);background:var(--off);color:var(--mid);font-size:.78rem;font-weight:700;cursor:pointer;font-family:'Lato',sans-serif;transition:all .2s;letter-spacing:.03em;}
.cat-tab.active,.cat-tab:hover{background:var(--p);color:#fff;border-color:var(--p);}

/* ── BUTTONS ── */
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;}
.btn-add{padding:.5rem 1.1rem;background:transparent;color:var(--p);border:1.5px solid var(--p-tint2);border-radius:var(--r);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:'Lato',sans-serif;transition:all .2s;display:flex;align-items:center;gap:.4rem;}
.btn-add:hover{background:var(--p-tint);border-color:var(--p)}
.btn-remove{background:none;border:1px solid rgba(185,28,28,.3);border-radius:var(--r);color:var(--red);cursor:pointer;width:32px;height:32px;font-size:1rem;display:grid;place-items:center;transition:all .2s;flex-shrink:0;padding:0;}
.btn-remove:hover{background:var(--red-bg);border-color:var(--red)}
.btn-calc{padding:.85rem 2.5rem;background:var(--p);color:#fff;border:none;border-radius:var(--r);font-family:'Lato',sans-serif;font-size:.95rem;font-weight:900;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;letter-spacing:.02em;box-shadow:0 2px 12px rgba(0,61,107,.25);}
.btn-calc:hover{background:var(--p-mid);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,61,107,.3)}
.btn-calc:active{transform:translateY(0)}
.btn-download{padding:.85rem 2rem;background:transparent;color:var(--p);border:1.5px solid var(--p-tint2);border-radius:var(--r);font-size:.9rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:'Lato',sans-serif;transition:all .2s;display:flex;align-items:center;gap:.5rem;}
.btn-download:hover{background:var(--p-tint);border-color:var(--p)}
.btn-pdf{padding:.85rem 2rem;background:transparent;color:var(--red);border:1.5px solid rgba(185,28,28,.25);border-radius:var(--r);font-size:.9rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;font-family:'Lato',sans-serif;transition:all .2s;display:flex;align-items:center;gap:.5rem;}
.btn-pdf:hover{background:var(--red-bg);border-color:var(--red)}

/* ── RESULT BANNER ── */
.result-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.2rem; margin-bottom: 1.4rem;
  background: var(--green-bg); border: 1.5px solid var(--green-border);
  border-left: 4px solid var(--green); border-radius: 0 var(--r2) var(--r2) 0;
}
.result-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.result-banner-text strong {
  font-family: 'Merriweather', serif; font-size: .95rem;
  font-weight: 700; color: var(--green); display: block;
}
.result-banner-text p { font-size: .82rem; color: var(--mid); margin-top: 2px; line-height: 1.5; }

/* ── SUMMARY BOX COLOR VARIANTS ── */
.summary-box.box-navy  { border-color: rgba(0,61,107,.25);  background: var(--p-tint);  }
.summary-box.box-navy  .s-value { color: var(--p); }
.summary-box.box-navy::after  { background: var(--p); }
.summary-box.box-gold  { border-color: rgba(184,134,11,.3); background: var(--gold-pl); }
.summary-box.box-gold  .s-value { color: var(--gold); }
.summary-box.box-gold::after  { background: var(--gold); }
.summary-box.box-blue  { border-color: rgba(29,78,216,.25); background: var(--blue-bg); }
.summary-box.box-blue  .s-value { color: var(--blue); }
.summary-box.box-blue::after  { background: var(--blue); }
.summary-box.box-green { border-color: rgba(21,128,61,.3);  background: var(--green-bg); }
.summary-box.box-green .s-value { color: var(--green); }
.summary-box.box-green::after { background: var(--green); }
.summary-box.box-red   { border-color: rgba(185,28,28,.3);  background: var(--red-bg); }
.summary-box.box-red   .s-value { color: var(--red); }
.summary-box.box-red::after   { background: var(--red); }



/* ── SECTION TAG ── */
.section-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--p-tint);color:var(--p);border:1px solid var(--p-tint2);font-family:'Source Code Pro',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:3px;margin-bottom:1rem;}

/* ── NET WORTH SUMMARY BOXES ── */
.summary-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem;}
.summary-box{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r2);padding:1rem 1.2rem;text-align:center;position:relative;overflow:hidden;}
.summary-box::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold);border-radius:0 0 8px 8px;}
.s-icon{font-size:1.2rem;margin-bottom:.3rem}
.summary-box .s-label{font-size:.65rem;font-family:'Source Code Pro',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem;}
.summary-box .s-value{font-family:'Merriweather',serif;font-size:clamp(.95rem,3.5vw,1.2rem);font-weight:700;color:var(--p);word-break:break-word;}
.summary-box.assets{border-color:rgba(21,128,61,.3);background:var(--green-bg);}
.summary-box.assets .s-value{color:var(--green)}
.summary-box.assets::after{background:var(--green)}
.summary-box.liabilities{border-color:rgba(185,28,28,.3);background:var(--red-bg);}
.summary-box.liabilities .s-value{color:var(--red)}
.summary-box.liabilities::after{background:var(--red)}
.summary-box.networth.positive{border-color:rgba(29,78,216,.3);background:var(--blue-bg);}
.summary-box.networth.positive .s-value{color:var(--blue)}
.summary-box.networth.positive::after{background:var(--blue)}
.summary-box.networth.negative{border-color:rgba(185,28,28,.4);background:var(--red-bg);}
.summary-box.networth.negative .s-value{color:var(--red)}
.summary-box.networth.negative::after{background:var(--red)}
.summary-box.ratio{border-color:rgba(184,134,11,.3);background:var(--gold-pl);}
.summary-box.ratio .s-value{color:var(--gold-lt)}
.summary-box.ratio::after{background:var(--gold)}

/* ── NET WORTH STATUS BANNER ── */
.nw-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.3rem;border-radius:var(--r2);margin-bottom:1.5rem;border:1.5px solid;}
.nw-banner.positive{background:var(--green-bg);border-color:rgba(21,128,61,.3);}
.nw-banner.negative{background:var(--red-bg);border-color:rgba(185,28,28,.3);}
.nw-banner-icon{font-size:1.6rem;flex-shrink:0;}
.nw-banner-text strong{font-family:'Merriweather',serif;font-size:.95rem;font-weight:700;}
.nw-banner.positive .nw-banner-text strong{color:var(--green)}
.nw-banner.negative .nw-banner-text strong{color:var(--red)}
.nw-banner-text p{font-size:.82rem;color:var(--mid);margin-top:2px;line-height:1.5;}

/* ── CHART ── */
.chart-wrap{max-width:300px;margin:0 auto 1.5rem}

/* ── BREAKDOWN TABLE ── */
.result-table{width:100%;border-collapse:collapse;font-size:.85rem;overflow-x:auto;display:block;}
.result-table th{background:var(--off2);color:var(--p);padding:.7rem 1rem;text-align:left;font-family:'Source Code Pro',monospace;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;white-space:nowrap;border-bottom:2px solid var(--border);}
.result-table td{padding:.6rem 1rem;border-bottom:1px solid var(--border);color:var(--text);font-family:'Source Code Pro',monospace;font-size:.82rem;white-space:nowrap;}
.result-table td:last-child{text-align:right;font-weight:600;}
.result-table tr:last-child td{border-bottom:none;font-weight:700;background:var(--off2);}
.result-table tr:hover td{background:var(--p-tint)}
.result-table .asset-row td:last-child{color:var(--green)}
.result-table .liability-row td:last-child{color:var(--red)}
.result-table .total-row td{background:var(--off2);font-weight:700;font-size:.85rem;}
.result-table .total-row.assets-total td:last-child{color:var(--green)}
.result-table .total-row.liabilities-total td:last-child{color:var(--red)}
.result-table .total-row.networth-row td{background:var(--p);color:#fff;font-size:.9rem;}
.result-table .total-row.networth-row td:last-child{color:var(--gold-lt)}

/* ── NOTE BOX ── */
.note-box{background:var(--off);border-left:3px solid var(--gold);border-radius:0 var(--r2) var(--r2) 0;padding:.9rem 1.1rem;font-size:.82rem;color:var(--mid);margin-top:1.5rem;line-height:1.72;}
.note-box strong{font-weight:700;color:var(--text)}
.input-note-box{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.5rem;padding:1rem 1.2rem;background:var(--gold-pl);border:1px solid rgba(184,134,11,.3);border-left:3px solid var(--gold);border-radius:0 var(--r2) var(--r2) 0;font-size:.82rem;color:var(--mid);line-height:1.72;}
.input-note-icon{font-size:1rem;margin-top:1px;flex-shrink:0}

/* =============================================================
   FAQ & CONCEPTS SECTION
   ============================================================= */
.faq-section{margin-top:3rem;border-top:2px solid var(--border);padding-top:2.5rem;}
.faq-section-kicker{font-family:'Source Code Pro',monospace;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;}
.faq-section-kicker span{display:inline-block;width:18px;height:2px;background:var(--gold);border-radius:2px;}
.faq-section-title{font-family:'Merriweather',serif;font-size:1.25rem;font-weight:700;color:var(--p);margin-bottom:2rem;padding-bottom:.5rem;border-bottom:2px solid var(--gold);display:inline-block;}

/* Concept Cards Grid */
.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2.5rem;}
.concept-card{background:var(--off);border:1.5px solid var(--border);border-radius:var(--r2);padding:1.2rem 1.3rem;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.concept-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.concept-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.concept-card.green::before{background:var(--green)}
.concept-card.red::before{background:var(--red)}
.concept-card.blue::before{background:var(--blue)}
.concept-card.gold::before{background:var(--gold)}
.concept-card.purple::before{background:var(--purple)}
.concept-card.navy::before{background:var(--p)}
.concept-card.orange::before{background:var(--orange)}
.concept-card-icon{font-size:1.4rem;margin-bottom:.6rem}
.concept-card-title{font-family:'Merriweather',serif;font-size:.88rem;font-weight:700;color:var(--p);margin-bottom:.45rem;line-height:1.3;}
.concept-card-body{font-size:.82rem;color:var(--mid);line-height:1.7;}
.concept-card-body ul{padding-left:1.1rem;margin-top:.35rem;}
.concept-card-body li{margin-bottom:.2rem;}

/* FAQ Accordion */
.faq-heading{font-family:'Merriweather',serif;font-size:1rem;font-weight:700;color:var(--p);margin:2rem 0 1rem;}
.faq-list{display:flex;flex-direction:column;gap:.55rem;}
.faq-item{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r2);overflow:hidden;transition:border-color .2s;}
.faq-item.open{border-color:var(--p-tint2);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.2rem;background:var(--off);border:none;cursor:pointer;text-align:left;font-family:'Lato',sans-serif;font-size:.9rem;font-weight:700;color:var(--text);transition:background .2s;line-height:1.4;}
.faq-q:hover{background:var(--p-tint)}
.faq-item.open .faq-q{background:var(--p-tint);color:var(--p)}
.faq-chevron{flex-shrink:0;width:18px;height:18px;border:2px solid var(--p-tint2);border-radius:50%;display:grid;place-items:center;transition:transform .28s,background .2s;color:var(--p);}
.faq-item.open .faq-chevron{transform:rotate(180deg);background:var(--p);color:#fff;border-color:var(--p);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .2s;}
.faq-item.open .faq-a{max-height:600px;padding:.9rem 1.2rem 1rem;}
.faq-a-inner{font-size:.86rem;color:var(--mid);line-height:1.78;}
.faq-a-inner strong{color:var(--text)}
.faq-a-inner ul,.faq-a-inner ol{padding-left:1.3rem;margin-top:.4rem;}
.faq-a-inner li{margin-bottom:.35rem;}
.faq-a-inner .highlight-box{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold-pl);border:1px solid rgba(184,134,11,.3);border-radius:var(--r);padding:.4rem .8rem;font-family:'Source Code Pro',monospace;font-size:.8rem;color:var(--gold);font-weight:600;margin-top:.5rem;}

/* Value types table inside FAQ */
.value-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.75rem;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);}
.value-table th{background:var(--p);color:#fff;padding:.5rem .8rem;text-align:left;font-size:.72rem;font-family:'Source Code Pro',monospace;letter-spacing:.05em;text-transform:uppercase;}
.value-table td{padding:.5rem .8rem;border-bottom:1px solid var(--border);vertical-align:top;}
.value-table tr:last-child td{border-bottom:none;}
.value-table tr:nth-child(even) td{background:var(--off);}
.value-table .tag{display:inline-block;padding:1px 6px;border-radius:2px;font-size:.7rem;font-weight:700;font-family:'Source Code Pro',monospace;}
.value-table .tag.yes{background:var(--green-bg);color:var(--green);}
.value-table .tag.no{background:var(--red-bg);color:var(--red);}

/* ── BOOK A CONSULTATION CTA ── */
.consult-cta {
  margin-top: 2rem;
  margin-bottom: 0;
  background: linear-gradient(135deg, var(--p) 0%, var(--p-soft) 100%);
  border-radius: var(--r2);
  padding: 2.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.consult-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-60deg,transparent,transparent 44px,rgba(255,255,255,.016) 44px,rgba(255,255,255,.016) 45px);
  pointer-events: none;
}
.consult-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.consult-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.consult-text { flex: 1; min-width: 200px; }
.consult-title {
  font-family: 'Merriweather', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .35rem;
  line-height: 1.3;
}
.consult-sub {
  font-size: .83rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}
.btn-consult {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #25d366;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  padding: .82rem 1.6rem;
  border-radius: var(--r);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(37,211,102,.4);
  transition: transform .2s, box-shadow .2s, background .2s;
  letter-spacing: .02em;
}
.btn-consult:hover {
  background: #1ebe5a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.5);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:768px){
  body{padding-top:70px}
  .page-wrap{padding:1.5rem 1rem 4rem}
  .page-hero{padding:2rem 1.4rem 1.75rem}
  .concept-grid{grid-template-columns:1fr}
}

/* ── MOBILE: stacked input rows (≤600px) ── */
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}

  /* Stack: badge + name on row 1, amount full-width on row 2 */
  .input-row{
    display:grid;
    grid-template-columns:auto 1fr 36px;
    grid-template-rows:auto auto;
    gap:.45rem .5rem;
    padding:.7rem .85rem;
    align-items:center;
  }
  .input-row .row-num{
    grid-column:1;
    grid-row:1;
    align-self:center;
    /* slightly larger badge on mobile for thumb friendliness */
    padding:3px 9px;
    font-size:.72rem;
  }
  .input-row .item-name{
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
    font-size:.9rem;
    /* show full text, no truncation confusion */
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .input-row .btn-remove{
    grid-column:3;
    grid-row:1;
    align-self:center;
    width:34px;
    height:34px;
  }
  .input-row .item-amount{
    grid-column:1 / span 3;
    grid-row:2;
    width:100%;
    font-size:.9rem;
    /* slightly taller touch target */
    padding:.55rem .8rem;
  }

  /* Bigger touch targets for add/action buttons */
  .btn-row{flex-direction:column;gap:.5rem}
  .btn-calc,.btn-download,.btn-pdf{width:100%;justify-content:center;padding:.9rem 1rem;font-size:.9rem}
  .btn-add{font-size:.78rem;padding:.52rem 1rem;width:100%;justify-content:center}
  .summary-boxes{grid-template-columns:1fr 1fr;gap:.65rem}
  .summary-box{padding:.8rem .8rem}
  .s-icon{font-size:1rem}
  .summary-box .s-value{font-size:.95rem}
  .nw-banner{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.9rem 1rem}
  .nw-banner-icon{font-size:1.3rem}
  .nw-banner-text strong{font-size:.88rem}
  .nw-banner-text p{font-size:.78rem}
  .result-table th{font-size:.65rem;padding:.5rem .6rem}
  .result-table td{font-size:.75rem;padding:.45rem .6rem;white-space:normal;word-break:break-word}
  .chart-wrap{max-width:220px}
  .section-tag{font-size:.62rem;padding:3px 10px}

  /* FAQ mobile */
  .faq-q{font-size:.86rem;padding:.8rem 1rem}
  .faq-a-inner{font-size:.83rem}
  .value-table{font-size:.78rem}
  .concept-card{padding:1rem}
  /* Consultation CTA mobile */
  .consult-cta{padding:1.4rem 1.2rem}
  .consult-cta-inner{gap:1rem}
  .consult-icon{font-size:1.8rem}
  .consult-title{font-size:.9rem}
  .btn-consult{width:100%;justify-content:center}
}

@media(max-width:480px){
  body{padding-top:60px}
  .page-hero h1{font-size:1.35rem}
  .page-hero{padding:1.5rem 1rem 1.25rem}
  .hero-kicker{font-size:.62rem;padding:4px 10px}
  .summary-boxes{grid-template-columns:1fr}
  .summary-box{padding:.9rem 1rem}
  .ph-title{font-size:.9rem}
  .ph-sub{font-size:.72rem}
  .step-badge{width:22px;height:22px;font-size:10px}
  .field label{font-size:.65rem}
  .field input,.field select{font-size:.88rem;padding:.6rem .8rem}
  .field .hint{font-size:.65rem}
  .faq-section-title{font-size:1.05rem}
}

.hidden{display:none!important}

/* ── WA FLOAT BUTTON ── */
.wa-float{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;align-items:center;gap:0;cursor:pointer;text-decoration:none;}
.wa-float__label{background:#25d366;color:#fff;font-family:'Lato',sans-serif;font-size:.82rem;font-weight:700;padding:.45rem .9rem .45rem 1.1rem;border-radius:24px 0 0 24px;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s ease;box-shadow:-2px 4px 14px rgba(0,0,0,.15);}
.wa-float:hover .wa-float__label{max-width:220px;opacity:1}
.wa-float__icon{width:58px;height:58px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 20px rgba(37,211,102,.45),0 2px 8px rgba(0,0,0,.15);transition:transform .25s ease,box-shadow .25s ease;position:relative;}
.wa-float__icon svg{width:30px;height:30px;}
.wa-float:hover .wa-float__icon{transform:scale(1.1) rotate(-5deg);box-shadow:0 6px 28px rgba(37,211,102,.6),0 3px 12px rgba(0,0,0,.2)}
.wa-float__icon::after{content:'';position:absolute;width:58px;height:58px;border-radius:50%;background:rgba(37,211,102,.35);animation:waPulse 2.2s ease-out infinite;}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@media(max-width:768px){
  .wa-float{bottom:20px;right:18px}
  .wa-float__icon{width:52px;height:52px}
  .wa-float__icon svg{width:26px;height:26px}
  .wa-float__icon::after{width:52px;height:52px}
  .wa-float__label{display:none}
}



/* =========================================================
   HRA-SPECIFIC: EMPLOYER CARDS
   ========================================================= */
.employer-cards { display: flex; flex-direction: column; gap: 1.2rem; }
.employer-card {
  background: var(--off); border: 1.5px solid var(--border);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--sh-xs); transition: box-shadow .2s;
}
.employer-card:hover { box-shadow: var(--sh-sm); }
.employer-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.1rem; background: var(--p-tint);
  border-bottom: 1px solid var(--p-tint2); gap: .5rem;
}
.employer-card-title {
  display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0;
  font-family: 'Merriweather', serif; font-size: .88rem; font-weight: 700; color: var(--p);
}
.emp-badge {
  background: var(--p); color: #fff;
  font-family: 'Source Code Pro', monospace;
  font-size: .68rem; font-weight: 700;
  padding: 3px 9px; border-radius: 3px; flex-shrink: 0;
}
.employer-card-body { padding: 1rem 1.1rem; }
.employer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .9rem;
  align-items: end;
}
.emp-field { display: flex; flex-direction: column; gap: 4px; }
.emp-field--metro { display: flex; flex-direction: column; gap: 4px; justify-content: flex-end; }
.emp-field label {
  font-size: .63rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  font-family: 'Source Code Pro', monospace;
}
.emp-field input,
.emp-field select {
  width: 100%; padding: .52rem .75rem;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r); font-family: 'Lato', sans-serif;
  font-size: .88rem; color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s; min-width: 0;
}
.emp-field input:focus,
.emp-field select:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(0,61,107,.1); }
.emp-field input::placeholder { color: var(--bdr-dk); font-size: .82rem; }

/* METRO TOGGLE */
.metro-toggle-wrap {
  display: flex; align-items: center; gap: .6rem;
  min-height: 34px; /* matches emp-field input height so grid rows align */
}
.metro-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.metro-toggle input { opacity: 0; width: 0; height: 0; }
.metro-slider {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 22px; cursor: pointer; transition: background .22s;
}
.metro-slider::before {
  content: ''; position: absolute; height: 16px; width: 16px;
  left: 3px; bottom: 3px; background: white;
  border-radius: 50%; transition: transform .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.metro-toggle input:checked + .metro-slider { background: var(--green); }
.metro-toggle input:checked + .metro-slider::before { transform: translateX(18px); }
.metro-label { font-size: .82rem; color: var(--mid); font-weight: 600; }
.metro-pct {
  font-family: 'Source Code Pro', monospace; font-size: .72rem; font-weight: 700; color: var(--green);
  background: var(--green-bg); border: 1px solid var(--green-border);
  padding: 1px 7px; border-radius: 3px;
}

/* CARD REMOVE BUTTON */
.btn-remove-card {
  background: none; border: 1px solid rgba(185,28,28,.3);
  border-radius: var(--r); color: var(--red); cursor: pointer;
  padding: 4px 10px; font-size: .75rem; font-weight: 700;
  font-family: 'Lato', sans-serif; display: flex; align-items: center; gap: .3rem;
  transition: all .2s; flex-shrink: 0;
}
.btn-remove-card:hover { background: var(--red-bg); border-color: var(--red); }

/* LEAST TAG in results */
.least-tag {
  display: inline-block; font-size: .62rem; font-weight: 700;
  font-family: 'Source Code Pro', monospace;
  background: var(--green-bg); color: var(--green);
  border: 1px solid var(--green-border);
  padding: 1px 5px; border-radius: 2px; margin-left: 4px; vertical-align: middle;
}

/* LAW CARD */
.law-card {
  background: var(--orange-bg); border: 1.5px solid var(--orange-border);
  border-radius: var(--r2); padding: 1.3rem 1.4rem; margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.law-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--orange); }
.law-card-badge {
  display: inline-block; align-items: center; gap: .4rem;
  background: var(--orange); color: #fff;
  font-family: 'Source Code Pro', monospace; font-size: .65rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 2px; margin-bottom: .75rem;
  line-height: 1.5; white-space: normal; overflow: visible;
}
.law-card-title { font-family: 'Merriweather', serif; font-size: .95rem; font-weight: 700; color: var(--orange); margin-bottom: .6rem; }
.law-card-body { font-size: .84rem; color: var(--mid); line-height: 1.75; }
.law-card-body strong { color: var(--text); }
.rule-ref {
  font-family: 'Source Code Pro', monospace; font-size: .78rem;
  background: rgba(194,65,12,.1); color: var(--orange);
  border: 1px solid var(--orange-border); padding: 2px 8px;
  border-radius: 3px; display: inline-block; margin-bottom: .5rem;
}

/* LAW NOTE BOX */
.law-note-box {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-top: 1rem; padding: 1rem 1.2rem;
  background: var(--orange-bg); border: 1px solid var(--orange-border);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r2) var(--r2) 0;
  font-size: .82rem; color: var(--mid); line-height: 1.72;
}

/* CITY TABLE */
.city-table { width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: .75rem; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--border); }
.city-table th { background: var(--p); color: #fff; padding: .5rem .9rem; text-align: left; font-size: .72rem; font-family: 'Source Code Pro', monospace; letter-spacing: .05em; text-transform: uppercase; }
.city-table td { padding: .55rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.city-table tr:last-child td { border-bottom: none; }
.city-table tr:nth-child(even) td { background: var(--off); }
.city-table .pct { font-family: 'Source Code Pro', monospace; font-weight: 700; color: var(--green); }

@media (max-width: 600px) {
  .employer-grid { grid-template-columns: 1fr 1fr; }
  .employer-card-head { flex-wrap: wrap; gap: .5rem; }
}
@media (max-width: 480px) {
  .employer-grid { grid-template-columns: 1fr; }
}

/* ── EMPLOYER CONCEPT BOX ── */
.employer-concept-box {
  background: var(--blue-bg);
  border: 1.5px solid var(--blue-border);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.4rem;
}
.employer-concept-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}
.employer-concept-icon { font-size: 1.2rem; flex-shrink: 0; }
.employer-concept-title {
  font-family: 'Merriweather', serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue);
}
.employer-concept-body {
  font-size: .83rem;
  color: var(--mid);
  line-height: 1.75;
}
.employer-concept-body ul {
  padding-left: 1.2rem;
  margin-top: .4rem;
}
.employer-concept-body li {
  margin-bottom: .3rem;
}
.employer-concept-body strong {
  color: var(--text);
}