/* Haluvra homepage v2 (Oct 19 2026, preview). Loaded after premium.css, homepage only.
   One alignment system: every section uses the same 1200px container, left-aligned headings and the same vertical rhythm. */
:root{--sec:clamp(72px,3rem + 5vw,128px)}
.premium .section,.premium .final,.premium .nl-home{padding:var(--sec) 0}
.premium .section-head{margin-bottom:var(--s6)}
.premium .section-head.center{text-align:left;margin-left:0;margin-right:0}

/* hero phone: the app dashboard drawn in HTML, filled live from the calculator engine (calc-demo.js) */
.mock{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden;background:#FAFAFA;container-type:inline-size}
.mk{--u:.82px;height:100%;padding:calc(var(--u)*58) calc(var(--u)*20) calc(var(--u)*20);font-size:calc(var(--u)*15);line-height:1.35;color:var(--ink);letter-spacing:-.01em;text-align:left}
@supports (width:1cqw){.mk{--u:calc(100cqw / 390)}}
.mk p{margin:0}
.mk-top{display:flex;justify-content:space-between;align-items:center}
.mk-top img{height:calc(var(--u)*24);width:auto}
.mk-av{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--green);font-weight:700;font-size:calc(var(--u)*14);display:flex;align-items:center;justify-content:center}
.mk-hi{font-size:calc(var(--u)*26);font-weight:700;letter-spacing:-.03em;margin:calc(var(--u)*16) 0 calc(var(--u)*12)!important}
.mk-card{background:#fff;border:1px solid var(--line);border-radius:calc(var(--u)*18);padding:calc(var(--u)*18)}
.mk-lab{font-size:calc(var(--u)*11);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mk-date{font-size:calc(var(--u)*38);font-weight:700;letter-spacing:-.045em;color:var(--green);line-height:1.05;margin:calc(var(--u)*4) 0 calc(var(--u)*6)!important}
.mk-sub{font-size:calc(var(--u)*13);color:var(--ink-2);line-height:1.45}
.mk-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:calc(var(--u)*14);padding-top:calc(var(--u)*12);font-size:calc(var(--u)*13);color:var(--ink-2)}
.mk-total b{font-size:calc(var(--u)*20);color:var(--ink);letter-spacing:-.03em}
.mk-save{background:#E3EAE6;border-radius:calc(var(--u)*12);padding:calc(var(--u)*10) calc(var(--u)*12);margin-top:calc(var(--u)*12);font-size:calc(var(--u)*13);color:var(--green);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:calc(var(--u)*6)}
.mk-save b{font-size:calc(var(--u)*19);letter-spacing:-.03em}
.mk-save small{flex-basis:100%;font-size:calc(var(--u)*11);color:var(--green-2);margin-top:calc(var(--u)*2)}
.mk-tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10);margin-top:calc(var(--u)*10)}
.mk-tile{background:#fff;border:1px solid var(--line);border-radius:calc(var(--u)*14);padding:calc(var(--u)*12)}
.mk-tile b{display:block;font-size:calc(var(--u)*18);margin:calc(var(--u)*4) 0 calc(var(--u)*2);letter-spacing:-.025em;white-space:nowrap}
.mk-tile small{font-size:calc(var(--u)*11);color:var(--ink-3)}
.mk-h{font-size:calc(var(--u)*15);font-weight:700;margin:calc(var(--u)*16) 0 calc(var(--u)*4)!important}
.mk-cards{list-style:none;margin:0;padding:0}
.mk-cards li{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*9) 0;border-bottom:1px solid var(--line);font-size:calc(var(--u)*13.5)}
.mk-dot{flex:none;width:calc(var(--u)*10);height:calc(var(--u)*10);border-radius:50%;background:var(--green)}
.mk-dot.d2{background:var(--terra)}.mk-dot.d3{background:var(--purple)}.mk-dot.d4{background:#8FA89A}
.mk-n{flex:1;font-weight:600;min-width:0}
.mk-v{text-align:right;font-weight:600}
.mk-n small,.mk-v small{display:block;font-weight:500;font-size:calc(var(--u)*11.5);color:var(--ink-3)}
.mk-v small{color:var(--green)}

/* pain points: text and the cards loop side by side, the loop as a real visual */
.pain-layout{display:grid;gap:var(--s6)}
.pain-copy .section-head{margin-bottom:var(--s4)}
.premium .pain .pain-list{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.premium .pain .pain-list li{grid-template-columns:28px 1fr;gap:var(--s3);border-top:0;border-bottom:1px solid var(--line);padding:var(--s3) 0}
.pain-visual .loop-card{max-width:none;margin:0;border-radius:var(--r);background:var(--card)}
@media(min-width:960px){
  .pain-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s10);align-items:center}
}

