/* ==========================================================================
   Mile Maters.io marketing site
   Palette is derived from the Mile Maters.io logo mark (navy + amber).
   To move the site to the green identity, change --accent / --accent-soft
   and --bg-base below. Nothing else is hardcoded to a colour.
   ========================================================================== */

:root {
  /* Surfaces: light, cool off-white so the navy logo reads clearly */
  --bg-base:        #f7f9fc;
  --bg-raise:       #ffffff;
  --bg-raise-2:     #eef3f9;
  --bg-inset:       #e8eef6;

  /* Single accent, taken from the logo's gauge needle */
  --accent:         #d99200;
  --accent-soft:    #f5b81f;
  --accent-ink:     #221703;   /* text that sits on the accent */

  /* Logo's secondary blue. Atmosphere only, never a second accent. */
  --brand-blue:     #1b6ca8;
  --brand-navy:     #123a63;

  /* Type */
  --ink:            #12355b;
  --ink-2:          #3d5873;
  --steel:          #5f6f80;
  --steel-dim:      #8794a2;

  --line:           rgba(18, 53, 91, 0.12);
  --line-strong:    rgba(18, 53, 91, 0.22);

  /* One radius system: 14px containers, pill interactive, 0 for hairlines */
  --r:              14px;
  --r-sm:           10px;
  --r-pill:         999px;

  --shell:          1240px;
  --gut:            clamp(1.25rem, 4vw, 3rem);

  --ease:           cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------- helpers -- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 1rem; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}

.lede {
  color: var(--ink-2);
  font-size: clamp(1.03rem, 1.5vw, 1.16rem);
  max-width: 58ch;
}

.muted { color: var(--steel); }

/* Recurring motif: the dashed centre line from the logo's road */
.roadline {
  height: 2px;
  border: 0;
  margin: 0;
  background-image: linear-gradient(90deg, var(--line-strong) 0 34px, transparent 34px 60px);
  background-size: 60px 2px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Recurring motif: the gauge sweep, used as an ambient section glow */
.glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.glow::before {
  content: "";
  position: absolute;
  width: 900px;
  aspect-ratio: 1;
  top: -46%;
  right: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.13), transparent 62%);
}
.glow::after {
  content: "";
  position: absolute;
  width: 760px;
  aspect-ratio: 1;
  bottom: -52%;
  left: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 108, 168, 0.20), transparent 64%);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  white-space: nowrap;
  padding: 0.92rem 1.7rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);      /* 4.5:1+ against amber */
  box-shadow: 0 10px 30px -12px rgba(245, 166, 35, 0.6);
}
.btn--primary:hover { background: var(--accent-soft); }

.btn--ghost {
  background: rgba(18, 53, 91, 0.04);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--steel); background: rgba(18, 53, 91, 0.08); }

.btn:active { transform: translateY(1px) scale(0.99); }

/* App Store badge, drawn as a button because the app is not live yet */
.storebtn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.5rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(245, 166, 35, 0.6);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.storebtn:hover { background: var(--accent-soft); }
.storebtn:active { transform: translateY(1px) scale(0.99); }
.storebtn svg { width: 26px; height: 26px; flex: none; }
.storebtn b {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.storebtn span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  text-decoration: none;
  flex: none;
}
.brand img { width: 42px; height: auto; }
.brand b {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  margin-left: auto;
}
.nav__links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--steel);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }

