/* Takeoff Desk demo — Vector Envelope palette (black / graphite / gray), red markup, sage highlighter */
:root{
  --ink:#0B0B0C; --ink2:#141518; --graph:#1C1F23; --c2:#2A2D31; --c3:#33373D; --c4:#4A4F55;
  --g:#8A8F96; --g2:#BCC0C5; --lg:#D4D7DB; --paper:#F4F4F5; --white:#FFFFFF;
  --red:#E2483A; --green:#8DB062; --green-t:#A9C985;
  --ok-bg:#E5F0DA; --ok:#2F4D1C; --warn-bg:#FBE4E1; --warn:#8C1F14; --info-bg:#E6E8EA; --info:#2A2D31;
  --display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;text-transform:uppercase;letter-spacing:.01em}
button,input,select{font:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.demo-bar{background:var(--red);color:var(--white);font:500 13px var(--mono);text-align:center;padding:6px 12px;letter-spacing:.04em}

/* top bar (inner pages) */
.topbar{background:var(--ink);color:var(--paper)}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand span{font:800 22px var(--display);letter-spacing:.04em}
.nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nav a{color:var(--lg);text-decoration:none;padding:10px 12px;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a.outline{border:1px solid var(--c4);color:var(--white);font-weight:600}
.lang{display:flex;border:1px solid var(--c4);margin-left:4px}
.lang button{background:transparent;color:var(--g2);border:0;padding:9px 12px;font:600 13px var(--body);letter-spacing:.06em;cursor:pointer;min-height:40px}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:700}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:15px 24px;font-weight:700;font-size:17px;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;min-height:48px}
.btn.primary{background:var(--green);border-color:var(--green);color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--white)}
.btn.ghost-light{color:var(--paper);border-color:var(--c4)}
.btn.small{padding:9px 16px;font-size:14px;min-height:40px}
.btn:hover{filter:brightness(1.06)}

