:root{
  --bg:#0b1220;
  --panel:rgba(15,23,42,.85);
  --border:rgba(148,163,184,.18);
  --text:#e2e8f0;
  --muted:rgba(226,232,240,.72);
  --accent:#38bdf8;
  --good:#22c55e;
}

html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(900px 520px at 20% 0%, rgba(56,189,248,.18), transparent 55%), var(--bg);
  color:var(--text);
}
a{color:inherit}

/* EMBED MODE */
html.embed body{
  background: transparent !important;
}
html.embed .wrap{
  max-width:none;
  padding:0;
}
/* Hide page chrome + SEO copy when embedded; keep the calculator only */
html.embed .top,
html.embed .h1,
html.embed .sub,
html.embed .mini,
html.embed details,
html.embed .stickySaveBar,
html.embed .ctaRow,
html.embed .trialBtn,
html.embed [data-lead-magnet],
html.embed footer{
  display:none !important;
}

/* Keep the Important Disclaimer visible in embed mode. */
html.embed .card.importantDisclaimer{
  display:block !important;
}
html.embed .card.importantDisclaimer .mini{
  display:block !important;
}
html.embed .grid{
  margin-top:0;
}
html.embed .card{
  border-radius:0;
  box-shadow:none;
}


.wrap{max-width:980px;margin:0 auto;padding:18px 14px 30px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;font-weight:900;text-decoration:none;
  border:1px solid var(--border);background:rgba(15,23,42,.65);
  color:var(--text);
  line-height:1;
}
.btn.primary{background:rgba(56,189,248,.16);border-color:rgba(56,189,248,.35)}
.btn.good{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.35)}

/* Buttons should look consistent across <a> and <button> */
button.btn{
  cursor:pointer;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
}
button.btn:disabled{opacity:.65;cursor:not-allowed}
.btn[aria-disabled="true"]{opacity:.65;cursor:not-allowed;pointer-events:none}

/* Lead magnet: use the same .btn.primary theme as other primary actions (e.g., "Open Full Calculator") */
[data-lead-magnet="email-calculation"] #puLeadBtn.btn.primary{
  padding:10px 12px;
  border-radius:12px;
}

/* Lead magnet: responsive form layout */
@media(max-width:520px){
  [data-lead-magnet="email-calculation"] form{flex-direction:column;align-items:stretch}
  [data-lead-magnet="email-calculation"] #puLeadEmail{min-width:0}
  [data-lead-magnet="email-calculation"] #puLeadBtn{width:100%}
}

/* Start Free Trial pill (match screenshot) */
.trialBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  font-weight:1000;text-decoration:none;
  background:linear-gradient(180deg, #3b82f6, #2563eb);
  color:white;border:0;
  box-shadow:0 10px 26px rgba(37,99,235,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.trialBtn:hover{filter:brightness(1.03)}
.trialBtn:active{transform:translateY(1px)}
.trialBtnArrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-weight:1100;line-height:1;
}
.h1{font-size:30px;font-weight:950;letter-spacing:-.02em;margin:16px 0 6px}
.sub{color:var(--muted);line-height:1.6;margin:0}
.mini{font-size:12px;color:var(--muted);line-height:1.6}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:14px}

/* Keep a conversion CTA available even after scrolling */
.stickySaveBar{
  position:sticky;
  top:10px;
  z-index:20;
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.stickySaveBar .mini{margin:0}
@media(max-width:520px){
  .stickySaveBar{top:0;border-radius:0;margin-left:-14px;margin-right:-14px}
}

.card{
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.78));
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.half{grid-column:span 6}
@media(max-width:860px){.half{grid-column:span 12}}

/* Calculator demo (matches landing) */
.landingDemoCard{position:relative;overflow:hidden}
.landingIconBadge{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.24);font-size:16px}
.landingIconBadgeAlt{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.22)}
.landingField{margin:12px 0}
.landingLabel{font-weight:1000;letter-spacing:.01em;color:rgba(226,232,240,.9);font-size:12px;margin-bottom:8px;text-transform:uppercase}
.landingBtnRow{display:flex;flex-wrap:wrap;gap:10px}
.landingOptBtn{flex:1 1 120px;padding:12px 12px;border-radius:12px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.22);color:var(--text);font-weight:900;min-height:44px;cursor:pointer}
.landingOptBtn:hover{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08)}
.landingOptBtnActive{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.55);box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.landingNote{margin-top:12px}

