/* ===========================================================================
   less2own — the three CTA views: /build, /builders, /plans
   Added 2026-08-14. Tokens are the host page's own (:root in index.html);
   nothing here redefines them, so a restyle of the site restyles these too.
   =========================================================================== */

#l2oApp{position:fixed;inset:0;z-index:1400;background:var(--bg);
  color:var(--txt);font-family:var(--b);overflow-y:auto;overflow-x:hidden;
  display:none;opacity:0;transition:opacity .28s var(--ease)}
#l2oApp.on{display:block}
#l2oApp.vis{opacity:1}
body.l2o-open{overflow:hidden}

/* ---- chrome ------------------------------------------------------------ */
.l2o-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;
  gap:16px;padding:14px 22px;background:rgba(10,14,22,.92);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.l2o-back{display:inline-flex;align-items:center;gap:8px;background:none;
  border:1px solid var(--line2);color:var(--txt);font:600 13px/1 var(--b);
  padding:10px 14px;border-radius:2px;cursor:pointer;transition:.2s var(--ease)}
.l2o-back:hover{background:var(--panel);border-color:var(--acc)}
.l2o-back svg{width:14px;height:14px}
.l2o-crumb{font:500 11px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc)}
.l2o-top h2{font:700 17px/1.2 var(--h);margin-left:auto;color:var(--txt)}

.l2o-wrap{max-width:1320px;margin:0 auto;padding:30px 22px 90px}
.l2o-lede{max-width:660px;margin-bottom:30px}
.l2o-lede h1{font:800 clamp(26px,4.2vw,40px)/1.08 var(--h);letter-spacing:-.02em;
  margin-bottom:12px}
.l2o-lede p{color:var(--muted);font-size:15.5px;line-height:1.6}

/* ---- the configurator -------------------------------------------------- */
.spec-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:26px;
  align-items:start}
@media(max-width:940px){.spec-grid{grid-template-columns:1fr}}

.spec-panel{background:var(--card);border:1px solid var(--line);
  clip-path:var(--clip);padding:22px}
.spec-panel + .spec-panel{margin-top:18px}
.spec-panel h3{font:700 12px/1 var(--m);letter-spacing:.15em;
  text-transform:uppercase;color:var(--acc);margin-bottom:18px}

.f-row{margin-bottom:20px}
.f-row:last-child{margin-bottom:0}
.f-lab{display:flex;justify-content:space-between;align-items:baseline;
  font:600 13px/1 var(--b);margin-bottom:9px}
.f-lab b{font:700 13px/1 var(--m);color:var(--acc2)}
.f-hint{display:block;font:400 11.5px/1.4 var(--b);color:var(--dim);margin-top:6px}

input[type=range].f-slide{-webkit-appearance:none;appearance:none;width:100%;
  height:3px;background:var(--line2);border-radius:2px;outline:none}
input[type=range].f-slide::-webkit-slider-thumb{-webkit-appearance:none;
  width:17px;height:17px;border-radius:50%;background:var(--acc);cursor:pointer;
  border:3px solid var(--bg);box-shadow:0 0 0 1px var(--acc)}
input[type=range].f-slide::-moz-range-thumb{width:17px;height:17px;
  border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid var(--bg)}

.f-seg{display:flex;flex-wrap:wrap;gap:6px}
.f-seg button{flex:1 1 auto;min-width:52px;background:var(--panel);
  border:1px solid var(--line);color:var(--muted);font:600 12.5px/1 var(--b);
  padding:10px 8px;cursor:pointer;border-radius:2px;transition:.16s var(--ease)}
.f-seg button:hover{border-color:var(--line2);color:var(--txt)}
.f-seg button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);
  color:var(--acc-ink)}

/* ---- the plan drawing --------------------------------------------------- */
.plan-stage{background:var(--bg2);border:1px solid var(--line);
  clip-path:var(--clip);padding:18px;position:relative}