/* calculator: budget slider + the "playing the example" pill */
.b-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;background:transparent;margin:12px 0 2px;cursor:pointer;--fill:34%}
.b-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(var(--green),var(--green)) 0 0/var(--fill) 100% no-repeat,var(--line)}
.b-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--green);margin-top:-9px;box-shadow:0 1px 3px rgba(26,26,26,.18);transition:box-shadow .2s}
.b-range::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
.b-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--green)}
.b-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--green)}
.b-range:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:6px}
.demo-slide .b-range::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(45,74,62,.14)}
.demo-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.3;color:var(--green);background:#E3EAE6;border-radius:999px;padding:6px 12px;margin:0 0 var(--s2);transition:opacity .35s}
.demo-pill[hidden]{display:none}
.demo-pill.out{opacity:0}
.demo-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--terra);animation:demopulse 1.2s ease-in-out infinite}
@keyframes demopulse{50%{opacity:.3}}
.calc-inputs .debt{transition:background-color .25s,box-shadow .25s;border-radius:var(--rb)}
.demo-on .debt.demo-typing{background:var(--card);box-shadow:0 0 0 6px var(--card)}

/* founder: portrait beside the story, stats as one row under it */
.premium .founder-grid{display:grid;gap:var(--s4);align-items:start}
.founder-pic .founder-avatar{margin:0}
.premium .founder-card{max-width:52rem}
.premium .founder-card h2{margin-bottom:var(--s3)}
.premium .founder .stats{margin-top:var(--s4)}
@media(min-width:600px){
  .premium .founder .stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s5);border-top:1px solid var(--line);gap:var(--s3)}
  .premium .founder .stat{display:block;border-top:0;padding:var(--s3) 0 0}
  .premium .founder .stat span{margin-top:var(--s1)}
}
@media(min-width:960px){.premium .founder-grid{grid-template-columns:184px minmax(0,1fr);column-gap:var(--s8)}}

/* pricing, FAQ, newsletter, final CTA: same left edge as everything above */
.premium .compare{margin:var(--s6) 0 0;text-align:left}
.premium .plans-foot{text-align:left}
.premium .faq-list{max-width:52rem}
.premium .nl-home{padding-top:0}
.premium .plan ul{align-content:start}
.nl-home .nl{max-width:none;margin:0}
@media(min-width:960px){
  .nl-home .nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);column-gap:var(--s6);align-items:center;padding:var(--s5)}
  .nl-home .nl>.kicker,.nl-home .nl-title,.nl-home .nl-sub{grid-column:1}
  .nl-home .nl-form{grid-column:2;grid-row:1/4}
  .nl-home .nl-msg{grid-column:2}
  .nl-home .nl-sub{margin-bottom:0}
}
.premium .final-inner{max-width:var(--wrap);text-align:left}
.premium .final-inner>p{margin-left:0;margin-right:0}
.premium .final h2{max-width:22ch}
.premium .final .hero-cta{justify-content:flex-start}

/* founder stats: one row of three at every width */
.premium .founder .stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s4);border-top:1px solid var(--line);gap:var(--s2)}
.premium .founder .stat{display:block;border-top:0;padding:var(--s3) 0 0}
.premium .founder .stat span{margin-top:var(--s1)}
@media(max-width:599px){.premium .founder .stat b{font-size:1.5rem;white-space:nowrap}.premium .founder .stat span{font-size:13px}}
/* Oct 19 2026 v4: the homepage calculator shows the example's result and budget only; the card fields live on /debt-payoff-calculator/ */
.calc-section .calc-cards{display:none}
.calc-section .calc-more{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}
@media(max-width:599px){.calc-section .calc-more .btn{font-size:15px;padding-left:10px;padding-right:10px;white-space:nowrap}}