/* ==========================================================================
   Loopr — site styles
   Single stylesheet, no build step, no external requests.

   Two palettes live here on purpose:

   --brand-*  the logo's own system (teal / coral / ink / bone), used for
              everything that is *the website*.
   --app-*    the palette the app actually renders in (blue / slate, lifted
              from src/theme.ts), used only inside the phone mockups so they
              depict the real product rather than a recoloured fiction.

   Both flip with prefers-color-scheme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Brand — assets/Loopr Logo/README.md */
  --brand-teal: #1d9e75;
  --brand-teal-deep: #17805e;
  --brand-coral: #d85a30;
  --ink: #2c2c2a;
  --bone: #f1efe8;

  /* Surfaces */
  --bg: #f1efe8;
  --bg-alt: #e9e6dc;
  --card: #fbfaf7;
  --line: #dcd8cc;
  --line-soft: #e6e2d7;

  /* Text. All three clear 4.5:1 against both --bg and --bg-alt: --text-faint
     carries real copy (the footer legal line, the pricing note), not just
     decoration, so it cannot be as light as the name suggests. */
  --text: #2c2c2a;
  --text-muted: #5f5d57;
  --text-faint: #6a675f;

  /* Accents. The brand teal #1D9E75 is only 2.9:1 on bone — beautiful as a
     stroke, unreadable as text — so text and focus use a darkened step of it
     and the pure brand value is kept for marks and fills. */
  --accent: #146b4f;
  --accent-ink: #0f5f45;
  --accent-wash: #e2f0e9;
  --accent-line: #c3e0d3;

  /* Coral is reserved for "the active stop". Errors get their own red so the
     logo keeps teaching the colour system. */
  --alert: #a33a2a;
  --alert-wash: #f6e7e3;

  --focus: #146b4f;

  /* Type */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Geometry — echoes the logo's rounded square */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06), 0 2px 8px rgba(44, 44, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(44, 44, 42, 0.07), 0 12px 32px rgba(44, 44, 42, 0.09);
  --shadow-lg: 0 8px 20px rgba(44, 44, 42, 0.1), 0 32px 64px rgba(44, 44, 42, 0.14);

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* App palette (light) — src/theme.ts lightColors */
  --app-surface: #ffffff;
  --app-sunken: #f1f5f9;
  --app-border: #e2e8f0;
  --app-text: #0f172a;
  --app-muted: #64748b;
  --app-faint: #94a3b8;
  --app-accent: #2563eb;
  --app-accent-text: #2563eb;
  --app-accent-soft: #eff6ff;
  --app-success: #16a34a;
  --app-success-text: #16a34a;
  --app-danger: #dc2626;
  --app-danger-soft: #fef2f2;
  --app-route: #2563eb;
  --app-casing: #ffffff;
  --app-start: #16a34a;
  --app-end: #dc2626;
  --app-middle: #2563eb;

  /* Map mockup surface — abstract, not a tile from any provider */
  --map-land: #ebe7e0;
  --map-block: #e2ddd4;
  --map-road: #ffffff;
  --map-road-minor: #f6f4f0;
  --map-water: #cfe0e6;
  --map-green: #dfe7d8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-teal: #5dcaa5;
    --brand-teal-deep: #5dcaa5;
    --brand-coral: #f0997b;
    --ink: #f1efe8;

    --bg: #1c1c1a;
    --bg-alt: #232320;
    --card: #262623;
    --line: #3a3a35;
    --line-soft: #32322e;

    --text: #f1efe8;
    --text-muted: #b3afa4;
    /* Lifted a step from the light-mode value's mirror: it has to clear 4.5:1
       against --card, the lightest surface it lands on. */
    --text-faint: #979288;

    --accent: #5dcaa5;
    --accent-ink: #7fdcbc;
    --accent-wash: #17352b;
    --accent-line: #245243;

    --alert: #f0997b;
    --alert-wash: #3a231b;

    --focus: #5dcaa5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.4), 0 32px 64px rgba(0, 0, 0, 0.55);

    /* App palette (dark) — src/theme.ts darkColors */
    --app-surface: #1e293b;
    --app-sunken: #0f172a;
    --app-border: #334155;
    --app-text: #f1f5f9;
    --app-muted: #94a3b8;
    --app-faint: #64748b;
    --app-accent: #3b82f6;
    --app-accent-text: #93c5fd;
    --app-accent-soft: #1e3a5f;
    --app-success: #16a34a;
    --app-success-text: #4ade80;
    --app-danger: #f87171;
    --app-danger-soft: #4c1d24;
    --app-route: #60a5fa;
    --app-casing: #0f172a;

    --map-land: #1a1f27;
    --map-block: #212832;
    --map-road: #313b4a;
    --map-road-minor: #262e3a;
    --map-water: #16303c;
    --map-green: #1c2a22;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 650;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 1.6rem + 3.3vw, 4.1rem);
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.85rem);
  letter-spacing: -0.032em;
}
h3 {
  font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  letter-spacing: -0.022em;
}
h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
}
a:hover {
  text-decoration-color: currentColor;
}

