/* FleetIQ — haulfleetiq.com
 *
 * DESIGN READ: a product site for people who run dispatch houses, not a
 * trucking company's brochure. They read it on a phone, usually at night,
 * usually between loads. So: dense, high contrast, and built to be skimmed —
 * closer to the operator tool they are buying than to a freight brand.
 *
 * The palette is road signage, not SaaS purple: near-black ground, one amber
 * that only ever marks the thing to press. The mono face carries prices, agent
 * counts and plan names, because those are the numbers a buyer compares.
 *
 * Plain CSS, no build step — the same rule as the other sites, so a copy
 * change is one file and one push.
 */

:root {
  --ground: #0b0c0e;
  --surface: #131518;
  --raised: #191c21;
  --line: #262a31;
  --line-soft: #1e2228;

  --ink: #f3f4f6;
  --ink-2: #b6bcc6;
  --ink-3: #868d99;

  /* One accent. DOT signage amber — it marks what to press and nothing else. */
  --signal: #f0a92b;
  --signal-ink: #1a1205;
  --ok: #45c98a;

  --wrap: 1100px;
  --s1: 6px;  --s2: 12px; --s3: 20px;
  --s4: 32px; --s5: 52px; --s6: 84px;
  --r: 10px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font: 400 16.5px/1.65 Archivo, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ── type ───────────────────────────────────────────────────────────────── */
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); line-height: 1.06; font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: 1.08rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0; max-width: 68ch; }
a  { color: var(--ink); }

.lede { font-size: clamp(1.05rem, 2.2vw, 1.24rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.small { font-size: 0.9rem; line-height: 1.55; }

.eyebrow {
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal);
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 12, 14, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
@media (prefers-reduced-transparency: reduce) {
  .site-head { background: var(--ground); backdrop-filter: none; }
}
.site-head .wrap {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 62px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-weight: 700; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em; font-size: 1.12rem;
}
.brand span { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; }
/* :not(.btn) IS LOAD-BEARING. `.nav a` is specificity (0,1,1) and
   `.btn-primary` is (0,1,0), so without it the nav wins the colour war and
   the "Get started" button renders muted grey on amber — measured at 1.06:1,
   against the 4.5:1 AA floor, on the most important control on the site.
   Every other .btn-primary on the page was 9.2:1; only the one inside the nav
   was broken, which is exactly how this survives a glance. */
.nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; }
.nav a:not(.btn):hover { color: var(--ink); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r); font-weight: 600;
  font-size: 0.97rem; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background 140ms ease, border-color 140ms ease;
}
.btn-primary { background: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { background: #ffbc44; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: #3a404a; background: var(--surface); }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px;
}
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ── sections ───────────────────────────────────────────────────────────── */
section { padding: var(--s6) 0; }
section + section { border-top: 1px solid var(--line-soft); }
.section-head { display: flex; flex-direction: column; gap: var(--s2);
  margin-bottom: var(--s5); }

/* ── hero: left-aligned, asymmetric. Not a centred slab. ────────────────── */
.hero { padding: clamp(56px, 11vw, 108px) 0 var(--s6); }
.hero-grid { display: grid; gap: var(--s5); align-items: start;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.hero h1 { margin: var(--s2) 0 var(--s3); }
.hero .lede { margin-bottom: var(--s4); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* The panel beside the hero: what the thing actually does, as a list of
   states rather than a screenshot nobody can read on a phone. */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: var(--s3); display: grid; gap: 2px;
}
.panel-title {
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 4px var(--s2);
}
.row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s2);
  align-items: baseline; padding: 11px 4px;
  border-top: 1px solid var(--line-soft); font-size: 0.93rem;
}
.row b { color: var(--ink); font-weight: 600; }
.row .tag {
  font: 500 11px/1.7 "JetBrains Mono", ui-monospace, monospace;
  color: var(--ok); white-space: nowrap;
}
.row .tag[data-wait] { color: var(--signal); }

/* ── cards ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.card h3 { color: var(--ink); }
.card p { font-size: 0.95rem; }

/* Numbered steps. The number is information — these ARE a sequence. */
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start; padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.step:first-of-type { border-top: 0; }
.step-n {
  font: 600 13px/28px "JetBrains Mono", ui-monospace, monospace;
  width: 28px; height: 28px; text-align: center; border-radius: 8px;
  background: var(--raised); color: var(--signal); border: 1px solid var(--line);
}
.step h3 { margin-bottom: 4px; }

