:root{--navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;--red:#BF0A30;--red-hover:#9B0826;--green:#00875A;--green-dark:#006644;--white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;--border:#E0E4E8;--bg:#F7F9FC;--good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;--warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;--bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;--shadow-sm:0 1px 4px rgba(0,40,104,.08);--shadow-md:0 4px 20px rgba(0,40,104,.12);--shadow-lg:0 8px 40px rgba(0,40,104,.16)}
    *{box-sizing:border-box;margin:0;padding:0} html,body{overflow-x:hidden;max-width:100vw;scroll-behavior:smooth}
    body{font-family:Inter,sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6;-webkit-font-smoothing:antialiased}
    .calc-wrap{max-width:1280px;margin:34px auto;padding:0 18px 40px}.calc-shell{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg)}
    .calc-head{padding:30px 28px;background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);position:relative;overflow:hidden;border-bottom:4px solid var(--red)}
    .calc-head:before{content:"";position:absolute;top:-70px;right:-50px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle, rgba(191,10,48,.18) 0, rgba(191,10,48,0) 72%)}
    .calc-head:after{content:"";position:absolute;left:-80px;bottom:-120px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(0,135,90,.12) 0, rgba(0,135,90,0) 72%)}
    .calc-head-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}.calc-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;padding:6px 12px;border-radius:999px;font:800 11px Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.calc-kicker i{width:8px;height:8px;border-radius:50%;background:var(--green)}
    .calc-head h1{font:800 clamp(28px,4.2vw,40px)/1.12 Montserrat,sans-serif;letter-spacing:-.5px;color:#fff;margin-bottom:12px;max-width:780px}.calc-head p{font-size:15px;color:rgba(255,255,255,.78);max-width:760px}
    .calc-badges{display:flex;gap:8px;flex-wrap:wrap}.calc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:700}
    .calc-body{display:grid;grid-template-columns:minmax(430px,560px) 1fr;min-width:0}.panel{padding:26px;min-width:0}.panel.inputs{border-right:1px solid var(--border)}.panel.results{background:var(--bg)}
    .sec-title{margin-bottom:22px}.sec-title h2{font:800 20px Montserrat,sans-serif;color:var(--navy-dark);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.help{font-size:12px;font-weight:600;color:var(--gray);background:#eef2f7;padding:6px 10px;border-radius:8px}
    .mode-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);padding:4px;border-radius:10px;margin-bottom:24px}.mode-btn{flex:1;min-width:110px;border:none;background:transparent;border-radius:8px;padding:11px 10px;font:700 12px Montserrat,sans-serif;color:var(--gray);cursor:pointer;transition:.2s}.mode-btn.active,.mode-btn:hover{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
    .field{margin-bottom:18px} label{display:block;font:700 12.5px Montserrat,sans-serif;color:var(--charcoal);margin-bottom:8px}.row2,.row3,.row4{display:grid;gap:12px}.row2{grid-template-columns:1fr 1fr}.row3{grid-template-columns:repeat(3,1fr)}.row4{grid-template-columns:1.25fr .9fr .9fr .9fr}
    .input-wrap{position:relative;display:flex;align-items:center}.prefix,.suffix{position:absolute;z-index:2;font-size:13px;font-weight:700;color:var(--gray);pointer-events:none}.prefix{left:14px}.suffix{right:14px}.has-prefix input{padding-left:30px}.has-suffix input{padding-right:32px}
    input,select{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font:500 14px Inter,sans-serif;background:var(--bg);color:var(--charcoal);outline:none;transition:.2s;-webkit-appearance:none}
    input:focus,select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,40,104,.1);background:#fff}
    select{cursor:pointer;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235F6368'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 10px center/14px;padding-right:34px}
    .note{font-size:12px;color:var(--gray);line-height:1.45;margin-top:6px}.box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin:20px 0;box-shadow:var(--shadow-sm)}.box h3{font:700 15px Montserrat,sans-serif;color:var(--navy);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
    .item-grid{display:grid;gap:10px}.item-row{display:grid;grid-template-columns:1.25fr .8fr .8fr .8fr;gap:10px;align-items:end}.item-row .mini-label{font-size:11px;font-weight:700;color:var(--gray);margin-bottom:6px;display:block}
    .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:10px;padding:12px 16px;font:700 13px Montserrat,sans-serif;cursor:pointer;transition:.2s}.btn-primary{background:var(--red);color:#fff;flex:1;min-width:190px}.btn-primary:hover{background:var(--red-hover);transform:translateY(-1px)}.btn-secondary{background:var(--navy);color:#fff}.btn-secondary:hover{background:var(--navy-mid);transform:translateY(-1px)}.btn-wa{background:var(--green);color:#fff}.btn-wa:hover{background:var(--green-dark)}.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--border)}.btn-ghost:hover{border-color:var(--navy)}.hidden{display:none!important}
    .results-top{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow-sm)}.kpi.featured{background:var(--navy);border-color:var(--navy)}.k-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.06em}.featured .k-label,.featured .k-sub{color:rgba(255,255,255,.72)}.k-value{display:block;margin-top:6px;font:800 clamp(21px,3.7vw,28px)/1.16 Montserrat,sans-serif;color:var(--navy-dark)}.featured .k-value{color:#fff}.k-sub{display:block;margin-top:6px;font-size:11.5px;color:#97A0A9}
    .alert{border-radius:12px;padding:16px 18px;margin-bottom:20px;font-size:14px;font-weight:500;line-height:1.6;display:flex;gap:12px;align-items:flex-start}.alert.good{background:var(--good-bg);border:1px solid var(--good-br);color:var(--good-tx)}.alert.warn{background:var(--warn-bg);border:1px solid var(--warn-br);color:var(--warn-tx)}.alert.bad{background:var(--bad-bg);border:1px solid var(--bad-br);color:var(--bad-tx)}
    .card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}.card h3{font:700 16px Montserrat,sans-serif;color:var(--navy-dark);margin-bottom:14px}
    .bars{display:flex;flex-direction:column;gap:10px}.bar-row{display:grid;grid-template-columns:132px 1fr 88px;align-items:center;gap:12px}.bar-label{font-size:12px;font-weight:700;color:var(--charcoal)}.bar-track{height:12px;background:var(--border);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px;transition:width .35s ease}.fill-price{background:var(--navy)}.fill-yield{background:var(--red)}.fill-savings{background:var(--green)}.bar-text{text-align:right;font-size:12px;font-weight:700;color:var(--charcoal);font-variant-numeric:tabular-nums}
    .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px} table{width:100%;border-collapse:collapse;min-width:820px;background:#fff} th,td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left;font-size:13.5px} th{font:700 11px Montserrat,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);background:var(--bg)} tr:last-child td{border-bottom:none}
    .scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.scenario-item{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 15px}.si-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}.si-value{font:800 23px Montserrat,sans-serif;color:var(--navy-dark);margin-top:5px}.scenario-item.good .si-value{color:var(--green)}.scenario-item.bad .si-value{color:var(--red)}
    canvas{max-height:300px}.ad-slot{margin-top:18px;background:#fff;border:1px dashed var(--border);border-radius:14px;padding:14px;text-align:center;color:var(--gray);font-size:13px}
    @media (max-width:1080px){.calc-body{grid-template-columns:1fr}.panel.inputs{border-right:none;border-bottom:1px solid var(--border)}}
    @media (max-width:768px){.calc-wrap{padding:0 12px 28px;margin-top:18px}.calc-head{padding:22px 16px}.panel{padding:18px 14px}.row2,.row3,.row4,.results-top,.scenario-grid,.item-row{grid-template-columns:1fr}.actions{flex-direction:column}.btn{width:100%}.mode-tabs{flex-direction:column}.bar-row{grid-template-columns:88px 1fr 72px}}
    /* ════════════════════════════════════════════
   ROOT — EXACT MATCH TO GROCERY CALCULATOR
   ════════════════════════════════════════════ */
:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-dark:#006644;
  --white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;
  --border:#E0E4E8;--bg:#F7F9FC;
  --good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;
  --warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;
  --bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6}


/* ════════════════════════════════════════════
   HOW-TO SECTION
   ════════════════════════════════════════════ */
.htu-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.htu-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}