img,
svg {
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

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

::selection {
  background: color-mix(in srgb, var(--brand-teal) 30%, transparent);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

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

.wrap--narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--alt {
  background: var(--bg-alt);
}

.section__head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section__head p {
  margin-top: 0.9rem;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.5;
}

.section__head--center .eyebrow::before {
  display: none;
}

.lede {
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--bone);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.75rem;
}

/* --------------------------------------------------------------------------
   4. Buttons & chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.btn--primary {
  background: var(--brand-teal-deep);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--brand-teal-deep) 88%, #000);
}

@media (prefers-color-scheme: dark) {
  .btn--primary {
    background: var(--brand-teal);
    color: #10231c;
  }
  .btn--primary:hover {
    background: color-mix(in srgb, var(--brand-teal) 85%, #fff);
  }
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--text-faint);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

.btn--sm {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

.btn svg {
  flex: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  font-size: 0.83rem;
  font-weight: 550;
  color: var(--text-muted);
}

.chip svg {
  flex: none;
  opacity: 0.75;
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-coral);
}

.badge-pro {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-coral);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.22em;
}

@media (prefers-color-scheme: dark) {
  .badge-pro {
    color: #2b1409;
  }
}

/* --------------------------------------------------------------------------
   5. Site header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 550;
  letter-spacing: -0.045em;
  margin-right: auto;
}

.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* :not(.btn) so this never overrides a button's own colours — `.nav a` would
   otherwise out-specify `.btn--primary` and repaint its white label muted. */
.nav a:not(.btn) {
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.94rem;
  font-weight: 550;
  text-decoration: none;
}

.nav a:not(.btn):hover {
  color: var(--text);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 780px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    inset-inline: var(--gutter);
    top: calc(100% + 0.4rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-md);
  }

  .nav a {
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
  }

  .nav .btn {
    margin-top: 0.35rem;
    width: 100%;
  }

  /* Collapsed only when JS is available to expand it again. */
  .js .nav[data-collapsed="true"] {
    display: none;
  }
}

/* Language switch.
   Deliberately outside .nav: below 780px the nav collapses behind the
   hamburger, and a language control you have to open a menu to find is one
   Spanish-speaking visitors never find. This stays on the bar at every width. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

.lang-switch__opt {
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
}

.lang-switch__opt:hover {
  color: var(--text);
}

.lang-switch__opt[aria-current="true"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* Spanish pages are English markup until i18n.js swaps them, which happens as
   soon as the parser reaches the deferred scripts. Cover that instant rather
   than flash English at someone who asked for Spanish.

   Hiding content must never outlive the script that promised to reveal it, so
   the rule carries its own way out: the animation restores visibility after
   1.2s whether or not anything ever ran. Reduced-motion clamps animation
   duration, not delay, so the escape hatch survives it. */
html.js[data-lang="es"]:not(.i18n-ready) body {
  visibility: hidden;
  animation: i18n-failsafe 0s linear 1.2s forwards;
}

@keyframes i18n-failsafe {
  to {
    visibility: visible;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem);
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero__glow::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-teal) 22%, transparent) 0%, transparent 68%);
  filter: blur(20px);
}

