/* LASSO product homepage (lassoreps.com), version 3, 2026-10-08. Plain CSS, phone first.

   Palette (Josh's pick, "Night and hi-vis"): a truck at 7 am. Night (#10171F) and steel (#223040) for the dark
   bands, hi-vis orange (#F26B1D) for the one thing to do on each screen, amber (#F2A93B) for scores and the horizon,
   warm canvas (#F3EEE5) for the paper the day gets written on.

   Type (picked by Josh 2026-10-08 from round two): Red Hat Display for headings, Red Hat Text for copy, Red Hat Mono for
   figures (clock stamps, scores, prices, kickers). Swap --disp, --body and --mono to change it.

   Logo (picked by Josh 2026-10-08): the geometric L with a sheet-metal bend notch and a hi-vis foot, next to the wordmark.

   Effects on this page, exactly Josh's list, all still under prefers-reduced-motion (or html.reduce, the ?reduce=1
   QA hook): grain on the dark bands (still since 2026-10-08), three slow parallax layers behind the hero phone, the route that draws
   as the routing section scrolls, count-ups in the numbers strip, the trades marquee, tilt on the job and pricing
   cards (fine pointer only), the typing line under the headline, the top bar that solidifies, the page progress
   line. Nothing else moves on its own. */
:root{
  --night:#10171F;--night-2:#172230;--steel:#223040;--steel-2:#2C3C4E;
  --hv:#F26B1D;--hv-d:#D95C14;--hv-2:#FF8A3D;--hv-bg:#FDEADF;--amber:#F2A93B;--amber-2:#FFC66B;
  --canvas:#F3EEE5;--canvas-2:#EAE3D6;--sand:#DCD2C0;--card:#FFFDF9;
  --ink:#141A20;--ink-2:#3E4954;--mute:#6C7681;--line:#D8CFBF;--line-d:rgba(255,255,255,.12);
  --green:#2F8F5B;--green-2:#4FBF7C;--green-bg:#E3F2E8;--red:#C8321F;
  --disp:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* Josh's pick, round two, 2026-10-08 */
  --body:"Red Hat Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Red Hat Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--r:6px;--wrap:1180px;--top:68px;
  --shadow:0 1px 2px rgba(16,23,31,.06),0 14px 34px -14px rgba(16,23,31,.22);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font-family:var(--body);font-size:16.5px;line-height:1.55;color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{margin:0}
p{margin:0 0 14px}
a{color:var(--hv-d)}
ul,ol{margin:0;padding:0}
button,input,textarea{font:inherit;color:inherit}
img,svg{display:block}
code{font:.86em var(--mono)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
section{padding:72px 0;position:relative}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;border-radius:var(--r);z-index:200}.skip:focus{left:8px}

/* type */
.h1{font-family:var(--disp);font-weight:900;font-size:clamp(2.5rem,8.4vw,4.6rem);line-height:.98;letter-spacing:-.025em;margin:0 0 18px;color:#fff}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.95rem,5.2vw,3.1rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 16px;color:var(--night)}
.sub{max-width:640px;color:var(--ink-2);font-size:1.05rem}
.sec-head{max-width:760px}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-d)}
.kicker:before{content:"";width:20px;height:3px;background:currentColor;flex:none}
.kicker .i{width:18px;height:18px}
.kicker-light{color:var(--amber-2)}