.nav .btn { padding: 0.62rem 1.25rem; font-size: 0.87rem; }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
}
.burger svg { width: 20px; height: 20px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

.drawer {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
}
.drawer[data-open="true"] { display: block; }
.drawer ul { display: grid; gap: 0.25rem; padding: 1rem 0 1.5rem; }
.drawer a {
  display: block;
  padding: 0.8rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer .btn { width: 100%; margin-top: 1rem; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav > .shell > .nav__in > .btn { display: none; }
  .burger { display: inline-flex; }
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.25rem);
  border-bottom: 1px solid var(--line);
}
.hero__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;   /* asymmetric split */
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 3.9vw, 3.05rem);
  max-width: 21ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .lede { margin-top: 1.15rem; max-width: 46ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.hero__logo { width: clamp(72px, 7vw, 92px); margin-bottom: 1.15rem; }

/* Page heads on interior pages */
.pagehead {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.pagehead__in { position: relative; z-index: 1; max-width: 62ch; }
.pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.pagehead .lede { margin-top: 1.15rem; }

/* ------------------------------------------------------- phone mockups -- */
/*  PLACEHOLDER SLOTS. Replace the .shot block inside each .phone with
    <img src="assets/img/screen-<name>.png" alt="..."> at 1290x2796 (iPhone
    6.7in) or any 9:19.5 image. Delete the .shot markup when you do.        */

.phone {
  position: relative;
  width: 100%;
  max-width: 268px;
  margin-inline: auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(160deg, #2b3644, #131a24 46%, #232d3a);
  box-shadow: 0 44px 90px -34px rgba(18, 53, 91, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.phone::before {                      /* speaker island */
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 22px;
  border-radius: var(--r-pill);
  background: #05080c;
  z-index: 3;
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--bg-inset);
}
.phone__screen > img { width: 100%; height: 100%; object-fit: cover; }

/* the visible "swap me" placeholder */
.shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(138,145,153,0.07) 0 12px,
      transparent 12px 24px),
    var(--bg-raise);
  border: 1px dashed var(--line-strong);
  border-radius: 34px;
  color: var(--steel);
}
.shot b {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.shot span {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--steel-dim);
}
.shot i {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.65rem;
}

/* inline (non-phone) placeholder, for wider imagery */
.shot--flat {
  position: relative;
  inset: auto;
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
}

/* ------------------------------------------------------------- sections -- */

.sec { position: relative; padding-block: clamp(4rem, 8vw, 7rem); }
.sec--tight { padding-block: clamp(2.75rem, 5vw, 4rem); }
.sec--edge { border-top: 1px solid var(--line); }

.sec__head { max-width: 60ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec__head h2 { font-size: clamp(1.9rem, 3.7vw, 2.85rem); }
.sec__head p { margin-top: 1.05rem; }

/* Stat strip, sits directly under the hero. No cards, hairlines only. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.stats > div { border-top: 2px solid var(--accent); padding-top: 1.1rem; }
.stats dt {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stats dd {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: var(--steel);
  max-width: 30ch;
}

/* Split feature (used twice, mirrored, per the zigzag cap) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.split p { margin-top: 1.1rem; }

.checks { display: grid; gap: 0.85rem; margin-top: 1.9rem; }
.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.85rem;
  align-items: start;
  color: var(--ink-2);
  font-size: 0.97rem;
}
.checks svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }

/* Bento: exactly one cell per item */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.cell {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cell:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.cell h3 { font-size: 1.24rem; margin-bottom: 0.7rem; }
.cell p { color: var(--ink-2); font-size: 0.96rem; }
.cell__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  margin-bottom: 1.15rem;
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.26);
  color: var(--accent);
}
.cell__ico svg { width: 22px; height: 22px; }

.cell--wide { grid-column: span 2; }
.cell--full { grid-column: 1 / -1; }
.cell--full .units { max-width: 640px; }

/* two cells carry real visual texture rather than plain fill */
.cell--gauge {
  background:
    radial-gradient(120% 130% at 88% -14%, rgba(245, 166, 35, 0.20), transparent 58%),
    var(--bg-raise);
}
.cell--road {
  background:
    linear-gradient(180deg, rgba(27, 108, 168, 0.22), transparent 62%),
    var(--bg-raise);
}
.cell--road::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 2px dashed rgba(18, 53, 91, 0.12);
}

/* Units table, grouped rather than hairline-per-row */
.units {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.unit {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
}
.unit b {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.unit p { color: var(--ink-2); font-size: 0.94rem; }

/* How it works: numbered steps riding a single road line */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.steps::before {                       /* the road */
  content: "";
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--line-strong) 0 30px, transparent 30px 54px);
  background-size: 54px 2px;
}
.step { position: relative; }
.step__n {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}
.step h3 { font-size: 1.3rem; margin-bottom: 0.65rem; }
.step p { color: var(--ink-2); font-size: 0.97rem; max-width: 34ch; }

/* Privacy: one full-width statement, no cards */
.privacy { position: relative; overflow: hidden; }
.privacy__in { position: relative; z-index: 1; max-width: 74ch; }
.privacy h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.privacy h2 span { color: var(--accent); }
.privacy .lede { margin-top: 1.3rem; font-size: clamp(1.05rem, 1.7vw, 1.24rem); }
.privacy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  position: relative;
  z-index: 1;
}
.privacy__grid h3 { font-size: 1.08rem; margin-bottom: 0.55rem; }
.privacy__grid p { color: var(--steel); font-size: 0.94rem; }
.privacy__grid > div { border-left: 2px solid var(--accent); padding-left: 1.15rem; }