/* ── pricing ────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}
.plan[data-featured] { border-color: var(--signal); background: var(--raised); }
.plan-name {
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.plan[data-featured] .plan-name { color: var(--signal); }
.price { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.price b { font: 700 2.3rem/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.03em; }
.price span { color: var(--ink-3); font-size: 0.9rem; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan li { position: relative; padding-left: 22px; font-size: 0.94rem; }
.plan li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--signal);
}
.plan li[data-no] { color: var(--ink-3); }
.plan li[data-no]::before { background: var(--line); }
.plan .btn { margin-top: auto; }

/* ── prose (privacy, terms) ─────────────────────────────────────────────── */
.prose { max-width: 76ch; }
.prose h2 { margin: var(--s5) 0 var(--s2); font-size: 1.35rem; }
.prose h3 { margin: var(--s4) 0 var(--s1); color: var(--ink); }
.prose p, .prose li { font-size: 1rem; }
.prose p + p { margin-top: var(--s2); }
.prose ul, .prose ol { padding-left: 22px; margin: var(--s2) 0; }
.prose li { margin: 6px 0; }
.prose a { color: var(--signal); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose code { font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.88em; background: var(--raised); padding: 2px 6px;
  border-radius: 5px; color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s5) 0; }

/* Wide tables scroll inside their own box; the page never moves sideways. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: var(--s3) 0; border: 1px solid var(--line); border-radius: var(--r); }
.prose table { border-collapse: collapse; width: 100%; min-width: 520px;
  font-size: 0.93rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* nowrap belongs on a short row label, never on a header that might hold a
   sentence — it blew the Microsoft-permissions cell out to 1,447px inside a
   329px box, so the one paragraph saying which mailbox rights FleetIQ asks
   for could only be read by swiping four screens sideways. */
.prose th { color: var(--ink); font-weight: 600; background: var(--surface); }
.prose tbody th { white-space: nowrap; background: var(--surface); }
.prose thead th { white-space: normal; }
.prose tr:last-child td { border-bottom: 0; }

/* ── notes ──────────────────────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--signal); background: var(--surface);
  padding: var(--s3); border-radius: 0 var(--r) var(--r) 0;
  display: grid; gap: var(--s1);
}
.note p { font-size: 0.95rem; }

/* ── faq ────────────────────────────────────────────────────────────────── */
details { border-top: 1px solid var(--line-soft); padding: var(--s3) 0; }
details summary { cursor: pointer; color: var(--ink); font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: var(--s2); }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--signal);
  font-family: "JetBrains Mono", ui-monospace, monospace; }
details[open] summary::after { content: "\2212"; }
details p { margin-top: var(--s2); font-size: 0.95rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line-soft); padding: var(--s5) 0 var(--s4);
  color: var(--ink-3); font-size: 0.9rem; }
/* NEVER put an fr track next to repeat(auto-fit, minmax(...)). The auto-fit
   tracks claim their 140px floor first and the flexible track is handed
   whatever is left — on a 393px phone that was FIVE PIXELS, so the brand and
   its paragraph overflowed their own cell and painted straight over the
   Product column. Three fixed tracks, and an explicit stack on narrow
   screens, cannot do that. (A page can have zero horizontal overflow and
   still be unreadable: overlap is not overflow, which is why the automated
   width checks all passed while the footer was a pile-up.) */
.foot-grid { display: grid; gap: var(--s4);
  grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(140px, 1fr)); }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
.foot-grid h4 { margin: 0 0 var(--s2); color: var(--ink); font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.foot-links { display: grid; gap: 8px; }
.foot-links a { color: var(--ink-3); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-bottom { margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--line-soft); display: flex; gap: var(--s3);
  justify-content: space-between; flex-wrap: wrap; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--signal);
  color: var(--signal-ink); padding: 10px 16px; border-radius: 0 0 var(--r) 0;
  font-weight: 600; z-index: 40;
}
.skip:focus { left: 0; }

/* ══ additions: the parts that sell ══════════════════════════════════════ */

/* THE EMAIL. The most persuasive thing on this site is what the agent
   actually writes, so it is shown as a mail client shows it — headers, body,
   the opt-out and the postal line that the law requires. Both examples are
   real output from the engine, not copy written for a website. */
