/* ClearLane public site: Manrope, ink, one blue accent, soft glass over colour fields. */
@font-face{font-family:Manrope;src:url('/fonts/manrope.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}
:root{
  color-scheme:light;
  --font:Manrope,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --bg:#eef0f4; --ink:#171a20; --body:#393c41; --muted:#5c5e62; --faint:#8a8d93;
  --blue:#3e6ae1; --blue-hover:#3457b1; --blue-tint:rgba(62,106,225,.12); --on-blue:#fff;
  --green:#1e8e3e; --green-tint:rgba(30,142,62,.12); --orange:#b85a00; --orange-tint:rgba(255,149,0,.16); --red:#d93025; --red-tint:rgba(217,48,37,.1);
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.9); --thumb:#fff; --glass-line:rgba(255,255,255,.8);
  --fill:rgba(118,118,128,.10); --fill-2:rgba(118,118,128,.17); --hair:rgba(23,26,32,.09); --hair-2:rgba(23,26,32,.16);
  --shadow:0 18px 40px -22px rgba(23,26,32,.25),0 2px 6px rgba(23,26,32,.04);
  --hi:inset 0 1px 0 rgba(255,255,255,.9);
  --blur:blur(24px) saturate(170%);
  --b1:#86a2f7; --b2:#b9c6fd; --b3:#8fdbeb; --b4:#d7c3fb;
  --r-xl:24px; --r-lg:16px; --r-md:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0a0b0e; --ink:#f2f3f5; --body:#c9ccd1; --muted:#9aa0a8; --faint:#6f747c;
  --blue:#7193f2; --blue-hover:#8aa6f5; --blue-tint:rgba(113,147,242,.18); --on-blue:#0a0f1f;
  --green:#4cc472; --green-tint:rgba(76,196,114,.16); --orange:#ffad4d; --orange-tint:rgba(255,173,77,.16); --red:#ff7a6e; --red-tint:rgba(255,122,110,.15);
  --glass:rgba(30,32,38,.6); --glass-strong:rgba(44,47,55,.92); --thumb:rgba(92,96,108,.85); --glass-line:rgba(255,255,255,.1);
  --fill:rgba(118,118,128,.22); --fill-2:rgba(118,118,128,.3); --hair:rgba(255,255,255,.09); --hair-2:rgba(255,255,255,.16);
  --shadow:0 18px 40px -18px rgba(0,0,0,.6); --hi:inset 0 1px 0 rgba(255,255,255,.07);
  --b1:#1e3a8a; --b2:#312e81; --b3:#0e4f5c; --b4:#3b1d5e;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:500 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue)} button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0} h1,h2,h3{letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.over{font:700 11px/1.4 var(--font);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.bg i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.9}
.bg i:nth-child(1){width:52vw;height:52vw;left:-12vw;top:-16vw;background:var(--b1)}
.bg i:nth-child(2){width:44vw;height:44vw;right:-10vw;top:6vh;background:var(--b4)}
.bg i:nth-child(3){width:40vw;height:40vw;left:24vw;bottom:-18vw;background:var(--b3)}
.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);box-shadow:var(--shadow),var(--hi);border-radius:var(--r-xl)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-strong)}}

.top{position:sticky;top:12px;z-index:30;display:flex;align-items:center;gap:12px;max-width:1240px;margin:12px auto 0;width:calc(100% - 32px);padding:8px 8px 8px 16px;border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 17px/1 var(--font)}
.brand svg{width:28px;height:28px}
.nav{margin-left:auto;display:flex;gap:2px}
.nav a{border-radius:999px;padding:8px 14px;font:700 13.5px/1.2 var(--font);color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--thumb);color:var(--ink);box-shadow:0 3px 10px -3px rgba(23,26,32,.22),var(--hi)}
.top .btn{margin-left:4px}

.btn{border:0;background:var(--fill);color:var(--ink);border-radius:999px;padding:11px 20px;font:700 14px/1.1 var(--font);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,background .2s}
.btn:hover{background:var(--fill-2)} .btn:active{transform:scale(.97)}
.btn.primary{background:var(--blue);color:var(--on-blue);box-shadow:0 8px 18px -8px var(--blue)}
.btn.primary:hover{background:var(--blue-hover)}
.btn.tint{background:var(--blue-tint);color:var(--blue)}
.btn.big{padding:15px 26px;font-size:15.5px}
.btn.small{padding:7px 13px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--blue);font:700 13px var(--font);cursor:pointer}