/* Closing CTA band */
.band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  text-align: center;
}
.band__in { position: relative; z-index: 1; max-width: 56ch; margin-inline: auto; }
.band h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.band p { margin-top: 1.1rem; color: var(--ink-2); }
.band .storebtn { margin-top: 2rem; }

/* FAQ */
.faq { display: grid; gap: 0.85rem; max-width: 78ch; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--accent);
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p {
  padding: 0 1.4rem 1.35rem;
  color: var(--ink-2);
  font-size: 0.97rem;
  max-width: 68ch;
}

/* Long-form legal copy */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 3rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 1rem; color: var(--ink-2); }
.prose ul { display: grid; gap: 0.6rem; }
.prose li { padding-left: 1.15rem; position: relative; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 2px;
  background: var(--accent);
}
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose .stamp {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--steel-dim);
  letter-spacing: 0.05em;
}

/* Contact rows on the support page */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.contact > div {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
}
.contact h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.contact p { color: var(--steel); font-size: 0.93rem; }
.contact a {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 166, 35, 0.4);
}
.contact a:hover { border-bottom-color: var(--accent); }

/* --------------------------------------------------------------- footer -- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--bg-inset);
  padding-block: clamp(3rem, 5vw, 4.25rem) 2rem;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.foot__top p { color: var(--steel); font-size: 0.94rem; max-width: 36ch; margin-top: 1rem; }
.foot h4 {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-dim);
  margin-bottom: 1rem;
}
.foot ul { display: grid; gap: 0.65rem; }
.foot ul a {
  color: var(--ink-2);
  font-size: 0.94rem;
  text-decoration: none;
}
.foot ul a:hover { color: var(--accent); }
.foot__bot {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  color: var(--steel-dim);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell--wide { grid-column: span 2; }
  .cell--full { grid-column: 1 / -1; }
.cell--full { grid-column: 1 / -1; }
.cell--full .units { max-width: 640px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr 1fr; }
}

.hero .phone { max-width: 232px; }

@media (max-width: 820px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__media { order: 0; }              /* copy leads on small screens */
  .hero .phone { max-width: 216px; }
  .hero h1 { max-width: 20ch; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .stats { grid-template-columns: 1fr; gap: 1.75rem; }
  .privacy__grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .cell--wide, .cell--full { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .units { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .hero__cta .storebtn { justify-content: center; }
}

/* ------------------------------------------------------------ motion -- */
/*  Scroll reveal. Elements are visible by default and only hidden once JS
    confirms it can animate them, so the page is readable without JS.       */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Added for the two-product story: Fleet Manager, screenshot strips,
   browser frames, and the ecosystem diagram.
   ========================================================================== */

/* ------------------------------------------------- product tag / pills -- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.tag--live { color: var(--accent); border-color: rgba(245, 166, 35, 0.42); }

.taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ------------------------------------------------------ browser frame -- */
/* Wraps the Fleet Manager desktop captures so they read as a web app. */

.browser {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-raise);
  box-shadow: 0 40px 80px -40px rgba(18, 53, 91, 0.35);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise-2);
}
.browser__bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--steel-dim);
  opacity: 0.55;
  flex: none;
}
.browser__bar span {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--steel-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser img { width: 100%; display: block; }

/* --------------------------------------------------- screenshot strip -- */
/* Horizontal scroll rather than a wall of equal cards. */

.strip {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.25rem;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.strip::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
.strip figure {
  flex: none;
  width: 208px;
  margin: 0;
  scroll-snap-align: start;
}
.strip .phone { max-width: 208px; border-radius: 34px; padding: 8px; }
.strip .phone::before { top: 17px; width: 60px; height: 16px; }
.strip .phone__screen { border-radius: 27px; }
.strip figcaption { margin-top: 1rem; }
.strip figcaption b {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.strip figcaption span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.87rem;
  color: var(--steel);
  line-height: 1.5;
}

.striphint {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--steel-dim);
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------- ecosystem -- */
/* Two nodes joined by a dashed road line: the app, and Fleet Manager. */

.eco {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}
.node {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-raise);
}
.node--app {
  background:
    radial-gradient(120% 120% at 8% 0%, rgba(245, 166, 35, 0.16), transparent 58%),
    var(--bg-raise);
}
.node--fleet {
  background:
    radial-gradient(120% 120% at 92% 0%, rgba(27, 108, 168, 0.26), transparent 58%),
    var(--bg-raise);
}
.node__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.node__head img { width: 46px; height: auto; flex: none; }
.node__head img.wide { width: 150px; }
.node__head b {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.node h3 { font-size: 1.32rem; margin-bottom: 0.7rem; }
.node > p { color: var(--ink-2); font-size: 0.97rem; }
.node ul { display: grid; gap: 0.6rem; margin-top: 1.35rem; }
.node li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.93rem;
  color: var(--steel);
}
.node li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 2px;
  background: var(--accent);
}
.node .btn { margin-top: auto; align-self: flex-start; }
.node ul + .btn { margin-top: 1.9rem; }