/* ── Header ── */
.htu-head{
  padding:30px 28px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.htu-head::before{
  content:'';position:absolute;top:-70px;right:-50px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.18) 0%,rgba(191,10,48,0) 72%);
}
.htu-head::after{
  content:'';position:absolute;left:-80px;bottom:-120px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.12) 0%,rgba(0,135,90,0) 72%);
}
.htu-head-inner{position:relative;z-index:1}
.htu-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.htu-kicker i{font-size:10px;color:var(--green)}
.htu-head h2{
  font:800 clamp(24px,3.5vw,36px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:10px;
}
.htu-head h2 span{color:#ff7994}
.htu-head>p,.htu-head-inner>p{
  font-size:15px;color:rgba(255,255,255,.78);max-width:760px;
}


/* ── Quick Info Bar ── */
.htu-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding:20px 28px;border-bottom:1px solid var(--border);
  background:var(--bg);
}
.htu-qi{
  display:flex;align-items:center;gap:10px;
}
.htu-qi-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.htu-qi-icon.navy{background:var(--navy)}
.htu-qi-icon.red{background:var(--red)}
.htu-qi-icon.green{background:var(--green)}
.htu-qi-icon.purple{background:#5B3DC9}
.htu-qi-text{font-size:12px;font-weight:700;color:var(--charcoal);line-height:1.35}
.htu-qi-text span{display:block;font-weight:500;font-size:11px;color:var(--gray)}


/* ── Body Padding ── */
.htu-body{padding:28px}


/* ── Steps Timeline ── */
.htu-steps{
  position:relative;
  padding-left:52px;
}
/* Vertical connector line */
.htu-steps::before{
  content:'';position:absolute;left:20px;top:24px;bottom:24px;
  width:3px;background:linear-gradient(180deg,var(--navy),var(--red),var(--green));
  border-radius:999px;
}

.htu-step{
  position:relative;
  margin-bottom:32px;
}
.htu-step:last-child{margin-bottom:0}

/* Step number circle */
.htu-step-num{
  position:absolute;left:-52px;top:0;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:900 16px 'Montserrat',sans-serif;color:var(--white);
  z-index:2;box-shadow:0 2px 8px rgba(0,40,104,.2);
}
.htu-step:nth-child(1) .htu-step-num{background:var(--navy)}
.htu-step:nth-child(2) .htu-step-num{background:var(--navy-mid)}
.htu-step:nth-child(3) .htu-step-num{background:var(--red)}
.htu-step:nth-child(4) .htu-step-num{background:#5B3DC9}
.htu-step:nth-child(5) .htu-step-num{background:var(--green)}
.htu-step:nth-child(6) .htu-step-num{background:var(--navy-dark)}

/* Step card */
.htu-step-card{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:14px;padding:22px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease,transform .25s ease;
}
.htu-step-card:hover{
  box-shadow:var(--shadow-md);transform:translateY(-2px);
}
.htu-step-card h3{
  font:800 16px 'Montserrat',sans-serif;
  color:var(--navy-dark);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.htu-step-card h3 i{font-size:14px}
.htu-step:nth-child(1) .htu-step-card h3 i{color:var(--navy)}
.htu-step:nth-child(2) .htu-step-card h3 i{color:var(--navy-mid)}
.htu-step:nth-child(3) .htu-step-card h3 i{color:var(--red)}
.htu-step:nth-child(4) .htu-step-card h3 i{color:#5B3DC9}
.htu-step:nth-child(5) .htu-step-card h3 i{color:var(--green)}
.htu-step:nth-child(6) .htu-step-card h3 i{color:var(--navy-dark)}

.htu-step-card>p{
  font-size:14px;color:var(--gray);line-height:1.65;margin-bottom:14px;
}
.htu-step-card>p strong{color:var(--charcoal);font-weight:700}


/* ── Mode Cards inside Steps ── */
.htu-modes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  margin-top:14px;
}
.htu-mode{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:10px;padding:14px 16px;
  display:flex;align-items:flex-start;gap:10px;
  transition:border-color .2s ease;
}
.htu-mode:hover{border-color:var(--navy)}
.htu-mode-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--white);
}
.htu-mode-icon.m1{background:var(--navy)}
.htu-mode-icon.m2{background:var(--red)}
.htu-mode-icon.m3{background:var(--green)}
.htu-mode-icon.m4{background:#5B3DC9}
.htu-mode h4{
  font:800 12px 'Montserrat',sans-serif;color:var(--charcoal);margin-bottom:3px;
}
.htu-mode p{font-size:11.5px;color:var(--gray);line-height:1.5}


/* ── Input Field Demo inside Steps ── */
.htu-field-demo{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:14px;
}
.htu-fd{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:8px;padding:10px 12px;text-align:center;
}
.htu-fd-label{
  font:700 10px 'Montserrat',sans-serif;
  color:var(--gray);text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:4px;
}
.htu-fd-val{
  font:800 15px 'Montserrat',sans-serif;color:var(--navy-dark);
}
.htu-fd-note{font-size:10px;color:var(--gray);margin-top:2px}


/* ── Results Preview inside Steps ── */
.htu-results-preview{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-top:14px;
}
.htu-rp{
  border-radius:10px;padding:12px;text-align:center;
}
.htu-rp.feat{background:var(--navy);color:#fff}
.htu-rp.normal{background:var(--bg);border:1.5px solid var(--border)}
.htu-rp-label{
  font:700 9px 'Montserrat',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:4px;
}
.htu-rp.feat .htu-rp-label{color:rgba(255,255,255,.7)}
.htu-rp.normal .htu-rp-label{color:var(--gray)}
.htu-rp-val{
  font:800 16px 'Montserrat',sans-serif;
}
.htu-rp.feat .htu-rp-val{color:#fff}
.htu-rp.normal .htu-rp-val{color:var(--navy-dark)}


/* ── Checklist inside Steps ── */
.htu-checks{
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.htu-chk{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--charcoal);
  background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;
}
.htu-chk i{font-size:10px}
.htu-chk.navy i{color:var(--navy)}
.htu-chk.red i{color:var(--red)}
.htu-chk.green i{color:var(--green)}
.htu-chk.purple i{color:#5B3DC9}


/* ── Action Badges inside Steps ── */
.htu-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;
}
.htu-act{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:9px;
  font:700 12px 'Montserrat',sans-serif;color:var(--white);
}
.htu-act.red{background:var(--red)}
.htu-act.navy{background:var(--navy)}
.htu-act.green{background:var(--green)}
.htu-act.ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--border)}
.htu-act i{font-size:10px}


/* ── Pro-Tip Callout ── */
.htu-tip{
  background:var(--good-bg);border:1.5px solid var(--good-br);
  border-radius:12px;padding:18px 20px;
  margin-top:14px;
  display:flex;align-items:flex-start;gap:12px;
}
.htu-tip-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.htu-tip-text{font-size:12.5px;color:var(--good-tx);line-height:1.6}
.htu-tip-text strong{font-weight:800}


/* ── Warning Callout ── */
.htu-warn{
  background:var(--warn-bg);border:1.5px solid var(--warn-br);
  border-radius:12px;padding:18px 20px;
  margin-top:14px;
  display:flex;align-items:flex-start;gap:12px;
}
.htu-warn-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:#D97706;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.htu-warn-text{font-size:12.5px;color:var(--warn-tx);line-height:1.6}
.htu-warn-text strong{font-weight:800}


/* ── Example Walkthrough Box ── */
.htu-example{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;margin-top:26px;overflow:hidden;
}
.htu-example-head{
  padding:16px 20px;border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;gap:10px;
  background:var(--white);
}
.htu-example-head i{
  width:32px;height:32px;border-radius:8px;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.htu-example-head h3{
  font:800 14px 'Montserrat',sans-serif;color:var(--navy-dark);
}
.htu-example-head h3 span{
  display:block;font:500 11px 'Inter',sans-serif;color:var(--gray);margin-top:2px;
}
.htu-example-body{padding:20px}
.htu-example-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
.htu-ex-item{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;padding:14px;
}
.htu-ex-item h4{
  font:800 12px 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
.htu-ex-item h4 span{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:5px;
  background:var(--navy);color:#fff;
  font:900 9px 'Montserrat',sans-serif;
}
.htu-ex-row{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--gray);
  padding:3px 0;border-bottom:1px dashed #e8ebed;
}
.htu-ex-row:last-child{border-bottom:none}
.htu-ex-row strong{font-weight:700;color:var(--charcoal)}

.htu-ex-result{
  margin-top:14px;
  background:var(--navy);border-radius:10px;padding:16px;
  display:flex;align-items:center;justify-content:space-between;
}
.htu-ex-result-left{color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.htu-ex-result-left strong{color:#fff;font-weight:800}
.htu-ex-result-right{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:6px 14px;border-radius:8px;
  color:#fff;font:800 13px 'Montserrat',sans-serif;
}
.htu-ex-result-right i{font-size:10px;color:#34d399}


/* ── CTA at the bottom ── */
.htu-cta{
  margin-top:28px;padding:24px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);
  border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;position:relative;overflow:hidden;
}
.htu-cta::before{
  content:'';position:absolute;top:-30px;right:-20px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.15) 0%,transparent 70%);
}
.htu-cta-text{z-index:1}
.htu-cta-text h3{
  font:800 18px 'Montserrat',sans-serif;color:#fff;margin-bottom:6px;
}
.htu-cta-text p{font-size:13px;color:rgba(255,255,255,.75)}
.htu-cta-btn{
  z-index:1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:10px;
  background:var(--red);color:#fff;
  font:800 13px 'Montserrat',sans-serif;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
  white-space:nowrap;
}
.htu-cta-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.htu-cta-btn i{font-size:11px}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .htu-quick{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .htu-section{padding:0 12px 28px;margin-top:18px}
  .htu-head{padding:22px 16px}
  .htu-body{padding:20px 16px}
  .htu-quick{grid-template-columns:1fr;padding:16px}
  .htu-steps{padding-left:44px}
  .htu-steps::before{left:16px}
  .htu-step-num{left:-44px;width:36px;height:36px;font-size:14px}
  .htu-step-card{padding:16px}
  .htu-modes{grid-template-columns:1fr}
  .htu-field-demo{grid-template-columns:repeat(2,1fr)}
  .htu-results-preview{grid-template-columns:repeat(2,1fr)}
  .htu-checks{grid-template-columns:1fr}
  .htu-example-grid{grid-template-columns:1fr}
  .htu-ex-result{flex-direction:column;gap:10px;text-align:center}
  .htu-cta{flex-direction:column;text-align:center}
  .htu-cta-btn{width:100%;justify-content:center}
  .htu-actions{flex-direction:column}
  .htu-act{width:100%;justify-content:center}
}
/* ════════════════════════════════════════════
   ROOT — EXACT MATCH TO GROCERY CALCULATOR
   ════════════════════════════════════════════ */
:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-dark:#006644;
  --white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;
  --border:#E0E4E8;--bg:#F7F9FC;
  --good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;
  --warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;
  --bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6}


/* ════════════════════════════════════════════
   EDUCATIONAL CONTENT SECTION
   ════════════════════════════════════════════ */
.edu-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.edu-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}


/* ── Header ── */
.edu-head{
  padding:30px 28px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.edu-head::before{
  content:'';position:absolute;top:-70px;right:-50px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.18) 0%,rgba(191,10,48,0) 72%);
}
.edu-head::after{
  content:'';position:absolute;left:-80px;bottom:-120px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.12) 0%,rgba(0,135,90,0) 72%);
}
.edu-head-inner{position:relative;z-index:1}
.edu-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.edu-kicker i{font-size:10px;color:var(--green)}
.edu-head h2{
  font:800 clamp(24px,3.5vw,36px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:10px;
}
.edu-head h2 span{color:#ff7994}
.edu-head-inner>p{
  font-size:15px;color:rgba(255,255,255,.78);max-width:760px;
}

.edu-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.edu-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  color:#fff;padding:7px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;
}


/* ── Body ── */
.edu-body{padding:28px}


/* ── Topic Navigation ── */
.edu-nav{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:32px;
}
.edu-nav-btn{
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:14px 16px;
  cursor:pointer;transition:all .2s ease;
  text-decoration:none;
}
.edu-nav-btn:hover{border-color:var(--navy);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.edu-nav-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.edu-nav-icon.navy{background:var(--navy)}
.edu-nav-icon.red{background:var(--red)}
.edu-nav-icon.green{background:var(--green)}
.edu-nav-text h4{font:800 12px 'Montserrat',sans-serif;color:var(--charcoal);margin-bottom:2px}
.edu-nav-text span{font-size:11px;color:var(--gray)}


/* ── Topic Blocks ── */
.edu-topic{margin-bottom:36px}
.edu-topic:last-child{margin-bottom:0}
.edu-topic-head{
  display:flex;align-items:center;gap:14px;
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:2px solid var(--border);
}
.edu-topic-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--white);
}
.edu-topic-icon.navy{background:var(--navy)}
.edu-topic-icon.red{background:var(--red)}
.edu-topic-icon.green{background:var(--green)}
.edu-topic-head h3{
  font:800 clamp(17px,2.5vw,22px)/1.2 'Montserrat',sans-serif;
  color:var(--navy-dark);
}
.edu-topic-head h3 span{display:block;font:500 12px 'Inter',sans-serif;color:var(--gray);margin-top:3px}
.edu-intro{
  font-size:14.5px;color:var(--gray);line-height:1.7;
  max-width:900px;margin-bottom:20px;
}
.edu-intro strong{color:var(--charcoal);font-weight:700}
.edu-intro a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.edu-intro a:hover{color:var(--red)}