/* The logo's own motion, blown up as a backdrop. */
.hero__loop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120vw, 1100px);
  height: min(120vw, 1100px);
  transform: translate(-58%, -52%);
  opacity: 0.11;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero__copy {
    max-width: 620px;
  }
  /* Stacked, the copy sits directly over the backdrop rather than beside it, so
     the loop has to give way further. */
  .hero__loop {
    opacity: 0.06;
  }
}

.hero h1 {
  margin-top: 1rem;
}

.hero__sub {
  margin-top: 1.35rem;
  max-width: 34em;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .hero__sub {
    margin-inline: auto;
  }
  .hero .chip-row {
    justify-content: center;
  }
}

.hero__art {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Forms — the waitlist row, and the stacked fields below it
   -------------------------------------------------------------------------- */

.waitlist {
  margin-top: 2rem;
  max-width: 480px;
}

@media (max-width: 900px) {
  .waitlist {
    margin-inline: auto;
  }
}

.waitlist__row {
  display: flex;
  gap: 0.55rem;
}

@media (max-width: 460px) {
  .waitlist__row {
    flex-direction: column;
  }
}

.waitlist input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.78rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.975rem;
}

.waitlist input[type="email"]::placeholder {
  color: var(--text-faint);
}

.waitlist input[type="email"]:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
}

.waitlist__note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.waitlist__note a {
  color: inherit;
}

/* Honeypot — off-screen, never shown, not announced. */
.waitlist__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-msg {
  margin-top: 0.85rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  font-weight: 550;
}

.form-msg[hidden] {
  display: none;
}

.form-msg--ok {
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
}

.form-msg--err {
  background: var(--alert-wash);
  border: 1px solid color-mix(in srgb, var(--alert) 35%, transparent);
  color: var(--alert);
}

/* Stacked form. The waitlist above is one field on a row; anything longer than
   that puts its label above the control and sits in a card, so a form on a
   prose page reads as a thing to fill in rather than more of the copy. */

