/* ═══════════════════════════════════════════════════════════
   NudoIQ standalone pages — /fleet/, /welcome/, /uninstall/.
   Same Aura design system as the home and policy pages. These
   three keep their own markup, so this file styles all of their
   class names in one place. Edit here, not per page.
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#161616; --ink-2:#2A2A2A; --ink-3:#333232; --ink-4:#4D4D4D;
  --paper:#FFFFFF; --paper-2:#F9F9FA;
  --peri:#B1CBFF; --peri-2:#7CA8FF; --blue:#3366FF;
  --blue-deep:#2551B8; --navy:#1E306E; --peach:#FFBB8C;
  --g1:#BABABA; --g2:#A4A4A4; --g3:#888888;
  --line:rgba(22,22,22,.09); --line-2:rgba(22,22,22,.07);
  --rc:24px; --ri:16px; --rp:999px; --max:820px;
  --ff:"Inter Tight","Basel Grotesk",Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  /* aliases kept so inline style="color:var(--…)" attributes still
     inside the page markup resolve without editing that markup */
  --accent:#3366FF; --accent-press:#2551B8;
  --text-hi:#161616; --text-mid:#4D4D4D; --text-low:#888888;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{background:var(--paper);color:var(--ink-4);font-family:var(--ff);
  font-size:16.5px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}
img{max-width:100%;height:auto;display:block;border-radius:var(--ri);border:1px solid var(--line-2)}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}

/* ── header ────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.topin{display:flex;align-items:center;gap:20px;height:70px;padding-left:24px;padding-right:24px}
header{padding:26px 0 0}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
/* block-level, so a following .eyebrow starts its own line rather than
   riding up beside the wordmark */
.brandrow{display:flex;align-items:center;gap:10px;min-height:44px}
.wordmark{display:block;height:26px;width:auto}
.brandrow .wordmark{height:28px}

/* ── type ──────────────────────────────────────────────────── */
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.06;font-weight:500;
  letter-spacing:-.022em;color:var(--ink)}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.18;font-weight:500;
  letter-spacing:-.019em;color:var(--ink);margin-bottom:14px}
h3{font-size:19px;line-height:1.3;font-weight:500;letter-spacing:-.014em;color:var(--ink)}
p{margin-bottom:16px}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:600}
.lede{font-size:19px;line-height:1.55;color:var(--ink-4);max-width:64ch}
.sub{font-size:19px;color:var(--ink-4);margin-top:16px}
.mono{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px}
.eyebrow{display:inline-block;margin-top:22px;padding:6px 14px;border-radius:var(--rp);
  background:var(--paper-2);border:1px solid var(--line-2);font-size:12px;font-weight:500;
  color:var(--blue);letter-spacing:.12em;text-transform:uppercase}
.under{font-size:14px;color:var(--g3);margin-top:12px}
.disc{font-size:13px;color:var(--g3);margin-top:14px;line-height:1.6}
ul{margin:0 0 16px;padding-left:22px}
li{margin-bottom:9px}
figure{margin:24px 0 0}
figcaption{font-size:14px;color:var(--g3);margin-top:10px}

/* ── buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--rp);font-family:var(--ff);font-size:15px;font-weight:500;
  letter-spacing:-.01em;text-decoration:none;padding:15px 28px;border:1px solid transparent;
  cursor:pointer;transition:background .18s ease;white-space:nowrap;min-height:44px;
  background:var(--ink);color:#fff;margin-top:24px}
.btn:hover{background:#000}
.btn-go{background:var(--blue);color:#fff}
.btn-go:hover{background:var(--blue-deep)}

/* ── sections ──────────────────────────────────────────────── */
section{padding:44px 0;border-top:1px solid var(--line);margin-top:44px}
section:first-of-type{border-top:0;margin-top:0}

/* ── /welcome/ ─────────────────────────────────────────────── */
.hero{padding:60px 0 44px;border-top:0;margin-top:0;border-bottom:1px solid var(--line)}
.hero p.lede{font-size:20px;color:var(--ink-4);max-width:62ch;margin-top:18px}
.steps{padding:8px 0 56px;border-top:0;margin-top:0}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;
  border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{font-size:46px;font-weight:500;line-height:1;color:var(--peri-2);
  letter-spacing:-.03em}