/* ── State Map Grid ── */
.edu-state-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:20px;
}
.edu-state-card{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:12px;padding:18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease;
}
.edu-state-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.edu-state-card h4{
  font:800 13px 'Montserrat',sans-serif;
  color:var(--navy-dark);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.edu-state-card h4 i{font-size:11px}
.edu-state-card.mandatory h4 i{color:var(--green)}
.edu-state-card.voluntary h4 i{color:#D97706}
.edu-state-card.none h4 i{color:var(--red)}
.edu-state-list{list-style:none;padding:0}
.edu-state-list li{
  font-size:12.5px;color:var(--gray);
  padding:4px 0;border-bottom:1px dashed var(--border);
  display:flex;align-items:center;gap:6px;
}
.edu-state-list li:last-child{border-bottom:none}
.edu-state-list li i{font-size:8px;flex-shrink:0}
.edu-state-list li.green i{color:var(--green)}
.edu-state-list li.amber i{color:#D97706}
.edu-state-list li.red i{color:var(--red)}
.edu-state-count{
  display:inline-flex;align-items:center;gap:5px;
  font:800 11px 'Montserrat',sans-serif;
  padding:4px 10px;border-radius:999px;
  margin-bottom:10px;
}
.edu-state-count.green-bg{background:var(--good-bg);color:var(--good-tx)}
.edu-state-count.amber-bg{background:var(--warn-bg);color:var(--warn-tx)}
.edu-state-count.red-bg{background:var(--bad-bg);color:var(--bad-tx)}


/* ── Yield Table ── */
.edu-yield-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:20px;
}
.edu-yield-cat{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.edu-yield-cat-head{
  padding:12px 14px;border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.edu-yield-cat-head i{font-size:13px}
.edu-yield-cat-head.meat i{color:var(--red)}
.edu-yield-cat-head.produce i{color:var(--green)}
.edu-yield-cat-head.fruit i{color:#D97706}
.edu-yield-cat-head.seafood i{color:var(--navy)}
.edu-yield-cat-head h4{font:800 11px 'Montserrat',sans-serif;color:var(--charcoal);text-transform:uppercase;letter-spacing:.05em}
.edu-yield-list{list-style:none;padding:0}
.edu-yield-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;font-size:12.5px;
  border-bottom:1px solid var(--border);
}
.edu-yield-list li:last-child{border-bottom:none}
.edu-yield-list li:nth-child(even){background:var(--bg)}
.edu-yield-name{color:var(--charcoal);font-weight:500}
.edu-yield-pct{font:800 12px 'Montserrat',sans-serif;color:var(--navy-dark)}
.edu-yield-bar{
  width:60px;height:6px;background:var(--border);
  border-radius:999px;overflow:hidden;margin-left:8px;flex-shrink:0;
}
.edu-yield-bar-fill{height:100%;border-radius:999px}
.edu-yield-bar-fill.high{background:var(--green)}
.edu-yield-bar-fill.mid{background:#D97706}
.edu-yield-bar-fill.low{background:var(--red)}


/* ── Shrinkflation Cards ── */
.edu-shrink-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:20px;
}
.edu-shrink-stat{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:16px;text-align:center;
}
.edu-shrink-stat.feat{background:var(--navy);border-color:var(--navy)}
.edu-shrink-val{
  font:900 clamp(24px,3vw,32px)/1.1 'Montserrat',sans-serif;
  color:var(--navy-dark);margin-bottom:4px;
}
.edu-shrink-stat.feat .edu-shrink-val{color:#fff}
.edu-shrink-label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}
.edu-shrink-stat.feat .edu-shrink-label{color:rgba(255,255,255,.7)}

.edu-shrink-examples{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:20px;
}
.edu-shrink-ex{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:12px;padding:16px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease,transform .2s ease;
}
.edu-shrink-ex:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.edu-shrink-ex h4{
  font:800 12px 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.edu-shrink-ex h4 i{color:var(--red);font-size:10px}
.edu-shrink-row{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--gray);
  padding:5px 0;border-bottom:1px dashed var(--border);
}
.edu-shrink-row:last-child{border-bottom:none}
.edu-shrink-row strong{font-weight:700;color:var(--charcoal)}
.edu-shrink-row .down{color:var(--red);font-weight:800}
.edu-shrink-row .up{color:var(--green);font-weight:800}

.edu-shrink-impact{
  background:var(--bad-bg);border:1.5px solid var(--bad-br);
  border-radius:12px;padding:18px 20px;
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:20px;
}
.edu-shrink-impact-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.edu-shrink-impact-text{font-size:13px;color:var(--bad-tx);line-height:1.65}
.edu-shrink-impact-text strong{font-weight:800}


/* ── Formula Box ── */
.edu-formula{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:20px;margin-bottom:20px;
}
.edu-formula h4{
  font:800 13px 'Montserrat',sans-serif;
  color:var(--navy-dark);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.edu-formula h4 i{color:var(--navy);font-size:12px}
.edu-formula-block{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;padding:16px;margin-bottom:10px;
  font-family:'Courier New',monospace;
  font-size:14px;font-weight:700;color:var(--navy-dark);
  text-align:center;letter-spacing:.5px;
}
.edu-formula-block span.var{color:var(--red);font-style:italic}
.edu-formula-note{font-size:12px;color:var(--gray);line-height:1.55;margin-top:8px}


/* ── Tip / Source Callout ── */
.edu-tip{
  background:var(--good-bg);border:1.5px solid var(--good-br);
  border-radius:12px;padding:18px 20px;
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:20px;
}
.edu-tip-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.edu-tip-text{font-size:12.5px;color:var(--good-tx);line-height:1.65}
.edu-tip-text strong{font-weight:800}
.edu-tip-text a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.edu-source{
  background:#EFF6FF;border:1.5px solid #BFDBFE;
  border-radius:12px;padding:16px 18px;
  display:flex;align-items:flex-start;gap:10px;
  margin-top:16px;
}
.edu-source-icon{
  width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;
}
.edu-source-text{font-size:11.5px;color:#1e40af;line-height:1.55}
.edu-source-text a{color:#1e40af;font-weight:700;text-decoration:underline;text-underline-offset:2px}


/* ── Quick-Fact Boxes ── */
.edu-facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:20px;
}
.edu-fact{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:16px;
  display:flex;align-items:flex-start;gap:10px;
}
.edu-fact-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--white);
}
.edu-fact-icon.navy{background:var(--navy)}
.edu-fact-icon.red{background:var(--red)}
.edu-fact-icon.green{background:var(--green)}
.edu-fact h5{font:700 12px 'Montserrat',sans-serif;color:var(--charcoal);margin-bottom:3px}
.edu-fact p{font-size:11.5px;color:var(--gray);line-height:1.5}


/* ── CTA ── */
.edu-cta{
  margin-top:28px;padding:24px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);
  border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;position:relative;overflow:hidden;
}
.edu-cta::before{
  content:'';position:absolute;top:-30px;right:-20px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.15) 0%,transparent 70%);
}
.edu-cta-text{z-index:1}
.edu-cta-text h3{font:800 18px 'Montserrat',sans-serif;color:#fff;margin-bottom:6px}
.edu-cta-text p{font-size:13px;color:rgba(255,255,255,.75)}
.edu-cta-btn{
  z-index:1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:10px;
  background:var(--red);color:#fff;
  font:800 13px 'Montserrat',sans-serif;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
  white-space:nowrap;
}
.edu-cta-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.edu-cta-btn i{font-size:11px}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .edu-yield-grid{grid-template-columns:repeat(2,1fr)}
  .edu-shrink-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .edu-section{padding:0 12px 28px;margin-top:18px}
  .edu-head{padding:22px 16px}
  .edu-body{padding:20px 16px}
  .edu-nav{grid-template-columns:1fr}
  .edu-state-grid{grid-template-columns:1fr}
  .edu-yield-grid{grid-template-columns:1fr}
  .edu-shrink-stats{grid-template-columns:repeat(2,1fr)}
  .edu-shrink-examples{grid-template-columns:1fr}
  .edu-facts{grid-template-columns:1fr}
  .edu-cta{flex-direction:column;text-align:center}
  .edu-cta-btn{width:100%;justify-content:center}
  .edu-badges{justify-content:center}
  .edu-formula-block{font-size:12px;letter-spacing:0}
}
/* ════════════════════════════════════════════
   ROOT — EXACT MATCH TO GROCERY CALCULATOR
   ════════════════════════════════════════════ */
:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-dark:#006644;
  --white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;
  --border:#E0E4E8;--bg:#F7F9FC;
  --good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;
  --warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;
  --bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6}