.form-card {
  margin-top: 1.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.field {
  margin-top: 1.5rem;
  border: 0;
  padding: 0;
  min-width: 0; /* a fieldset defaults to min-content, which won't shrink */
}

.field:first-child {
  margin-top: 0;
}

.field > label,
.field__legend {
  display: block;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 620;
}

.field__hint {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.field__req {
  color: var(--text-faint);
  font-weight: 500;
}

.field input[type="email"],
.field input[type="text"],
.field textarea {
  margin-top: 0.55rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field textarea {
  min-height: 6.5rem;
  resize: vertical;
}

/* Radios and checkboxes get a full row each: they are the answer to a
   question, and a tap target the size of the glyph alone is not enough. */
.choices {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 0.95rem;
  cursor: pointer;
}

.choice:hover {
  border-color: var(--text-faint);
}

/* Not supported everywhere; where it isn't, the checked row is still marked by
   the control itself, which is what carries the meaning. */
.choice:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.choice input {
  flex: none;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}

.choice small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.form-card :focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 1px;
}

.form-card input:focus-visible,
.form-card textarea:focus-visible {
  border-color: transparent;
}

.form-card__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.form-card__note {
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   8. Feature rows
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.feature + .feature {
  border-top: 1px solid var(--line-soft);
}

.feature--flip .feature__art {
  order: -1;
}

@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .feature--flip .feature__art {
    order: 0;
  }
}

.feature__art {
  display: flex;
  justify-content: center;
}

.feature h3 {
  margin-top: 0.7rem;
}

.feature p {
  margin-top: 0.95rem;
  color: var(--text-muted);
}

.feature__list {
  margin-top: 1.35rem;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.feature__list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.97rem;
  color: var(--text-muted);
}

.feature__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2.5px solid var(--brand-teal);
}

.feature__list li:first-child::before {
  background: var(--brand-coral);
  border-color: var(--brand-coral);
}

.pull {
  margin-top: 1.5rem;
  padding: 0.9rem 0 0.9rem 1.15rem;
  border-left: 3px solid var(--accent-line);
  font-size: 0.97rem;
  font-style: italic;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   9. Cards / steps / grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.card {
  padding: clamp(1.4rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.card h3,
.card h4 {
  margin-bottom: 0.55rem;
}

.card p {
  color: var(--text-muted);
  font-size: 0.97rem;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* An <ol> for the semantics, but the numbers are drawn as badges — so the
   native markers have to go or every step is numbered twice. */
.steps {
  list-style: none;
}

.step {
  position: relative;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--brand-teal-deep);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step:first-child .step__num {
  background: var(--brand-coral);
}

@media (prefers-color-scheme: dark) {
  .step__num {
    background: var(--brand-teal);
    color: #10231c;
  }
  .step:first-child .step__num {
    color: #2b1409;
  }
}

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  align-items: start;
}

.plan {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.plan--pro {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  position: relative;
}

.plan__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.plan__price {
  margin-top: 0.9rem;
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.plan__price small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--text-muted);
}

.plan__list {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  display: grid;
  gap: 0.75rem;
  font-size: 0.96rem;
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-muted);
}

.plan__list svg {
  flex: none;
  margin-top: 0.28em;
}

.plan__list .tick {
  color: var(--accent);
}
.plan__list .dash {
  color: var(--text-faint);
}

.plan__list strong {
  color: var(--text);
  font-weight: 600;
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Privacy strip
   -------------------------------------------------------------------------- */

.privacy-strip {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background: var(--accent-wash);
}

.privacy-strip h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.privacy-strip__grid {
  margin-top: 1.75rem;
  display: grid;
  gap: 1.5rem 2.5rem;
  /* Two even columns rather than auto-fit: these four items are similar in
     length, and auto-fit lands on three, orphaning the fourth. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

@media (max-width: 620px) {
  .privacy-strip__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.privacy-strip__grid li {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.privacy-strip__grid strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
  font-weight: 620;
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.6rem;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}

.faq details[open] {
  border-color: var(--accent-line);
}

.faq summary {
  padding: 1.05rem 1.25rem;
  font-weight: 600;
  font-size: 1.02rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq summary:hover {
  background: color-mix(in srgb, var(--accent-wash) 45%, transparent);
}

.faq__body {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.faq__body p + p {
  margin-top: 0.8rem;
}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, #146b4f 0%, #1d9e75 60%, #35b98d 100%);
  color: #fff;
  text-align: center;
}

.cta h2,
.cta p {
  position: relative;
  z-index: 1;
}

.cta p {
  margin-top: 1rem;
  margin-inline: auto;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.86);
}

.cta .waitlist {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.cta .waitlist input[type="email"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.cta .waitlist input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.cta .waitlist__note {
  color: rgba(255, 255, 255, 0.72);
}

.cta .btn--primary {
  background: #fff;
  color: #12664b;
}
.cta .btn--primary:hover {
  background: #eef7f3;
}

.cta .form-msg--ok {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.cta .form-msg--err {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.cta__mark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 340px;
  height: 340px;
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__brand {
  max-width: 30ch;
}

.site-footer__brand p {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-faint);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.site-footer nav ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.site-footer h2 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.9rem;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   15. Prose (legal + support pages)
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line-soft);
}

.page-head p {
  margin-top: 0.9rem;
  color: var(--text-muted);
}

.page-head__meta {
  margin-top: 1.1rem;
  font-size: 0.87rem;
  color: var(--text-faint);
}

.prose {
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(3rem, 7vw, 5rem);
  max-width: 72ch;
}

.prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  scroll-margin-top: 90px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 1.9rem;
  font-size: 1.1rem;
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-top: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
  display: grid;
  gap: 0.5rem;
}

.prose li {
  padding-left: 0.25rem;
}

.prose strong {
  font-weight: 620;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  background: var(--bg-alt);
  font-weight: 620;
}

.table-scroll {
  overflow-x: auto;
  margin-top: 1rem;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  margin-top: 0;
  min-width: 460px;
}

.callout {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  font-size: 0.95rem;
}

.callout p:first-child {
  margin-top: 0;
}

.toc {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}

.toc h2 {
  margin: 0 0 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc ol {
  margin: 0;
  padding-left: 1.2rem;
  gap: 0.35rem;
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   16. Phone mockup
   -------------------------------------------------------------------------- */

.phone {
  --phone-w: 286px;
  position: relative;
  flex: none;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.3;
  padding: 9px;
  border-radius: 44px;
  background: linear-gradient(160deg, #4a4a46 0%, #22221f 40%, #383834 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.phone--sm {
  --phone-w: 232px;
}

@media (max-width: 420px) {
  .phone {
    --phone-w: min(268px, 76vw);
  }
}

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--app-surface);
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.35;
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
}

/* Status bar */
.ph-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 20px 3px;
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--app-text);
  background: transparent;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 5;
}

.ph-status__icons {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ph-status__bar {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}

.ph-status__batt {
  width: 17px;
  height: 9px;
  border: 1.2px solid currentColor;
  border-radius: 2.5px;
  position: relative;
  opacity: 0.9;
}

.ph-status__batt::before {
  content: "";
  position: absolute;
  inset: 1.4px;
  right: 5px;
  background: currentColor;
  border-radius: 1px;
}

/* Map surface */
.ph-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--map-land);
}

/* Direct child only — the floating search field and map controls are also inside
   .ph-map and must not be stretched to fill it. */
.ph-map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating map controls */
.ph-search {
  position: absolute;
  top: 34px;
  inset-inline: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  color: var(--app-faint);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
}

.ph-search > svg:first-child {
  flex: none;
}

.ph-search__scan {
  flex: none;
  margin-left: auto;
  color: var(--app-accent-text);
}

.ph-ctrls {
  position: absolute;
  right: 10px;
  z-index: 4;
  display: grid;
  gap: 6px;
}

.ph-ctrls--top {
  top: 76px;
}

.ph-ctrl {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
  color: var(--app-accent-text);
}

/* Bottom sheet */
.ph-sheet {
  flex: none;
  position: relative;
  z-index: 4;
  margin-top: -18px;
  padding: 8px 12px 16px;
  border-radius: 18px 18px 0 0;
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -3px 18px rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 9px;
}

.ph-grabber {
  width: 34px;
  height: 4px;
  margin: 0 auto 2px;
  border-radius: 2px;
  background: var(--app-border);
}

/* Trip-shape row */
.ph-shape {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--app-sunken);
  color: var(--app-muted);
  font-size: 9.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
}