/* the connector between the two nodes */
.eco__link {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 84px;
}
.eco__link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-image: linear-gradient(180deg, var(--line-strong) 0 16px, transparent 16px 30px);
  background-size: 2px 30px;
}
.eco__link span {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--accent);
  color: var(--accent);
}
.eco__link svg { width: 22px; height: 22px; }

/* ------------------------------------------------------- record types -- */
/* What Fleet Manager keeps. Grouped, not a hairline-per-row table. */

.records {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.records > div {
  background: var(--bg-raise);
  padding: 1.5rem 1.5rem 1.6rem;
}
.records svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 0.9rem; }
.records h3 { font-size: 1.03rem; margin-bottom: 0.45rem; }
.records p { font-size: 0.9rem; color: var(--steel); }

/* ------------------------------------------------------ split w/ wide -- */

.split__media .browser { max-width: none; }

/* ------------------------------------------------------- fleet header -- */

.fleetmark { width: min(280px, 68vw); margin-bottom: 1.6rem; }

@media (max-width: 1000px) {
  .records { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .eco { grid-template-columns: 1fr; }
  .eco__link { min-width: 0; padding-block: 0.5rem; }
  .eco__link::before { top: 0; bottom: 0; left: 50%; }
}

@media (max-width: 620px) {
  .records { grid-template-columns: 1fr; }
  .strip figure { width: 176px; }
  .strip .phone { max-width: 176px; }
}

/* --------------------------------------------- full width media banner -- */

.checks--2col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }

.figcap {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--steel);
}

.banner { margin-top: clamp(2.25rem, 4vw, 3rem); }
.banner .browser img { background: #fff; }

@media (max-width: 760px) {
  .checks--2col { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- duo pair -- */

.duo {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.1rem;
  align-items: start;
}
.duo .cell { height: 100%; }

.taglist--wide { margin-top: 1.75rem; gap: 0.55rem; }
.taglist--wide .tag { color: var(--ink-2); }

@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
}

/* four-item variant: 2x2 rather than a 3-col grid with two empty cells */
.records--pair { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 820px) {
  .records--pair { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hub: an annotated screenshot. Callouts flank a centred phone.
   ========================================================================== */

.hub {
  display: grid;
  /* the centre track is sized explicitly: an `auto` track collapses around
     a phone frame that is itself width:100% */
  grid-template-columns: minmax(0, 1fr) 262px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.25rem);
  align-items: center;
}
.hub__media { display: grid; place-items: center; }
.hub .phone { max-width: 262px; }

.hub__list { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.hub__list > div { position: relative; }
.hub__list b {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
}
.hub__list p { color: var(--steel); font-size: 0.92rem; line-height: 1.55; }

/* a short accent rule on the edge facing the phone */
.hub__list--l { text-align: right; }
.hub__list--l > div { padding-right: 1.1rem; border-right: 2px solid var(--accent); }
.hub__list--r > div { padding-left: 1.1rem; border-left: 2px solid var(--accent); }

@media (max-width: 940px) {
  .hub { grid-template-columns: 1fr; gap: 2.5rem; }
  .hub__media { order: -1; }
  .hub__list { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
  .hub__list--l { text-align: left; }
  .hub__list--l > div {
    padding-right: 0;
    padding-left: 1.1rem;
    border-right: 0;
    border-left: 2px solid var(--accent);
  }
}

@media (max-width: 620px) {
  .hub__list { grid-template-columns: 1fr; }
}

/* A screenshot cropped below the iOS status bar. The decorative speaker
   island would sit on top of real app UI, so it is hidden, and the frame is
   sized to the image so object-fit has nothing to crop.
   Frame is 262px wide with 11px padding: content 240px, image is 620x1272,
   so content height 492px and frame height 514px. */
.phone--bare { aspect-ratio: 262 / 514; }
.phone--bare::before { display: none; }

/* Mile Maters.io wordmark logos */
.brand img.brand__logo { width: auto; height: 40px; }
.node__head .brand__logo { width: 170px; height: auto; }
.hero__logo { width: min(340px, 80vw); }
.node__head img.wide { width: 190px; }