/* LapDelta Dash site. Brand v2 (2026-10-12): white-first, teal, Sora + Inter. Tokens mirror brand/tokens.css. */
@font-face{font-family:"Sora";font-weight:600;font-display:swap;src:url(../fonts/Sora-600.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url(../fonts/Sora-700.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:800;font-display:swap;src:url(../fonts/Sora-800.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(../fonts/Inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url(../fonts/Inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(../fonts/Inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(../fonts/Inter-700.woff2) format("woff2")}
/* the dash's own screen font, used only inside the screen illustrations (.dash) */
@font-face{font-family:"Dash Screen";font-weight:600;font-display:swap;src:url(../fonts/BarlowCondensed-600.woff2) format("woff2")}
@font-face{font-family:"Dash Screen";font-weight:700;font-display:swap;src:url(../fonts/BarlowCondensed-700.woff2) format("woff2")}
:root{
  --bg:#FFFFFF; --soft:#F3F6F8; --ink:#0E1A2B; --ink-2:#334155; --muted:#5B6676; --line:#DDE4EA;
  --teal:#00A0A8; --teal-ink:#00747A; --teal-soft:#E3F4F5; --coral:#F83848;
  --ahead:#12A150; --ahead-ink:#0F7A3D; --behind:#E8770A; --behind-ink:#B45309;
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1140px; --r:16px;
  --shadow:0 1px 2px rgba(14,26,43,.05),0 8px 24px rgba(14,26,43,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 17px/1.65 var(--font-body);font-feature-settings:"cv11"}
img,svg{max-width:100%;display:block}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6vw,4.3rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1.2 var(--font-body);color:var(--teal-ink);margin:0 0 1rem}
.eyebrow::before{content:"";width:14px;height:12px;flex:none;background:var(--teal);clip-path:polygon(50% 0,100% 100%,0 100%)}
.lead{font-size:1.2rem;color:var(--ink-2);max-width:38em}
section{padding:88px 0}
section.alt{background:var(--soft)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99;border-radius:8px}
/* nav */
header.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:68px}
.nav .logo img{height:30px;width:auto}
.nav nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav nav a{text-decoration:none;font:500 1rem var(--font-body);color:var(--ink-2)}
.nav nav a:hover{color:var(--teal-ink)}
.btn{display:inline-block;background:var(--teal-ink);color:#fff!important;font:600 1rem/1 var(--font-body);padding:.95em 1.5em;border-radius:999px;text-decoration:none;border:1.5px solid var(--teal-ink);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:#005F64;border-color:#005F64;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}
.btn.ghost:hover{border-color:var(--teal-ink);background:var(--teal-soft)}
.nav .btn{padding:.7em 1.2em;font-size:.95rem;white-space:nowrap}
@media(max-width:420px){.nav .logo img{height:24px}.nav .btn{padding:.6em 1em;font-size:.9rem}}
@media(max-width:780px){.nav nav a:not(.btn){display:none}}
/* hero */
.hero{padding:76px 0 92px}
.hero .grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem)}
.hero-dash{margin:0}
.hero-dash figcaption{margin-top:16px;font-size:.95rem;color:var(--muted);max-width:34em}
/* narrow: the screen goes straight under the headline, before the paragraph */
@media(max-width:940px){.hero{padding-top:48px}.hero .grid{display:flex;flex-direction:column;align-items:stretch;gap:0}.hero .grid>div{display:contents}
  .hero .eyebrow{order:1}.hero h1{order:2}.hero-dash{order:3;max-width:620px;margin:10px 0 30px}.hero .lead{order:4}.hero .cta{order:5;margin-top:12px}}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* lap compare panel (hero) */
.compare{margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.compare .head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;padding:20px 24px 4px}
.compare .head h2{font-size:1.15rem;margin:0}
.compare .head .meta{color:var(--muted);font-size:.95rem}
.compare .head .total{margin-left:auto;font:700 1.05rem var(--font-body);font-variant-numeric:tabular-nums}
.compare .body{display:grid;grid-template-columns:1.55fr 1fr;gap:0;align-items:center}
.compare .chart{padding:6px 10px 10px 6px;min-width:0}
.compare .notes{border-left:1px solid var(--line);padding:18px 22px;background:linear-gradient(180deg,#fff,#FAFCFD)}
.compare .notes h3{display:flex;align-items:center;gap:8px;font-size:1rem;margin:0 0 12px}
.compare .notes h3 img{width:22px;height:auto}
.compare .notes ol{list-style:none;margin:0;padding:0}
.compare .notes li{padding:12px 0;border-top:1px solid var(--line);font-size:.97rem;line-height:1.5}
.compare .notes li:first-child{border-top:0;padding-top:0}
.compare .notes li strong{display:flex;justify-content:space-between;gap:12px;color:var(--ink);font-weight:600;margin-bottom:2px}
.compare .notes li b{font-weight:700;font-variant-numeric:tabular-nums}
.compare .notes .sum{margin-top:6px;padding:12px 14px;background:var(--teal-soft);border-radius:12px;color:var(--ink);font-size:.95rem}
.compare .foot{padding:10px 24px 14px;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.d-behind{color:var(--behind-ink)}.d-ahead{color:var(--ahead-ink)}
@media(max-width:900px){.compare .body{grid-template-columns:1fr}.compare .notes{border-left:0;border-top:1px solid var(--line)}}
/* the trace svg */
.trace{width:100%;height:auto}
.trace .g{stroke:#EEF2F5;stroke-width:1}
.trace .sec{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}
.trace .zero{stroke:#AEB8C2;stroke-width:1.5}
.trace .ahead{fill:rgba(18,161,80,.16)}
.trace .behind{fill:rgba(232,119,10,.18)}
.trace .trace-line{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.trace .dot{fill:var(--ink)}
.trace .lead{stroke:#AEB8C2;stroke-width:1.2}
.trace .t{font:500 18px var(--font-body);fill:var(--muted);font-variant-numeric:tabular-nums}
.trace .t.k{font-size:15px}
.trace .t.r{text-anchor:end}.trace .t.z{fill:var(--ink-2)}
.trace .t.s{font-weight:700;fill:var(--ink-2)}
.trace .t.a{font-weight:600;fill:var(--ink)}
.trace .t.end{font-weight:700;fill:var(--behind-ink);font-size:20px}
.trace .t.ax{font-size:15px}
/* on a phone the chart is ~340 px wide: fewer, bigger labels (the notes carry the numbers) */
@media(max-width:600px){.trace .t{font-size:30px}.trace .t.end{font-size:32px}.trace .t.k,.trace .t.ax,.trace .t.r:not(.z){display:none}.trace .trace-line{stroke-width:4}}
/* dash screen illustrations: the real screen, so the screen's own font and colours */
.dash{container-type:inline-size;aspect-ratio:4/3;background:#000;border-radius:16px;border:9px solid #1E242C;box-shadow:0 1px 0 #3A424C inset,0 18px 40px rgba(14,26,43,.22);position:relative;overflow:hidden;font-family:"Dash Screen","Arial Narrow",sans-serif;color:#fff;width:100%}
.dash .bar{position:absolute;left:3.2cqw;right:3.2cqw;top:3.6cqw;height:6cqw;display:grid;grid-template-columns:repeat(24,1fr);gap:.7cqw}
.dash .bar i{background:#1A1A1A;border-radius:.4cqw}
.dash .bar i.g{background:#2FD27A}.dash .bar i.a{background:#FFB000}.dash .bar i.r{background:#FF3B30}
.dash .hero-n{position:absolute;left:0;right:0;text-align:center;font-weight:700;line-height:.8;font-variant-numeric:tabular-nums}
.dash .lab{position:absolute;font-weight:600;letter-spacing:.1em;color:#808080;text-transform:uppercase}
.dash .val{position:absolute;font-weight:700;font-variant-numeric:tabular-nums;line-height:.85}
.dash .rule{position:absolute;left:3.2cqw;right:3.2cqw;height:1px;background:#222}
/* positions in cqw of the screen width: the 600 x 450 screen is 100 x 75 cqw (1 cqw = 6 screen px) */
.d-rpm .hero-n{top:12cqw;font-size:29cqw}.d-rpm .lab.rpm{left:0;right:0;text-align:center;top:37.5cqw;font-size:4.6cqw}
.d-rpm .rule{top:45cqw}.d-rpm .lab.wt{left:5cqw;top:48cqw;font-size:4cqw}.d-rpm .val.wt{left:5cqw;top:54cqw;font-size:17cqw}
.d-rpm .val.wt span:not(.n){font-size:7cqw;color:#808080;margin-left:1cqw}
.d-lap .lab.lp{left:5cqw;top:11cqw;font-size:4.6cqw;color:#fff}.d-lap .lab.rp{right:5cqw;top:11cqw;font-size:4.6cqw;color:#808080}
.d-lap .hero-n{top:20cqw;font-size:21cqw;padding-left:12cqw}
.d-lap .gear{position:absolute;left:5cqw;top:19cqw;font-size:22cqw;font-weight:700;color:#fff;line-height:.8}
.d-lap .rule{top:44cqw}
.d-lap .c1{left:5cqw}.d-lap .c2{left:49cqw}.d-lap .c3{left:70cqw}
.d-lap .lab.c{top:47cqw;font-size:3.8cqw}.d-lap .val.c{top:53cqw;font-size:11cqw}
.dash .good{color:#2FD27A}.dash .bad{color:#FF9F1A}.dash .amber{color:#FFB000}
.d-imu .hero-n .unit{font-size:12cqw;margin-left:.5cqw;vertical-align:top;position:relative;top:3cqw}
.d-imu .lab.l1{left:0;right:0;text-align:center;top:11cqw;font-size:4.6cqw}
.d-imu .hero-n{top:17cqw;font-size:29cqw}.d-imu .rule{top:46cqw}
.d-imu .lab.c{top:49cqw;font-size:3.8cqw}.d-imu .val.c{top:55cqw;font-size:13cqw}
.d-imu .c1{left:5cqw}.d-imu .c2{left:54cqw}
.dash .bar{top:2cqw}
/* loop: ride, upload, improve */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;padding:0;list-style:none;counter-reset:s}
.loop li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.loop li .k{display:inline-flex;align-items:center;gap:10px;font:600 .9rem var(--font-body);color:var(--teal-ink);margin-bottom:10px}
.loop li .k::before{content:counter(s);width:28px;height:28px;border-radius:50%;background:var(--teal-soft);color:var(--teal-ink);font:700 .95rem var(--font-display);display:grid;place-items:center}
.loop li p{margin:0}
@media(max-width:900px){.loop{grid-template-columns:1fr}}
/* cards and grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p{margin:0;font-size:1rem}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;margin-bottom:16px;color:var(--teal-ink)}
.card .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* screens */
.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.screens.two-up{grid-template-columns:repeat(2,1fr);gap:28px}
.screens figure{margin:0}
.screens figcaption{margin-top:14px;font-size:.95rem;color:var(--muted)}
@media(max-width:900px){.screens,.screens.two-up{grid-template-columns:1fr;max-width:560px}}
/* tables */
table.spec{width:100%;border-collapse:collapse;margin-top:20px;font-size:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.spec th,table.spec td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec th{width:34%;color:var(--ink);font-weight:600}
/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px;margin-bottom:12px}
summary{cursor:pointer;padding:18px 0;font:600 1.08rem var(--font-display);color:var(--ink);list-style:none;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--teal-ink);font:500 1.4rem/1 var(--font-body)}
details[open] summary::after{content:"\2212"}
/* form */
form.interest{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;margin-top:28px;box-shadow:var(--shadow)}
.field{margin-bottom:20px}
label,.legend{display:block;font:600 .98rem var(--font-body);color:var(--ink);margin-bottom:6px}
label small,.legend small{font:400 .9rem var(--font-body);color:var(--muted);margin-left:4px}
input[type=text],input[type=email],select,textarea{width:100%;background:#fff;border:1px solid #C9D3DC;border-radius:10px;color:var(--ink);font:400 1rem var(--font-body);padding:.8em 1em}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(0,160,168,.28);outline-offset:0;border-color:var(--teal-ink)}
textarea{min-height:110px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:620px){.two{grid-template-columns:1fr}}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
@media(max-width:620px){.checks{grid-template-columns:1fr}}
.checks label,.consent label{font:400 1rem var(--font-body);color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;margin:0}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--teal-ink);flex:none;margin-top:3px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.msg{margin-top:18px;padding:14px 16px;border-radius:10px;display:none;font-weight:600}
.msg.ok{display:block;background:rgba(18,161,80,.10);border:1px solid rgba(18,161,80,.4);color:var(--ahead-ink)}
.msg.err{display:block;background:#FDF0EE;border:1px solid #F1B7AE;color:#A3271A}
.fine{font-size:.9rem;color:var(--muted)}
/* footer */
footer{background:var(--soft);border-top:1px solid var(--line);padding:44px 0;font-size:.95rem;color:var(--muted)}
footer .wrap{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer img{height:28px;width:auto;margin-bottom:12px}
footer .cols{margin-left:auto;display:flex;gap:40px;flex-wrap:wrap}
footer a{color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
/* size: to-scale drawing */
.size,.cams,.ses{align-items:center;gap:48px}
.scale{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 14px;box-shadow:var(--shadow)}
.scale svg{width:100%;height:auto}
.scale .card-ol{fill:none;stroke:#9AA6B2;stroke-width:2;stroke-dasharray:7 6}
.scale .body{fill:#1E242C}
.scale .screen{fill:#000}
.scale .glass{fill:#3A424C}
.scale .bars .lit{fill:#2FD27A}.scale .bars .amb{fill:#FFB000}.scale .bars .off{fill:#1A1A1A}
.scale .scr{font:700 46px "Dash Screen","Arial Narrow",sans-serif;fill:#fff}
.scale .dim{font:500 15px var(--font-body);fill:var(--muted)}
.scale .dl{stroke:#AEB8C2;stroke-width:1.5}
.scale figcaption,.timeline figcaption{margin-top:8px;font-size:.92rem;color:var(--muted)}
/* cameras */
ul.ticks{list-style:none;padding:0;margin:24px 0 0}
ul.ticks li{position:relative;padding-left:30px;margin:0 0 14px}
ul.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%2300747A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
ul.ticks strong{color:var(--ink);font-weight:600}
.works{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.works div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.93rem;background:#fff}
.works span{display:block;font:700 1.05rem var(--font-display);color:var(--ink);margin-bottom:2px}
@media(max-width:520px){.works{grid-template-columns:1fr}}
.timeline{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.timeline svg{width:100%;height:auto}
.timeline .lbl{font:600 16px var(--font-body);fill:var(--ink)}
.timeline .sess{fill:var(--teal-ink)}
.timeline .rec{fill:#FDECEC;stroke:#E5484D;stroke-width:1.5}
.timeline .dot{fill:#E5484D}
.timeline .in{font:600 15px var(--font-body);fill:#fff}
.timeline .rec + .dot + .in{fill:#A3271A}
.timeline .ticks line{stroke:var(--teal);stroke-width:2;stroke-linecap:round}
.timeline .mk{stroke:#AEB8C2;stroke-width:1.5;stroke-dasharray:4 5}
.timeline .ev{font:600 15px var(--font-body);fill:var(--ink)}
.timeline .sm{font:400 13.5px var(--font-body);fill:var(--muted)}
/* session summary screen (positions in cqw: the screen is 100 x 75) */
.soon{display:inline-block;margin-left:6px;font:600 .78rem/1.5 var(--font-body);color:var(--behind-ink);background:rgba(232,119,10,.12);border-radius:99px;padding:1px 9px}
.d-ses .lab.hd{left:5cqw;top:4.5cqw;font-size:4.6cqw;color:#fff}.d-ses .lab.hr{right:5cqw;top:4.5cqw;font-size:4.6cqw}
.d-ses .lab.k1{left:5cqw;top:14cqw;font-size:3.6cqw}.d-ses .val.v1{left:5cqw;top:19cqw;font-size:11cqw}
.d-ses .lab.k2{left:5cqw;top:31cqw;font-size:3.6cqw}.d-ses .val.v2{left:5cqw;top:36cqw;font-size:11cqw}
.d-ses .laps{position:absolute;left:47cqw;right:4cqw;top:0;bottom:0}
.d-ses .row{position:absolute;left:0;right:0;display:flex;align-items:center;gap:1.6cqw;font-weight:700;font-size:3.5cqw;line-height:1;font-variant-numeric:tabular-nums}
.d-ses .row .ln{width:2.6cqw;color:#808080;text-align:right}
.d-ses .row .lt{width:13cqw}
.d-ses .row .lb{height:2.4cqw;background:#FF9F1A;border-radius:.4cqw;opacity:.85}
.d-ses .row.best .lt,.d-ses .row .bt{color:#2FD27A}
.d-ses .row .bt{font-size:2.8cqw;letter-spacing:.1em}
.d-ses .rule{top:51cqw}
.d-ses .c1{left:5cqw}.d-ses .c2{left:37cqw}.d-ses .c3{left:69cqw}
.d-ses .lab.c{top:54.5cqw;font-size:3.4cqw}.d-ses .val.c{top:60cqw;font-size:10cqw}
@media(max-width:900px){.size,.cams,.ses{gap:32px}}
@media(max-width:600px){.timeline .lbl,.timeline .ev{font-size:21px}.timeline .in{font-size:19px}.timeline .sm{font-size:18px}.scale .dim{font-size:20px}}