.ph-shape > svg:first-child {
  flex: none;
}

.ph-shape__chev {
  flex: none;
  margin-left: auto;
  color: var(--app-faint);
}

/* Stop list */
.ph-stops {
  display: grid;
}

.ph-stop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-stop--current {
  padding: 4px 6px;
  margin: 0 -6px;
  border-radius: 10px;
  background: var(--app-accent-soft);
}

.ph-badge {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ph-badge--start {
  background: var(--app-start);
}
.ph-badge--mid {
  background: var(--app-middle);
}
.ph-badge--end {
  background: var(--app-end);
}
.ph-badge--done {
  background: var(--app-success);
  opacity: 0.65;
}
.ph-badge--current {
  box-shadow: 0 0 0 2px var(--app-accent-soft);
  transform: scale(1.1);
}

.ph-stop__body {
  min-width: 0;
  flex: 1 1 auto;
}

.ph-stop__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--app-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-stop__label span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-stop--done .ph-stop__label {
  color: var(--app-faint);
  text-decoration: line-through;
}

.ph-pill {
  flex: none;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--app-accent);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ph-eta {
  flex: none;
  margin-left: auto;
  padding-left: 6px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

.ph-stop__addr {
  display: block;
  font-size: 9px;
  color: var(--app-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-stop__grip {
  flex: none;
  color: var(--app-faint);
  display: flex;
  gap: 3px;
}

/* Connector between stops, doubling as the per-leg readout */
.ph-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 17px;
}

.ph-leg__rail {
  flex: none;
  width: 20px;
  display: grid;
  place-items: center;
}

.ph-leg__line {
  width: 2px;
  height: 15px;
  border-radius: 1px;
  background: var(--app-border);
}

.ph-leg--done .ph-leg__line {
  background: var(--app-success);
  opacity: 0.4;
}

.ph-leg__text {
  font-size: 9px;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
}

/* Summary */
.ph-sum {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ph-sum__totals {
  flex: 1 1 auto;
  min-width: 0;
}

.ph-sum__head {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ph-sum__head .dim {
  color: var(--app-faint);
  font-weight: 400;
}

.ph-sum__sub {
  display: block;
  font-size: 9.5px;
  color: var(--app-muted);
  white-space: nowrap;
}

.ph-sum__finish {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--app-accent-text);
  white-space: nowrap;
}

.ph-sum__slack {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--app-success-text);
  white-space: nowrap;
}

.ph-sum__slack--late {
  color: var(--app-danger);
}

.ph-iconbtn {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--app-accent-soft);
  color: var(--app-accent-text);
}

.ph-iconbtn--danger {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}

/* Progress */
.ph-prog {
  height: 4px;
  border-radius: 3px;
  background: var(--app-sunken);
  overflow: hidden;
}

.ph-prog__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--app-success);
}