.mail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
}
.mail-head {
  padding: 14px var(--s3); border-bottom: 1px solid var(--line);
  background: var(--raised); display: grid; gap: 3px;
}
.mail-head .h {
  font: 400 12.5px/1.6 "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink-3);
}
.mail-head .h b { color: var(--ink-2); font-weight: 500; }
.mail-head .subject {
  color: var(--ink); font-weight: 600; font-size: 1rem; margin-top: 5px;
  font-family: Archivo, sans-serif; letter-spacing: -0.01em;
}
.mail-body {
  padding: var(--s3); white-space: pre-wrap; font-size: 0.94rem;
  line-height: 1.62; color: var(--ink-2);
}
.mail-foot {
  padding: 11px var(--s3); border-top: 1px solid var(--line-soft);
  font-size: 0.82rem; color: var(--ink-3);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}
.pill {
  font: 500 11px/1.9 "JetBrains Mono", ui-monospace, monospace;
  padding: 0 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
}
.pill[data-on] { border-color: rgba(69,201,138,.4); color: var(--ok); }

/* Two emails side by side, to show they are not one template. */
.mails { display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ── comparison table ───────────────────────────────────────────────────── */
.compare { width: 100%; border-collapse: collapse; min-width: 560px;
  font-size: 0.94rem; }
.compare th, .compare td { padding: 13px 16px; text-align: left;
  border-bottom: 1px solid var(--line-soft); }
.compare thead th { color: var(--ink); font-weight: 600;
  background: var(--surface); white-space: nowrap; }
.compare tbody th { color: var(--ink-2); font-weight: 400; }
.compare td { text-align: center; width: 1%; white-space: nowrap; }
.compare .yes { color: var(--ok); font-weight: 600; }
.compare .no { color: var(--ink-3); }
.compare .num { font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink); font-weight: 600; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ── quiet stat strip: capability, never results we have not had ────────── */
.facts { display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line-soft); padding-top: var(--s4); }
.fact b { display: block; color: var(--ink); font-weight: 700;
  font-size: 1.5rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -0.02em; }
.fact span { font-size: 0.9rem; color: var(--ink-3); }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.mid { min-height: 62vh; display: grid; align-content: center; gap: var(--s3);
  justify-items: start; }

/* ── og card (rendered once, screenshotted, then never shipped) ─────────── */
.og {
  width: 1200px; height: 630px; background: var(--ground);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 74px 76px; position: relative; overflow: hidden;
}
.og::after {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,169,43,.20), transparent 68%);
}
.og h1 { font-size: 72px; line-height: 1.02; max-width: 20ch; }
.og .og-lede { font-size: 27px; color: var(--ink-2); max-width: 34ch;
  margin-top: 22px; line-height: 1.4; }
.og .og-foot { display: flex; align-items: center; gap: 18px;
  font: 500 20px/1 "JetBrains Mono", ui-monospace, monospace;
  color: var(--ink-3); position: relative; z-index: 2; }
.og .og-brand { font-size: 30px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; font-family: Archivo, sans-serif; }
.og .bar { width: 64px; height: 5px; background: var(--signal);
  border-radius: 3px; }

/* ── the active page, and the nav on a phone ────────────────────────────── */
.nav a[aria-current]:not(.btn) { color: var(--ink); font-weight: 600; }

/* Five things now live in the nav. Wrapping them makes the sticky header
   two-and-a-bit rows tall on a phone and eats the top of every page, so
   below 620px the nav becomes one row that scrolls sideways instead. The
   whole site is sold over WhatsApp, so the phone layout is the real one. */
@media (max-width: 620px) {
  .site-head .wrap { gap: var(--s2); min-height: 0; padding-top: 12px; }
  /* Brand and CTA share the first row; the links get the second one to
     themselves and scroll sideways inside it. Ordering them rather than
     re-nesting keeps one header markup for both layouts. */
  .head-cta { order: 1; margin-left: auto; padding: 9px 15px;
              font-size: 0.92rem; }
  .nav {
    order: 2; width: 100%; margin-left: 0; flex-wrap: nowrap; gap: 18px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 11px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}

/* ══ what the live-site audit found ══════════════════════════════════════ */

/* A scroller nobody can focus is a scroller a keyboard user cannot use, and
   the columns it hides here are the ones that matter — FleetIQ's column on
   the home page, Operator and Viewer on the security page. */
.tablewrap:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 10px;
}

/* THE COMPARISON TABLE ON A PHONE. At 375px the .compare tables are 560px
   wide inside an overflow box with no visible cue, so the home page showed
   the "By hand" column and hid the FleetIQ one the whole table exists to
   sell. Below 700px each row becomes its own card and every value carries
   its column name from data-col. */