main{max-width:1240px;margin:0 auto;padding:0 16px}
.hero{padding:64px 8px 36px;max-width:860px}
.hero h1{font:800 clamp(34px,5.6vw,58px)/1.04 var(--font);letter-spacing:-.03em;margin:12px 0 16px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lede{font-size:clamp(16px,2vw,19px);color:var(--body);max-width:60ch}
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:30px 0 8px;max-width:860px}
.pick{padding:22px;text-decoration:none;color:var(--ink);display:grid;gap:6px;transition:transform .15s}
.pick:hover{transform:translateY(-2px)}
.pick b{font:800 19px/1.25 var(--font)} .pick span{color:var(--muted);font-size:14px} .pick .go{color:var(--blue);font:700 14px var(--font);margin-top:6px}
.proof{display:flex;gap:8px 22px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font:700 13px var(--font)}
.proof li::before{content:"✓";color:var(--green);margin-right:7px}

.section{padding:30px 0}
.section > h2{font:800 clamp(24px,3vw,32px)/1.15 var(--font);margin:6px 0 8px}
.section > p.sub{color:var(--muted);max-width:64ch;margin-bottom:20px}

/* quote layout */
.quote{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.formcol{display:grid;gap:16px;min-width:0}
.rail{position:sticky;top:84px;display:grid;gap:14px;min-width:0}
.card{padding:22px}
.card > h2,.card > h3{font:800 19px/1.25 var(--font);margin:3px 0 4px}
.card > p.hint{color:var(--muted);font-size:14px;margin-bottom:16px;max-width:68ch}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px}
.f{display:grid;gap:5px;min-width:0;align-content:start}
.f > label,.f > span.l{font:700 12px var(--font);color:var(--muted);margin-left:2px}
.f small{color:var(--faint);font-size:12px;margin-left:2px}
.f input,.f select,.f textarea{width:100%;padding:11px 13px;border:1px solid transparent;border-radius:var(--r-md);background:var(--fill);font:600 14.5px var(--font);color:var(--ink);min-width:0}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--blue);outline-offset:0;background:var(--glass-strong)}
.f.filled input,.f.filled select,.f.filled textarea{border-color:var(--blue);background:var(--blue-tint)}
.f.bad input,.f.bad select{border-color:var(--red)}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--fill);max-width:100%}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 16px;font:700 13.5px/1.2 var(--font);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--thumb);color:var(--ink);box-shadow:0 3px 10px -3px rgba(23,26,32,.22),var(--hi)}
.sp{height:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

.drop{border:1.5px dashed var(--hair-2);border-radius:var(--r-lg);padding:26px 18px;text-align:center;color:var(--muted);transition:.2s;background:var(--fill)}
.drop.over{border-color:var(--blue);background:var(--blue-tint);color:var(--blue)}
.drop b{display:block;color:var(--ink);font:800 16px var(--font);margin-bottom:4px}
.drop .btn{margin-top:12px}
.status{margin-top:12px;font:700 13.5px var(--font);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status.ok{color:var(--green)} .status.warn{color:var(--orange)} .status.busy{color:var(--blue)}
.status.busy::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

.lines{display:grid;gap:10px}
.line{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.5fr) minmax(76px,.8fr) minmax(88px,1fr) 34px;gap:8px;align-items:end;padding:12px;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--glass)}
.line .x{border:0;background:var(--fill);border-radius:50%;width:34px;height:34px;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.line .x:hover{background:var(--red-tint);color:var(--red)}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.choice{position:relative;border:1.5px solid var(--hair);border-radius:var(--r-lg);padding:13px 14px;background:var(--glass);cursor:pointer;display:grid;gap:3px;transition:.15s}
.choice:hover{border-color:var(--hair-2)}
.choice input{position:absolute;opacity:0}
.choice:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}
.choice:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.choice b{font:800 14.5px var(--font)} .choice span{color:var(--muted);font-size:12.5px;line-height:1.4} .choice em{font-style:normal;font:800 14px var(--font);color:var(--blue)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--blue)}