/* buttons: squared, no pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1.5px solid transparent;border-radius:var(--r);font:700 .95rem/1 var(--body);text-decoration:none;cursor:pointer;background:none;transition:transform .18s var(--ease),background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .i{width:18px;height:18px}
.btn-hv{background:var(--hv);color:#fff}.btn-hv:hover{background:var(--hv-d)}
.btn-night{background:var(--night);color:#fff}.btn-night:hover{background:var(--steel)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-line{color:var(--night);border-color:var(--line);background:var(--card)}.btn-line:hover{border-color:var(--night)}
.btn-lg{min-height:52px;padding:0 24px;font-size:1.02rem}
.btn:disabled{opacity:.6;cursor:wait}
.btn:focus-visible,.linklike:focus-visible,a:focus-visible,.stbtn:focus-visible,.dots button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.linklike{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

/* grain: a slow film grain over the dark bands only */
.grain{isolation:isolate;overflow:clip}   /* clip, not hidden: a focused button must not scroll the band itself */
.grain>.wrap{position:relative;z-index:1}
.grain:before{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:220px 220px;opacity:.06;pointer-events:none;z-index:0}   /* still since 2026-10-08: the animated, blended layer made Chrome skip painting parts of the dark bands */
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-1.5%,-1.5%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* top bar: transparent over the hero, solid once the page moves; the progress line fills as the visitor reads */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;background:var(--hv);transform-origin:0 50%;transform:scaleX(0)}
.top{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--top);color:#fff;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.top-in{height:100%;display:flex;align-items:center;gap:14px}
.top.is-solid{background:rgba(243,238,229,.96);color:var(--ink);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(16,23,31,.4)}
.wordmark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--disp);font-weight:900;letter-spacing:.14em;font-size:1.25rem;color:inherit;margin-right:auto;line-height:1}
.topnav{display:none;gap:24px}
.topnav a{color:inherit;text-decoration:none;font-weight:600;font-size:.92rem;opacity:.85;position:relative;padding:6px 0}
.topnav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hv);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.topnav a:hover{opacity:1}.topnav a:hover:after{transform:scaleX(1)}
.top-cta{display:flex;gap:8px}
.top .btn{min-height:40px;padding:0 14px;font-size:.88rem}
.top:not(.is-solid) .btn-line{color:#fff;border-color:rgba(255,255,255,.4);background:transparent}
.top .btn-hv{display:none}

/* hero: layout 3. Text left, the callout stepper under it, the working phone right. On a phone: words, phone, stepper. */
.hero{background:var(--night);color:#fff;padding:calc(var(--top) + 40px) 0 72px}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--hv),var(--amber));z-index:2}
.hero-in{display:grid;gap:36px;grid-template-areas:"copy" "visual" "steps"}
.hero-copy{grid-area:copy}.hero-visual{grid-area:visual}.hero-steps{grid-area:steps}
.type{font-size:clamp(1.05rem,2.4vw,1.3rem);color:rgba(255,255,255,.82);min-height:1.6em;margin:0 0 24px;line-height:1.45}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--hv);vertical-align:-3px;margin-left:3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* the callout stepper: one callout at a time, Back, dots, Next */
.hero-steps{display:grid;gap:14px;align-content:start;max-width:560px}
.co{background:var(--card);color:var(--ink);border-radius:12px;padding:16px 18px 16px 20px;border-left:4px solid var(--hv);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);min-height:148px;display:grid;gap:4px;align-content:start}
.co-k{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-d)}
.co b{font-size:1.12rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.co small{display:block;color:var(--ink-2);font-size:.92rem;line-height:1.4}
.co em{display:block;font-style:normal;font-size:.84rem;color:var(--mute);margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);line-height:1.4}
.co em span{font-weight:700;color:var(--ink-2)}
.co.is-swap{opacity:0;transform:translateY(6px)}
.co{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.st-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stbtn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .2s,opacity .2s}
.stbtn .i{width:18px;height:18px}
.stbtn:hover{border-color:#fff}.stbtn:disabled{opacity:.35;cursor:default}
.dots{display:flex;gap:8px;list-style:none}
.dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:transform .2s,background .2s}
.dots button.on{background:var(--hv);transform:scale(1.25)}
.hero-fine{margin:0;font-size:.8rem;color:rgba(255,255,255,.5)}

