@charset "UTF-8";
/* Commute Magic — the landing page, and ONLY the landing page.
   ---------------------------------------------------------------------------
   This file is deliberately self-contained and deliberately separate from
   site.css.

   /privacy.html and /terms.html are load-bearing URLs: Google Play's
   privacy-policy field, the Google consent screen and every shipped app build
   point at them, and they load site.css. So the landing page's design must not
   be able to reach them. It is merged into neither stylesheet: index.html loads
   this file ALONE, site.css keeps rendering the two legal pages exactly as it
   did, and a change here cannot touch a URL anyone has filed anywhere.

   The design is the avionics dark-glass page that ran at
   thepocketappcompany.com/commutemagic/ — the house components from that site's
   site.css plus the Commute Magic layer from its cm.css, copied down to the
   rules this one page actually uses. Only the Commute Magic accent survives the
   copy; the other apps' accent blocks are gone.
   --------------------------------------------------------------------------- */

html { background: #101016; }

:root {
  /* surfaces */
  --canvas: #101016;
  --low: #1b1b1e;
  --high: #2a2a2d;
  --highest: #353438;
  /* ink */
  --ink: #e5e1e6;
  --ink-2: #c0c6d6;
  --ink-3: #8b91a0;
  /* hairlines and glass fills */
  --hair: rgba(255, 255, 255, 0.13);
  --hair-2: rgba(255, 255, 255, 0.2);
  --glass-2: rgba(255, 255, 255, 0.09);
  --glass-3: rgba(255, 255, 255, 0.14);
  /* the glass recipe: a translucent pane, a lit top edge, a blurred backdrop */
  --pane: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.015) 100%);
  --pane-2: linear-gradient(155deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 50%, rgba(255, 255, 255, 0.02) 100%);
  --blur: blur(22px) saturate(170%);
  --lip: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.045);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  /* ambient colour behind everything — glass needs something to refract.
     Commute Magic's accent is the app's own signal green (#4edea3 in the
     client's theme.ts), so the site and the app agree on what it looks like. */
  --glow-1: rgba(16, 185, 129, 0.40);
  --glow-2: rgba(78, 222, 163, 0.28);
  --glow-3: rgba(70, 140, 220, 0.30);
  --accent-2: #bff3dc;
  --accent: #4edea3;
  --accent-fill: #10b981;
  --on-accent: #00291b;
  --accent-soft: rgba(16, 185, 129, 0.18);
  --accent-glow: rgba(78, 222, 163, 0.35);
  --accent-line: rgba(78, 222, 163, 0.4);
  /* shape */
  --r-sm: 8px;
  --r: 16px;
  --r-md: 24px;
  /* measure */
  --max: 1320px;
  --gutter: 16px;
  /* type */
  --display: "Bricolage Grotesque", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

/* ---------- base ---------- */
/* One ambient colour layer for the whole page. Fixed, so it bleeds into the
   empty margins and gives the glass something to refract. */
body::before {
  content: ""; position: fixed; inset: -10% -5%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52rem 42rem at 6% -6%, var(--glow-1), transparent 62%),
    radial-gradient(48rem 40rem at 100% 16%, var(--glow-2), transparent 60%),
    radial-gradient(46rem 42rem at 42% 104%, var(--glow-3), transparent 62%);
  filter: blur(24px);
}
header.site, main, footer.site { position: relative; z-index: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  /* clip, not hidden: stops a full-bleed band making a sideways scrollbar
     while leaving position:sticky working */
  overflow-x: clip;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-fill); color: var(--on-accent); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #ffffff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong { color: var(--ink); font-weight: 600; }

h1, h2, h3 { color: var(--ink); font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.03em; font-optical-sizing: auto; }
h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.025em; margin: 6px 0 12px; }
h2 { font-size: 34px; line-height: 1.2; margin: 48px 0 14px; }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.025em; margin: 22px 0 6px; font-weight: 600; }
p, li { margin: 0 0 12px; color: var(--ink-2); }
p strong, li strong { color: var(--ink); }
ul, ol { padding-left: 22px; }
li { margin-bottom: 8px; }

/* ---------- layout ---------- */
/* A section that breaks out of the reading column and runs the full window
   width with its own tinted pane behind it: class="section band". */
.band { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 64px; margin-top: 56px; }
/* Full bleed without overflow: a huge box-shadow spread paints past the element
   without adding to the page width (which -50vw does, scrollbar and all), and
   clip-path keeps the spill to the left and right only. */
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, 0.05);
  clip-path: inset(0 -100vmax);
}
.band + .band { margin-top: 0; }