@media (max-width: 700px) {
  .compare { min-width: 0; font-size: 0.92rem; }
  .compare thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .compare tbody, .compare tr, .compare tbody th, .compare td { display: block; }
  .compare tr {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); margin-bottom: var(--s2); overflow: hidden;
  }
  .compare tr:last-child { margin-bottom: 0; }
  .compare tbody th {
    width: auto; color: var(--ink); font-weight: 600;
    background: var(--raised); border-bottom: 1px solid var(--line);
  }
  .compare td {
    width: auto; text-align: right; white-space: normal;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3);
  }
  .compare tr td:last-child { border-bottom: 0; }
  .compare td::before {
    content: attr(data-col); color: var(--ink-3); font-weight: 400;
    text-align: left; flex: 0 0 auto;
  }
  /* The product's own column is the one being sold — give it the weight the
     header row used to carry. */
  .compare td[data-col="FleetIQ"] { background: rgba(240, 169, 43, .06); }
  .compare td[data-col="FleetIQ"]::before { color: var(--signal); }
}

/* A two-column label/value table has no business scrolling sideways on a
   phone — it is the page where somebody decides whether to trust us with a
   mailbox token. Real grids keep their min-width and their scroller. */
@media (max-width: 620px) {
  .prose table.pairs { min-width: 0; }
  .prose table.pairs tbody th { white-space: normal; width: 34%; }
  .prose table.pairs th, .prose table.pairs td { padding: 10px 12px; }
  /* A bare URL or a scope name is one long unbreakable word, and one of
     them is enough to push the whole table back off the screen. */
  .prose table.pairs td, .prose table.pairs td a,
  .prose table.pairs code { overflow-wrap: anywhere; }
}

/* ══ hover: the cards answer the cursor ══════════════════════════════════ */

/* A plan card is a thing you PICK, and it was completely inert — no cue that
   the cursor was even on it. This is the smallest motion that fixes that.
   transform and opacity only, so it is compositor-only and never reflows;
   ~140ms on an ease-out curve so it feels eager on the way in rather than
   floaty; and gated behind (hover: hover) so a phone does not tap into a
   hover state and stay there. */
.plan, .card { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .plan, .card {
    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 140ms ease,
                box-shadow 140ms ease;
  }

  /* The plans sit in a grid with a 20px gutter. 1.8% on a ~330px card grows
     it about 3px a side, so a hovered card can never touch its neighbour;
     z-index lifts it above them so its shadow is not clipped. */
  .plan:hover {
    transform: translateY(-4px) scale(1.018);
    border-color: #3a404a;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
    z-index: 2;
  }
  /* Gold keeps its amber edge — the hover state must not cost it the thing
     that marks it out. */
  .plan[data-featured]:hover {
    border-color: var(--signal);
    box-shadow: 0 18px 44px -18px rgba(240, 169, 43, .28);
  }

  /* Feature tiles are read, not clicked, so they get an acknowledgement
     rather than an invitation: a smaller lift and no real zoom. */
  .card:hover {
    transform: translateY(-2px) scale(1.006);
    border-color: #3a404a;
    z-index: 2;
  }

  /* Reaching for the card should already be reaching for its button. */
  .plan:hover .btn-ghost { border-color: #4a515d; background: var(--surface); }
}

/* Press feedback, on every pointer including touch. Depth, not travel: a
   control that MOVES under a finger already on it is how you get a
   mis-tap, so it scales in place and springs back. */
.btn { transition: background 140ms ease, border-color 140ms ease,
                   transform 90ms ease-out; }
.btn:active { transform: scale(0.975); }

@media (prefers-reduced-motion: reduce) {
  /* The global rule above already removes the transition — without this the
     card would JUMP to the scaled position instead of easing to it, which is
     worse for the people that setting exists for. The border still brightens,
     so the hover is acknowledged without anything moving. */
  .plan:hover, .card:hover, .btn:active { transform: none; }
}

/* ── one plan ───────────────────────────────────────────────────────────── */
/* The grid was built for three tiers; there is one now, sitting beside the
   explanation of why. A lone card stretched across a three-column auto-fit
   grid reads as though two are missing, which is the opposite of the point. */
.plans[data-single] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: var(--s4);
}
.plans[data-single] .plan { max-width: 420px; }
.plans[data-single] .note h3 { margin-bottom: var(--s2); }
@media (max-width: 760px) {
  .plans[data-single] { grid-template-columns: 1fr; gap: var(--s3); }
  .plans[data-single] .plan { max-width: none; }
}