/* ════════════════════════════════════════════
   REAL EXAMPLES SECTION
   ════════════════════════════════════════════ */
.rex-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.rex-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}


/* ── Header ── */
.rex-head{
  padding:30px 28px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.rex-head::before{
  content:'';position:absolute;top:-70px;right:-50px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.18) 0%,rgba(191,10,48,0) 72%);
}
.rex-head::after{
  content:'';position:absolute;left:-80px;bottom:-120px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.12) 0%,rgba(0,135,90,0) 72%);
}
.rex-head-inner{position:relative;z-index:1}
.rex-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.rex-kicker i{font-size:10px;color:var(--green)}
.rex-head h2{
  font:800 clamp(24px,3.5vw,36px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:10px;
}
.rex-head h2 span{color:#ff7994}
.rex-head-inner>p{
  font-size:15px;color:rgba(255,255,255,.78);max-width:760px;
}
.rex-head-stats{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.rex-stat{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:10px 16px;
  display:flex;align-items:center;gap:10px;
}
.rex-stat-val{font:900 20px 'Montserrat',sans-serif;color:#fff}
.rex-stat-label{font-size:11px;color:rgba(255,255,255,.7);font-weight:600;line-height:1.3}


/* ── Body ── */
.rex-body{padding:28px}


/* ── Example Card ── */
.rex-card{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);margin-bottom:28px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.rex-card:last-child{margin-bottom:0}
.rex-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Card Header */
.rex-card-head{
  padding:20px 22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;border-bottom:1.5px solid var(--border);
  flex-wrap:wrap;
}
.rex-card-head-left{display:flex;align-items:center;gap:14px}
.rex-card-num{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font:900 18px 'Montserrat',sans-serif;color:var(--white);
}
.rex-card-num.n1{background:var(--navy)}
.rex-card-num.n2{background:var(--red)}
.rex-card-num.n3{background:var(--green)}
.rex-card-num.n4{background:#5B3DC9}
.rex-card-num.n5{background:#0369A1}
.rex-card-head h3{
  font:800 clamp(15px,2vw,18px)/1.2 'Montserrat',sans-serif;
  color:var(--navy-dark);
}
.rex-card-head h3 span{
  display:block;font:500 12px 'Inter',sans-serif;color:var(--gray);margin-top:3px;
}
.rex-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.rex-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  font:700 10.5px 'Montserrat',sans-serif;
  text-transform:uppercase;letter-spacing:.04em;
}
.rex-tag.mode{background:#EFF6FF;color:var(--navy);border:1px solid #BFDBFE}
.rex-tag.savings{background:var(--good-bg);color:var(--good-tx);border:1px solid var(--good-br)}
.rex-tag.caution{background:var(--warn-bg);color:var(--warn-tx);border:1px solid var(--warn-br)}


/* Card Body */
.rex-card-body{padding:22px}

/* Scenario Description */
.rex-scenario{
  font-size:14px;color:var(--gray);line-height:1.7;
  margin-bottom:18px;max-width:900px;
}
.rex-scenario strong{color:var(--charcoal);font-weight:700}

/* Product Grid */
.rex-products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:18px;
}
.rex-product{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:16px;
  position:relative;
}
.rex-product.winner{
  border-color:var(--green);background:var(--good-bg);
}
.rex-product.winner::after{
  content:'★ BEST BUY';position:absolute;top:10px;right:10px;
  background:var(--green);color:#fff;
  font:900 8px 'Montserrat',sans-serif;
  padding:3px 8px;border-radius:999px;
  letter-spacing:.08em;
}
.rex-product.loser{
  border-color:var(--bad-br);background:var(--bad-bg);
}
.rex-product.loser::after{
  content:'MOST EXPENSIVE';position:absolute;top:10px;right:10px;
  background:var(--red);color:#fff;
  font:900 8px 'Montserrat',sans-serif;
  padding:3px 8px;border-radius:999px;
  letter-spacing:.08em;
}
.rex-prod-name{
  font:800 13px 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.rex-prod-icon{font-size:16px}
.rex-prod-row{
  display:flex;justify-content:space-between;
  font-size:12.5px;color:var(--gray);
  padding:5px 0;border-bottom:1px dashed var(--border);
}
.rex-prod-row:last-child{border-bottom:none}
.rex-prod-row strong{font-weight:700;color:var(--charcoal)}
.rex-prod-row .best{color:var(--green);font-weight:800}
.rex-prod-row .worst{color:var(--red);font-weight:800}


/* Results Strip */
.rex-results{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-bottom:18px;
}
.rex-res{
  border-radius:10px;padding:12px;text-align:center;
}
.rex-res.feat{background:var(--navy)}
.rex-res.good{background:var(--good-bg);border:1.5px solid var(--good-br)}
.rex-res.neutral{background:var(--bg);border:1.5px solid var(--border)}
.rex-res.warn{background:var(--warn-bg);border:1.5px solid var(--warn-br)}
.rex-res-label{
  font:700 9px 'Montserrat',sans-serif;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;
}
.rex-res.feat .rex-res-label{color:rgba(255,255,255,.7)}
.rex-res.good .rex-res-label{color:var(--good-tx)}
.rex-res.neutral .rex-res-label{color:var(--gray)}
.rex-res.warn .rex-res-label{color:var(--warn-tx)}
.rex-res-val{font:800 clamp(15px,2vw,19px)/1.15 'Montserrat',sans-serif}
.rex-res.feat .rex-res-val{color:#fff}
.rex-res.good .rex-res-val{color:var(--good-tx)}
.rex-res.neutral .rex-res-val{color:var(--navy-dark)}
.rex-res.warn .rex-res-val{color:var(--warn-tx)}


/* Takeaway Box */
.rex-takeaway{
  display:flex;align-items:flex-start;gap:12px;
  border-radius:12px;padding:16px 18px;
}
.rex-takeaway.good{background:var(--good-bg);border:1.5px solid var(--good-br)}
.rex-takeaway.warn{background:var(--warn-bg);border:1.5px solid var(--warn-br)}
.rex-takeaway-icon{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;
}
.rex-takeaway.good .rex-takeaway-icon{background:var(--green)}
.rex-takeaway.warn .rex-takeaway-icon{background:#D97706}
.rex-takeaway-text{font-size:12.5px;line-height:1.65}
.rex-takeaway.good .rex-takeaway-text{color:var(--good-tx)}
.rex-takeaway.warn .rex-takeaway-text{color:var(--warn-tx)}
.rex-takeaway-text strong{font-weight:800}


/* ── Math Breakdown ── */
.rex-math{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:10px;padding:14px 16px;margin-bottom:18px;
}
.rex-math-title{
  font:800 11px 'Montserrat',sans-serif;color:var(--navy);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
.rex-math-title i{font-size:10px}
.rex-math-rows{display:flex;flex-direction:column;gap:6px}
.rex-math-row{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--charcoal);
  padding:6px 10px;border-radius:6px;
  background:var(--white);border:1px solid var(--border);
}
.rex-math-row .label{font-weight:600;color:var(--gray);min-width:100px;flex-shrink:0}
.rex-math-row code{
  font-family:'Courier New',monospace;
  font-weight:700;color:var(--navy-dark);font-size:12px;
}
.rex-math-row .result{
  margin-left:auto;font:800 12px 'Montserrat',sans-serif;
}
.rex-math-row .result.green{color:var(--green)}
.rex-math-row .result.red{color:var(--red)}


/* ── Bar Comparison ── */
.rex-bars{margin-bottom:18px}
.rex-bar-row{
  display:grid;grid-template-columns:120px 1fr 80px;
  align-items:center;gap:10px;margin-bottom:8px;
}
.rex-bar-label{font-size:12px;font-weight:700;color:var(--charcoal)}
.rex-bar-track{
  height:14px;background:var(--border);
  border-radius:999px;overflow:hidden;position:relative;
}
.rex-bar-fill{
  height:100%;border-radius:999px;
  transition:width .5s ease;
}
.rex-bar-fill.navy{background:var(--navy)}
.rex-bar-fill.red{background:var(--red)}
.rex-bar-fill.green{background:var(--green)}
.rex-bar-fill.purple{background:#5B3DC9}
.rex-bar-fill.sky{background:#0369A1}
.rex-bar-text{
  text-align:right;font:800 12px 'Montserrat',sans-serif;
  color:var(--charcoal);font-variant-numeric:tabular-nums;
}


/* ── Source Tag ── */
.rex-source{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;color:var(--gray);
  margin-top:10px;
}
.rex-source i{font-size:9px;color:var(--navy)}
.rex-source a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}


/* ── Bottom Summary Grid ── */
.rex-summary{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  margin-top:28px;margin-bottom:20px;
}
.rex-sum-card{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:14px;text-align:center;
  transition:all .2s ease;
}
.rex-sum-card:hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.rex-sum-icon{
  width:36px;height:36px;border-radius:9px;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.rex-sum-icon.n1{background:var(--navy)}
.rex-sum-icon.n2{background:var(--red)}
.rex-sum-icon.n3{background:var(--green)}
.rex-sum-icon.n4{background:#5B3DC9}
.rex-sum-icon.n5{background:#0369A1}
.rex-sum-val{font:900 16px 'Montserrat',sans-serif;color:var(--navy-dark);margin-bottom:2px}
.rex-sum-label{font-size:10px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.04em}


/* ── CTA ── */
.rex-cta{
  padding:24px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);
  border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;position:relative;overflow:hidden;
}
.rex-cta::before{
  content:'';position:absolute;top:-30px;right:-20px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.15) 0%,transparent 70%);
}
.rex-cta-text{z-index:1}
.rex-cta-text h3{font:800 18px 'Montserrat',sans-serif;color:#fff;margin-bottom:6px}
.rex-cta-text p{font-size:13px;color:rgba(255,255,255,.75)}
.rex-cta-btn{
  z-index:1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:10px;
  background:var(--red);color:#fff;
  font:800 13px 'Montserrat',sans-serif;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
  white-space:nowrap;
}
.rex-cta-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.rex-cta-btn i{font-size:11px}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .rex-products{grid-template-columns:1fr 1fr}
  .rex-results{grid-template-columns:repeat(2,1fr)}
  .rex-summary{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .rex-section{padding:0 12px 28px;margin-top:18px}
  .rex-head{padding:22px 16px}
  .rex-body{padding:20px 16px}
  .rex-head-stats{flex-direction:column}
  .rex-card-head{flex-direction:column;align-items:flex-start}
  .rex-products{grid-template-columns:1fr}
  .rex-results{grid-template-columns:repeat(2,1fr)}
  .rex-summary{grid-template-columns:1fr 1fr}
  .rex-bar-row{grid-template-columns:80px 1fr 60px}
  .rex-bar-label{font-size:11px}
  .rex-math-row{flex-wrap:wrap}
  .rex-math-row .label{min-width:auto}
  .rex-cta{flex-direction:column;text-align:center}
  .rex-cta-btn{width:100%;justify-content:center}
  .rex-card-tags{width:100%}
  .rex-product.winner::after,
  .rex-product.loser::after{font-size:7px;padding:2px 6px}
}
/* ════════════════════════════════════════════
   ROOT — EXACT MATCH TO GROCERY CALCULATOR
   ════════════════════════════════════════════ */
:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-dark:#006644;
  --white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;
  --border:#E0E4E8;--bg:#F7F9FC;
  --good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;
  --warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;
  --bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6}


/* ════════════════════════════════════════════
   FAQ SECTION
   ════════════════════════════════════════════ */
.faq-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.faq-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}


/* ── Header ── */
.faq-head{
  padding:30px 28px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.faq-head::before{
  content:'';position:absolute;top:-70px;right:-50px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.18) 0%,rgba(191,10,48,0) 72%);
}
.faq-head::after{
  content:'';position:absolute;left:-80px;bottom:-120px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.12) 0%,rgba(0,135,90,0) 72%);
}
.faq-head-inner{position:relative;z-index:1}
.faq-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.faq-kicker i{font-size:10px;color:var(--green)}
.faq-head h2{
  font:800 clamp(24px,3.5vw,36px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:10px;
}
.faq-head h2 span{color:#ff7994}
.faq-head-inner>p{
  font-size:15px;color:rgba(255,255,255,.78);max-width:760px;
}
.faq-head-stats{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.faq-hstat{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:8px 14px;
  display:flex;align-items:center;gap:8px;
}
.faq-hstat-val{font:900 18px 'Montserrat',sans-serif;color:#fff}
.faq-hstat-label{font-size:11px;color:rgba(255,255,255,.7);font-weight:600}


/* ── Body ── */
.faq-body{padding:28px}


/* ── Category Filter ── */
.faq-filters{
  display:flex;gap:6px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--border);
  padding:6px;border-radius:12px;margin-bottom:28px;
}
.faq-filter{
  flex:1;min-width:130px;border:none;
  background:transparent;border-radius:8px;
  padding:10px 14px;
  font:700 11.5px 'Montserrat',sans-serif;
  color:var(--gray);cursor:pointer;
  transition:all .2s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;
}
.faq-filter:hover{background:var(--white);color:var(--navy)}
.faq-filter.active{
  background:var(--white);color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.faq-filter i{font-size:10px}
.faq-filter .count{
  background:var(--bg);border:1px solid var(--border);
  padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:800;color:var(--gray);
}
.faq-filter.active .count{
  background:var(--navy);color:#fff;border-color:var(--navy);
}


/* ── Category Block ── */
.faq-category{margin-bottom:28px}
.faq-category:last-child{margin-bottom:0}
.faq-cat-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:2px solid var(--border);
}
.faq-cat-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.faq-cat-icon.navy{background:var(--navy)}
.faq-cat-icon.red{background:var(--red)}
.faq-cat-icon.green{background:var(--green)}
.faq-cat-icon.purple{background:#5B3DC9}
.faq-cat-icon.sky{background:#0369A1}
.faq-cat-icon.amber{background:#D97706}
.faq-cat-head h3{
  font:800 clamp(14px,2vw,17px)/1.2 'Montserrat',sans-serif;
  color:var(--navy-dark);
}
.faq-cat-head h3 span{
  display:block;font:500 11px 'Inter',sans-serif;
  color:var(--gray);margin-top:2px;
}


/* ── Accordion ── */
.faq-item{
  border:1.5px solid var(--border);
  border-radius:12px;margin-bottom:8px;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{border-color:#c8cdd3}
.faq-item.open{
  border-color:var(--navy);
  box-shadow:0 2px 12px rgba(0,40,104,.08);
}

.faq-q{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;cursor:pointer;
  background:var(--white);
  transition:background .2s ease;
  -webkit-user-select:none;user-select:none;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{background:var(--bg)}
.faq-item.open .faq-q{background:var(--bg)}

.faq-q-num{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font:900 10px 'Montserrat',sans-serif;
  background:var(--bg);color:var(--navy);
  border:1.5px solid var(--border);
}
.faq-item.open .faq-q-num{
  background:var(--navy);color:#fff;border-color:var(--navy);
}

.faq-q-text{
  flex:1;font:700 13.5px 'Inter',sans-serif;
  color:var(--charcoal);line-height:1.45;
}

.faq-q-arrow{
  width:24px;height:24px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--gray);
  transition:transform .25s ease;
}
.faq-item.open .faq-q-arrow{
  transform:rotate(180deg);color:var(--navy);
}

.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .25s ease;
}
.faq-item.open .faq-a{
  max-height:600px;
}
.faq-a-inner{
  padding:0 18px 18px 58px;
  font-size:13.5px;color:var(--gray);line-height:1.7;
}
.faq-a-inner strong{color:var(--charcoal);font-weight:700}
.faq-a-inner a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-a-inner a:hover{color:var(--red)}
.faq-a-inner ul{
  margin:8px 0;padding-left:18px;
  list-style:disc;
}
.faq-a-inner ul li{
  margin-bottom:4px;font-size:13px;
}
.faq-a-inner code{
  background:var(--bg);border:1px solid var(--border);
  padding:2px 6px;border-radius:5px;
  font-family:'Courier New',monospace;
  font-size:12px;font-weight:700;color:var(--navy-dark);
}

/* Tip inside answer */
.faq-a-tip{
  background:var(--good-bg);border:1.5px solid var(--good-br);
  border-radius:8px;padding:10px 14px;
  margin-top:10px;
  font-size:12px;color:var(--good-tx);line-height:1.55;
  display:flex;align-items:flex-start;gap:8px;
}
.faq-a-tip i{font-size:10px;margin-top:3px;flex-shrink:0;color:var(--green)}

/* Warning inside answer */
.faq-a-warn{
  background:var(--warn-bg);border:1.5px solid var(--warn-br);
  border-radius:8px;padding:10px 14px;
  margin-top:10px;
  font-size:12px;color:var(--warn-tx);line-height:1.55;
  display:flex;align-items:flex-start;gap:8px;
}
.faq-a-warn i{font-size:10px;margin-top:3px;flex-shrink:0;color:#D97706}


/* ── Expand/Collapse All ── */
.faq-controls{
  display:flex;justify-content:flex-end;gap:8px;
  margin-bottom:20px;
}
.faq-ctrl{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  font:700 11px 'Montserrat',sans-serif;
  cursor:pointer;transition:all .2s ease;
  border:1.5px solid var(--border);
  background:var(--white);color:var(--navy);
}
.faq-ctrl:hover{border-color:var(--navy);background:var(--bg)}
.faq-ctrl i{font-size:9px}


/* ── Quick Answer Box ── */
.faq-quick{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:28px;
}
.faq-quick-card{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:12px;padding:16px;
  display:flex;align-items:flex-start;gap:10px;
  transition:all .2s ease;
}
.faq-quick-card:hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.faq-quick-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--white);
}
.faq-quick-icon.navy{background:var(--navy)}
.faq-quick-icon.red{background:var(--red)}
.faq-quick-icon.green{background:var(--green)}
.faq-quick-text h4{font:800 12px 'Montserrat',sans-serif;color:var(--charcoal);margin-bottom:3px}
.faq-quick-text p{font-size:11.5px;color:var(--gray);line-height:1.5}


/* ── CTA ── */
.faq-cta{
  margin-top:28px;padding:24px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);
  border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;position:relative;overflow:hidden;
}
.faq-cta::before{
  content:'';position:absolute;top:-30px;right:-20px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.15) 0%,transparent 70%);
}
.faq-cta-text{z-index:1}
.faq-cta-text h3{font:800 18px 'Montserrat',sans-serif;color:#fff;margin-bottom:6px}
.faq-cta-text p{font-size:13px;color:rgba(255,255,255,.75)}
.faq-cta-btn{
  z-index:1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:10px;
  background:var(--red);color:#fff;
  font:800 13px 'Montserrat',sans-serif;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
  white-space:nowrap;
}
.faq-cta-btn:hover{background:var(--red-hover);transform:translateY(-2px)}
.faq-cta-btn i{font-size:11px}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .faq-quick{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .faq-section{padding:0 12px 28px;margin-top:18px}
  .faq-head{padding:22px 16px}
  .faq-body{padding:20px 16px}
  .faq-head-stats{flex-direction:column}
  .faq-filters{flex-direction:column}
  .faq-filter{min-width:auto}
  .faq-quick{grid-template-columns:1fr}
  .faq-q{padding:14px 14px}
  .faq-a-inner{padding:0 14px 14px 14px}
  .faq-q-num{width:24px;height:24px;font-size:9px}
  .faq-cta{flex-direction:column;text-align:center}
  .faq-cta-btn{width:100%;justify-content:center}
  .faq-controls{justify-content:center}
}
/* ════════════════════════════════════════════
   ROOT — EXACT MATCH TO GROCERY CALCULATOR
   ════════════════════════════════════════════ */
:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-dark:#006644;
  --white:#fff;--charcoal:#1D1D1F;--gray:#5F6368;
  --border:#E0E4E8;--bg:#F7F9FC;
  --good-bg:#ECFDF5;--good-br:#A7F3D0;--good-tx:#065F46;
  --warn-bg:#FFF9F0;--warn-br:#F6E0B5;--warn-tx:#9A6C11;
  --bad-bg:#FEF2F2;--bad-br:#FECACA;--bad-tx:#991B1B;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--charcoal);line-height:1.6}


/* ════════════════════════════════════════════
   RELATED CALCULATORS SECTION
   ════════════════════════════════════════════ */
.related-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.related-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}

/* ── Header ── */
.related-head{
  padding:30px 28px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.related-head::before{
  content:'';position:absolute;top:-60px;right:-40px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.16) 0%,rgba(191,10,48,0) 72%);
}
.related-head::after{
  content:'';position:absolute;left:-70px;bottom:-100px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.12) 0%,rgba(0,135,90,0) 72%);
}
.related-head-inner{position:relative;z-index:1}
.related-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.related-kicker i{font-size:10px;color:var(--green)}
.related-head h2{
  font:800 clamp(24px,3.5vw,36px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:10px;
}
.related-head h2 span{color:#ff7994}
.related-head-inner>p{
  font-size:15px;color:rgba(255,255,255,.78);max-width:760px;
}
.related-head-stats{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.related-hstat{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:8px 14px;
  display:flex;align-items:center;gap:8px;
}
.related-hstat-val{font:900 18px 'Montserrat',sans-serif;color:#fff}
.related-hstat-label{font-size:11px;color:rgba(255,255,255,.7);font-weight:600}


/* ── Body ── */
.related-body{padding:28px}


/* ── Category Filter ── */
.related-filters{
  display:flex;gap:6px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--border);
  padding:6px;border-radius:12px;margin-bottom:24px;
}
.related-filter{
  flex:1;min-width:120px;border:none;
  background:transparent;border-radius:8px;
  padding:10px 14px;
  font:700 11.5px 'Montserrat',sans-serif;
  color:var(--gray);cursor:pointer;
  transition:all .2s ease;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;white-space:nowrap;
}
.related-filter:hover{background:var(--white);color:var(--navy)}
.related-filter.active{
  background:var(--white);color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.related-filter i{font-size:10px}
.related-filter .count{
  background:var(--bg);border:1px solid var(--border);
  padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:800;color:var(--gray);
}
.related-filter.active .count{
  background:var(--navy);color:#fff;border-color:var(--navy);
}


/* ── Card Grid ── */
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}


/* ── Calculator Card ── */
.calc-card{
  border:1.5px solid var(--border);
  border-radius:14px;overflow:hidden;
  background:var(--white);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  position:relative;
}
.calc-card:hover{
  border-color:var(--navy);
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}
.calc-card:hover .cc-arrow{
  background:var(--navy);color:#fff;
  transform:translateX(2px);
}

/* Card Top Accent */
.cc-accent{height:4px;width:100%}
.cc-accent.navy{background:linear-gradient(90deg,var(--navy),var(--navy-mid))}
.cc-accent.red{background:linear-gradient(90deg,var(--red),#E0335C)}
.cc-accent.green{background:linear-gradient(90deg,var(--green),#00B377)}
.cc-accent.purple{background:linear-gradient(90deg,#5B3DC9,#7C5CFC)}
.cc-accent.sky{background:linear-gradient(90deg,#0369A1,#0EA5E9)}
.cc-accent.amber{background:linear-gradient(90deg,#D97706,#F59E0B)}
.cc-accent.teal{background:linear-gradient(90deg,#0D9488,#14B8A6)}
.cc-accent.rose{background:linear-gradient(90deg,#BE123C,#FB7185)}

/* Card Body */
.cc-body{padding:18px 16px;flex:1;display:flex;flex-direction:column}

/* Card Icon + Category Row */
.cc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cc-icon{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--white);
}
.cc-icon.navy{background:var(--navy)}
.cc-icon.red{background:var(--red)}
.cc-icon.green{background:var(--green)}
.cc-icon.purple{background:#5B3DC9}
.cc-icon.sky{background:#0369A1}
.cc-icon.amber{background:#D97706}
.cc-icon.teal{background:#0D9488}
.cc-icon.rose{background:#BE123C}

.cc-cat{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:999px;
  font:700 9.5px 'Montserrat',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
}
.cc-cat.personal{background:#EEF2FF;color:#3730A3}
.cc-cat.credit{background:#FEF2F2;color:#991B1B}
.cc-cat.budgeting{background:var(--good-bg);color:var(--good-tx)}
.cc-cat.loans{background:#FFF7ED;color:#9A3412}
.cc-cat.investing{background:#F0FDF4;color:#166534}
.cc-cat.taxes{background:#FEFCE8;color:#854D0E}
.cc-cat.insurance{background:#F0F9FF;color:#075985}
.cc-cat.mortgages{background:#FAF5FF;color:#6B21A8}
.cc-cat.business{background:#FDF4FF;color:#86198F}
.cc-cat.legal{background:#ECFDF5;color:#065F46}

/* Card Title */
.cc-title{
  font:700 13.5px/1.35 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:8px;
}

/* Card Description */
.cc-desc{
  font-size:12.5px;color:var(--gray);line-height:1.55;
  flex:1;margin-bottom:14px;
}

/* Card Footer */
.cc-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:12px;border-top:1px solid var(--border);
}
.cc-tags{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.cc-tag{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 7px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);
  font-size:9.5px;font-weight:700;color:var(--gray);
}
.cc-tag i{font-size:8px}
.cc-arrow{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border);
  color:var(--gray);font-size:10px;
  transition:all .2s ease;margin-left:8px;
}


/* ── "You Are Here" Highlight Card ── */
.calc-card.current{
  border:2px solid var(--navy);
  background:linear-gradient(135deg,#F0F4FF 0%,#FFFFFF 100%);
}
.calc-card.current::after{
  content:'YOU ARE HERE';
  position:absolute;top:14px;right:14px;
  padding:3px 8px;border-radius:6px;
  background:var(--navy);color:#fff;
  font:900 8px 'Montserrat',sans-serif;
  letter-spacing:.08em;
}
.calc-card.current:hover{
  transform:none;
  cursor:default;
}


/* ── "Suggested For You" Badge ── */
.calc-card.suggested .cc-top::after{
  content:'SUGGESTED';
  padding:3px 7px;border-radius:6px;
  background:var(--good-bg);border:1px solid var(--good-br);color:var(--good-tx);
  font:800 8px 'Montserrat',sans-serif;
  letter-spacing:.06em;margin-left:auto;
}


/* ── Bottom CTA ── */
.related-cta{
  margin-top:24px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:14px;padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.related-cta-left{display:flex;align-items:center;gap:14px}
.related-cta-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-size:18px;
}
.related-cta-text h3{font:800 15px 'Montserrat',sans-serif;color:var(--charcoal);margin-bottom:3px}
.related-cta-text p{font-size:12.5px;color:var(--gray)}
.related-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:10px;
  background:var(--navy);color:#fff;
  font:800 12px 'Montserrat',sans-serif;
  text-decoration:none;border:none;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;
}
.related-cta-btn:hover{background:var(--navy-dark);transform:translateY(-1px)}
.related-cta-btn i{font-size:10px}


/* ── Category Count Bar ── */
.related-counts{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;
}
.rc-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  background:var(--bg);border:1px solid var(--border);
  font-size:11px;color:var(--gray);
}
.rc-pill strong{font:800 13px 'Montserrat',sans-serif;color:var(--navy)}
.rc-pill i{font-size:10px;color:var(--navy)}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .related-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .related-section{padding:0 12px 28px;margin-top:18px}
  .related-head{padding:22px 16px}
  .related-body{padding:20px 14px}
  .related-head-stats{flex-direction:column}
  .related-filters{flex-direction:column}
  .related-filter{min-width:auto}
  .related-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cc-body{padding:14px 12px}
  .cc-desc{font-size:11.5px}
  .related-cta{flex-direction:column;text-align:center}
  .related-cta-left{flex-direction:column}
  .related-cta-btn{width:100%;justify-content:center}
  .related-counts{justify-content:center}
}
@media(max-width:480px){
  .related-grid{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════
   DISCLAIMER & TRANSPARENCY SECTION
   ════════════════════════════════════════════ */
.legal-section{
  max-width:1280px;margin:0 auto;padding:0 18px 40px;
}
.legal-shell{
  background:var(--white);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);
}


/* ── Header ── */
.legal-head{
  padding:28px 28px 24px;
  background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 62%,#003d8c 100%);
  position:relative;overflow:hidden;
  border-bottom:4px solid var(--red);
}
.legal-head::before{
  content:'';position:absolute;top:-60px;right:-40px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(191,10,48,.14) 0%,rgba(191,10,48,0) 72%);
}
.legal-head::after{
  content:'';position:absolute;left:-60px;bottom:-100px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,135,90,.10) 0%,rgba(0,135,90,0) 72%);
}
.legal-head-inner{position:relative;z-index:1}
.legal-kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;padding:6px 12px;border-radius:999px;
  font:800 11px 'Montserrat',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;
}
.legal-kicker i{font-size:10px;color:var(--green)}
.legal-head h2{
  font:800 clamp(22px,3.5vw,32px)/1.12 'Montserrat',sans-serif;
  letter-spacing:-.5px;color:#fff;margin-bottom:8px;
}
.legal-head h2 span{color:#ff7994}
.legal-head-inner>p{
  font-size:14px;color:rgba(255,255,255,.75);max-width:720px;
}


/* ── Body ── */
.legal-body{padding:28px}


/* ── Two-Column Layout ── */
.legal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:24px;
}


/* ── Card Base ── */
.legal-card{
  border:1.5px solid var(--border);
  border-radius:14px;overflow:hidden;
  background:var(--white);
}
.legal-card-full{grid-column:1 / -1}


/* Card Header */
.lc-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;
  border-bottom:1.5px solid var(--border);
  background:var(--bg);
}
.lc-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.lc-icon.navy{background:var(--navy)}
.lc-icon.red{background:var(--red)}
.lc-icon.green{background:var(--green)}
.lc-icon.amber{background:#D97706}
.lc-icon.purple{background:#5B3DC9}
.lc-icon.sky{background:#0369A1}
.lc-icon.rose{background:#BE123C}
.lc-head h3{
  font:800 clamp(13px,1.5vw,15px)/1.25 'Montserrat',sans-serif;
  color:var(--charcoal);
}
.lc-head h3 span{
  display:block;font:500 11px 'Inter',sans-serif;
  color:var(--gray);margin-top:2px;
}

/* Card Body */
.lc-body{padding:20px}
.lc-body p{font-size:13px;color:var(--gray);line-height:1.65;margin-bottom:12px}
.lc-body p:last-child{margin-bottom:0}
.lc-body strong{color:var(--charcoal);font-weight:700}
.lc-body a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lc-body a:hover{color:var(--red)}


/* ── Bullet List ── */
.lc-list{list-style:none;padding:0;margin:0 0 12px}
.lc-list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--gray);line-height:1.55;
}
.lc-list li:last-child{border-bottom:none;padding-bottom:0}
.lc-list-icon{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;margin-top:1px;
}
.lc-list-icon.green{background:var(--good-bg);color:var(--green)}
.lc-list-icon.red{background:var(--bad-bg);color:var(--red)}
.lc-list-icon.navy{background:var(--info-bg);color:var(--navy)}
.lc-list-icon.amber{background:var(--warn-bg);color:#D97706}


/* ── Signal Boxes ── */
.lc-signal{
  border-radius:10px;padding:14px 16px;
  margin-bottom:12px;
  font-size:12.5px;line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;
}
.lc-signal:last-child{margin-bottom:0}
.lc-signal i{font-size:12px;margin-top:3px;flex-shrink:0}
.lc-signal.warn{background:var(--warn-bg);border:1.5px solid var(--warn-br);color:var(--warn-tx)}
.lc-signal.bad{background:var(--bad-bg);border:1.5px solid var(--bad-br);color:var(--bad-tx)}
.lc-signal.good{background:var(--good-bg);border:1.5px solid var(--good-br);color:var(--good-tx)}
.lc-signal.info{background:var(--info-bg);border:1.5px solid var(--info-br);color:var(--info-tx)}


/* ── Gov Source Links ── */
.gov-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.gov-link{
  display:flex;align-items:flex-start;gap:10px;
  padding:16px;border-radius:12px;
  background:var(--bg);border:1.5px solid var(--border);
  text-decoration:none;color:inherit;
  transition:all .2s ease;
}
.gov-link:hover{
  border-color:var(--navy);box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.gov-link-icon{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--white);
}
.gov-link-icon.green{background:var(--green)}
.gov-link-icon.navy{background:var(--navy)}
.gov-link-icon.red{background:var(--red)}
.gov-link-icon.sky{background:#0369A1}
.gov-link-icon.amber{background:#D97706}
.gov-link-icon.teal{background:#0D9488}
.gov-link-text h4{
  font:700 12px 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:3px;
}
.gov-link-text p{font-size:11px;color:var(--gray);line-height:1.45}
.gov-link-text .gov-badge{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:6px;padding:2px 7px;border-radius:5px;
  font:800 8.5px 'Montserrat',sans-serif;
  letter-spacing:.04em;text-transform:uppercase;
}
.gov-badge.fed{background:#EEF2FF;color:#3730A3}
.gov-badge.state{background:var(--warn-bg);color:var(--warn-tx)}


/* ── Methodology Table ── */
.lc-table{
  width:100%;border-collapse:collapse;
  font-size:12.5px;margin-bottom:12px;
}
.lc-table thead th{
  background:var(--bg);border:1px solid var(--border);
  padding:10px 12px;text-align:left;
  font:700 11px 'Montserrat',sans-serif;
  color:var(--navy);text-transform:uppercase;
  letter-spacing:.04em;
}
.lc-table tbody td{
  border:1px solid var(--border);
  padding:10px 12px;color:var(--gray);
  vertical-align:top;
}
.lc-table tbody tr:hover{background:var(--bg)}
.lc-table code{
  background:var(--bg);border:1px solid var(--border);
  padding:1px 5px;border-radius:4px;
  font-family:'Courier New',monospace;
  font-size:11px;font-weight:700;color:var(--navy-dark);
}


/* ── Trust Badges ── */
.trust-row{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:12px;
}
.trust-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  background:var(--bg);border:1.5px solid var(--border);
  font-size:11.5px;font-weight:700;color:var(--charcoal);
}
.trust-badge i{font-size:12px}
.trust-badge.green i{color:var(--green)}
.trust-badge.navy i{color:var(--navy)}
.trust-badge.red i{color:var(--red)}


/* ── Editorial Stamp ── */
.editorial-stamp{
  margin-top:20px;padding:20px;
  border:1.5px solid var(--border);border-radius:12px;
  background:var(--bg);
  display:flex;align-items:flex-start;gap:16px;
}
.es-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-size:18px;
}
.es-details h4{
  font:800 14px 'Montserrat',sans-serif;
  color:var(--charcoal);margin-bottom:4px;
}
.es-details p{font-size:12px;color:var(--gray);line-height:1.55;margin-bottom:2px}
.es-details .es-date{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;padding:4px 10px;border-radius:6px;
  background:var(--white);border:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--gray);
}
.es-details .es-date i{font-size:9px;color:var(--navy)}


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media(max-width:1080px){
  .gov-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .legal-section{padding:0 12px 28px;margin-top:18px}
  .legal-head{padding:22px 16px}
  .legal-body{padding:20px 14px}
  .legal-grid{grid-template-columns:1fr;gap:14px}
  .gov-links{grid-template-columns:1fr}
  .editorial-stamp{flex-direction:column;align-items:center;text-align:center}
  .lc-body{padding:16px}
  .lc-head{padding:14px 16px}
}
@media(max-width:480px){
  .trust-row{flex-direction:column}
  .trust-badge{justify-content:center}
}
/* FIX: Prevents global font rules from breaking Font Awesome icons */
.fa-solid, .fa-regular, .fas, .far, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* Specific fix for the WhatsApp Brand icon */
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}
 /* FIX: Scales down text-based KPI values so they look proportional */
#kpiWinner, #kpiVerdict {
    font-size: 18px !important; 
    line-height: 1.3 !important;
    white-space: normal !important; /* Allows extremely long product names to wrap nicely to a second line */
    padding-top: 4px; /* Perfectly centers the smaller text vertically */
}

/* Optional: If on mobile, make them even a tiny bit smaller to prevent overlap */
@media (max-width: 600px) {
    #kpiWinner, #kpiVerdict {
        font-size: 16px !important;
    }
}