main, header.site, footer.site { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
main { padding-bottom: 48px; }
main > :first-child { margin-top: 0; }
.section { padding: 56px 0 0; }
.section:first-child { padding-top: 24px; }

.section-head { margin-bottom: 28px; }
.section-head h2 { margin: 6px 0 10px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.section-head .lede-text { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 0; }
.section-head.center { text-align: center; }
.section-head.center .lede-text { margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0;
}
.eyebrow.pill {
  padding: 8px 16px; border-radius: 999px;
  background: rgba(42, 42, 45, 0.8); border: 1px solid var(--hair);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.eyebrow.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill);
  box-shadow: 0 0 8px var(--accent-glow); flex: none;
}
.note { color: var(--ink-3); font-size: 14px; }
.note a { color: var(--accent); }

/* ---------- nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  max-width: none; padding: 12px var(--gutter);
  background: rgba(14, 14, 17, 0.8); border-bottom: 1px solid rgba(65, 71, 84, 0.3);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
/* This is the product's own site, so the mark is the app's, drawn inline —
   not the company's generic dot. */
header.site .brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.015em;
  margin-right: auto;
}
header.site .brand svg {
  width: 34px; height: 34px; padding: 6px; border-radius: 10px; flex: none;
  color: var(--accent); background: var(--high);
  box-shadow: 0 0 20px var(--accent-soft), inset 0 1px 0 var(--hair-2);
}
header.site .brand:hover { color: #ffffff; }
header.site nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: rgba(31, 31, 34, 0.7); border: 1px solid var(--hair);
}
header.site nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; line-height: 20px;
  padding: 6px 14px; border-radius: 999px; transition: color 150ms ease, background-color 150ms ease;
}
header.site nav a:hover { color: var(--ink); background: var(--glass-2); }
header.site nav a.now { color: var(--ink); background: var(--highest); font-weight: 500; }

/* ---------- buttons ---------- */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 24px; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent); text-decoration: none;
  font-weight: 500; font-size: 15px; line-height: 22px; border: 1px solid transparent;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: box-shadow 200ms ease, background-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.cta:hover { color: var(--on-accent); box-shadow: 0 0 32px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); filter: brightness(1.06); }
.cta:active { transform: scale(0.98); }
.cta.alt {
  background: var(--glass-2); color: var(--ink); border-color: var(--hair); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cta.alt:hover { background: var(--glass-3); color: #ffffff; box-shadow: none; filter: none; }
.cta .arrow { font-size: 1.1em; line-height: 1; }

/* ---------- section rhythm ---------- */
/* A lit rule between sections, so the page reads as chapters rather than one
   long scroll. Decorative only. */
.section + .section:not(.band)::before,
.band + .section:not(.band)::before {
  content: ""; display: block; height: 1px; margin: 0 auto 56px; max-width: 420px;
  background: linear-gradient(90deg, transparent, var(--hair-2) 18%, var(--accent) 50%, var(--hair-2) 82%, transparent);
  opacity: .75;
}

/* Sections rise into place once, when they are first scrolled to. The class is
   added by reveal.js; with no script, or with reduced motion, the content is
   simply visible — see the hard rule at the top of that file. */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.seen { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1); }
.reveal.seen > * { animation: riseIn 700ms cubic-bezier(.2,.7,.3,1) both; }
.reveal.seen > :nth-child(2) { animation-delay: 70ms; }
.reveal.seen > :nth-child(3) { animation-delay: 140ms; }
.reveal.seen > :nth-child(4) { animation-delay: 210ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.seen, .reveal.seen > * { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ---------- headline colour ---------- */
/* Gradient lettering on the big headings. Guarded, so a browser without
   background-clip:text gets solid ink rather than invisible text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1, .section-head h2 {
    background-image: linear-gradient(96deg, #ffffff 4%, var(--ink) 24%, var(--accent) 60%, var(--accent-2) 92%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}

/* ---------- hero ---------- */
.hero-mark {
  width: 88px; height: 88px; border-radius: 22px; display: block; margin: 0 auto 20px;
  box-shadow: 0 0 0 1px var(--hair), 0 18px 44px rgba(0, 0, 0, .5), 0 0 70px var(--accent-soft);
}
.hero.left .hero-mark { margin-left: 0; }
@media (min-width: 760px) { .hero-mark { width: 104px; height: 104px; border-radius: 26px; } }

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 24px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; max-width: 17ch; margin: 0 0 18px; }
.hero .hero-lede { font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0 auto 28px; }
.hero .ctas { justify-content: center; margin: 0 0 36px; }
.hero.left { align-items: flex-start; text-align: left; }
.hero.left .hero-lede { margin-left: 0; }
.hero.left .ctas { justify-content: flex-start; }

.hero-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero-split .hero { padding-bottom: 0; }
.hero-split .hero .ctas { margin-bottom: 20px; }
.hero-split .hero > p:last-child { font-size: 15px; color: var(--ink-3); margin: 0; }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 1040px;
  padding: 12px; border-radius: var(--r-md);
  background: rgba(27, 27, 30, 0.7); border: 1px solid var(--hair); box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: left;
}
.stat { padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 6px; }
.stat-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stat-v { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); line-height: 1.3; }
.stat-d { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* ---------- the hero's flight strip ---------- */
.ledger {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%), var(--low);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 48px var(--accent-soft);
  border-radius: var(--r-md); padding: 20px; margin: 0;
}
.ledger-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ledger-head .l { color: var(--ink-3); }
.ledger-head .r { color: var(--accent); }
.ledger-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink-2);
}
.ledger-row b { font-weight: 400; color: var(--ink-2); }
.ledger-row span { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }
.ledger-row.total { border-bottom: 0; padding-top: 14px; }
.ledger-row.total b { color: var(--ink); font-weight: 500; }
.ledger-row.total span { color: var(--accent); font-size: 19px; font-weight: 600; }
.ledger-foot {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(14, 14, 17, 0.6);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3); line-height: 1.6;
}