.step h3{margin-bottom:8px}
.step p{color:var(--ink-4);margin-bottom:0;max-width:64ch}
.step .k{display:inline-block;background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:8px;padding:1px 8px;font-size:15px;color:var(--ink)}
.step .btn{margin-top:18px}
.help{background:var(--peri);border-radius:var(--rc);padding:36px 40px;
  border-top:0;margin:0 24px 56px}
.help h3{margin-bottom:10px}
.help p{color:var(--navy);margin-bottom:0;max-width:70ch}
.help a{color:var(--ink);font-weight:500}

/* ── /uninstall/ ───────────────────────────────────────────── */
.reasons{display:grid;gap:12px;margin:32px 0 0;padding:0;list-style:none}
.reason{display:block;width:100%;text-align:left;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--ri);padding:17px 20px;
  color:var(--ink-3);font-size:16px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease}
.reason:hover{border-color:var(--peri-2);background:#fff}
.panel{display:none;margin-top:32px;border-top:1px solid var(--line);padding-top:32px}
.panel.on{display:block}
.offer{background:var(--peri);border:0;border-radius:var(--rc);padding:30px 32px}
.offer h2,.offer h3{color:var(--ink)}
.offer ul{margin:0 0 20px;padding-left:20px;color:var(--navy)}
.offer li{margin-bottom:8px}
.offer li b{color:var(--ink)}
textarea{width:100%;min-height:120px;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--ri);padding:14px 16px;
  font-family:var(--ff);font-size:16px;color:var(--ink);line-height:1.55;resize:vertical}
textarea::placeholder{color:var(--g2)}
textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
.thanks{display:none}
.thanks.on{display:block}

/* ── /fleet/ ───────────────────────────────────────────────── */
.price{background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--rc);padding:30px 32px}
.price .amt{font-size:46px;font-weight:500;line-height:1;color:var(--ink);letter-spacing:-.03em}
.price .per{font-size:16.5px;color:var(--ink-4);font-weight:400}
.qa{border-top:1px solid var(--line);padding:22px 0;margin-top:0}
.qa h3{margin-bottom:8px}
.qa p{color:var(--ink-4);margin:0}

/* ── footer ────────────────────────────────────────────────── */
footer{padding:34px 0 60px;border-top:1px solid var(--line);margin-top:44px;
  font-size:14px;color:var(--g3);line-height:1.7}
footer .wrap>div:first-child{margin-bottom:6px}
footer a{color:var(--ink-4);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center;margin-right:22px}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tm{font-size:12.5px;color:var(--g2);margin-top:14px;line-height:1.6;max-width:78ch}
.flinks{gap:22px 26px}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:660px){
  :root{--rc:18px}
  body{font-size:16px}
  .wrap{padding:0 16px}
  .topin{height:60px;padding-left:16px;padding-right:16px}
  .wordmark{height:22px}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .step .n{font-size:34px}
  .help{padding:28px 22px;margin:0 16px 44px}
  .offer,.price{padding:24px 20px}
  section{padding:34px 0;margin-top:34px}
}

/* ── Welcome-page tutorial ───────────────────────────────────────────────
   Caleb, 2026-09-16: "can we update the welcome page, make it feel like our
   website include the tutorial video." The video is the first thing after the
   headline because it is the thing a new carrier most needs and least expects
   to be given. It does NOT autoplay: it is four minutes of narration, and a
   page that starts talking at somebody who just installed software is a page
   they close. */
.tut{padding:4px 0 44px}
.tut .frame{position:relative;border-radius:var(--rc);overflow:hidden;
  border:1px solid var(--line);background:var(--ink);
  box-shadow:0 18px 44px rgba(22,22,22,.10)}
.tut video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);
  border:0;border-radius:0}
.tut .cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-top:14px}
.tut .cap .t{font-weight:500}
.tut .cap .m{font-size:14px;color:var(--g3)}
@media (max-width:640px){ .tut{padding-bottom:32px} }

/* The moment the install worked. A carrier who just added an extension to his
   browser has taken a small risk on a stranger's software; the first thing the
   page owes him is confirmation that it landed. */
.done{display:inline-flex;align-items:center;gap:10px;margin:0 0 6px;
  padding:7px 16px 7px 12px;border-radius:var(--rp);
  background:var(--peri);color:var(--navy);
  font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.done .tick{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:11px;line-height:1}