/* Action buttons */
.ph-actions {
  display: flex;
  gap: 7px;
}

.ph-btn {
  flex: 1 1 0;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.ph-btn--secondary {
  background: var(--app-accent-soft);
  color: var(--app-accent-text);
}

.ph-btn--primary {
  background: var(--app-accent);
  color: #fff;
}

.ph-btn--success {
  background: var(--app-success);
  color: #fff;
}

/* Toast */
.ph-toast {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--app-text);
  color: var(--app-surface);
  font-size: 10.5px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
}

.ph-toast__action {
  margin-left: auto;
  color: var(--app-accent-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
}

@media (prefers-color-scheme: dark) {
  .ph-toast {
    background: #f1f5f9;
    color: #0f172a;
  }
  .ph-toast__action {
    color: #2563eb;
  }
}

/* Modal sheet (route settings) */
.ph-modal {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.35);
}

.ph-modal__card {
  border-radius: 20px 20px 0 0;
  background: var(--app-surface);
  padding: 10px 14px 18px;
  display: grid;
  gap: 10px;
  max-height: 92%;
  overflow: hidden;
}

.ph-modal__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ph-modal__sub {
  font-size: 9.5px;
  color: var(--app-muted);
  margin-top: 1px;
}

.ph-group__label {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-faint);
  margin-bottom: 5px;
}

.ph-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid var(--app-border);
}

.ph-opt + .ph-opt {
  margin-top: 5px;
}

.ph-opt--on {
  border-color: var(--app-accent);
  background: var(--app-accent-soft);
}

.ph-radio {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.8px solid var(--app-faint);
}

.ph-opt--on .ph-radio {
  border-color: var(--app-accent);
  border-width: 4px;
}

.ph-opt__title {
  font-size: 10.5px;
  font-weight: 600;
}

.ph-opt__desc {
  font-size: 8.5px;
  color: var(--app-muted);
  margin-top: 1px;
}

.ph-timerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--app-sunken);
}

.ph-timerow + .ph-timerow {
  margin-top: 5px;
}

.ph-timerow__value {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--app-accent-text);
  font-variant-numeric: tabular-nums;
}

/* Scanner */
.ph-cam {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: linear-gradient(170deg, #2b3138 0%, #171b21 60%, #0e1116 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
}

.ph-cam__frame {
  width: 62%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  position: relative;
}

.ph-cam__frame span {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
}

.ph-cam__frame span:nth-child(1) {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 10px 0 0 0;
}
.ph-cam__frame span:nth-child(2) {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 10px 0 0;
}
.ph-cam__frame span:nth-child(3) {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 10px;
}
.ph-cam__frame span:nth-child(4) {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 10px 0;
}

.ph-cam__label {
  position: absolute;
  inset-inline: 0;
  bottom: 74px;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
}

.ph-cam__count {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 9.5px;
  font-weight: 600;
}

.ph-seg {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.ph-seg__item {
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.ph-seg__item--on {
  background: #fff;
  color: #0f172a;
}

.ph-cam__close {
  position: absolute;
  top: 34px;
  left: 12px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}

.ph-cam .ph-status {
  color: #fff;
}

/* The travelling coral dot, borrowed from loopr-loading.svg */
.route-dot {
  fill: var(--brand-coral);
}

/* --------------------------------------------------------------------------
   17. Motion
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .hero__loop animateMotion {
    display: none;
  }
}

/* Printing the legal pages should not cost a forest. */
@media print {
  .site-header,
  .site-footer,
  .cta,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
}