/* ---------- glass card primitives ---------- */
.card, .tier, .qa, .lede, .contact, .get-card {
  position: relative;
  background: var(--pane);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--hair);
  box-shadow: var(--lip), 0 18px 44px rgba(0, 0, 0, 0.36);
  border-radius: var(--r-md);
}

.cards, .get-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 8px 0; }
.card, .get-card { padding: 24px; transition: background-color 200ms ease, box-shadow 200ms ease; }
.card:hover, .get-card:hover {
  background: var(--pane-2);
  border-color: var(--hair-2);
  box-shadow: var(--lip), 0 22px 54px rgba(0, 0, 0, 0.42), 0 0 40px var(--accent-soft);
}
/* the title of a box carries the app's colour, so the grid is not a wall of white */
.card h3, .get-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.card > .tag { margin-bottom: 12px; }
.card > .tag + h3 { margin-top: 0; }
.card:hover h3, .get-card:hover h3 { color: var(--accent-2); }
.card p, .get-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.card p + p, .get-card p + p { margin-top: 10px; }
/* a whole card that is a link (the other apps) */
a.card { display: block; text-decoration: none; color: inherit; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}

/* Benefit bullets: an accent arrow, a hanging indent, no list bullets. */
.wins { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.wins li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.wins li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; line-height: 1.5; }

.lede { padding: 22px 24px; margin: 24px 0; border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 40px var(--accent-soft); }
.lede h2 { margin: 0 0 8px; font-size: 22px; }
.lede p { margin: 0; }
.lede p + p { margin-top: 10px; }