.landingResultBox{padding:16px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.06)}

.rulerHeader{margin:0 0 12px;padding:16px 14px;border-radius:14px;background:linear-gradient(180deg, rgba(56,189,248,.12), rgba(56,189,248,.06));border:1px solid rgba(56,189,248,.28);letter-spacing:.01em;box-shadow:0 10px 24px rgba(0,0,0,.18);text-align:center}
.rulerHeaderTop{font-size:13px;font-weight:900;color:rgba(226,232,240,.9);margin-bottom:10px}
.rulerHeaderUnitsLine{font-size:22px;font-weight:1000;line-height:1.05;margin-bottom:8px}
.rulerHeaderBottom{font-size:13px;font-weight:900;color:rgba(226,232,240,.9);line-height:1.1}
.rulerHeader #landingUnitsLabel{color:#22c55e;font-weight:1100;text-shadow:0 1px 0 rgba(0,0,0,.25);font-size:54px;line-height:1;display:inline-block}
.rulerHeaderUnitsText{font-size:14px;font-weight:900;color:rgba(226,232,240,.85);margin-left:8px;vertical-align:baseline}
@media(max-width:480px){.rulerHeader #landingUnitsLabel{font-size:44px}.rulerHeaderUnitsLine{font-size:20px}}

.rulerWrap{padding:10px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.22)}
.track{position:relative;height:46px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.24);overflow:hidden}
.fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg, rgba(56,189,248,.28), rgba(34,197,94,.22))}
.marker{position:absolute;top:0;bottom:0;left:0%;width:2px;background:rgba(226,232,240,.9)}
.ticks{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.tick{position:absolute;bottom:0;width:1px;background:rgba(148,163,184,.32)}
.tick.major{height:16px}
.tick.mid{height:11px}
.tick.minor{height:7px;opacity:.7}
.tLabel{position:absolute;bottom:18px;transform:translateX(-50%);font-size:10px;color:rgba(226,232,240,.72);font-weight:900}
.tTop{top:4px;bottom:auto}

.landingStats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.landingStat{padding:12px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.22)}
.landingStatLabel{font-size:12px;color:rgba(226,232,240,.75);font-weight:1000;text-transform:uppercase;letter-spacing:.02em}
.landingStatVal{font-size:28px;font-weight:1100;line-height:1.1;margin-top:6px}

.landingProBanner{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:16px;border:1px solid rgba(59,130,246,.18);background:linear-gradient(90deg, rgba(59,130,246,.12), rgba(34,197,94,.06));padding:14px}
@media(max-width:520px){.landingProBanner{flex-direction:column;align-items:stretch}}

/* FAQ */
.faq details{border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:12px 12px;margin-top:10px;background:rgba(2,6,23,.18)}
.faq summary{cursor:pointer;font-weight:950}

/* Collapsible tiles (calculator pages, below calculator) */
details.card.collapsibleCard{padding:0;overflow:hidden}
details.card.collapsibleCard > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px}
details.card.collapsibleCard > summary::-webkit-details-marker{display:none}
details.card.collapsibleCard > summary:after{content:"▾";font-weight:1100;opacity:.82;transition:transform .18s ease}
details.card.collapsibleCard[open] > summary:after{transform:rotate(180deg)}
details.card.collapsibleCard[open] > summary{border-bottom:1px solid var(--border);background:rgba(2,6,23,.12)}
details.card.collapsibleCard .collapsibleBody{padding:0 16px 16px}

/* Important Disclaimer tile (non-collapsible) */
.card.importantDisclaimer{
  border:1px solid rgba(239,68,68,.40);
  background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(148,163,184,.06));
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.card.importantDisclaimer h2{color:rgba(239,68,68,.95)}