.plan-stage svg{width:100%;height:auto;display:block}
.plan-cap{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.plan-cap div{font:500 11.5px/1.3 var(--m);color:var(--dim)}
.plan-cap b{display:block;font:700 15px/1.2 var(--h);color:var(--txt);margin-top:3px}

/* ---- the money ---------------------------------------------------------- */
.cost-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:520px){.cost-two{grid-template-columns:1fr}}
.cost-card{border:1px solid var(--line);padding:16px;background:var(--panel)}
.cost-card.win{border-color:var(--line2);background:rgba(197,151,62,.06)}
.cost-card .k{font:600 10.5px/1 var(--m);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.cost-card .v{font:800 25px/1.1 var(--h);margin:8px 0 4px}
.cost-card.win .v{color:var(--acc2)}
.cost-card .s{font:400 11.5px/1.45 var(--b);color:var(--muted)}
.equity{border:1px solid var(--ok);background:rgba(16,185,129,.07);padding:15px;
  font:500 13.5px/1.55 var(--b)}
.equity b{color:var(--ok);font:800 19px/1 var(--h)}
.cost-note{font:400 11px/1.5 var(--b);color:var(--dim);margin-top:14px}

.bd-list{list-style:none}
.bd-list li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.bd-list li:last-child{border-bottom:0}
.bd-list span{color:var(--muted)}
.bd-list b{font:600 13.5px/1 var(--m);white-space:nowrap}

/* ---- forms -------------------------------------------------------------- */
.steps{display:flex;gap:6px;margin-bottom:26px}
.steps i{flex:1;height:3px;background:var(--line);border-radius:2px;
  transition:.3s var(--ease)}
.steps i.done{background:var(--acc)}
.step{display:none}
.step.on{display:block;animation:l2oIn .34s var(--ease)}
@keyframes l2oIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step h3{font:700 21px/1.25 var(--h);margin-bottom:6px;color:var(--txt)}
.step > p{color:var(--muted);font-size:14px;margin-bottom:22px}

.fld{margin-bottom:18px}
.fld label{display:block;font:600 12.5px/1 var(--b);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg2);
  border:1px solid var(--line);color:var(--txt);font:400 14px/1.4 var(--b);
  padding:12px 13px;border-radius:2px;outline:none;transition:.16s var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--acc)}
.fld input[aria-invalid=true]{border-color:#e06060}
.fld .err{display:block;font:500 11.5px/1.3 var(--b);color:#e88;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.two{grid-template-columns:1fr}}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font:600 12.5px/1 var(--b);padding:10px 14px;cursor:pointer;
  border-radius:2px;transition:.16s var(--ease)}
.chips button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);
  color:var(--acc-ink)}

.nav{display:flex;gap:12px;margin-top:28px}
.nav .btn{flex:0 0 auto}
.consent{font:400 11.5px/1.55 var(--b);color:var(--dim);margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.consent a{color:var(--muted)}

.review{border:1px solid var(--line2);background:var(--panel);padding:18px;
  margin-bottom:20px}
.review dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px}
.review dt{color:var(--dim);font:500 11.5px/1.4 var(--m);text-transform:uppercase;
  letter-spacing:.08em}
.review dd{color:var(--txt);font-weight:600}

.sent{text-align:center;padding:40px 20px}
.sent .tick{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;
  border:2px solid var(--ok);display:grid;place-items:center;color:var(--ok);
  font-size:26px}
.sent h3{font:800 24px/1.2 var(--h);margin-bottom:10px}
.sent p{color:var(--muted);max-width:420px;margin:0 auto 22px;line-height:1.6}

/* ---- the plan gallery --------------------------------------------------- */
.gal-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.gcard{background:var(--card);border:1px solid var(--line);clip-path:var(--clip);
  overflow:hidden;cursor:pointer;transition:.22s var(--ease)}
.gcard:hover{border-color:var(--line2);transform:translateY(-3px)}
.gcard .draw{background:var(--bg2);padding:14px;border-bottom:1px solid var(--line)}
.gcard .draw svg{width:100%;height:auto;display:block}
.gcard .meta{padding:15px 16px}
.gcard .meta h4{font:700 16px/1.2 var(--h);margin-bottom:5px}
.gcard .meta .sub{font:500 11px/1 var(--m);letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.gcard .meta .stats{display:flex;gap:14px;font:500 12px/1 var(--b);color:var(--muted)}
.gcard .meta .stats b{color:var(--txt);font-weight:700}

.gempty{border:1px dashed var(--line2);padding:26px;text-align:center;
  color:var(--muted);font-size:14px;line-height:1.6}
.gempty b{display:block;color:var(--txt);font:700 16px/1.3 var(--h);margin-bottom:8px}

/* ---- the plan lightbox -------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:1500;background:rgba(6,9,15,.94);
  display:none;place-items:center;padding:24px;overflow-y:auto}
.lb.on{display:grid}
.lb-in{background:var(--card);border:1px solid var(--line2);max-width:900px;
  width:100%;padding:26px}
.lb-in .draw{background:var(--bg2);padding:20px;margin-bottom:20px}
.lb-in .draw svg{width:100%;height:auto;display:block}
.lb-x{position:absolute;top:20px;right:22px;background:none;border:0;
  color:var(--muted);font-size:30px;line-height:1;cursor:pointer}