/* How it works: the road at night, the same-button demo, setup and integrations. */

/* ---------- the road ---------- */
.road-sec{position:relative;background:linear-gradient(180deg,var(--night) 0,#081428 30%,#081428 85%,var(--night))}
.road-intro{padding-bottom:clamp(16px,3vw,40px)}
.road-grid{--road:clamp(92px,8.5vw,132px);--gap:clamp(28px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr) var(--road) minmax(0,1.3fr);column-gap:var(--gap);padding:0 var(--g) clamp(72px,10vw,140px)}
.clock{position:sticky;top:calc(50svh - 110px);align-self:start;display:grid;justify-items:end;text-align:right;margin-top:24svh}
.clock-day{font-weight:700;font-size:18px;color:var(--soft);min-height:27px}
.clock-time{font-weight:900;font-variation-settings:var(--narrow);font-size:clamp(76px,9vw,156px);line-height:.85;letter-spacing:-.02em;color:#fff;text-shadow:0 0 28px rgba(255,236,196,.35)}
.clock-time small{font-size:.32em;margin-left:.12em;letter-spacing:0;color:var(--silver)}
.clock-gap{margin-top:14px;font-weight:800;font-size:17px;color:var(--fluoro)}
.clock.tick .clock-time{animation:tick .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tick{from{transform:translateY(.12em);opacity:.2}to{transform:none;opacity:1}}
.road{position:relative;border-radius:8px;
  background:
    linear-gradient(90deg,transparent 7px,rgba(225,232,242,.5) 7px 10px,transparent 10px calc(100% - 10px),rgba(225,232,242,.5) calc(100% - 10px) calc(100% - 7px),transparent calc(100% - 7px)),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/6px 6px,
    #17253F}
.road::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;margin-left:-2.5px;background:repeating-linear-gradient(180deg,rgba(236,241,248,.62) 0 38px,transparent 38px 80px)}
.car{position:sticky;top:calc(50svh - 70px);display:block;height:0;z-index:2}
.car i{position:absolute;left:50%;top:0;width:44%;max-width:52px;aspect-ratio:5/9;transform:translateX(-50%);border-radius:12px 12px 9px 9px;background:linear-gradient(180deg,#2a3a5c,#1b2946);box-shadow:inset 0 0 0 2px #3a4c72}
.car i::before{content:"";position:absolute;left:14%;right:14%;top:52%;height:20%;border-radius:4px;background:#0c1528}
.car::after{content:"";position:absolute;left:50%;top:calc(var(--road) * .78);width:calc(var(--road) * 2.2);height:min(42svh,380px);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 34% 100% at 50% 0,rgba(255,241,210,.62),rgba(255,241,210,.16) 55%,rgba(255,241,210,0) 80%);
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.stops{list-style:none;padding:24svh 0 18svh}
.stop{position:relative;max-width:46ch}
.stop+.stop{margin-top:clamp(140px,26svh,260px)}
.eye{position:absolute;left:calc(-1 * var(--gap) - var(--road) / 2 - 11px);top:.45em;width:22px;height:10px;border-radius:3px;background:#FFD27A;box-shadow:0 0 18px 6px rgba(255,190,80,.7);transition:background-color .35s,box-shadow .35s}
.when{font-weight:800;font-size:15px;color:var(--fluoro)}
.stop h3{font-weight:900;font-variation-settings:"wdth" 72;font-size:clamp(32px,3.4vw,56px);line-height:.95;letter-spacing:-.015em;margin:8px 0 14px;color:#fff;transition:color .35s}
.stop p{font-size:18px;color:var(--soft);transition:color .35s}
.stop p+p{margin-top:10px}
.stop .aside{font-size:16px;font-weight:600}
.stop .aside a{color:#fff;text-underline-offset:4px}
.stop .sms{margin-top:18px;background:var(--white);color:var(--ink);border-radius:20px 20px 20px 4px;padding:13px 15px;font-size:16px;line-height:1.4;max-width:32ch;box-shadow:0 0 30px -6px rgba(255,236,196,.35)}
.stop .sms+.aside{margin-top:16px}
.js .stop:not(.on) h3{color:var(--silver-dim)}
.js .stop:not(.on) p{color:var(--silver-dim)}
.js .eye,.reye{--l:0;background:color-mix(in srgb,#FFD27A calc(var(--l) * 100%),#2b3b5c);box-shadow:0 0 calc(var(--l) * 20px) calc(var(--l) * 6px) rgba(255,190,80,calc(var(--l) * .8));transition:none}
.reye{position:absolute;left:50%;width:12px;height:6px;margin:-3px 0 0 -6px;border-radius:2px;z-index:1}
.js .stop:not(.on) .sms,.js .stop:not(.on) .dash{opacity:.72}
.stop .sms,.stop .dash{transition:opacity .35s}
.stop-end h3{font-size:clamp(44px,5vw,84px)}

/* dashboard card */
.dash{margin-top:20px;max-width:400px;border-radius:16px;background:var(--white);color:var(--ink);padding:18px 18px 16px;box-shadow:0 0 30px -6px rgba(255,236,196,.35)}
.dash p{color:var(--ink);font-size:16px}
.stop .dash p{color:var(--ink)}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;font-size:14px!important}
.dash-stars{color:#A35F00;letter-spacing:1px}
.dash-rev{margin-top:10px!important;font-size:17px!important;line-height:1.4}
.dash-rev cite{display:block;font-style:normal;font-size:14px;font-weight:700;color:var(--muted);margin-top:4px}
.dash-lbl{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--rule);font-size:13px!important;font-weight:800;color:var(--muted)!important}
.dash-reply{margin-top:4px!important;line-height:1.4}
.dash-btns{display:flex;gap:8px;margin-top:14px!important}
.dash-btns span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;border:2px solid var(--ink);font-weight:800;font-size:14px}
.dash-btns span:first-child{background:var(--ink);color:#fff}

/* ---------- the same-button demo ---------- */
.same{overflow:hidden}
.same-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(40px,6vw,96px);align-items:center}
.same .copy p{font-size:18px;margin-top:20px;max-width:46ch}
.same .more{font-weight:700}
.same .more a{text-underline-offset:5px;text-decoration-thickness:2px}
.dphone{position:relative;background:var(--white);border:4px solid var(--ink);border-radius:36px;padding:30px 24px 28px;min-height:470px}
.d-biz{font-size:14px;font-weight:700;color:#56627a}
.d-h{font-size:28px;font-weight:800;font-variation-settings:"wdth" 85;line-height:1.1;margin:6px 0 18px}
.d-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.d-choice label{position:relative;display:block}
.d-choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.d-choice span{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;border:2px solid #C5CCD8;font-weight:800;font-size:16px;color:#56627a;transition:background-color .15s,color .15s,border-color .15s}
.d-choice input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.d-choice input:focus-visible+span{outline:3px solid var(--fluoro);outline-offset:2px}
.d-gbtn{margin-top:38px;display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:16px;font-weight:800;font-size:17px;color:var(--ink);background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 2px,transparent 2px 6px),linear-gradient(180deg,#DCE2EA,#AEB9C9);box-shadow:inset 0 0 0 2px var(--ink)}
.d-note-link{margin-top:14px;font-size:14px;color:#56627a;text-decoration:underline;text-underline-offset:3px}
.d-note{margin-top:14px}
.d-note-h{font-size:14px;color:#56627a}
.d-note-box{margin-top:8px;border:2px solid #C5CCD8;border-radius:12px;padding:12px;font-size:15px;color:var(--ink);min-height:76px}
.dphone:has(input[value="not"]:checked) .d-note-link{display:none}
.d-measure{position:absolute;left:-22px;right:-22px;top:var(--gy,180px);border-top:2px dashed var(--ink);pointer-events:none}
.d-measure b{position:absolute;right:30px;top:-29px;font-size:13px;font-weight:800;background:var(--yellow);padding:2px 6px}
.d-cap{margin-top:18px;font-weight:700;font-size:16px;min-height:3em}

/* ---------- setup ---------- */
.setup{background:var(--night)}
.setup-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(40px,5vw,72px);counter-reset:s}
.setup-steps li{counter-increment:s;position:relative;padding-top:34px}
.setup-steps li::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-radius:2px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 2px,transparent 2px 6px),linear-gradient(180deg,#DCE2EA,#AEB9C9)}
.setup-steps li::before{content:counter(s);display:block;font-weight:900;font-variation-settings:var(--wide);font-size:clamp(48px,5vw,80px);line-height:.8;letter-spacing:-.03em;color:var(--silver);margin-bottom:18px}
.setup-steps h3{font-size:clamp(22px,1.8vw,28px);font-weight:800;font-variation-settings:"wdth" 90;line-height:1.15}
.setup-steps p{margin-top:10px;color:var(--soft);font-size:17px;max-width:36ch}

/* ---------- integrations on the vest ---------- */
.works{position:relative;overflow:hidden}
.works-head,.works-foot{position:relative;z-index:2}
.works-head{padding-bottom:clamp(32px,4vw,56px)}
.works-head .big{max-width:14ch}
.works-tapes{list-style:none;display:grid;gap:clamp(14px,2vw,24px);position:relative;z-index:2}
.works-tapes li{height:clamp(78px,10vw,140px);display:flex;align-items:center;padding:0 var(--g);box-shadow:0 2px 0 rgba(10,24,48,.18),0 -2px 0 rgba(255,255,255,.2)}
.works-tapes span{position:relative;z-index:1;font-weight:900;font-variation-settings:var(--wide);font-size:clamp(40px,7.2vw,112px);letter-spacing:-.025em;line-height:1;color:var(--ink)}
.works-tapes li:nth-child(even){justify-content:flex-end}
.works-foot{padding-top:clamp(32px,4vw,56px)}
.works-foot p{font-size:clamp(17px,1.4vw,20px);font-weight:600;max-width:54ch}
.works-foot a{text-underline-offset:4px;text-decoration-thickness:2px}
.works .beam{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle min(42vmax,560px) at var(--bx,50%) var(--by,50%),rgba(255,246,226,.42),rgba(255,246,226,.12) 45%,rgba(255,246,226,0) 70%)}

@media (max-width:960px){
  .same-grid{grid-template-columns:minmax(0,1fr)}
  .demo{max-width:440px}
  .setup-steps{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:820px){
  .road-grid{--road:46px;--gap:22px;grid-template-columns:var(--road) minmax(0,1fr)}
  .clock{grid-column:1/-1;position:sticky;top:0;z-index:5;margin:0 calc(var(--g) * -1);padding:12px var(--g);display:flex;align-items:baseline;justify-content:flex-start;gap:14px;flex-wrap:wrap;text-align:left;background:rgba(8,20,40,.94);border-bottom:1px solid var(--line-dark)}
  .clock-day{font-size:15px;min-height:0;order:1}
  .clock-time{font-size:44px;order:0}
  .clock-gap{margin-top:0;font-size:15px;order:2}
  .car::after{width:150px}
  .stops{padding:14svh 0 12svh}
  .stop h3{font-size:clamp(30px,8vw,40px)}
  .stop p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .clock.tick .clock-time{animation:none}
  .works .beam{display:none}
}