.badge {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.tier .badge { position: absolute; top: 20px; right: 20px; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 8px 0 16px; }
.tier { padding: 24px; }
.tier.paid { border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 48px var(--accent-soft); }
.tier .name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.tier.paid .name { color: var(--accent); }
.tier .amount { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tier .per { color: var(--ink-3); font-size: 13px; margin-bottom: 14px; }
.tier p { margin: 0 0 10px; font-size: 15px; }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.tier .ctas { margin: 18px 0 0; }
.tier .cta { width: 100%; }

/* A single number worth stopping on. */
.claim { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0; font-size: 16px; color: var(--ink-2); }
.claim b {
  font-family: var(--display); font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--accent); flex: none;
}

/* ---------- screenshots ---------- */
.shots { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 14px; scroll-snap-type: x mandatory; margin: 8px 0 4px; }
.shots figure { flex: 0 0 auto; width: 248px; margin: 0; scroll-snap-align: start; }
.shots img {
  display: block; width: 100%; height: auto; border-radius: 30px; background: #0a0a0c;
  border: 8px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 70px var(--accent-soft);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.shots figure:hover img {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 34px 70px rgba(0, 0, 0, 0.6), 0 0 90px var(--accent-glow);
}
.shots figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; line-height: 1.4; }

/* Inside a full-bleed band the phones get room: bigger, centred, alternating
   heights so the row reads as an arrangement rather than a filmstrip, and a
   soft reflection under each one. */
.band .shots { padding-bottom: 28px; }
@media (min-width: 1000px) {
  .band .shots { justify-content: center; overflow: visible; scroll-snap-type: none; gap: 22px; }
  .band .shots figure { flex: 0 1 264px; width: auto; max-width: 264px; min-width: 0; transition: transform 380ms cubic-bezier(.2,.7,.3,1); }
  .band .shots figure:nth-child(even) { transform: translateY(26px); }
  .band .shots figure:hover { transform: translateY(-10px) scale(1.035); z-index: 3; }
  .band .shots figure:nth-child(even):hover { transform: translateY(16px) scale(1.035); }
  .band .shots figure::after {
    content: ""; display: block; height: 42px; margin: -6px 10px 0;
    background: radial-gradient(60% 100% at 50% 0%, var(--accent-glow), transparent 72%);
    filter: blur(10px); opacity: .5; pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .band .shots figure, .shots figure:hover img { transition: none; }
}

/* ---------- FAQ ---------- */
.qa { padding: 20px 24px; margin: 0 0 12px; transition: background-color 150ms ease; }
.qa:hover { background: var(--pane-2); border-color: var(--hair-2); }
.qa summary { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--ink); }
.qa p { margin: 0; font-size: 15px; line-height: 1.55; }
details.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform 200ms ease;
}
details.qa[open] summary::after { transform: rotate(-135deg); }
details.qa[open] summary { margin-bottom: 8px; }
.faq .qa-grid { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.faq .qa-grid .qa { margin: 0; }

/* ---------- where to get it ---------- */
.get-card .eyebrow { margin-bottom: 8px; }
.get-card a { overflow-wrap: anywhere; }

/* ---------- contact ---------- */
.contact { display: flex; flex-direction: column; gap: 20px; padding: 32px; margin: 24px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-lg); }
.contact h2 { margin: 6px 0 8px; font-size: 28px; }
.contact p { margin: 0; }
.contact .email { display: inline-block; margin-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); }
.contact .ctas { margin: 0; flex-direction: column; }
.contact .ctas .cta { width: 100%; }

/* ---------- footer ---------- */
footer.site {
  margin-top: 64px; padding-top: 40px; padding-bottom: 56px;
  border-top: 1px solid rgba(65, 71, 84, 0.3); color: var(--ink-2); font-size: 14px;
}
footer.site p { margin: 0 0 10px; }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin: 0 0 8px; }
.foot-col .eyebrow { display: block; margin-bottom: 14px; }
.foot-brand .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; margin-bottom: 10px; }
.foot-brand .brand svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; flex: none; color: var(--accent); background: var(--high); box-shadow: inset 0 1px 0 var(--hair-2); }
.foot-brand p { margin: 0; font-size: 13px; }
.foot-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding-top: 20px; border-top: 1px solid rgba(65, 71, 84, 0.2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3);
}
.foot-bar p { margin: 0; color: var(--ink-3); }
/* The disclaimer is the one paragraph on this page that must never be trimmed
   to fit: it is what keeps the page honest about who we are not. */
