/* ============================================================
   HVAC Monthly — app-specific styles
   Brand tokens/components live in assets/brand.css.
   This file only adds per-view layout (no fake browser chrome).
   ============================================================ */

html,body{background:var(--paper);min-height:100%;}
body{display:flex;flex-direction:column;min-height:100vh;}
#app{flex:1;}

/* ---- Global content-width system (wide-screen friendly) ----
   Every view caps to --maxw and centers, so 1440/1920/2560 screens get
   balanced gutters instead of stretched/empty layouts. Heroes go a touch
   wider (--maxw-hero) but stay centered. */
:root{--maxw:1200px;--maxw-hero:1320px;--maxw-narrow:1000px;}

/* Make the real nav full-bleed but capped + centered */
.nav{max-width:var(--maxw-hero);margin-left:auto;margin-right:auto;width:100%;}
.howstrip{max-width:var(--maxw);margin-left:auto;margin-right:auto;width:100%;}
.brand{text-decoration:none;}

/* Views: simple show/hide router */
.view{animation:fade .25s ease;}
.view[hidden]{display:none;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* Shared wrap used by several views (capped + centered) */
.wrap{max-width:var(--maxw-narrow);margin:0 auto;padding:8px 40px 40px;}
.view .stepper{max-width:var(--maxw-narrow);margin:0 auto;}

h1{font-family:var(--display);}

/* ---------- HOME ---------- */
.v-home{max-width:var(--maxw-hero);margin:0 auto;width:100%;}
.v-home .hero{margin:0 28px 28px;border-radius:var(--radius-lg);overflow:hidden;position:relative;height:560px;box-shadow:var(--shadow);max-width:none;}
.v-home .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.v-home .hero .scrim{position:absolute;inset:0;background:var(--hero-scrim,linear-gradient(90deg,rgba(8,20,19,.78) 0%,rgba(8,20,19,.5) 40%,rgba(8,20,19,.05) 75%));}
.v-home .hero .inner{position:absolute;inset:0;padding:54px 56px;display:flex;flex-direction:column;justify-content:center;}
.v-home .pillrow{display:flex;gap:10px;margin-bottom:22px;}
.v-home .pillrow .pill{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22);backdrop-filter:blur(4px);}
.v-home .pillrow .pill svg{stroke:var(--gold-500);}
.v-home h1{font-weight:800;font-size:55px;line-height:1.02;letter-spacing:-1.6px;color:#fff;max-width:640px;}
.v-home h1 em{font-style:italic;font-weight:800;color:var(--gold-500);}
.v-home .sub{color:rgba(255,255,255,.92);font-size:19px;font-weight:500;margin-top:18px;max-width:520px;line-height:1.45;}
.addrbar{margin-top:30px;display:flex;background:#fff;border-radius:16px;padding:8px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45);max-width:620px;}
.addrbar input{flex:1;border:none;outline:none;font-family:var(--font);font-size:18px;padding:0 18px;color:var(--ink);background:transparent;}
.addrbar input::placeholder{color:var(--ink-3);}
.v-home .under{display:flex;align-items:center;gap:16px;margin-top:16px;color:rgba(255,255,255,.92);font-size:14.5px;font-weight:500;}
.v-home .under .d{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55);}
.howstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 28px 26px;}
.hs{display:flex;gap:14px;padding:22px 26px;align-items:flex-start;}
.hs:not(:last-child){border-right:1px solid var(--line);}
.hs .ic{width:42px;height:42px;border-radius:11px;background:var(--teal-50);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.hs .ic svg{width:22px;height:22px;stroke:var(--teal-700);}
.hs h4{font-size:16px;font-weight:700;margin-bottom:4px;}
.hs p{font-size:14px;color:var(--ink-3);line-height:1.4;}

/* ---------- QUOTE ---------- */
.v-quote .wrap{padding:6px 40px 30px;max-width:1100px;}
.v-quote .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;margin-top:18px;align-items:start;}
.sat{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative;height:430px;}
.sat img{width:100%;height:100%;object-fit:cover;}
.sat .addr{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.95);padding:9px 14px;border-radius:10px;font-weight:600;font-size:14px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:8px;}
.sat .addr svg{width:15px;height:15px;stroke:var(--teal-700);}
.qcard{padding:0;overflow:hidden;}
.qhead{background:var(--teal-50);padding:24px 28px;border-bottom:1px solid var(--teal-100);}
.qhead .rec{font-size:14px;color:var(--teal-700);font-weight:600;margin-bottom:4px;}
.qhead h2{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.6px;}
.qhead .sqft{font-size:13.5px;color:var(--teal-700);font-weight:700;margin-top:6px;}
.qhead .why{font-size:13.5px;color:var(--ink-3);margin-top:6px;}

