:root{
  --brand:#6d28d9; /* purple-700 */
  --brand-600:#7c3aed;
  --bg:#0b0b12;
  --text:#f7f7ff;
  --muted:#cfcde0;
  --card:#121225;
  --card-2:#191933;
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%
  font-size: 17px;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  /* Subtle corner accents; no purple in the middle */
  background:
    radial-gradient(900px 600px at 110% -10%, rgba(124,58,237,.20), rgba(124,58,237,0) 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(124,58,237,.14), rgba(124,58,237,0) 60%),
    linear-gradient(180deg, #0b0b12 0%, #07070e 100%);
  background-attachment: fixed, fixed, fixed;
  color:var(--text);
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,11,18,.75); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  box-shadow: 0 4px 20px rgba(124,58,237,.35), inset 0 0 18px rgba(255,255,255,.15);
  display:grid;place-items:center;font-weight:800;color:white;
}
.brand h1{font-size:19px;margin:0;font-weight:800;letter-spacing:.3px}
.nav a{padding:8px 10px;color:var(--muted);text-decoration:none;border-radius:10px}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}

.hero{
  padding:72px 0 32px;
  display:grid;grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;
}
@media(max-width:920px){.hero{grid-template-columns:1fr}}
.hero h2{
  font-size:42px; line-height:1.05; margin:0 0 16px; font-weight:900;
  letter-spacing:.3px;
  background: linear-gradient(180deg, #fff, #c2b8ff 65%, #b39cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{color:var(--muted);font-size:19px;margin:0 0 14px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius:24px; padding:20px; box-shadow: var(--shadow);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
label{display:block;font-size:14px;color:#c9c7df;margin-bottom:6px}
input, select{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:#0f0f1e; color:#fff; outline:none;
}
select option{color:#000}
.btn{
  background: linear-gradient(180deg, var(--brand-600), var(--brand));
  color:white; border:none; padding:12px 16px; border-radius:12px; cursor:pointer;
  font-weight:700; letter-spacing:.3px; box-shadow: 0 10px 30px rgba(124,58,237,.35);
}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.result{
  display:grid; gap:12px; padding:12px;
}
.result .pill{font-size:14px;color:#cfcde0;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.kpi{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.kpi .box{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  padding:18px;border-radius:18px;text-align:center
}
.kpi .box h3{margin:0;font-size:32px}
.kpi .box p{margin:6px 0 0; color:#c9c7df}
.breakdown{margin-top:8px;font-size:15px;color:#d9d6f0}
.breakdown code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.disclaimer{
  font-size:13px;color:#aba8c7; margin-top:8px;
}
footer{border-top:1px solid rgba(255,255,255,.08);margin-top:40px}
.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;padding:28px 0}
.footergrid h4{margin:0 0 8px}
.footergrid a{color:#cfcde0;display:block;margin:6px 0;text-decoration:none}
.footergrid a:hover{color:#fff}
.copy{color:#a7a3c7;font-size:14px;padding:16px 0}
.badge{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:12px}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.09);text-align:left;font-size:15px}
.small{font-size:13px;color:#bdb8e6}

/* --- Enhanced Tool Layout --- */
.tool-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
}
@media(max-width:920px){.tool-grid{grid-template-columns:1fr}}
fieldset{
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius:18px;
  padding:16px;
  margin:0 0 12px 0;
}
legend{
  padding:0 8px;
  font-size:13px;
  color:#bdb8e6;
  letter-spacing:.2px;
}
.hint{font-size:13px;color:#aba8c7;margin-top:6px}
.sticky{
  position:sticky; top:84px;
}
.result-card h3{margin:0 0 6px 0}
.badge-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.badge-list .pill{margin:0}
.list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
    
/* --- Layout refinements --- */
.container.narrow{max-width:980px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.prose p{line-height:1.6}
.hero .sub{color:var(--muted);font-size:19px}
.field-help{font-size:13px;color:#a8a3cf;margin-top:4px}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.08);margin:18px 0}
.result .chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:13px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:920px){.grid-3{grid-template-columns:1fr}}

/* --- Easier UI: larger controls & segmented radios --- */
#estimator label{font-size:15px}
#estimator input.control-lg, #estimator select.control-lg{
  padding:14px 14px;
  font-size:17px;
  border-radius:14px;
}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.seg label{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer; user-select:none;
}
.seg label:hover{background:rgba(255,255,255,.08)}
.seg label input{display:none}
.seg label:has(input:checked){
  background: linear-gradient(180deg, var(--brand-600), var(--brand));
  border-color: transparent; color:white; box-shadow: 0 10px 24px rgba(124,58,237,.35);
}
.form-actions .btn{padding:14px 18px;font-size:16px;border-radius:14px}
.result-card .kpi .box h3{font-size:36px}

/* Larger prose for legal/info pages */
.prose-lg{font-size:19px;line-height:1.7}
.prose-lg p{margin:10px 0}

/* --- Blog styles --- */
.post h1{font-size:34px;margin:0 0 10px}
.post time{color:#a9a4cf;font-size:14px}
.post .content{font-size:18px;line-height:1.75}
.post .content h3{margin-top:14px}
.post .content p, .post .content ul{margin:10px 0}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.blog-card{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;background:rgba(255,255,255,.02)}
.blog-card h3{margin:0 0 6px;font-size:20px}
.blog-card p{font-size:14px;color:#c7c4e6}

/* --- Estimate summary polish (non-breaking) --- */
.pill.result-summary{display:flex;flex-direction:column;gap:6px}
.pill.result-summary .eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:13px;color:#a9a4cf}
.pill.result-summary .title{font-size:20px;font-weight:700}
.pill.result-summary .result-meta{display:flex;gap:8px;flex-wrap:wrap}
.pill.result-summary .chip{font-size:13px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

/* Center the estimate summary header + chips */
.pill.result-summary{align-items:center;text-align:center}
.pill.result-summary .result-meta{justify-content:center}

/* --- Mobile polish (non-breaking) --- */
@media (max-width: 860px){
  .header .container{flex-direction:column;align-items:center;gap:8px}
  .nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .nav a{padding:10px 12px;display:inline-block}
}
@media (max-width: 640px){
  .container{padding-left:14px;padding-right:14px}
  .card{padding:16px}
  .control-lg{width:100%}
  .seg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .seg label{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
  .form-actions{flex-wrap:wrap;justify-content:center}
  /* If the result card was sticky on desktop, disable on mobile to avoid overlap */
  .sticky{position:static !important; top:auto !important}
  /* Any two-column layouts collapse to one */
  .grid, .columns, .tool-grid{grid-template-columns:1fr !important}
  /* Ensure images and tables fit */
  img{max-width:100%;height:auto}
  table{display:block;overflow-x:auto}
}
@media (max-width: 380px){
  .nav a{padding:8px 10px}
  .pill.result-summary .title{font-size:18px}
  .btn, button{min-height:44px}
}
/* Centered summary chips (from earlier) */
.pill.result-summary{align-items:center;text-align:center}
.pill.result-summary .result-meta{justify-content:center}
/* Larger tap targets for inputs */
input[type="radio"], input[type="checkbox"]{min-width:20px;min-height:20px}

/* === No-horizontal-scroll hardening (mobile-safe) === */

/* 1) Universal box sizing to prevent width creep */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Block any horizontal overflow at the root */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { position: relative; }

/* 3) Containers always fit viewport */
.container { max-width:1100px; width:100%; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
.card { max-width:100%; overflow-x:hidden; }

/* 4) Media never exceed width */
img, svg, canvas, video { max-width:100%; height:auto; display:block; }

/* 5) Tables wrap instead of forcing scrollbars */
table { width:100%; table-layout:fixed; border-collapse:collapse; }
th, td { word-break:break-word; overflow-wrap:anywhere; }

/* 6) Long text/links wrap safely */
h1, h2, h3, h4, h5, h6, p, a, li { overflow-wrap:anywhere; word-break:break-word; }

/* 7) Flex rows that used to push wide now wrap */
.nav, .seg, .result-meta { flex-wrap:wrap; }
.nav { overflow:hidden; }

/* 8) Grids/columns are constrained */
.grid, .columns, .tool-grid { max-width:100%; overflow-x:hidden; }

/* 9) Chips stay on multiple lines without widening card */
.pill.result-summary .result-meta { justify-content:center; }

/* 10) Kill any rogue 100vw + padding combos */
[class*="w-100vw"], [style*="100vw"] { max-width:100%; }

/* === Estimate amount sizing & mobile fit === */
/* Generic KPI/amount styles (robust to unknown class names) */
.kpi, .stat, .result-box, .estimate-box, .amount-box { min-width:0; }
.kpi .value, .stat .value, .result .value, .estimate .value, .amount, .price, .estimate-amount {
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.1;
  white-space: nowrap;
}
.kpi .label, .stat .label { font-size: 12px; opacity:.85; }
.kpis, .stats, .result-grid, .estimate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
/* Ensure each square never overflows horizontally */
.kpi, .stat {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile collapse for the tool UI */
@media (max-width: 640px){
  .kpis, .stats, .result-grid, .estimate-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi .value, .stat .value, .result .value, .estimate .value, .amount, .price, .estimate-amount { font-size: clamp(18px, 7vw, 26px); }
  .form-row, .row { display:flex; flex-wrap:wrap; gap:10px; }
  select, input, .control-lg, .control, .seg { max-width:100%; width:100%; }
  .seg { justify-content:center; }
  /* prevent any unexpected side scroll */
  html, body { overflow-x:hidden; }
}

/* === Single-line amounts & safer scaling === */
.kpi .value, .stat .value, .result .value, .estimate .value, .amount, .price, .estimate-amount {
  white-space: nowrap;            /* keep on one line */
  line-height: 1.1;
  font-size: clamp(16px, 4.2vw, 24px);
}
/* Units or per-period text smaller */
.kpi .value small, .stat .value small, .result .value small, .estimate .value small,
.amount small, .price small, .estimate-amount small,
.kpi .value .unit, .stat .value .unit, .result .value .unit, .estimate .value .unit {
  font-size: 0.72em;
  opacity: .9;
}
/* Ensure squares don't force overflow */
.kpi, .stat, .result-box, .estimate-box { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpis, .stats, .result-grid, .estimate-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

@media (max-width: 640px){
  .kpi .value, .stat .value, .result .value, .estimate .value, .amount, .price, .estimate-amount {
    font-size: clamp(14px, 3.8vw, 20px);
  }
}

/* === Specific shrink for "Estimated annual premium" KPI === */
.kpi.is-annual .value, .stat.is-annual .value, .result.is-annual .value, .estimate.is-annual .value,
.kpi.is-annual .amount, .stat.is-annual .amount, .result.is-annual .amount, .estimate.is-annual .amount,
.kpi.is-annual .price, .stat.is-annual .price, .result.is-annual .price, .estimate.is-annual .price,
.kpi.is-annual .estimate-amount, .stat.is-annual .estimate-amount, .result.is-annual .estimate-amount, .estimate.is-annual .estimate-amount {
  white-space: nowrap;
  font-size: clamp(14px, 3.2vw, 20px);
  line-height: 1.1;
}

/* === Annual premium box: keep single-line and smaller, esp. desktop === */
.kpi .box.is-annual h3{
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(16px, 1.6vw, 22px);
}
@media (max-width: 640px){
  .kpi .box.is-annual h3{ font-size: clamp(14px, 4.5vw, 20px); }
}

/* === Monthly premium box: match annual sizing === */
.kpi .box.is-monthly h3{
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(16px, 1.6vw, 22px);
}
@media (max-width: 640px){
  .kpi .box.is-monthly h3{ font-size: clamp(14px, 4.5vw, 20px); }
}