.foot-note { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); max-width: 90ch; }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
  h1 { font-size: 44px; }
  .hero h1 { font-size: 56px; line-height: 1.08; }
  .hero { padding: 56px 0 32px; }
  .cards, .get-cards, .tiers { grid-template-columns: repeat(2, 1fr); }
  .shots figure { width: 240px; }
  .contact { flex-direction: row; align-items: center; justify-content: space-between; }
  .contact .ctas { flex-direction: row; }
  .contact .ctas .cta { width: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .section { padding-top: 80px; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  h2 { font-size: 40px; line-height: 1.15; }
  .section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
  .section-head.split .lede-text { max-width: 44ch; font-size: 15px; margin: 0 0 6px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .get-cards { grid-template-columns: repeat(3, 1fr); }
  .faq .qa-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); padding: 16px; gap: 16px; }
  .shots figure { width: 260px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .section { padding-top: 96px; }
  header.site { padding: 12px 40px; }
}
@media (min-width: 1000px) {
  .hero-split { grid-template-columns: 1.15fr 1fr; gap: 40px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   Commute Magic's own avionics layer — was cm.css.
   The telemetry ticker, the heavier glass slab, the seven verdict cards with
   their severity colours, the "not a tracker" trio, the numbered trust rules
   and the closing panel.
   =========================================================================== */

:root {
  --cm-green: #4ade9f;
  --cm-amber: #fabc4d;
  --cm-red: #fb7185;
  --cm-blue: #7dd3fc;
  --cm-slate: #94a3b8;
  --cm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* the design's glass is heavier than the house glass: more blur, more
   saturation, a brighter lip along the top edge */
.cm-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.28), 0 24px 48px -18px rgba(0, 0, 0, 0.75);
  border-radius: 22px;
}

/* ---- telemetry ticker: the floating status pill under the nav ---------- */
.cm-ticker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 18px auto 0; padding: 10px 18px; border-radius: 999px; width: fit-content; max-width: 100%;
  font-family: var(--cm-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.cm-ticker b { color: var(--cm-green); font-weight: 600; letter-spacing: .1em; }
.cm-ticker .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cm-green); flex: none;
  box-shadow: 0 0 10px var(--cm-green);
}
.cm-ticker span + span { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 720px) {
  .cm-ticker { border-radius: 18px; }
  .cm-ticker span + span { padding-left: 0; border-left: 0; }
}

/* ---- "not another tracker": three cards with a category header --------- */
.cm-trio { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 22px 0 0; }
@media (min-width: 860px) { .cm-trio { grid-template-columns: repeat(3, 1fr); } }
.cm-trio > article { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 12px; }
.cm-trio .cat {
  font-family: var(--cm-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; color: var(--cm-slate);
}
.cm-trio .cat::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.cm-trio > article:nth-child(1) .cat { color: var(--cm-red); }
.cm-trio > article:nth-child(2) .cat { color: var(--cm-amber); }
.cm-trio > article:nth-child(3) .cat { color: var(--cm-blue); }
.cm-trio p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cm-trio .ours {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.cm-trio .ours b {
  display: block; font-family: var(--cm-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cm-green); margin-bottom: 5px; font-weight: 600;
}

/* ---- the seven verdicts ------------------------------------------------ */
.cm-verdicts { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 24px 0 0; }
@media (min-width: 760px) { .cm-verdicts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .cm-verdicts { grid-template-columns: repeat(3, 1fr); } }
.cm-verdict {
  position: relative; padding: 20px 22px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  --sev: var(--cm-slate);
}
.cm-verdict::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--sev); }
.cm-verdict[data-sev="green"] { --sev: var(--cm-green); }
.cm-verdict[data-sev="amber"] { --sev: var(--cm-amber); }
.cm-verdict[data-sev="red"]   { --sev: var(--cm-red); }
.cm-verdict[data-sev="blue"]  { --sev: var(--cm-blue); }
.cm-verdict .band-name {
  font-family: var(--cm-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sev); font-weight: 600;
}
.cm-verdict h3 {
  margin: 0; font-family: var(--cm-mono); font-size: 15px; letter-spacing: .02em;
  color: var(--ink); font-weight: 700; line-height: 1.35;
}
.cm-verdict p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cm-verdict .say {
  margin-top: auto; padding: 10px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--cm-mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}
.cm-verdict .say b { color: var(--sev); font-weight: 600; }

/* ---- numbered trust rules --------------------------------------------- */
.cm-rules { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; counter-reset: rule; }
@media (min-width: 860px) { .cm-rules { grid-template-columns: repeat(2, 1fr); } }
.cm-rules > article { padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.cm-rules > article::before {
  counter-increment: rule; content: "0" counter(rule);
  font-family: var(--cm-mono); font-size: 13px; letter-spacing: .1em; font-weight: 700;
  color: var(--cm-green); padding-top: 3px;
}
.cm-rules h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.cm-rules p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ---- closing panel ----------------------------------------------------- */
.cm-close { padding: 48px 28px; text-align: center; margin: 56px 0 0; }
.cm-close h2 { margin: 0 auto 10px; max-width: 18ch; }
.cm-close p { margin: 0 auto 22px; max-width: 54ch; color: var(--ink-2); font-size: 16px; }
.cm-close .ctas { justify-content: center; margin: 0; }

@media (prefers-reduced-motion: reduce) { .cm-trio > article, .cm-verdict { transition: none; } }