/* Quote live term/escalator controls (fallback mode) */
.qcontrols[hidden],.qoptions[hidden]{display:none;}
.qcontrols{display:flex;gap:18px;margin:18px 0 4px;flex-wrap:wrap;}
.qcontrols .qc-blk{flex:1;min-width:160px;}
.qcontrols .qc-lab{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px;}
.qcontrols .qc-opts{display:flex;gap:8px;flex-wrap:nowrap;}
.qchip{flex:1 1 0;min-width:0;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:9px 8px;text-align:center;font-weight:700;font-size:14px;color:var(--ink-2);cursor:pointer;transition:.12s;}
.qchip:hover{border-color:var(--teal-600);}
.qchip small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);margin-top:2px;}
.qchip.sel{border-color:var(--teal-700);background:var(--teal-50);color:var(--teal-900);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.qchip.sel small{color:var(--teal-700);}

/* Quote option / tier cards (always sorted cheapest first) */
.qoptions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0 6px;}
.qopt{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 16px;cursor:pointer;transition:.12s;}
.qopt:hover{border-color:var(--teal-600);}
.qopt.sel{border-color:var(--teal-700);background:var(--teal-50);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.qopt .qo-top{display:flex;align-items:center;justify-content:space-between;}
.qopt .qo-tier{font-size:12px;font-weight:700;color:var(--teal-700);text-transform:uppercase;letter-spacing:.3px;}
.qopt .qo-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;}
.qopt.sel .qo-radio{border-color:var(--teal-700);background:var(--teal-700);box-shadow:inset 0 0 0 3px #fff;}
.qopt .qo-name{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:8px;line-height:1.3;}
.qopt .qo-price{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.6px;margin-top:6px;}
.qopt .qo-price small{font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:0;}
.qbody{padding:26px 28px 28px;}
.price{display:flex;align-items:baseline;gap:8px;}
.price .big{font-family:var(--display);font-size:52px;font-weight:800;letter-spacing:-1.5px;line-height:1;}
.price .per{font-size:20px;color:var(--ink-2);font-weight:600;}
.price-sub{color:var(--ink-3);font-size:15px;margin-top:6px;font-weight:500;}
.other-opts{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:999px;background:var(--teal-50);color:var(--teal-700);font-size:13px;font-weight:700;}
.incl{margin:20px 0 24px;display:flex;flex-direction:column;gap:11px;}
.incl .it{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:500;}
.incl .it .ck{width:22px;height:22px;border-radius:50%;background:var(--teal-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.incl .it .ck svg{width:13px;height:13px;}
.qbody .btn{width:100%;margin-bottom:12px;}
.adjust{display:block;text-align:center;color:var(--teal-700);font-weight:600;text-decoration:underline;font-size:15.5px;cursor:pointer;}
.back-link{display:inline-block;color:var(--teal-700);font-weight:600;text-decoration:none;font-size:15px;cursor:pointer;margin-bottom:14px;}
.back-link:hover{text-decoration:underline;}
.tieropts{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:10px;}
.tieropt{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;cursor:pointer;transition:.12s;}
.tieropt:hover{border-color:var(--teal-600);}
.tieropt.sel{border-color:var(--teal-700);background:var(--teal-50);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.tieropt .to-top{display:flex;align-items:center;justify-content:space-between;}
.tieropt .to-tier{font-size:12px;font-weight:700;color:var(--teal-700);text-transform:uppercase;letter-spacing:.3px;}
.tieropt .to-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.tieropt .to-radio svg{width:11px;height:11px;}
.tieropt.sel .to-radio{border-color:var(--teal-700);background:var(--teal-700);}
.tieropt .to-price{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.6px;margin-top:8px;}
.tieropt .to-price small{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0;}
.assigned-note,.qbody .assigned{display:flex;gap:13px;align-items:center;margin-top:18px;padding:14px 16px;background:var(--gold-100);border:1px solid #f3e2a8;border-radius:14px;}
.qbody .assigned svg{width:22px;height:22px;stroke:#7a5d00;flex:0 0 auto;}
.qbody .assigned p{font-size:13.5px;color:#5e4a08;line-height:1.4;font-weight:500;}
.qbody .assigned b{color:#3d3000;}

/* ---------- CUSTOMIZE ---------- */
.v-customize .wrap{max-width:920px;}
.v-customize h1{font-size:40px;font-weight:800;letter-spacing:-1px;margin-top:14px;}
.lead{color:var(--ink-3);font-size:16.5px;margin-top:8px;font-weight:500;max-width:640px;line-height:1.45;}
.sec{margin-top:30px;}
.sec .ttl{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin-bottom:14px;}
.recnote{font-size:13px;font-weight:600;color:var(--teal-700);background:var(--teal-50);border:1px solid var(--teal-100);padding:4px 10px;border-radius:999px;}
.tons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.ton{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:18px 0;text-align:center;font-weight:700;font-size:18px;color:var(--ink-2);position:relative;cursor:pointer;transition:.12s;}
.ton:hover{border-color:var(--teal-600);}
.ton small{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:3px;}
.ton.sel{border-color:var(--teal-700);background:var(--teal-50);color:var(--teal-900);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.ton .rec{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--teal-700);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.3px;}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.tier{border:1.5px solid var(--line);background:#fff;border-radius:18px;padding:22px 22px;position:relative;cursor:pointer;transition:.12s;}
.tier:hover{border-color:var(--teal-600);}
.tier.disabled{opacity:.45;cursor:not-allowed;}
.tier.disabled:hover{border-color:var(--line);}
.tier.sel{border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.tier .radio{position:absolute;top:20px;right:20px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;}
.tier .radio svg{width:13px;height:13px;display:none;}
.tier.sel .radio{border-color:var(--teal-700);background:var(--teal-700);}
.tier.sel .radio svg{display:block;}
.tier h3{font-size:21px;font-weight:800;font-family:var(--display);}
.tier .ds{color:var(--ink-3);font-size:14.5px;line-height:1.5;margin-top:8px;}
.tier .pr{margin-top:14px;font-weight:700;color:var(--teal-700);font-size:15px;}
.fallback-note{margin-top:14px;font-size:13.5px;color:#7a5d00;background:var(--gold-100);border:1px solid #f3e2a8;border-radius:12px;padding:11px 14px;font-weight:500;}
.proline{display:flex;gap:10px;align-items:center;margin-top:22px;background:#fff;border:1px dashed var(--teal-100);border-radius:12px;padding:13px 16px;color:var(--ink-2);font-size:14px;font-weight:500;}
.proline svg{width:20px;height:20px;stroke:var(--teal-700);flex:0 0 auto;}
.foot{display:flex;align-items:center;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.foot .pp{display:flex;align-items:baseline;gap:8px;}
.foot .pp .big{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:-1.2px;}
.foot .pp .per{font-size:18px;color:var(--ink-2);font-weight:600;}
.limit{font-size:13px;color:var(--ink-3);margin-top:4px;}

/* ---------- TERMS ---------- */
.v-terms .wrap{max-width:980px;}
.v-terms h1{font-size:40px;font-weight:800;letter-spacing:-1px;margin-top:14px;}
.v-terms .grid{display:grid;grid-template-columns:1.25fr .9fr;gap:30px;margin-top:26px;align-items:start;}
.controls .blk{margin-bottom:30px;}
.blk .ttl{font-weight:700;font-size:17px;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.blk .hint{font-size:13.5px;color:var(--ink-3);margin-bottom:16px;line-height:1.4;}
.years{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.yr{border:1.5px solid var(--line);background:#fff;border-radius:13px;padding:16px 0;text-align:center;font-weight:800;font-size:20px;color:var(--ink-2);position:relative;font-family:var(--display);cursor:pointer;transition:.12s;}
.yr:hover{border-color:var(--teal-600);}
.yr small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3);margin-top:3px;font-family:var(--font);}
.yr.sel{border-color:var(--teal-700);background:var(--teal-50);color:var(--teal-900);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.yr .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--gold-500);color:var(--teal-900);font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.esc{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;}
.esc .opts{display:flex;gap:10px;}
.esc .opt{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:14px 0;text-align:center;font-weight:700;font-size:17px;color:var(--ink-2);position:relative;cursor:pointer;transition:.12s;}
.esc .opt:hover{border-color:var(--teal-600);}
.esc .opt small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);margin-top:2px;}
.esc .opt.sel{border-color:var(--teal-700);background:var(--teal-50);color:var(--teal-900);box-shadow:0 0 0 3px rgba(15,92,90,.12);}
.esc .opt .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--teal-700);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.escexplain{font-size:12.5px;color:var(--ink-3);margin-top:13px;line-height:1.45;display:flex;gap:8px;}
.escexplain svg{width:15px;height:15px;stroke:var(--teal-700);flex:0 0 auto;margin-top:1px;}
.sum{position:sticky;top:10px;}
.sum .hd{background:var(--teal-900);color:#fff;border-radius:20px 20px 0 0;padding:22px 24px;}
.sum .hd .lab{font-size:13px;opacity:.75;font-weight:600;}
.sum .hd .pp{display:flex;align-items:baseline;gap:7px;margin-top:4px;}
.sum .hd .big{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:-1.4px;line-height:1;}
.sum .hd .per{font-size:18px;font-weight:600;opacity:.85;}
.sum .hd .start{font-size:12.5px;opacity:.7;margin-top:6px;}
.sum .bd{background:#fff;border:1px solid var(--line);border-top:none;border-radius:0 0 20px 20px;padding:20px 24px;}
.sum .row{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--line);}
.sum .row:last-of-type{border-bottom:none;}
.sum .row .k{color:var(--ink-3);font-weight:500;}
.sum .row .v{font-weight:700;}
.tot{display:flex;justify-content:space-between;margin-top:12px;padding-top:14px;border-top:2px solid var(--line);font-size:15px;}
.tot .k{font-weight:600;}.tot .v{font-weight:800;font-family:var(--display);}
.sum .btn{width:100%;margin-top:18px;}
.sum .note{font-size:12px;color:var(--ink-3);text-align:center;margin-top:10px;}

/* ---------- INFO ---------- */
.v-info{padding:0 28px 28px;max-width:1200px;margin:0 auto;}
.v-info .split{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);}
.v-info .left{padding:46px 52px;display:flex;flex-direction:column;}
.v-info .right{position:relative;overflow:hidden;}
.v-info .right img{width:100%;height:100%;object-fit:cover;}
.v-info .right .scrim{position:absolute;inset:0;background:var(--info-scrim,linear-gradient(180deg,rgba(8,20,19,.1),rgba(8,20,19,.62)));}
.v-info .right .quote{position:absolute;left:34px;right:34px;bottom:34px;color:#fff;}
.v-info .right .quote .stars{color:var(--gold-500);font-size:17px;letter-spacing:2px;}
.v-info .right .quote p{font-size:18px;font-weight:600;line-height:1.45;margin-top:10px;}
.v-info .right .quote .by{font-size:13.5px;opacity:.85;margin-top:8px;font-weight:500;}
.v-info .left h1{font-size:34px;font-weight:800;letter-spacing:-.9px;margin-top:20px;}
.v-info .left .lead{color:var(--ink-3);font-size:15.5px;margin-top:10px;font-weight:500;line-height:1.5;max-width:400px;}
.form{margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:420px;}
.field label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink-2);}
.field input{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:15px 16px;font-family:var(--font);font-size:16px;color:var(--ink);outline:none;}
.field input:focus{border-color:var(--teal-700);}
.field input::placeholder{color:var(--ink-3);}
.form .btn{width:100%;margin-top:4px;}
.magic{display:flex;gap:10px;align-items:center;margin-top:6px;color:var(--ink-3);font-size:13px;font-weight:500;line-height:1.4;}
.magic svg{width:17px;height:17px;stroke:var(--teal-700);flex:0 0 auto;}
.mini-step{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:600;}
.mini-step .b{width:26px;height:26px;border-radius:50%;background:var(--teal-50);color:var(--teal-700);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
.assur{margin-top:auto;padding-top:24px;display:flex;gap:18px;color:var(--ink-3);font-size:13px;font-weight:500;}
.assur .a{display:flex;align-items:center;gap:7px;}
.assur svg{width:15px;height:15px;stroke:var(--teal-700);}

/* ---------- INSTALL ---------- */
.v-install .wrap{max-width:1000px;}
.v-install h1{font-size:40px;font-weight:800;letter-spacing:-1px;margin-top:14px;}
.confirm-banner{display:flex;gap:14px;align-items:center;margin-top:22px;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:16px;padding:16px 20px;}
.confirm-banner .cb-ic{width:34px;height:34px;border-radius:50%;background:var(--teal-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.confirm-banner .cb-ic svg{width:18px;height:18px;}
.confirm-banner .cb-tx .t{font-weight:700;font-size:16px;color:var(--teal-900);}
.confirm-banner .cb-tx .s{font-size:13.5px;color:var(--ink-3);margin-top:2px;font-weight:500;}
.v-install .assigned{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow-sm);}
.v-install .assigned .ph{width:96px;height:96px;border-radius:16px;overflow:hidden;}
.v-install .assigned .ph img{width:100%;height:100%;object-fit:cover;}
.v-install .assigned .who .k{font-size:12.5px;color:var(--teal-700);font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.v-install .assigned .who h3{font-family:var(--display);font-size:23px;font-weight:800;margin-top:3px;}
.v-install .assigned .who .meta{display:flex;gap:14px;margin-top:7px;color:var(--ink-3);font-size:14px;font-weight:500;align-items:center;}
.v-install .assigned .who .meta .star{color:var(--gold-500);font-weight:700;}
.v-install .assigned .who .meta .lic{display:inline-flex;align-items:center;gap:5px;}
.v-install .assigned .who .meta svg{width:14px;height:14px;stroke:var(--teal-700);}
.v-install .assigned .stat{text-align:right;}
.v-install .assigned .stat .pill{background:var(--teal-50);color:var(--teal-700);border:1px solid var(--teal-100);}
.timeline{margin-top:30px;}
.timeline h2{font-size:19px;font-weight:800;font-family:var(--display);margin-bottom:4px;}
.timeline .sub{color:var(--ink-3);font-size:14.5px;margin-bottom:20px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.tl{position:relative;padding:0 16px;}
.tl .dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);margin:0 auto 14px;position:relative;z-index:2;}
.tl .dot svg{width:19px;height:19px;stroke:var(--ink-3);}
.tl.done .dot{background:var(--teal-700);border-color:var(--teal-700);}
.tl.done .dot svg{stroke:#fff;}
.tl.now .dot{background:var(--gold-500);border-color:var(--gold-500);}
.tl.now .dot svg{stroke:var(--teal-900);}
.tl .bar{position:absolute;top:19px;left:50%;width:100%;height:2px;background:var(--line);z-index:1;}
.tl.done .bar{background:var(--teal-700);}
.tl:last-child .bar{display:none;}
.tl h4{text-align:center;font-size:15.5px;font-weight:700;}
.tl p{text-align:center;font-size:13px;color:var(--ink-3);margin-top:5px;line-height:1.45;}
.tl .when{display:block;text-align:center;font-size:11.5px;font-weight:700;color:var(--teal-700);margin-top:8px;text-transform:uppercase;letter-spacing:.3px;}
.cta-row{display:flex;align-items:center;justify-content:space-between;margin-top:30px;padding:20px 24px;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:18px;}
.cta-row .t{font-size:15px;font-weight:600;color:var(--teal-900);}
.cta-row .t span{display:block;font-weight:500;color:var(--ink-3);font-size:13.5px;margin-top:3px;}

/* ---------- EDUCATION ---------- */
.v-education .wrap{max-width:1000px;text-align:center;}
.v-education h1{font-size:46px;font-weight:800;letter-spacing:-1.4px;margin-top:18px;}
.v-education .lead{margin:12px auto 0;max-width:660px;font-size:17px;}
.v-education .sec-h{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:54px 0 4px;}
.v-education .fineprint{margin:40px auto 0;max-width:760px;font-size:12.5px;line-height:1.6;color:var(--ink-3);}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;}
.bf{display:flex;flex-direction:column;align-items:center;gap:12px;}
.bf .ic{width:60px;height:60px;border-radius:16px;background:var(--teal-50);border:1px solid var(--teal-100);display:flex;align-items:center;justify-content:center;}
.bf .ic svg{width:28px;height:28px;stroke:var(--teal-700);}
.bf .t{font-weight:700;font-size:15px;}
.bf .d{font-size:12.5px;color:var(--ink-3);line-height:1.4;}
.removed{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px;text-align:left;}
.rc{border-radius:20px;padding:26px 28px;}
.rc.old{background:#fff;border:1px solid var(--line);}
.rc.new{background:var(--teal-900);color:#fff;position:relative;overflow:hidden;}
.rc .lbl{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-bottom:16px;}
.rc.old .lbl{color:var(--ink-3);}
.rc.new .lbl{color:var(--gold-500);}
.rc ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.rc li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:500;line-height:1.4;}
.rc li svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;}
.rc.old li{color:var(--ink-2);}
.rc.old li svg{stroke:#c2473a;}
.rc.new li svg{stroke:var(--gold-500);}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.cc{border-radius:20px;padding:26px;text-align:center;}
.cc.out{background:#fff;border:1px solid var(--line);}
.cc.mo{background:var(--teal-50);border:1.5px solid var(--teal-700);}
.cc .h{font-size:16px;font-weight:700;color:var(--ink-2);}
.cc .big{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-1.4px;margin-top:6px;}
.cc.out .big{color:var(--ink);}.cc.mo .big{color:var(--teal-700);}
.cc .sub{font-size:13.5px;color:var(--ink-3);margin-top:4px;}
.edu-cta{margin-top:34px;}

/* ---------- PROGRESS ---------- */
.v-progress .wrap{max-width:760px;padding-top:30px;}
.hello{font-size:14px;color:var(--teal-700);font-weight:700;letter-spacing:.3px;}
.v-progress h1{font-size:42px;font-weight:800;letter-spacing:-1.2px;margin-top:6px;}
.savecard{display:flex;align-items:center;justify-content:space-between;margin-top:22px;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:16px;padding:18px 22px;}
.savecard .l .k{font-size:13px;color:var(--ink-3);font-weight:600;}
.savecard .l .v{font-family:var(--display);font-size:24px;font-weight:800;margin-top:2px;}
.savecard .l .s{font-size:13px;color:var(--ink-3);margin-top:2px;}
.checklist{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 26px;box-shadow:var(--shadow-sm);}
.ci{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);}
.ci:last-child{border-bottom:none;}
.ci .mk{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:2px solid var(--line);background:#fff;}
.ci.done .mk{background:var(--teal-700);border-color:var(--teal-700);}
.ci.done .mk svg{width:15px;height:15px;}
.ci.now .mk{border-color:var(--gold-500);background:var(--gold-100);}
.ci.now .mk .dotin{width:9px;height:9px;border-radius:50%;background:var(--gold-500);}
.ci .tx{flex:1;}
.ci .tx .t{font-size:16.5px;font-weight:700;}
.ci.todo .tx .t{color:var(--ink-3);font-weight:600;}
.ci .tx .s{font-size:13px;color:var(--ink-3);margin-top:2px;}
.ci .badge{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;}
.ci.done .badge{color:var(--teal-700);background:var(--teal-50);}
.ci.now .badge{color:#7a5d00;background:var(--gold-100);}
.btn-row{margin-top:26px;display:flex;gap:14px;align-items:center;}
.btn-row .btn-primary{flex:1;}
.subnote{text-align:center;color:var(--ink-3);font-size:13.5px;margin-top:16px;}

/* ---------- footer trust ---------- */
footer.trust{margin-top:auto;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .v-quote .grid,.v-terms .grid,.v-info .split{grid-template-columns:1fr;}
  .tons{grid-template-columns:repeat(2,1fr);}
  .benefits{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr 1fr;gap:24px 0;}
  .removed,.compare{grid-template-columns:1fr;}
  .v-home h1{font-size:38px;}
  .v-home .hero{height:auto;min-height:520px;}
  .nav{padding:18px 22px;}
  .navlinks{gap:16px;font-size:14px;}
}

/* Phones: collapse the nav to brand + quote + CTA so links don't wrap/overlap. */
@media (max-width:720px){
  .nav{padding:14px 16px;}
  .navlinks{gap:12px;}
  .navlinks a:not(.cta):not([data-nav-progress]){display:none;}
  .navlinks a{font-size:14px;}
  .brand .wm{font-size:18px;}
  .brand .mk{width:34px;height:34px;}
  html[data-layout="seedream"] .nav{padding:14px 16px;}
  html[data-layout="seedream"] .navlinks a.cta{padding:9px 14px;}
}
@media (max-width:430px){
  .navlinks a[data-nav-progress]{display:none;}
}

/* ============================================================
   SECURE (Palmetto closing) view
   ============================================================ */
.v-secure .agree-grid{
  margin:22px 0 8px; border:1px solid #E4EAE9; border-radius:16px;
  background:#fff; overflow:hidden;
}
.v-secure .agree-grid .row{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 18px; border-bottom:1px solid #EEF2F1; font-size:15px;
}
.v-secure .agree-grid .row:last-child{ border-bottom:0; }
.v-secure .agree-grid .row .k{ color:#6B7A79; }
.v-secure .agree-grid .row .v{ color:#0C1B1A; font-weight:600; text-align:right; }

.v-secure .secure-steps{ margin:26px 0 10px; }
.v-secure .secure-steps h2{ font-size:20px; margin-bottom:12px; color:#0C1B1A; }
.v-secure .slist{ counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.v-secure .slist li{
  position:relative; padding:14px 16px 14px 52px; background:#fff;
  border:1px solid #E4EAE9; border-radius:14px; font-size:15px; color:#384645; line-height:1.5;
}
.v-secure .slist li b{ color:#0C1B1A; }
.v-secure .slist li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:14px; top:13px; width:26px; height:26px; border-radius:50%;
  background:#0F5C5A; color:#fff; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

.v-secure .consent{ margin:22px 0; display:grid; gap:12px; }
.v-secure .ck-row{
  display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#384645;
  background:#FBF8F2; border:1px solid #ECE6D8; border-radius:12px; padding:13px 15px; cursor:pointer;
}
.v-secure .ck-row input{ margin-top:2px; width:18px; height:18px; accent-color:#0F5C5A; flex:0 0 auto; }

.v-secure #secureBtn:disabled{ opacity:.5; cursor:not-allowed; }

.v-secure .secure-done{
  margin-top:24px; text-align:center; background:#fff;
  border:1px solid #CFE3E0; border-radius:18px; padding:30px 24px;
}
.v-secure .secure-done .sd-ic{
  width:54px; height:54px; border-radius:50%; background:#E7F2F0;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.v-secure .secure-done .sd-ic svg{ width:30px; height:30px; }
.v-secure .secure-done h2{ font-size:22px; margin-bottom:8px; color:#0C1B1A; }
.v-secure .secure-done p{ color:#5A6968; max-width:520px; margin:0 auto 16px; line-height:1.55; }

/* ===================================================================
   SEEDREAM LAYOUT  (html[data-layout="seedream"])
   A distinct homepage structure driven by the theme API. The classic
   layout ignores all of these rules, so app.css stays identical across
   sites — only the data-layout attribute (from /api/theme) differs.
   =================================================================== */

/* Terracotta top nav, pill nav links */
html[data-layout="seedream"] .nav{background:var(--teal-700);padding:16px 40px;border-radius:0;}
/* --- Unified corner system: one radius scale for every panel/control ---
   --r-card  = panels (address bar, how-it-works, quote cards)
   --r-pill  = fully-round (pills, CTA)
   Top nav + hero are full-bleed edges (intentionally square). Everything
   that sits ON the warm canvas shares --r-card so nothing looks mismatched. */
html[data-layout="seedream"]{--r-card:18px;--r-pill:999px;}
html[data-layout="seedream"] .nav .brand .wm,
html[data-layout="seedream"] .nav .brand .wm span{color:#fff;}
html[data-layout="seedream"] .nav .brand .mk{background:rgba(255,255,255,.16);}
html[data-layout="seedream"] .navlinks a{color:rgba(255,255,255,.9);}
html[data-layout="seedream"] .navlinks a.cta{background:var(--gold-500);color:var(--teal-900);padding:10px 18px;border-radius:999px;font-weight:700;}

/* HERO: split — copy on warm gradient panel (left) + house illustration (right) */
html[data-layout="seedream"] .v-home .hero{
  height:auto;min-height:0;border-radius:0;margin:0;box-shadow:none;
  background:var(--hero-bg-url,linear-gradient(120deg,#7A2E12 0%,#D9531E 60%,#E2682F 100%));
  background-size:cover;background-position:center;
}
html[data-layout="seedream"] .v-home .hero > img{display:none;}      /* no full-bleed photo */
html[data-layout="seedream"] .v-home .hero .scrim{display:none;}
/* Text flows normally in a left block; the illustration is absolutely
   positioned on the right so its height can never push the copy around.
   .inner reserves right padding to leave room for the illustration. */
/* Text in a left block; transparent house illustration sits directly on the
   warm canvas (no card) on the right, vertically centered with the copy.
   Illustration is large + bleeds slightly past the content edge so the right
   side reads as full, not as a floating box in empty space. */
html[data-layout="seedream"] .v-home .hero .inner{
  position:relative;inset:auto;display:block;
  max-width:var(--maxw-hero);margin:0 auto;
  padding:46px 40px 50px;padding-right:540px;
  min-height:0;
}
html[data-layout="seedream"] .v-home .hero .inner > *{max-width:580px;}
html[data-layout="seedream"] .v-home .hero .inner::after{
  content:"";position:absolute;top:50%;right:24px;transform:translateY(-50%);
  width:500px;height:500px;
  background:var(--illustration-url) center/contain no-repeat;
  filter:drop-shadow(0 24px 40px rgba(60,20,8,.28));
}
html[data-layout="seedream"] .v-home .pillrow{margin-bottom:16px;}
html[data-layout="seedream"] .v-home h1{font-size:48px;line-height:1.03;letter-spacing:-1.6px;max-width:580px;margin-bottom:0;}
html[data-layout="seedream"] .v-home .sub{margin-top:14px;max-width:520px;}
html[data-layout="seedream"] .v-home .under{margin-top:18px;}
html[data-layout="seedream"] .v-home h1 em{color:var(--gold-500);font-style:normal;}
html[data-layout="seedream"] .v-home .pillrow .pill{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.28);}

/* Address bar: gold panel, pill input + teal pill button */
html[data-layout="seedream"] .addrbar{
  background:var(--gold-500);padding:12px;border-radius:var(--r-card);max-width:600px;
  box-shadow:0 18px 40px -16px rgba(122,46,18,.5);gap:10px;
}
html[data-layout="seedream"] .addrbar input{
  background:#fff;border-radius:calc(var(--r-card) - 6px);padding:14px 18px;font-size:17px;
}
html[data-layout="seedream"] .addrbar .btn-gold{
  background:var(--cta-700);color:#fff;border-radius:calc(var(--r-card) - 6px);box-shadow:none;
}
html[data-layout="seedream"] .addrbar .btn-gold:hover{background:var(--cta-800);}

/* How-it-works: one dark forest-green panel, 3 columns, light text.
   Pulled up to overlap the hero base so there's no dead cream gap. */
html[data-layout="seedream"] .howstrip{
  background:var(--forest-600);border-radius:var(--r-card);margin:-34px 28px 40px;position:relative;z-index:2;
  max-width:calc(var(--maxw) - 0px);box-shadow:0 30px 60px -28px rgba(20,40,30,.55);overflow:hidden;
}
html[data-layout="seedream"] .hs{padding:28px 26px;}
html[data-layout="seedream"] .hs:not(:last-child){border-right:1px solid rgba(255,255,255,.12);}
html[data-layout="seedream"] .hs .ic{background:rgba(255,255,255,.12);}
html[data-layout="seedream"] .hs .ic svg{stroke:var(--gold-500);}
html[data-layout="seedream"] .hs h4{color:#fff;}
html[data-layout="seedream"] .hs p{color:rgba(255,255,255,.82);}

/* Responsive: stack hero on narrow screens */
@media (max-width:920px){
  html[data-layout="seedream"] .v-home .hero .inner{
    padding:34px 22px 40px;min-height:0;
  }
  html[data-layout="seedream"] .v-home .hero .inner > *{max-width:none;}
  /* Illustration flows below the text instead of floating right. */
  html[data-layout="seedream"] .v-home .hero .inner::after{
    display:block;position:static;transform:none;margin:18px auto 0;
    width:min(340px,74vw);height:min(340px,74vw);
    filter:drop-shadow(0 16px 28px rgba(60,20,8,.26));
  }
  html[data-layout="seedream"] .v-home h1{font-size:34px;}
  html[data-layout="seedream"] .v-home .sub{font-size:17px;}
  html[data-layout="seedream"] .addrbar{max-width:none;flex-direction:column;}
  html[data-layout="seedream"] .addrbar .btn-gold{padding:14px 18px;}
  html[data-layout="seedream"] .howstrip{grid-template-columns:1fr;margin:18px 16px 24px;}
  html[data-layout="seedream"] .hs:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.12);}
}