/* the phone and the three slow layers behind it */
.hero-visual{position:relative;display:grid;gap:12px;justify-items:center;width:min(100%,340px);margin:0 auto}
.px{position:absolute;pointer-events:none;will-change:transform;z-index:0}
.px-1{width:560px;height:560px;left:50%;top:40%;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(242,169,59,.22),rgba(242,169,59,0) 62%)}
.px-2{inset:-40px -60px;background-image:radial-gradient(rgba(255,255,255,.26) 1px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(360px 420px at 55% 45%,#000,transparent 72%);mask-image:radial-gradient(360px 420px at 55% 45%,#000,transparent 72%);opacity:.6}
.px-3{width:220px;height:220px;right:-70px;top:54px;border-radius:50%;border:2px solid rgba(242,107,29,.35)}
.device{position:relative;z-index:1;width:100%;aspect-ratio:392/846;border-radius:54px;background:#101013;padding:11px;box-shadow:0 0 0 1.5px #33333a,0 0 0 4px #09090b,0 40px 90px -10px rgba(0,0,0,.75)}
.device::before{content:"";position:absolute;left:-2px;top:140px;width:3px;height:36px;background:#2a2a30;border-radius:2px}
.device::after{content:"";position:absolute;right:-2px;top:190px;width:3px;height:70px;background:#2a2a30;border-radius:2px}
.device .screen{position:absolute;inset:11px;border-radius:44px;overflow:hidden;background:#10171F}
.device iframe{width:390px;height:844px;border:0;display:block;transform-origin:0 0;background:#10171F}
.device .glare{position:absolute;inset:11px;border-radius:44px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 38%)}
.hero-cap{position:relative;z-index:1;margin:10px auto 0;max-width:380px;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.72);text-align:center}
.try-badge{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;margin:0 auto 10px;padding:7px 12px;border-radius:999px;background:var(--hv,#F26B1D);color:#10171F;font-weight:800;font-size:.8rem;letter-spacing:.02em;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.try-badge .i{flex:none;animation:tapnudge 1.6s ease-in-out infinite}
@keyframes tapnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.try-badge .i{animation:none}}

/* trades marquee */
.tick{background:var(--hv);color:var(--night);overflow:hidden;padding:12px 0;font-family:var(--disp);font-weight:800;font-size:.98rem;letter-spacing:.06em;text-transform:uppercase}
.tick-track{display:flex;align-items:center;gap:22px;width:max-content;animation:marq 48s linear infinite}
.tick:hover .tick-track{animation-play-state:paused}
.tick i{width:7px;height:7px;background:var(--night);transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* who it is for: hairline grid, not cards */
.who{background:var(--canvas)}
.who-grid{display:grid;gap:36px}
.who-copy p:last-child{color:var(--ink-2);font-size:1.05rem;margin:0}
.buyers{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.buyers li{background:var(--card);padding:18px 16px;display:grid;gap:3px;align-content:start}
.buyers .i{width:22px;height:22px;color:var(--hv);margin-bottom:8px}
.buyers b{font-weight:700;line-height:1.25}
.buyers span{color:var(--mute);font-size:.86rem}

/* count-up strip */
.nums{background:var(--night-2);color:#fff;padding:40px 0}
.nums-row{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.num b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(2.8rem,9vw,4.2rem);line-height:.9;color:var(--amber-2);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.num>span{display:block;font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.4;margin-top:8px}

/* three jobs: cards that tilt toward a fine pointer */
.jobs{background:var(--card)}
.job-grid{display:grid;gap:18px;margin-top:36px;perspective:1200px}
.job{background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:24px 22px;display:grid;gap:12px;align-content:start;position:relative;overflow:hidden}
.tilt{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s var(--ease),box-shadow .25s}
.tilt.is-tilting{transition:transform .08s linear}
.tilt:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 48%);transform:translateX(var(--sx,-110%));transition:transform .3s;opacity:.7}
.tilt.is-tilting{box-shadow:var(--shadow)}
.job-time{font-family:var(--mono);font-weight:700;color:var(--hv-d);display:flex;align-items:baseline;gap:4px;line-height:1}
.job-time b{font-size:1.7rem;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.job-time small{font-size:.9rem;font-weight:700}
.job h3{font-family:var(--disp);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;color:var(--night);line-height:1.05}
.job>p{color:var(--ink-2);margin:0;font-size:.95rem}
.job-facts{list-style:none;display:grid;gap:8px;font-size:.9rem}
.job-facts li{padding-left:20px;position:relative}.job-facts li:before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--hv)}
.mini{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow);font-size:.86rem;color:var(--ink);margin-top:6px}
.mini-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:1rem;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;letter-spacing:-.01em}
.mini-h small{font-weight:600;color:var(--mute);font-size:.76rem}
.rec{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(200,50,31,.18);margin-right:auto}
.mini-find{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:center}
.mini-find:first-of-type{border-top:0}
.mini-find div b{display:block;font-weight:700}.mini-find small{display:block;color:var(--mute);font-size:.8rem;line-height:1.35}
.mini-act{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);align-items:start}
.mini-act:first-of-type{border-top:0}
.mini-act em{font-style:normal;font-family:var(--mono);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--hv-d);padding-top:3px}
.mini-save{margin-top:10px;background:var(--night);color:#fff;text-align:center;padding:10px;border-radius:8px;font-weight:700}
.mini-stop{display:grid;grid-template-columns:24px 1fr;gap:3px 10px;padding:8px 0;border-top:1px solid var(--line)}
.mini-stop:first-of-type{border-top:0}
.mini-stop i{grid-row:span 2;width:24px;height:24px;border-radius:50%;background:var(--night);color:#fff;font-style:normal;font-family:var(--mono);font-weight:700;font-size:11px;display:grid;place-items:center;align-self:center}
.mini-stop b{font-weight:700}.mini-stop small{color:var(--mute)}
.mini-stop.near i{background:var(--hv)}.mini-stop.near b{color:var(--hv-d)}

/* fit dial, drawn still */
.dial{--v:0;position:relative;width:48px;height:48px;flex:none}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:4.5}
.dial-t{stroke:rgba(128,136,144,.28)}
.dial-v{stroke:var(--green);stroke-linecap:round;stroke-dasharray:125.66px;stroke-dashoffset:calc(125.66px * (1 - var(--v) / 100))}
.dial b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.dial.low .dial-v,.dial.fine .dial-v{stroke:#8893A0}.dial.maybe .dial-v{stroke:var(--amber)}

/* routing: the route draws as the section scrolls, stops appear along it */
.route{background:var(--canvas-2)}
.route-grid{display:grid;gap:32px}
.route-copy p:not(.kicker):not(.route-fine){color:var(--ink-2)}
.route-fine{margin:16px 0 0;font-size:.82rem;color:var(--mute)}
.route-fig{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.route-svg{display:block;width:100%;height:auto;--p:0}
.route-svg .rd{fill:none;stroke:rgba(16,23,31,.07);stroke-width:12;stroke-linecap:round}
.route-svg .rt-under{fill:none;stroke:var(--sand);stroke-width:3;stroke-dasharray:4 7;stroke-linecap:round}
.route-svg .rt{fill:none;stroke:var(--hv);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,2000);stroke-dashoffset:calc(var(--len,2000) * (1 - var(--p)))}
.route-svg .rt-start circle{fill:var(--night)}
.route-svg text{font-family:var(--body);font-size:12.5px;fill:var(--ink-2)}
.route-svg .rt-start text{font-family:var(--mono);font-weight:700;fill:var(--ink)}
.route-svg .stop{opacity:0;transition:opacity .35s var(--ease)}
.route-svg .stop.on{opacity:1}
.route-svg .stop circle{fill:var(--card);stroke:var(--hv);stroke-width:3.5}
.route-svg .stop.near circle{fill:var(--hv)}
.route-svg .stop.end circle{fill:var(--night);stroke:var(--night)}
.route-svg .stop .t{font-family:var(--mono);font-weight:700;font-size:12px;fill:var(--hv-d)}
.route-svg .stop .n{fill:var(--ink);font-weight:600}
.route-svg .stop .o{font-family:var(--mono);font-size:11px;fill:var(--green);font-weight:700}
.route-svg .stop[data-side=left] text{text-anchor:end}
.route-svg text{display:none}   /* labels are too small once the drawing shrinks; the list below carries them */
.route-list{list-style:none;display:grid;border-top:1px solid var(--line)}
.route-list li{display:grid;grid-template-columns:72px 1fr auto;gap:2px 12px;align-items:baseline;padding:9px 16px;border-top:1px solid var(--line);font-size:.88rem;opacity:.38;transition:opacity .35s var(--ease)}
.route-list li:first-child{border-top:0}
.route-list li.on{opacity:1}
.route-list b{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--hv-d)}
.route-list em{font-style:normal;font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--green)}
.route-fig figcaption{padding:10px 16px;font-size:.78rem;color:var(--mute);border-top:1px solid var(--line)}

/* the lead finder: four steps beside the card stack */
.finder{background:var(--card)}
.finder-grid{display:grid;gap:40px;margin-top:36px}
.steps{list-style:none;display:grid;gap:28px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px}
.step-n{font-family:var(--mono);font-weight:700;font-size:2rem;line-height:1;color:var(--hv);padding-top:2px}
.steps h3{font-family:var(--disp);font-weight:800;font-size:1.35rem;letter-spacing:-.015em;margin:0 0 6px;color:var(--night);line-height:1.1}
.steps p{margin:0;color:var(--ink-2);font-size:.95rem}
.stack-wrap{display:grid;gap:14px;justify-items:center;background:var(--night);color:#fff;border-radius:14px;padding:22px 20px 20px;align-self:start}
.stack-k{margin:0;font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-2);justify-self:start}
.stack{position:relative;width:100%;max-width:380px;height:272px}
.sk{position:absolute;inset:0 0 36px;background:var(--canvas);color:var(--ink);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);transform:translateY(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .04));transform-origin:50% 100%;z-index:calc(10 - var(--i));transition:transform .45s var(--ease),opacity .4s}
.sk.out{transform:translateX(var(--dir,-120%)) rotate(calc(var(--rot,-8) * 1deg));opacity:0}
.sk-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.sk-top div b{display:block;font-size:1.08rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}.sk-top small{display:block;color:var(--ink-2);font-size:.84rem}
.sk ul{list-style:none;display:grid;gap:7px}.sk li{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;line-height:1.3}
.sk em{flex:none;font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:4px;background:var(--green-bg);color:var(--green);margin-top:1px}
.sk em.s{background:#FDF1DE;color:#A15C07}.sk em.neg{background:#FBE3DF;color:var(--red)}
.sk-btns{display:flex;gap:10px;width:100%;justify-content:center}
.sk-btns .btn-line{color:#fff;background:transparent;border-color:rgba(255,255,255,.4)}.sk-btns .btn-line:hover{border-color:#fff}
.stack-note{margin:0;font-size:.9rem;color:rgba(255,255,255,.85);text-align:center;min-height:2.6em}
.stack-fine{margin:0;font-size:.76rem;color:rgba(255,255,255,.45)}

/* try it with your area */
.try{background:var(--steel);color:#fff}
.try .h2{color:#fff}.try .sub{color:rgba(255,255,255,.78)}
.try-form{display:grid;gap:14px;margin-top:30px;background:var(--night);padding:18px;border-radius:12px;border:1px solid var(--line-d)}
.fld{display:grid;gap:6px;position:relative}
.fld label,.fld .lbl{font-weight:700;font-size:.88rem}
.fld input,.fld textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font:400 16px/1.3 var(--body)}
.fld textarea{resize:vertical;min-height:84px}
.fld input:focus,.fld textarea:focus,.dd-btn:focus-visible{outline:none;border-color:var(--hv);box-shadow:0 0 0 3px rgba(242,107,29,.3)}
.try .fld input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fff}
.try .fld input::placeholder{color:rgba(255,255,255,.45)}
.try-go{width:100%}
.try-form .form-err{grid-column:1 / -1}
.try-out{margin-top:28px}
.try-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px;color:rgba(255,255,255,.88);line-height:1.45}
.try-sum small{display:block;width:100%;color:rgba(255,255,255,.55);font-size:.82rem}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:4px;font-family:var(--mono);font-size:.74rem;font-weight:700;background:var(--amber);color:var(--night);text-transform:uppercase;letter-spacing:.04em}
.try-rows{list-style:none;display:grid;gap:10px}
.try-row{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;background:var(--night);border:1px solid var(--line-d);border-radius:12px;padding:14px}
.try-row.skel{animation:skel 1.2s ease-in-out infinite alternate}
@keyframes skel{to{opacity:.45}}
.try-row.skel .dial{border-radius:50%;background:rgba(255,255,255,.08)}
.try-row.skel b,.try-row.skel span{display:block;height:14px;border-radius:4px;background:rgba(255,255,255,.1);margin:4px 0}
.try-row.skel b{width:60%;height:18px}.try-row.skel span{width:40%}
.try-row .dial-t{stroke:rgba(255,255,255,.18)}.try-row .dial-v{stroke:var(--amber)}.try-row .dial.strong .dial-v{stroke:var(--green-2)}
.try-main b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.try-main>span{display:block;color:rgba(255,255,255,.65);font-size:.88rem;margin:3px 0 8px}
.try-why{list-style:none;display:grid;gap:5px;font-size:.88rem;color:rgba(255,255,255,.86)}
.try-why li{padding-left:16px;position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.try-why li:before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--amber)}
.try-tag{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:4px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);white-space:nowrap}
.try-tag.brand{background:rgba(200,50,31,.28);color:#FFB3A7}
.try-next{display:grid;gap:14px;margin-top:22px;padding:18px;border:1px dashed rgba(255,255,255,.32);border-radius:12px}
.try-next p{margin:0;color:rgba(255,255,255,.9)}
.try-fine{margin:14px 0 0;font-size:.8rem;color:rgba(255,255,255,.55)}

/* styled dropdown */
.dd{position:relative}
.dd-btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;color:var(--mute);font:400 16px/1.3 var(--body);text-align:left;cursor:pointer}
.dd.has-val .dd-btn{color:var(--ink)}
.dd-btn .i{width:18px;height:18px;transition:transform .2s var(--ease)}
.dd.is-open .dd-btn{border-color:var(--hv)}.dd.is-open .dd-btn .i{transform:rotate(180deg)}
.dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;margin:0;padding:6px;list-style:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 20px 44px -14px rgba(16,23,31,.45);max-height:264px;overflow:auto}
.dd.up .dd-list{top:auto;bottom:calc(100% + 6px)}
.dd-list li{padding:10px 12px;border-radius:5px;cursor:pointer;font-size:.95rem;outline:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.dd-list li.is-active,.dd-list li:focus{background:var(--hv-bg);color:var(--night)}
.dd-list li[aria-selected=true]{font-weight:700}
.dd-list li[aria-selected=true]:after{content:"";width:10px;height:6px;border-left:2.2px solid var(--hv);border-bottom:2.2px solid var(--hv);transform:rotate(-45deg) translateY(-2px);flex:none}
.try .dd-btn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.6)}
.try .dd.has-val .dd-btn{color:#fff}

/* what is free: a ledger with dotted leaders */
.free{background:var(--canvas)}
.free-grid{display:grid;gap:32px}
.free-copy p:last-child{color:var(--ink-2);margin:0}
.ledger{margin:0;display:grid}
.ledger>div{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.ledger>div:last-child{border-bottom:1px solid var(--line)}
.ledger dt{font-weight:700;color:var(--night);display:flex;align-items:baseline;gap:8px}
.ledger dt:after{content:"";flex:1;min-width:20px;border-bottom:2px dotted var(--sand);transform:translateY(-5px)}
.ledger dd{margin:0;grid-column:1;color:var(--ink-2);font-size:.9rem}
.ledger>div>b{grid-column:2;grid-row:1 / span 2;font-family:var(--mono);font-weight:700;font-size:1.2rem;color:var(--hv-d);white-space:nowrap;text-align:right;line-height:1.2;letter-spacing:-.02em}

/* managers: the light gray map inside the night band */
.mgr{background:var(--night);color:#fff}
.mgr .h2{color:#fff}
.mgr-grid{display:grid;gap:36px}
.mgr-list{list-style:none;margin:0 0 22px;display:grid}
.mgr-list li{display:grid;gap:3px;padding:12px 0;border-top:1px solid var(--line-d)}
.mgr-list b{font-size:1.1rem;font-weight:800;color:var(--amber-2);letter-spacing:-.01em}
.mgr-list span{color:rgba(255,255,255,.8);font-size:.93rem}
.optin{display:flex;gap:12px;margin:0;padding:16px;border:1px solid var(--line-d);border-radius:12px;background:var(--night-2)}
.optin .i{width:22px;height:22px;color:var(--amber-2);margin-top:2px}
.optin p{margin:0 0 10px;font-size:.92rem;color:rgba(255,255,255,.88);font-style:italic}
.optin footer{font-size:.78rem;color:rgba(255,255,255,.55)}.optin code{color:rgba(255,255,255,.75)}
.live{background:var(--card);color:var(--ink);border-radius:14px;overflow:hidden;border:1px solid var(--line-d);box-shadow:0 40px 80px -40px rgba(0,0,0,.8);align-self:start}
.live-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-weight:700;font-size:.92rem;border-bottom:1px solid var(--line)}
.live-h small{color:var(--mute);font-weight:500}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle;box-shadow:0 0 0 3px rgba(47,143,91,.2)}
.lmap{height:300px;background:#E9E9E7;position:relative;z-index:0}
.lmap .map-fail{padding:16px;font-size:.85rem;color:var(--mute)}
.credit{margin:0;font-size:.68rem;color:var(--mute);padding:6px 16px;background:var(--canvas);border-top:1px solid var(--line)}
.leaflet-container{font-family:var(--body)}
.pin{position:relative}
.pin i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink);font-style:normal;font-family:var(--mono);font-weight:700;font-size:.72rem;border:3px solid var(--hv);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pin.live:before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--hv);opacity:.7;animation:halo 2.2s ease-out infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.stoppin i{display:block;width:12px;height:12px;border-radius:50%;background:var(--hv);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.leaflet-tooltip.lt{background:var(--night);color:#fff;border:0;border-radius:6px;font-size:.74rem;font-weight:600;padding:4px 8px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.leaflet-tooltip.lt:before{display:none}
.leaflet-control-zoom a{color:var(--ink)}
.live-rows{display:grid}
.live-rows>div{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:.9rem;align-items:center}
.live-rows b{font-family:var(--mono);font-size:.95rem;font-weight:700;color:var(--hv-d)}
.live-rows em{font-style:normal;font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--ink-2)}
.live-rows .off{color:var(--mute)}.live-rows .off b,.live-rows .off em{color:var(--mute)}
.live-fine{margin:0;padding:8px 16px 12px;font-size:.74rem;color:var(--mute)}

/* what it is not */
.not{background:var(--canvas-2)}
.not-list{list-style:none;margin:32px 0 0;display:grid}
.not-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;border-top:1px solid var(--line);align-items:start}
.not-list li:last-child{border-bottom:1px solid var(--line)}
.not-list b{font-weight:700;color:var(--night);padding-top:2px}
.not-list li>span:last-child{grid-column:2;color:var(--ink-2);font-size:.92rem}
.st{display:inline-block;min-width:66px;text-align:center;padding:5px 8px;border-radius:4px;font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.st.coming{background:var(--amber);color:var(--night)}.st.later{background:var(--sand);color:var(--ink-2)}.st.now{background:var(--green-bg);color:var(--green)}

/* pricing */
.pricing{background:var(--card)}
.pr-grid{display:grid;gap:18px;margin:36px 0 30px;perspective:1200px}
.plan{background:var(--canvas);border:1px solid var(--line);border-radius:12px;padding:26px 22px;position:relative;display:grid;align-content:start;overflow:visible}
.plan.tilt:after{border-radius:12px;overflow:hidden}
.plan h3{font-family:var(--disp);font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--night);line-height:1}
.plan-who{color:var(--mute);margin:4px 0 14px;font-size:.92rem}
.price{display:grid;margin:0 0 18px;line-height:1}
.price small{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--hv-d)}
.price b{font-family:var(--mono);font-size:3.2rem;font-weight:700;color:var(--night);margin:6px 0;letter-spacing:-.04em}
.price span{color:var(--ink-2);font-size:.9rem}
.plan ul{list-style:none;margin:0 0 20px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.93rem}
.plan li{padding-left:20px;position:relative}.plan li:before{content:"";position:absolute;left:0;top:.5em;width:10px;height:6px;border-left:2.2px solid var(--green);border-bottom:2.2px solid var(--green);transform:rotate(-45deg)}
.plan .btn{justify-self:start;position:relative;z-index:1}
.plan-hv{background:var(--night);color:#fff;border-color:var(--night)}
.plan-hv h3,.plan-hv .price b{color:#fff}.plan-hv .plan-who,.plan-hv .price span{color:rgba(255,255,255,.7)}.plan-hv .price small{color:var(--amber-2)}
.plan-hv ul{border-color:var(--line-d)}.plan-hv li:before{border-color:var(--amber-2)}
.plan-hv.tilt:after{opacity:.25}
.plan-flag{position:absolute;top:-12px;left:20px;margin:0;background:var(--hv);color:#fff;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:4px;z-index:2}
.plan-slim{background:transparent}
.plan-slim .price b{font-size:2.4rem}

/* demo band */
.band{background:var(--steel);color:#fff}
.band .h2{color:#fff}
.band-in{display:grid;gap:24px}
.band p:last-child{color:rgba(255,255,255,.8);max-width:560px;margin:0}
.band-cta{display:grid;gap:14px;justify-items:start}
.linklike.light{color:#fff}

/* footer */
.foot{background:var(--night);color:rgba(255,255,255,.75);padding:48px 0 22px;font-size:.92rem}
.foot .wordmark{color:#fff;margin:0 0 10px}
.foot a,.foot .linklike{color:#fff}
.foot-grid{display:grid;gap:24px}.foot p{margin:0 0 8px}
.foot-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:32px;padding-top:16px;border-top:1px solid var(--line-d);font-size:.8rem;color:rgba(255,255,255,.5)}
.foot-fine p{margin:0}.foot-fine a{color:rgba(255,255,255,.75)}

/* dialogs: sign in and request a demo share one look */
.dlg{border:0;border-radius:14px;padding:28px 22px 22px;width:min(460px,calc(100% - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);box-shadow:0 40px 90px -20px rgba(0,0,0,.6);color:var(--ink);background:var(--canvas);position:relative;margin:auto;overflow:auto}
.dlg-wide{width:min(660px,calc(100% - 32px))}
.dlg::backdrop{background:rgba(16,23,31,.72)}
.dlg h2{font-family:var(--disp);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;margin:0 0 6px;color:var(--night);line-height:1}
.dlg-p{color:var(--ink-2);font-size:.95rem;margin:0 0 18px}
.dlg-x{position:absolute;right:10px;top:10px;margin:0;z-index:2}
.dlg-x button{background:none;border:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--mute);cursor:pointer}.dlg-x button:hover{background:var(--canvas-2);color:var(--night)}
.dlg form:not(.dlg-x){display:grid;gap:14px}
.f2{display:grid;gap:14px}
.dlg-actions{display:grid;gap:10px;justify-items:start}
.dlg-fine{margin:0;font-size:.8rem;color:var(--mute)}
.dlg-thanks{text-align:center;padding:12px 0 4px}
.dlg-thanks form{display:flex;justify-content:center}
.checkmark{width:64px;height:64px;margin:0 auto 12px;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.si-row{display:grid;gap:10px}
.si-matches{list-style:none;margin:14px 0 0;display:grid;gap:8px}
.si-matches a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;background:#fff}
.si-matches a small{color:var(--mute);font-weight:400;font-size:.8rem}
.si-matches a:hover{border-color:var(--hv)}
.fld.err input,.fld.err textarea,.fld.err .dd-btn{border-color:var(--red)}
.fld-err{display:none;color:var(--red);font-size:.8rem;font-weight:600}.fld.err .fld-err{display:block}
.form-err{color:var(--red);font-weight:600;font-size:.9rem;margin:0}.form-err:empty{display:none}
.try .form-err{color:#FFB3A7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opt{font-weight:400;color:var(--mute)}

/* ---------- wider screens ---------- */
@media (min-width:480px){
  .top .btn-hv{display:inline-flex}
}
@media (min-width:640px){
  .f2{grid-template-columns:1fr 1fr}
  .si-row{grid-template-columns:1fr auto}
  .buyers{grid-template-columns:repeat(3,1fr)}
  .dlg-actions{grid-template-columns:auto 1fr;align-items:center}
  .job-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:760px){
  .try-form{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:end}
  .try-go{width:auto}
  .try-row{grid-template-columns:48px 1fr auto}
  .try-tag{margin-top:0}
  .try-next{grid-template-columns:1fr auto;align-items:center}
}
@media (min-width:900px){
  section{padding:104px 0}
  .topnav{display:flex}
  .top-in{gap:28px}
  .hero{padding:calc(var(--top) + 56px) 0 84px}
  .hero-in{grid-template-columns:minmax(0,1.1fr) 340px;grid-template-areas:"copy visual" "steps visual";column-gap:72px;row-gap:28px;align-items:start}
  .hero-visual{width:340px;margin:0;align-self:center}
  .hero-steps{max-width:520px}
  .who-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
  .nums-row{grid-template-columns:repeat(4,1fr)}
  .job-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .route-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
  .route-svg text{display:block}.route-list{display:none}
  .finder-grid{grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start}
  .stack-wrap{position:sticky;top:calc(var(--top) + 20px)}
  .free-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
  .mgr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  .lmap{height:340px}
  .not-list{grid-template-columns:1fr 1fr;gap:0 48px}
  .not-list li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .pr-grid{grid-template-columns:1fr 1.1fr .85fr;align-items:start}
  .plan-hv{margin-top:-10px}
  .band-in{grid-template-columns:1fr auto;align-items:center;gap:48px}
  .foot-grid{grid-template-columns:1.3fr 1fr 1fr}
}
@media (min-width:1200px){
  .hero-in{grid-template-columns:minmax(0,1fr) 360px;column-gap:96px}
  .hero-visual{width:360px}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain:before{animation:none;opacity:.05}
  .caret{animation:none;opacity:0}
  .tick-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:8px}
  .tick-track>[aria-hidden]{display:none}.tick-track>[aria-hidden]+i{display:none}
  .px{transform:none!important}
  .tilt{transform:none!important}.tilt:after{display:none}
  .route-svg{--p:1}.route-svg .stop,.route-list li{opacity:1}
  .pin.live:before{animation:none;transform:none;opacity:.5}
}
html.reduce{scroll-behavior:auto}
html.reduce *,html.reduce *::before,html.reduce *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html.reduce .grain:before{animation:none;opacity:.05}
html.reduce .caret{animation:none;opacity:0}
html.reduce .tick-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:8px}
html.reduce .tick-track>[aria-hidden]{display:none}html.reduce .tick-track>[aria-hidden]+i{display:none}
html.reduce .px{transform:none!important}
html.reduce .tilt{transform:none!important}html.reduce .tilt:after{display:none}
html.reduce .route-svg{--p:1}html.reduce .route-svg .stop,html.reduce .route-list li{opacity:1}
html.reduce .pin.live:before{animation:none;transform:none;opacity:.5}
.wordmark .mark{flex:none;display:block}