/* sections */
.section{padding-block:72px}
.eyebrow{font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--white);border:1px solid var(--lg);padding:24px;min-width:0}
.card.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.muted{color:var(--c4)}
.fine{font-size:14px;color:var(--c4);max-width:760px}
.pill{display:inline-block;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.info{background:var(--info-bg);color:var(--info)}

/* tables */
.table-box{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--c4);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;padding:12px 16px}
td{padding:13px 16px;border-top:1px solid #E6E8EA;vertical-align:middle}
td.r,th.r{text-align:right}
tr.total td{border-top:2px solid var(--ink);font-weight:700}

/* forms */
label.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--c3);font-weight:500}
input[type=text],input[type=url],input[type=email],input[type=password],select{padding:12px;border:1px solid var(--g2);background:var(--white);font-size:16px;min-height:46px;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--white);border:1px solid var(--g2);padding:11px 16px;font-weight:600;cursor:pointer;min-height:46px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip small{font:500 11px var(--mono);margin-left:6px;opacity:.8}
.drop{border:2px dashed var(--g);background:#FAFAFA;padding:26px;text-align:center;cursor:pointer;display:block}
.drop.has{border-style:solid;border-color:var(--green);background:#F3F8EE}
.stepnum{font-family:var(--mono);color:var(--red);margin-right:8px}

/* stats */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .v{font:800 40px var(--display);line-height:1}
.bar{height:8px;background:#E6E8EA}.bar i{display:block;height:8px;background:var(--green)}

/* processing overlay */
.overlay{position:fixed;inset:0;background:rgba(11,11,12,.88);color:var(--paper);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.overlay[hidden],[hidden]{display:none!important}
.overlay .box{max-width:440px;display:flex;flex-direction:column;gap:14px}
.overlay ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--g2)}
.overlay li.done{color:var(--green-t)}

/* footer */
.foot{background:var(--ink);color:var(--g)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-block:26px;font-size:14px}

/* ---------- home hero blueprint ---------- */
.hero{position:relative;height:780px;overflow:hidden;background:var(--graph);color:var(--paper)}
.hero .inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.hero .head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:18px}
.hero .boxed{background:var(--ink);padding:8px 12px}
.hero .copy{background:var(--ink);padding:32px 34px;max-width:620px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero h1{font-size:60px;line-height:.98;font-weight:800}
.hero .lead{font-size:18px;color:var(--g2);margin:0}
.hero .bottom{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;padding-bottom:36px}
.live{display:flex;align-items:center;gap:10px;background:var(--ink);padding:10px 14px;font:13px var(--mono);color:var(--g2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

.cam{position:absolute;left:0;top:0;width:100%;transform-origin:0 0;animation:cam 18s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform}
.cam svg{display:block;width:100%;height:auto}
@keyframes cam{
0%{transform:translate(-5%,-8%) scale(1.1)}
8%{transform:translate(0%,-6%) scale(1.4)}
16%{transform:translate(-20%,-20%) scale(1.4)}
26%{transform:translate(-50%,-40%) scale(1.4)}
36%,46%{transform:translate(-7%,-10%) scale(1.3)}
56%,64%{transform:translate(-50%,-28%) scale(1.5)}
74%,84%{transform:translate(-3%,-95%) scale(1.4)}
93%{transform:translate(18%,-3%) scale(.62)}
100%{transform:translate(-5%,-8%) scale(1.1)}
}
.pen{fill:none;stroke:var(--red);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:.92}
.trace{animation:trace 18s linear infinite}
@keyframes trace{0%,8%{stroke-dashoffset:100;opacity:.92}28%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:.92}99%,100%{stroke-dashoffset:0;opacity:0}}
.ring{animation:ring 18s linear infinite}
@keyframes ring{0%,49%{stroke-dashoffset:100;opacity:.92}54%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:.92}99%,100%{stroke-dashoffset:0;opacity:0}}
.ring2{animation:ring2 18s linear infinite}
@keyframes ring2{0%,72%{stroke-dashoffset:100;opacity:.92}77%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:.92}99%,100%{stroke-dashoffset:0;opacity:0}}
.tick{animation:tick 18s linear infinite}
@keyframes tick{0%,78%{stroke-dashoffset:100;opacity:.92}81%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:.92}99%,100%{stroke-dashoffset:0;opacity:0}}
.hl{fill:var(--green);opacity:.34;transform-box:fill-box;transform-origin:0 50%;animation:hl 18s cubic-bezier(.6,0,.4,1) infinite}
.hlb{animation-delay:.5s}
@keyframes hl{0%,32%{transform:scaleX(0)}42%{transform:scaleX(1)}92%{transform:scaleX(1);opacity:.34}99%,100%{transform:scaleX(1);opacity:0}}
.lb{opacity:0}
.lb1{animation:lb1 18s ease-out infinite}@keyframes lb1{0%,27%{opacity:0}30%,92%{opacity:1}99%,100%{opacity:0}}
.lb2{animation:lb2 18s ease-out infinite}@keyframes lb2{0%,41%{opacity:0}44%,92%{opacity:1}99%,100%{opacity:0}}
.lb3{animation:lb3 18s ease-out infinite}@keyframes lb3{0%,55%{opacity:0}58%,92%{opacity:1}99%,100%{opacity:0}}
.lb4{animation:lb4 18s ease-out infinite}@keyframes lb4{0%,81%{opacity:0}84%,92%{opacity:1}99%,100%{opacity:0}}

@media (max-width:700px){
  .hero{height:auto;min-height:760px}
  .hero h1{font-size:40px}
  .hero .copy{padding:22px}
  .section{padding-block:52px}
}
@media (prefers-reduced-motion:reduce){
  .cam{animation:none;transform:translate(18%,-3%) scale(.62)}
  .pen,.trace,.ring,.ring2,.tick{animation:none;stroke-dashoffset:0}
  .hl{animation:none;transform:none}
  .lb1,.lb2,.lb3,.lb4{animation:none;opacity:1}
  .dot{animation:none}
}

/* billing period switch */
body[data-bill="m"] .y{display:none!important}
body[data-bill="y"] .m{display:none!important}
.billing button{color:var(--c3)}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--white)}

/* residential / commercial tabs */
.seg button{color:var(--c3)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
body[data-seg="res"] .seg-com, body[data-seg="res"] .seg-panel-com{display:none!important}
body[data-seg="com"] .chip:not(.seg-com), body[data-seg="com"] .seg-panel-res{display:none!important}
.tradelist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--lg);border:1px solid var(--lg)}
.tradelist li{background:var(--white);padding:18px 20px;font:600 22px/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em}