/* estimate card */
.est{padding:22px}
.est .head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.badge{display:inline-flex;align-items:center;gap:5px;font:700 11.5px/1 var(--font);padding:5px 9px;border-radius:999px;white-space:nowrap}
.badge.high{background:var(--green-tint);color:var(--green)} .badge.medium{background:var(--orange-tint);color:var(--orange)} .badge.low{background:var(--red-tint);color:var(--red)}
.badge.info{background:var(--blue-tint);color:var(--blue)}
.est .unit{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.est .unit b{font:800 clamp(34px,4vw,44px)/1 var(--font);letter-spacing:-.03em}
.est .unit span{color:var(--muted);font:700 13.5px var(--font)}
.est .total{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.est .total b{font:800 22px var(--font);letter-spacing:-.02em} .est .total small{color:var(--muted);display:block;font-size:12.5px}
.bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--fill);margin:14px 0 8px}
.bar i{display:block;min-width:2px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--c)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.kv .grp{grid-column:1/-1;font:700 10.5px var(--font);letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-top:10px}
.kv .sum{border-top:1px solid var(--hair-2);padding-top:8px;color:var(--ink);font-weight:800}
.kv .tbc{color:var(--orange)}
.kv .note{grid-column:1/-1;color:var(--faint);font-size:12px;margin-top:-3px}
.unknowns{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:13px}
.unknowns li{padding:9px 11px;border-radius:var(--r-md);background:var(--orange-tint);color:var(--body)}
.unknowns b{color:var(--orange)}
details.more{margin-top:12px;border-top:1px solid var(--hair);padding-top:10px}
details.more summary{cursor:pointer;font:700 13.5px var(--font);color:var(--blue);list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more[open] summary{margin-bottom:10px}
.fine{color:var(--faint);font-size:12px;margin-top:12px;line-height:1.5}
.empty{color:var(--muted);font-size:14px;padding:6px 0}
.pertable{width:100%;border-collapse:collapse;font-size:13.5px}
.pertable th,.pertable td{padding:8px 6px;border-bottom:1px solid var(--hair);text-align:right;font-variant-numeric:tabular-nums}
.pertable th:first-child,.pertable td:first-child{text-align:left}
.pertable th{font:700 10.5px var(--font);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.pertable tr.pick-row td{background:var(--blue-tint);font-weight:800}
.scroll{overflow-x:auto}

.mbar{display:none}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.steps .card b{display:block;font:800 17px var(--font);margin:4px 0}
.steps .n{width:30px;height:30px;border-radius:50%;background:var(--blue-tint);color:var(--blue);display:grid;place-items:center;font:800 14px var(--font)}
.faq details{border-bottom:1px solid var(--hair);padding:14px 2px}
.faq summary{cursor:pointer;font:700 15.5px var(--font)} .faq p{color:var(--muted);margin-top:8px;max-width:72ch}
footer{max-width:1240px;margin:20px auto 0;padding:24px 20px 100px;color:var(--muted);font-size:13px;border-top:1px solid var(--hair)}
footer p{max-width:90ch;margin-top:6px}
.toast{position:fixed;left:50%;top:14px;z-index:60;transform:translateX(-50%) scale(.6);opacity:0;background:#000;color:#fff;padding:12px 20px;border-radius:999px;font:700 14px/1.3 var(--font);pointer-events:none;max-width:calc(100% - 32px);transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .2s}
.toast.show{opacity:1;transform:translateX(-50%) scale(1)}
.thanks{padding:34px 26px;text-align:center}
.thanks h2{font:800 28px var(--font);margin-bottom:8px} .thanks p{color:var(--muted);max-width:52ch;margin:0 auto 6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (max-width:1020px){
  .quote{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;text-decoration:none;color:var(--ink);background:var(--glass-strong)}
  .mbar b{font:800 18px var(--font)} .mbar span{color:var(--muted);font-size:12.5px;display:block;line-height:1.2}
  .mbar .btn{margin-left:auto;padding:10px 16px}
}
@media (max-width:720px){
  .nav a:not([aria-current]){display:none}
  .top .btn{display:none}
  .nav{margin-left:auto}
  .picks,.steps{grid-template-columns:minmax(0,1fr)}
  .line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .line .f:first-child{grid-column:1/-1}
  .line .x{justify-self:end}
  .card{padding:18px 16px}
  .hero{padding-top:40px}
}
@media print{.bg,.top,.mbar,.btn{display:none!important}body{background:#fff}.glass{box-shadow:none;border:1px solid #ccc;backdrop-filter:none;background:#fff}}
.line.tier{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}
@media (max-width:720px){.line.tier .f:first-child{grid-column:auto}}