/* OneTap design system. One file, no framework. Light first, dark via prefers-color-scheme.
   Palette: the card's black and white, then two colours with two jobs (review 18).
   ORANGE is the product: the hero emphasis, feature and step tiles on the home page, charts
   and data, stars, "current" and "on" markers (the switch, the Most popular ribbon, the
   featured plan), the Pro badge, and the accent on every card tile. The primary button stays
   the card's black.
   BLUE is structure and interaction: section eyebrows, secondary (outlined) buttons, text
   links, keyboard focus, the active nav pill and the account tab underline, step numbers, the
   info alert, a pending change, the filter bar, the icon beside every panel heading and stat,
   the card tiles, empty states and locked panels, the review-page brandmark, and the second
   data series (Android). Blue never carries a heading, a primary button or a chart.
   Every token has a value in both themes. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.b7c072bac9eb.woff2") format("woff2");
}

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #ececea;
  --fg: #141414;
  --fg-2: #2c2c2c;
  --muted: #5f5f5c;
  --line: #e2e2df;
  --line-strong: #c9c9c5;
  --brand: #161616;
  --brand-hover: #000000;
  --brand-fg: #f7f7f7;
  --brand-soft: #e8e8e5;
  --brand-soft-fg: #141414;
  --accent: #fd8e03;
  --accent-fg: #141414;
  --accent-soft: #fff1dc;
  /* The star orange deepened so a big number in it passes 4.5:1 on white (the stat tiles). */
  --accent-ink: #b45f00;
  /* The logo blue (#006dfb, sampled from static/img/logo.png). --blue is for graphics and
     rings; --blue-ink is the same hue deepened so 14px text passes 4.5:1 on every light surface. */
  --blue: #006dfb;
  --blue-ink: #0055c4;
  --blue-soft: #e6f0ff;
  --blue-line: #8fbcff;
  --link: var(--blue-ink);
  --ok: #157a3f;
  --ok-soft: #dcf5e6;
  --bad: #b3261e;
  --bad-soft: #fde7e5;
  --warn: #7a4300;
  --warn-soft: #ffe9c8;
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06), 0 1px 1px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 6px 20px -8px rgba(20, 20, 20, 0.2), 0 2px 6px rgba(20, 20, 20, 0.05);
  --shadow-lg: 0 24px 60px -20px rgba(20, 20, 20, 0.3);
  --ring: 0 0 0 3px rgba(0, 109, 251, 0.3);
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --chart: var(--accent);
  --chart-2: var(--blue);
  /* Per-card series on the Analytics page: the two brand colours, their shades and
     tints, and neutrals, in a fixed order (adjacent pairs checked for colour-blind
     separation); --s0 is the "other cards" fold. Never a third hue. */
  --s1: #fd8e03;
  --s2: #006dfb;
  --s3: #161616;
  --s4: #8a8a86;
  --s5: #a85a00;
  --s6: #7fb3ff;
  --s7: #0b3a7a;
  --s8: #ffc27a;
  --s0: #c9c9c5;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0e;
    --surface: #181818;
    --surface-2: #232323;
    --fg: #f2f2f0;
    --fg-2: #d6d6d2;
    --muted: #a3a39e;
    --line: #2a2a2a;
    --line-strong: #3d3d3d;
    --brand: #f7f7f7;
    --brand-hover: #ffffff;
    --brand-fg: #141414;
    --brand-soft: #2a2a2a;
    --brand-soft-fg: #f2f2f0;
    --accent: #fd8e03;
    --accent-fg: #141414;
    --accent-soft: #3a2a10;
    --accent-ink: #ffb454;
    --blue: #006dfb;
    --blue-ink: #6db1ff;
    --blue-soft: #10223f;
    --blue-line: #2f63a8;
    --ok: #7ee2a3;
    --ok-soft: #10301e;
    --bad: #ff9c94;
    --bad-soft: #3a1614;
    --warn: #f4c95d;
    --warn-soft: #3a2b0c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
    --ring: 0 0 0 3px rgba(0, 109, 251, 0.45);
    --s1: #fd8e03;
    --s2: #4d94ff;
    --s3: #f2f2f0;
    --s4: #8a8a86;
    --s5: #ffc27a;
    --s6: #a3c8ff;
    --s7: #a85a00;
    --s8: #5a5a57;
    --s0: #3d3d3d;
    color-scheme: dark;
  }
}

/* ---------- Reset and type ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The UA rule for [hidden] is display:none on the element's *type*, so any
   class that sets display beats it: `.unsaved-note { display: inline-flex }`
   left "Unsaved changes" on screen at page load on the card, Account,
   Branding and Plans pages, warning owners about edits they had not made.
   !important so a future component cannot quietly reintroduce it. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { display: inline-block; vertical-align: middle; max-width: 100%; }
/* Inline icons default to 20px; any class rule (zero-specificity :where) still wins. */
:where(svg:not([width]):not([height])) { width: 20px; height: 20px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; color: var(--fg); letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
p { margin: 0; }
p + p { margin-top: 0.75em; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--fg-2);
}
/* Keyboard focus: one blue outline everywhere, following each element's own corners. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Skip link: the first tab stop on every page, visible only while focused. */
.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-fg); font-weight: 600; }
.skip:focus { top: 12px; text-decoration: none; }
/* Reduced motion: no float, no hover lift, no smooth scroll, no fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
::selection { background: var(--brand); color: var(--brand-fg); }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.lead { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); color: var(--muted); line-height: 1.6; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-ink); background: var(--blue-soft);
  padding: 6px 12px; border-radius: 999px;
}
.eyebrow svg { width: 14px; height: 14px; }
.mt-2 { margin-top: 12px; } .mt-3 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: 20px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ta-r { text-align: right; }
.bad { color: var(--bad); }

/* ---------- Shell ---------- */
.site {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site .inner {
  max-width: 1080px; margin: 0 auto; padding: 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: inline-flex; align-items: center; color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand .logo { height: 32px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; }
/* The app nav's icons only show on the phone tab bar (below); in the header the words are enough. */
.nav.app .ico { display: none; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 44px; border-radius: 999px; color: var(--fg-2);
  font: inherit; font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.nav a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.nav a.active { background: var(--blue-soft); color: var(--blue-ink); }
.nav .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-soft-fg); font-weight: 700; font-size: 0.75rem; }
.nav a.active .avatar { background: var(--blue-ink); color: var(--surface); }
/* The public header's one action: Sign in for a visitor, Manage my cards for an owner. A blue pill. */
.nav a.btn { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--blue-line); background: var(--surface); color: var(--blue-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav a.btn:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue); }
/* Phones: four nav entries (Cards, Analytics, Branding, the avatar) and the logo in 390px */
/* Five entries since review 19 (Inbox is icon-only here): 6px padding keeps them inside 390px */
@media (max-width: 480px) { .site .inner { padding-inline: 12px; gap: 6px; } .brand .logo { height: 28px; } .nav { gap: 2px; } .nav a { padding: 8px 6px; font-size: 0.875rem; } .nav a.btn { padding: 8px 14px; } }
/* Phones: the signed-in nav becomes a tab bar fixed to the bottom of the screen, icon over label,
   thumb-sized. The header keeps only the logo. body.has-tabs leaves room under the page. */
@media (max-width: 599px) {
  /* backdrop-filter on the header would make it the containing block for the fixed bar, so the
     signed-in header goes plain on phones (it is only the logo there anyway). */
  body.has-tabs .site { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .nav.app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.35);
  }
  .nav.app a {
    flex-direction: column; justify-content: center; gap: 2px;
    padding: 6px 2px 5px; min-height: 54px; border-radius: 10px;
    color: var(--muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
  }
  .nav.app a:hover { background: transparent; color: var(--fg-2); }
  .nav.app a.active { background: transparent; color: var(--blue-ink); }
  .nav.app a.active .ico { color: var(--blue); }
  .nav.app .ico { display: grid; place-items: center; width: 26px; height: 26px; }
  .nav.app .ico svg, .nav.app a.inbox svg { width: 24px; height: 24px; }
  .nav.app .lbl { display: inline; line-height: 1; }
  .nav.app .avatar { width: 24px; height: 24px; font-size: 0.7rem; }
  .nav.app .count { position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.62rem; border: 2px solid var(--surface); box-sizing: content-box; }
  body.has-tabs main { padding-bottom: 84px; }
  body.has-tabs .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

main.wrap { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding-block: 32px 64px; padding-inline: 20px; }
main.wrap.narrow { max-width: 560px; padding-top: 48px; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.site-footer .inner {
  max-width: 1080px; margin: 0 auto; padding: 24px 20px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center;
}
.site-footer a { color: var(--muted); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-head .sub { color: var(--muted); margin-top: 6px; max-width: 64ch; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted); margin-bottom: 12px; }
.crumbs a { color: var(--muted); }
.crumbs svg { width: 14px; height: 14px; opacity: 0.6; }
.subnav { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; margin-bottom: -1px; font-weight: 600; font-size: 0.9rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--fg); text-decoration: none; }
.subnav a.active { color: var(--blue-ink); border-bottom-color: var(--blue); }
.subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.subhead h4 { font-size: 0.95rem; }
.subhead.first { margin-top: 0; padding-top: 0; border-top: 0; }
.taglist + .subhead { margin-top: 28px; }

/* ---------- Powered by: the site footer and every tap page ---------- */
.powered {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 0.8rem; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, color 0.15s;
}
.powered b { color: var(--fg-2); font-weight: 700; }
.powered:hover { text-decoration: none; border-color: var(--line-strong); color: var(--fg-2); }

/* ---------- Buttons: one black primary per page, everything else a blue outline ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid var(--blue-line);
  background: var(--surface); color: var(--blue-ink);
  font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s, border-color 0.15s;
}
.btn:hover { text-decoration: none; background: var(--blue-soft); border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.primary { background: var(--brand); color: var(--brand-fg); border-color: transparent; }
.btn.primary:hover { background: var(--brand-hover); border-color: transparent; }
.btn.big { padding: 14px 24px; min-height: 52px; font-size: 1.05rem; border-radius: 12px; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; min-height: 36px; font-size: 0.875rem; }
@media (max-width: 600px) { .btn.sm { min-height: 44px; padding: 8px 14px; } }
.btn[disabled] { background: var(--surface-2); color: var(--muted); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
button.link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
button.link:hover { text-decoration: underline; }
form.inline { display: inline; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card .card-head h3 { display: flex; align-items: center; gap: 10px; }
.card .card-head h3 svg { width: 20px; height: 20px; color: var(--blue-ink); }
.card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); position: relative; }
.card.soft { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 880px) { .two-col { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 0.9rem; margin-top: 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
.kv.order dd { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kv.order svg { width: 16px; height: 16px; color: var(--muted); }
details.adv { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
details.adv summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--fg-2); }
details.adv summary:hover { color: var(--fg); }
details.how { margin-top: 10px; padding-top: 10px; }
details.how summary { font-size: 0.875rem; color: var(--blue-ink); }
.how-list { margin: 10px 0 0; padding-left: 20px; font-size: 0.9rem; color: var(--fg-2); line-height: 1.5; }
.how-list li + li { margin-top: 6px; }

/* ---------- Alerts and flash messages: warn, bad, ok, and blue for information ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.alert, .messages li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--fg-2); font-size: 0.95rem;
}
.alert svg, .messages li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert strong { color: var(--fg); }
.alert.warn, .messages li.warning { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.alert.warn strong, .alert.warn a, .alert.warn button.link, .alert.warn p { color: var(--warn); }
.alert.bad, .messages li.error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.alert.bad strong, .alert.bad a, .alert.bad button.link, .alert.bad p { color: var(--bad); }
.alert.ok, .messages li.success { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.alert.ok strong, .alert.ok p { color: var(--ok); }
.alert.info, .messages li.info { background: var(--blue-soft); border-color: transparent; color: var(--blue-ink); }
.alert.info strong, .alert.info a, .alert.info p { color: var(--blue-ink); }
.alert .body { flex: 1; }
/* Honeypot field on public forms: never shown, never focused. */
.hp { display: none !important; }
.alert .body a, .alert .body button.link { font-weight: 600; text-decoration: underline; }
.alert + .alert { margin-top: 10px; }

/* ---------- Badges: one colour per meaning ----------
   green = live, red = off/gone/unpaid, amber = needs attention, grey = neutral (retired, unclaimed, Starter),
   orange-soft = Pro, black = Elite (inverts in dark like the primary button). */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.5;
  background: var(--surface-2); color: var(--fg-2); vertical-align: middle; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.badge.active, .badge.trialing { background: var(--ok-soft); color: var(--ok); }
.badge.inactive, .badge.canceled, .badge.unpaid { background: var(--bad-soft); color: var(--bad); }
.badge.past_due { background: var(--warn-soft); color: var(--warn); }
/* A card on a free trial in the card list: blue, because the tier is on loan, not bought. */
.badge.trial { background: var(--blue-soft); color: var(--blue-ink); }
.badge.plain::before { display: none; }
.badge.plan-pro { background: var(--accent-soft); color: var(--warn); }
.badge.plan-elite { background: var(--brand); color: var(--brand-fg); }

/* The tier badge: the one mark that says "this control is what you pay for", on the paid
   nav entries, tabs, fields and options (review 21). Deliberately quieter than .badge, which
   carries status: an outlined pill in the muted ink, so it names the tier without competing
   with the control beside it. Its .on-trial form says the tier is on loan, so during a free
   trial every field Starter would not include shows what is about to go. Both themes come
   free: every value is a token. */
.tierbadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.6; white-space: nowrap; vertical-align: middle;
}
.tierbadge svg { width: 12px; height: 12px; flex: none; opacity: 0.8; }
.tierbadge.on-trial { border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue-ink); }
.tierbadge.on-trial svg { opacity: 1; }
/* On a dark panel or a heading row the pill borrows the surface it sits on. */
.card-head .tierbadge, .subhead .tierbadge, h1 .tierbadge, h3 .tierbadge, summary .tierbadge { background: var(--surface-2); }
.field > label .tierbadge, .switch .text strong .tierbadge { margin-left: 6px; }
.nav .tierbadge { margin-left: 6px; }
/* A feature the account cannot use yet: present, legible, and quieter than
   the rest, so it reads as something to open rather than something broken.
   Never hidden -- an owner who cannot see a feature cannot want it.
   The padlock inside the pill is the whole signal; no extra outline, which
   drew three grey slabs across the header next to the quiet crown pills.

   The badge shares the word `locked` with the card page's upgrade PANEL
   (.locked, far below: a dashed, padded, filled box). Without the rule
   directly under this comment the badge inherited that box and rendered as a
   52px grey slab where the pill is 20px, in both themes, on every Starter
   pageview. This comment is why: it once had two closers and one opener, so
   the rule was swallowed as garbage declarations and the stylesheet simply
   had no .tierbadge.locked in it at all. Seen in a screenshot; the DOM probe
   reported the markup as correct, because the markup WAS correct. */
.tierbadge.locked {
  padding: 2px 9px 2px 7px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--muted); font-weight: 600;
}
.tierbadge.locked svg { opacity: 0.75; }
.nav a.navlock { color: var(--muted); }
.nav a.navlock:hover { color: var(--fg); }
.nav a.navlock .ico { color: var(--muted); }
/* In the header the pill sits inside a nav link, not on a panel: no fill, and
   centred on the label rather than sitting below its baseline. */
.nav .tierbadge { background: transparent; vertical-align: baseline; }
@media (max-width: 720px) { .nav:not(.app) .tierbadge { display: none; } }
/* The phone tab bar stacks an icon over a label, so a pill beside the label
   has nowhere to go: it wrapped onto a second line and made every locked
   entry double height (seen in a screenshot, 2026-09-13; the DOM probe
   reported no overflow and looked fine). The muted entry carries the locked
   state there, and the tier is named on the page it leads to. */
@media (max-width: 720px) { .nav.app .tierbadge { display: none; } }

/* The running-trial banner on the card page and the trial line everywhere else. Blue, because
   a trial is state and structure, never the product's orange: it is on loan. */
.trialbar {
  /* The glyph sits with the FIRST line, not floating in the middle of a
     paragraph that wraps to four lines on a phone (caught in QA at 400px). */
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--blue-line); border-radius: var(--radius-sm);
  background: var(--blue-soft); color: var(--fg);
}
.trialbar svg { width: 20px; height: 20px; flex: none; color: var(--blue-ink); margin-top: 1px; }
/* The action still centres against the text block it belongs to. */
.trialbar .btn, .trialbar form { align-self: center; }
.trialbar .body { flex: 1 1 260px; min-width: 0; font-size: 0.9rem; line-height: 1.5; }
.trialbar .body strong { color: var(--fg); }
.trialbar .days { font-variant-numeric: tabular-nums; }
.trialbar .btn { flex: none; }
/* The free-trial callout on a plan card, under the price. The terms that used to sit
   below it as a loose paragraph now live INSIDE it: read outside the blue they looked
   like a footnote about the plan rather than about the trial (Andrew, 2026-09-12).
   That is why this is a block callout and no longer a one-line pill -- a 999px radius
   around two stacked lines reads as a lozenge, not a badge. */
.plan .trialnote {
  margin: 0 0 4px; padding: 8px 11px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--blue-line); background: var(--blue-soft); color: var(--blue-ink);
}
.plan .trialnote .head {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 0.78rem; font-weight: 600; color: var(--blue-ink);
}
/* The blank line Andrew asked for, as spacing rather than an empty element. */
.plan .trialnote .fine {
  margin: 7px 0 0; font-size: 0.75rem; font-weight: 400; line-height: 1.45;
  color: var(--blue-ink); opacity: 0.85;
}
.plan .trialnote svg { width: 13px; height: 13px; flex: none; }
/* "Who gets it" -- the trial is one window per ACCOUNT, anchored at the first card,
   and the callout has to say so without the headline carrying it.

   A <details> so it opens on TAP as well as hover. Hover alone left a phone showing
   the label with no way to read the note, and phones are most of this page (Andrew,
   2026-09-12). The panel is absolutely positioned, so opening it does not reflow the
   card the way an in-flow fold did. Hover and keyboard focus force it open via
   [open]-independent rules; tap and Enter are the browser's own behaviour. */
.plan .trialnote { position: relative; }
.plan .trialnote .whowhen { margin: 6px 0 0; }
.plan .trialnote .whowhen summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  list-style: none; padding: 2px 0;
  font-size: 0.72rem; font-weight: 600; color: var(--blue-ink); opacity: 0.9;
}
.plan .trialnote .whowhen summary::-webkit-details-marker { display: none; }
.plan .trialnote .whowhen summary:hover,
.plan .trialnote .whowhen summary:focus-visible { opacity: 1; }
.plan .trialnote .whowhen summary .lbl {
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.plan .trialnote .whowhen summary svg { width: 12px; height: 12px; }
/* Anchored to the CALLOUT, not the small trigger: a percentage width on the trigger
   collapsed the panel to a one-word column, and opening upward covered the terms it
   explains. Opens downward, inside its own card. */
.plan .trialnote .whowhen .tip {
  position: absolute; left: 10px; right: 10px; top: calc(100% + 6px); z-index: 5;
  display: block; padding: 7px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-sm);
  font-size: 0.72rem; font-weight: 400; line-height: 1.45;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
.plan .trialnote .whowhen[open] .tip,
.plan .trialnote .whowhen:hover .tip,
.plan .trialnote .whowhen:focus-within .tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .plan .trialnote .whowhen .tip { transition: none; } }
/* The one-line trial note: under a feature page's heading, under the plan cards when a
   card cannot start one, and on a card that has already had its trial. It is a paragraph
   in its own right, so it is a BLOCK flex row: an inline-flex here let the next paragraph
   run onto the same line (caught in QA on the plan page, next to the billing line). */
.trialnote-line { display: flex; align-items: center; gap: 7px; }
.trialnote-line svg { width: 14px; height: 14px; flex: none; color: var(--blue-ink); }

/* ---------- Forms ---------- */
.field { margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field > label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--fg); margin-bottom: 6px; }
.field .hint, .hint { color: var(--muted); font-size: 0.85rem; margin-top: 6px; line-height: 1.5; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: 11px 14px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5f5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
@media (prefers-color-scheme: dark) { select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a39e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } }
select:hover { border-color: var(--blue-line); }
select:disabled { opacity: 0.6; cursor: not-allowed; }
/* Browsers with a stylable picker (Chromium 135+): the open list is ours too. Others keep their
   native list under the same closed control. */
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { cursor: pointer; }
  select::picker-icon { display: none; }
  select:open { border-color: var(--blue); box-shadow: var(--ring); }
  select::picker(select) {
    border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; margin-top: 6px;
    background: var(--surface); color: var(--fg); box-shadow: var(--shadow-md); min-width: anchor-size(width);
  }
  select option { padding: 10px 12px; border-radius: var(--radius-xs); font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
  select option:hover, select option:focus-visible { background: var(--blue-soft); color: var(--blue-ink); outline: none; }
  select option:checked { font-weight: 600; }
  select option::checkmark { order: 2; margin-left: auto; color: var(--blue); }
}
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
/* Unsaved changes (static/js/app.js): the changed field gets the blue accent and its label a tag */
input.unsaved:not([type="checkbox"]):not([type="radio"]), select.unsaved, textarea.unsaved { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field.unsaved > label::after { content: "Unsaved"; margin-left: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft); padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
label.switch.unsaved .track, label.check-inline.unsaved input { box-shadow: 0 0 0 3px var(--blue-soft); }
.unsaved-note { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--blue-ink); }
.unsaved-note svg { width: 16px; height: 16px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); width: 18px; height: 18px; margin: 0; }
input[type="file"] { padding: 6px; min-height: 44px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.9rem; width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 0.875rem; color: var(--fg); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
input[type="file"]:hover::file-selector-button { background: var(--surface-2); }
.errorlist { list-style: none; padding: 0; margin: 6px 0 0; color: var(--bad); font-size: 0.85rem; font-weight: 500; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }

/* A money figure that is money OFF: the coupon discount on the review pages.
   Reads as the same positive green as the applied-coupon chip beside it
   rather than inheriting body text, which is what it did while this class
   had no rule at all. */
.good { color: var(--ok); font-weight: 600; }

/* Coupon box on the review pages. The Apply button sits against the input so
   the two read as one control; on a phone they stack. */
.promo-row { display: flex; gap: 8px; align-items: stretch; }
.promo-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.promo-row .btn { flex: 0 0 auto; }
.promo-applied {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--ok-soft); color: var(--ok); font-size: 0.9rem;
}
.promo-applied svg { width: 16px; height: 16px; flex: 0 0 auto; }
.promo-applied span { flex: 1 1 auto; }
/* Off-screen but still focusable and still submitted. Used for the default
   submit button that makes Enter confirm a review page: it has to be the
   form's FIRST submit control to win the implicit submission, but it must not
   be seen and must not take a tab stop of its own (tabindex="-1"), so the
   visible order stays coupon box, then Confirm. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 420px) { .promo-row { flex-wrap: wrap; } .promo-row .btn { width: 100%; } }
.form-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.form-foot .hint { margin: 0; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.check-inline svg { width: 16px; height: 16px; flex: none; }

/* Switch */
.switch, .field > label.switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; position: relative; font-weight: 400; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  display: block; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong);
  position: relative; transition: background 0.2s; margin-top: 1px;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }
.switch .text strong { display: block; font-weight: 600; }
.switch .text span { color: var(--muted); font-size: 0.875rem; }

/* Monthly / annual toggle */

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th { text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; color: var(--fg); }
/* Plans form: a row whose select differs from what is saved is a pending change (blue) */
.plantable select { min-width: 170px; }
tr.changed td { background: var(--blue-soft); }
tr.changed select { border-color: var(--blue); }
@media (max-width: 600px) {
  .plantable thead { display: none; }
  .plantable tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .plantable td { display: block; padding: 0; border: 0; }
  .plantable td + td { margin-top: 8px; }
  .plantable select { width: 100%; }
  tr.changed td { background: none; }
}
.bills { display: flex; flex-wrap: wrap; gap: 10px; }
.bill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.9rem; }
.invoice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.invoice + .invoice { margin-top: 16px; }
.invoice > p { margin: 10px 0 0; }
.invhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--fg); }
.invhead > div { white-space: nowrap; }
.invhead .eyebrow { margin-bottom: 6px; }
.invhead .amount { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.invhead .amount span { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.lines { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.lines th { padding: 8px 0; }
.lines td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.lines th + th, .lines td + td { padding-left: 12px; }
.lines tfoot td { border-bottom: 0; padding-top: 12px; }
.lines.changes { margin: 18px 0 4px; }
.lines.changes svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }

/* ---------- Stats and charts (orange is the data colour; blue only for the second series) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.stat .k { font-size: 0.8rem; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat .k svg { width: 16px; height: 16px; flex: none; color: var(--blue-ink); }
/* The number is the data, so it carries the orange (as ink, for contrast) over a short orange rule. */
.stat .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1; color: var(--accent-ink); position: relative; padding-top: 6px; }
.stat .v::before { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--accent); }
.stat .v small { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-left: 4px; }
.stat .v small.trend { font-weight: 600; }
.stats-note { margin: -14px 0 24px; }
.trend { display: inline-flex; align-items: center; gap: 4px; }
.trend svg { width: 14px; height: 14px; flex: none; }
.trend.up, .stat .v small.trend.up { color: var(--ok); }
.trend.down, .stat .v small.trend.down { color: var(--bad); }
.trend.flat { color: var(--muted); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; width: 96px; }
.spark i { flex: 1; background: var(--chart); min-height: 3px; border-radius: 3px 3px 1px 1px; opacity: 0.85; }
.bignum { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent-ink); }
.bignum small { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
/* A card's lifetime tap count on a plan with NO analytics. It looks like
   .bignum because it is the same kind of fact, but it is deliberately a
   different class: test_promises pins ".bignum" as the marker for "this plan
   has analytics", and a running total is not a tap history. */
.lifenum { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lifenum small { display: block; font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.key { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); min-width: 0; }
.key .k { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.key b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.key .t { font-size: 0.75rem; color: var(--muted); line-height: 1.3; }
.chart { position: relative; margin: 8px 0 0; padding-top: 28px; }
.chart .ymax { position: absolute; top: 4px; right: 0; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; }
.chart .ymax::before { content: "peak "; }
.chart .bars {
  display: flex; align-items: flex-end; gap: 3px; height: 140px; border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px) top / 100% 1px no-repeat;
}
.chart .bars i { flex: 1; position: relative; background: var(--chart); min-height: 3px; border-radius: 3px 3px 0 0; opacity: 0.85; transition: opacity 0.15s; cursor: default; }
.chart .bars i:hover, .chart .bars i:focus { opacity: 1; }
/* Chart bars, stack segments and heat cells are tabindex=0 so a keyboard can
   read their data-label tooltip. They had `outline: none` on focus, which
   left the keyboard user with no idea which one they were on when the
   tooltip was off-screen or clipped. Keep the outline; the tooltip is the
   content, the ring is the position. */
.chart .bars i:focus-visible,
.chart.stack .col i:focus-visible,
.heat i:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Tooltips: hover on desktop, tap (focus) on phones; the edge bars pin to the sides */
.chart .bars i::after { content: attr(data-label); display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); font-size: 0.75rem; font-weight: 600; font-style: normal; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 2; }
.chart .bars i:hover::after, .chart .bars i:focus::after { display: block; }
.chart .bars i:first-child::after, .chart .bars i:nth-child(2)::after, .chart .bars i:nth-child(3)::after { left: 0; transform: none; }
.chart .bars i:last-child::after, .chart .bars i:nth-last-child(2)::after, .chart .bars i:nth-last-child(3)::after { left: auto; right: 0; transform: none; }
.chart .axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.breakdown { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.breakdown li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.875rem; }
.breakdown li .bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.breakdown li .bar i { display: block; height: 100%; background: var(--chart); border-radius: 999px; }
.breakdown li b { font-variant-numeric: tabular-nums; }
/* Split bar (the Phones breakdown): one bar, orange first and blue second, with matching dots in the list */
.split { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-top: 16px; }
.split i { display: block; height: 100%; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--chart); }
.split + .kv { margin-top: 10px; }
@media (max-width: 480px) {
  .stat .v { font-size: 1.4rem; }
  .keys { grid-template-columns: 1fr 1fr; }
  .keys .key:first-child { grid-column: 1 / -1; }
  .chart .bars { gap: 2px; }
}

/* ---------- Analytics page (review 17): stacked columns, heatmap, legend, leaderboard ---------- */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; padding: 16px 20px; margin-bottom: 20px; background: var(--blue-soft); border-color: transparent; box-shadow: none; }
.filters .field > label, .filters legend { color: var(--blue-ink); }
.filters .hint { color: var(--fg-2); }
.filters .field { margin: 0; flex: 1 1 180px; min-width: 0; }
.filters .field.search { flex: 2 1 240px; }
.filters fieldset { border: 0; padding: 0; min-width: 0; }
.filters legend { font-weight: 600; font-size: 0.9rem; padding: 0; margin-bottom: 6px; }
.filters select { min-height: 44px; }
.filters details summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); cursor: pointer; font-size: 1rem; list-style: none; }
.filters details summary::-webkit-details-marker { display: none; }
.filters details summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.filters details[open] summary::after { transform: rotate(-135deg); }
.filters .picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; margin-top: 8px; }
.filters .picks .check-inline { min-height: 36px; font-size: 0.95rem; }
.filters .apply { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; flex: 1 1 260px; }
@media (max-width: 600px) { .filters .apply { padding-top: 0; } }
.stat .v small.alone { margin-left: 0; display: block; margin-top: 4px; }

/* Series swatches and the legend: text stays in text colours, the swatch carries identity */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--chart); }
.c1 { background: var(--s1); } .c2 { background: var(--s2); } .c3 { background: var(--s3); } .c4 { background: var(--s4); }
.c5 { background: var(--s5); } .c6 { background: var(--s6); } .c7 { background: var(--s7); } .c8 { background: var(--s8); }
.c0 { background: repeating-linear-gradient(135deg, var(--s0) 0 3px, transparent 3px 6px) var(--surface-2); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--fg-2); margin-bottom: 8px; }
.legend span { white-space: nowrap; }

/* Stacked columns: one .col per day, hour or weekday; one segment per series, 2px gaps */
.chart.stack .cols { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px) top / 100% 1px no-repeat; }
.chart.stack .col { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; min-width: 0; }
.chart.stack .col i { display: block; position: relative; min-height: 3px; border-radius: 2px 2px 0 0; opacity: 0.9; transition: opacity 0.15s; cursor: default; }
.chart.stack .col i:first-child { border-radius: 2px 2px 0 0; }
.chart.stack .col i:hover, .chart.stack .col i:focus { opacity: 1; }
.chart.stack.dense .cols { gap: 1px; }
.chart.stack.wide .cols { gap: 8px; }
.chart .axis.four { display: grid; grid-template-columns: repeat(4, 1fr); }
.chart .axis.seven { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.chart .axis.seven span { text-align: center; }
.chart .col i::after, .heat i::after { content: attr(data-label); display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); font-size: 0.75rem; font-weight: 600; font-style: normal; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 2; }
.chart .col i:hover::after, .chart .col i:focus::after, .heat i:hover::after, .heat i:focus::after { display: block; }
.chart .col:first-child i::after, .chart .col:nth-child(2) i::after, .chart .col:nth-child(3) i::after, .chart .col:nth-child(4) i::after, .chart .col:nth-child(5) i::after, .heat i:nth-child(2)::after, .heat i:nth-child(3)::after, .heat i:nth-child(4)::after { left: 0; transform: none; }
.chart .col:last-child i::after, .chart .col:nth-last-child(2) i::after, .chart .col:nth-last-child(3) i::after, .chart .col:nth-last-child(4) i::after, .chart .col:nth-last-child(5) i::after, .heat i:last-child::after, .heat i:nth-last-child(2)::after, .heat i:nth-last-child(3)::after, .heat i:nth-last-child(4)::after { left: auto; right: 0; transform: none; }
@media (max-width: 480px) { .chart.stack .cols { gap: 2px; } .chart.stack.dense .cols { gap: 1px; } .chart.stack.wide .cols { gap: 4px; } }

/* Heatmap: weekday rows by hour, one hue (orange) darkening with the count */
.heat { display: grid; gap: 3px; margin-top: 4px; }
.heat .row { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat .d { font-size: 0.75rem; color: var(--muted); }
.heat i { display: block; position: relative; aspect-ratio: 1; min-height: 10px; border-radius: 3px; background: var(--surface-2); cursor: default; }
.heat i.l1 { background: var(--chart); opacity: 0.3; } .heat i.l2 { background: var(--chart); opacity: 0.55; }
.heat i.l3 { background: var(--chart); opacity: 0.8; } .heat i.l4 { background: var(--chart); opacity: 1; }
.heat i:hover, .heat i:focus { outline: 2px solid var(--fg); outline-offset: 1px; opacity: 1; z-index: 1; }
.heat .row.axis { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 480px) { .heat .row { gap: 2px; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); } .heat .row.axis { grid-template-columns: 30px repeat(4, minmax(0, 1fr)); } }

/* Phones: a three-part split bar */
.split.devices .ios { background: var(--chart); } .split.devices .android { background: var(--chart-2); }
.split.devices .other, .split.devices .unknown { background: var(--line-strong); }
.split.devices i { flex: none; }
.dot.ios { background: var(--chart); } .dot.android { background: var(--chart-2); } .dot.other, .dot.unknown { background: var(--line-strong); }

/* Funnel and leaderboard */
.breakdown.funnel li.total { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; }
.board th.num, .board td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board td .badge { margin-left: 6px; }
.board td .sw { margin-right: 8px; }
/* A card named in a table (Plans form, leaderboard, review): its tile, then the name, which may wrap */
.cardname { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; vertical-align: middle; }
.cardname > a, .cardname > span:not(.cardtile) { min-width: 0; }
.cardname .sw { flex: none; margin-right: 0; }
.board .trend svg { width: 13px; height: 13px; }

/* ---------- Card list ---------- */
.taglist { display: grid; gap: 12px; }
.tagrow {
  display: grid; grid-template-columns: 1fr auto auto auto auto auto; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; color: var(--fg); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.tagrow:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tagrow .name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tagrow .title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tagrow .dest { color: var(--muted); font-size: 0.85rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tagrow .num { text-align: right; line-height: 1.15; }
.tagrow .num b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.tagrow .num span { font-size: 0.75rem; color: var(--muted); }
.tagrow .num span .trend { vertical-align: -3px; margin-left: 2px; }
.tagrow .num span .trend svg { width: 13px; height: 13px; }
.tagrow .spark.upsell { justify-content: center; align-items: center; height: auto; width: auto; white-space: nowrap; }
/* A card with no analytics still knows its own tap count; the number is the
   orange the rest of the data uses, with the words in the muted grey, so it
   reads as a figure rather than as an advert. */
.tagrow .spark.upsell { flex-direction: column; gap: 1px; line-height: 1.2; }
.tagrow .spark.upsell .lifetap { font-size: 1.05rem; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.tagrow .chev { color: var(--muted); display: grid; }
.tagrow .chev svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .tagrow { grid-template-columns: 1fr auto auto; gap: 12px; padding: 14px 16px; }
  .tagrow .name { gap: 12px; }
  .tagrow .spark, .tagrow .num.d30, .tagrow .chev { display: none; }
}

/* ---------- Card tiles: one card, one tile ----------
   The platform mark of the card's main link (or the tap mark before it has one), centred on
   a blue tile with the mark in blue and one orange element (the pin's dot, the star, the
   compass needle, the arcs). Same tile in the card list, the card page, the Plans form, the
   leaderboard and the review pages. Status is the badge's job: an off card only dims. */
.cardtile { --tile-accent: var(--accent); width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; background: var(--blue-soft); color: var(--blue-ink); vertical-align: middle; }
.cardtile svg { width: 24px; height: 24px; display: block; }
.cardtile.sm { width: 32px; height: 32px; border-radius: 9px; }
.cardtile.sm svg { width: 18px; height: 18px; }
.cardtile.lg { width: 56px; height: 56px; border-radius: 16px; }
.cardtile.lg svg { width: 30px; height: 30px; }
.cardtile.off { --tile-accent: currentColor; background: var(--surface-2); color: var(--muted); }
@media (max-width: 720px) { .tagrow .cardtile { width: 40px; height: 40px; border-radius: 11px; } .tagrow .cardtile svg { width: 22px; height: 22px; } }
/* The card page: tile beside the title */
.page-head .titled { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-head .titled > div { min-width: 0; }
@media (max-width: 480px) { .page-head .titled { gap: 12px; } .page-head .titled .cardtile.lg { width: 48px; height: 48px; border-radius: 14px; } .page-head .titled .cardtile.lg svg { width: 26px; height: 26px; } }

.empty { text-align: center; padding: 48px 24px; }
.empty .glyph { width: 64px; height: 64px; border-radius: 18px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; margin: 0 auto 16px; }
.empty .glyph svg { width: 30px; height: 30px; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--muted); max-width: 40ch; margin-inline: auto; }

/* ---------- Inbox (review 19): the emails the app sent, private feedback first ----------
   Rows like the card list; the kind mark on a blue tile; an orange dot on the tile marks
   unread (the one orange element per row). The stored email is framed, never inlined. */
.msglist { display: grid; gap: 10px; }
.msgrow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; color: var(--fg); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.msgrow:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.msgrow .body { min-width: 0; }
.msgrow .subj { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgrow.unread .subj { font-weight: 700; }
.msgrow .meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 4px; font-size: 0.85rem; color: var(--muted); }
.msgrow .when { text-align: right; line-height: 1.2; white-space: nowrap; font-size: 0.85rem; color: var(--muted); }
.msgrow .when time { display: block; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.msgrow.unread .when time { color: var(--fg); }
.kindtile { position: relative; }
.msgrow.unread .kindtile::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.badge.kind-feedback { background: var(--accent-soft); color: var(--warn); }
.subhead h4 { display: inline-flex; align-items: center; gap: 8px; }
.subhead h4 svg { width: 18px; height: 18px; color: var(--blue-ink); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.mailcard { padding: 12px; }
.mailframe { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--radius-sm); background: #f4f4f2; }
.mailcard details.adv { margin: 12px 8px 4px; }
.mailtext { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 0.9rem; line-height: 1.55; color: var(--fg-2); margin: 10px 0 0; }
/* The unread count in the nav: a small orange pill after "Inbox"; on phones the label hides
   and the pill sits on the envelope's corner, so the entry stays icon-wide. */
.nav a.inbox { position: relative; }
.nav a.inbox svg { width: 20px; height: 20px; flex: none; }
.nav a.inbox .ico { position: relative; }
.nav .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #161616; font-size: 0.72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) { .nav:not(.app) .count { position: absolute; top: 3px; right: 0; min-width: 13px; height: 13px; padding: 0 3px; font-size: 0.62rem; border: 2px solid var(--surface); box-sizing: content-box; } }
@media (max-width: 720px) {
  .msgrow { gap: 12px; padding: 12px 14px; }
  .msgrow .cardtile { width: 40px; height: 40px; border-radius: 11px; }
  .msgrow .cardtile svg { width: 22px; height: 22px; }
  .msgrow .when .t { display: none; }
  .mailframe { height: 560px; }
}
.breakdown li.sub > span:first-child { padding-left: 14px; color: var(--fg-2); }

/* ---------- Locked (upsell) panels ---------- */
.locked { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); background: var(--surface-2); }
.locked .lk { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); flex: none; }
.locked .lk svg { width: 18px; height: 18px; }
.locked strong { display: block; color: var(--fg); }
.locked p { color: var(--muted); font-size: 0.9rem; margin: 4px 0 6px; }
.locked a { font-weight: 600; }
.locked.tall { flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; margin-top: 0; }
.locked.tall p { max-width: 36ch; }
.locked.tall .btn { margin-top: 6px; }

/* ---------- Narrow pages: sign-in, setup, review and confirm, errors ---------- */
.authcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
.authcard .brandmark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); margin-bottom: 20px; }
.authcard .brandmark svg { width: 24px; height: 24px; }
.authcard .brandmark.ok { background: var(--ok-soft); color: var(--ok); }
.authcard .brandmark.warn { background: var(--warn-soft); color: var(--warn); }
.authcard .brandmark.logo { background: transparent; }
.authcard .brandmark.logo img { width: 48px; height: 48px; }
.authcard h1 { font-size: 1.6rem; margin-bottom: 8px; }
.authcard > p { color: var(--muted); }
.authcard form { margin-top: 20px; }
.authcard .foot { margin-top: 20px; font-size: 0.875rem; color: var(--muted); }
.authcard .foot svg, .hint svg, p svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .authcard { padding: 24px 20px; border-radius: 16px; } }

/* ---------- Tap pages: what the customer sees, phone first ----------
   Inlined into the tap pages by {% css_sections %} with the head, Reset, Powered by, Buttons,
   Alerts and Forms: one HTML response, no stylesheet, no webfont. The phone's own font: the
   customer is here for a second and a 70 KB font that arrives after the text is a reflow. */
body.tap { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tapwrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 20px; }
.tapcard { max-width: 420px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 28px; box-shadow: var(--shadow-lg); text-align: center; }
.tapcard .glyph { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 20px; background: var(--fg); color: var(--accent); }
.tapcard .glyph svg { width: 34px; height: 34px; }
.tapcard .glyph.muted { background: var(--surface-2); color: var(--muted); }
.tapcard .glyph.ok { background: var(--ok-soft); color: var(--ok); }
.tapcard h1 { font-size: 1.5rem; margin-bottom: 8px; }
.tapcard > p { color: var(--muted); }
.tapcard form { text-align: left; margin-top: 8px; }
.tapcard .btn { margin-top: 20px; }
.tapcard .btn + .btn { margin-top: 10px; }
.choices { display: grid; gap: 12px; margin-top: 24px; }
.choice {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--fg); text-decoration: none; font-weight: 600; font-size: 1.05rem;
  box-shadow: var(--shadow-sm); transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.choice:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--brand); }
.choice .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--fg-2); }
.choice .ico svg { width: 24px; height: 24px; }
.choice.primary { background: var(--brand); color: var(--brand-fg); border-color: transparent; }
.choice.primary .ico { background: var(--accent); color: var(--accent-fg); }
.choice small { display: block; font-weight: 400; font-size: 0.85rem; opacity: 0.8; }
.tapcard.chooser .choices { margin-top: 20px; }
.tapcard.chooser .choice { font-size: 1rem; }
.tapcard.chooser .choice .ico svg { width: 22px; height: 22px; }
.brandlogo { width: 96px; height: 96px; object-fit: contain; border-radius: 22px; margin: 0 auto 16px; display: block; background: var(--surface-2); padding: 8px; }
/* The business name above a branded page's own heading (the chooser and welcome pages make it the heading) */
.brandname { margin: 0 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.socialblock { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.socialtext { font-size: 0.9rem; color: var(--muted); margin: 0 0 12px; }
.social { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.social a { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: #141414; transition: transform 0.12s, box-shadow 0.15s; }
.social a svg { width: 28px; height: 28px; }
.social a:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
/* A link and its button text side by side, labels on one line; stacked on phones */
.linkpair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 0 12px; align-items: start; margin-top: 16px; }
.linkpair > .field { margin-top: 0; }
@media (max-width: 600px) { .linkpair { grid-template-columns: 1fr; } .linkpair > .field + .field { margin-top: 12px; } }
.tapcard .foot { margin-top: 18px; font-size: 0.875rem; color: var(--muted); }
.tapfoot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px; font-size: 0.8rem; }
.tapfoot a:not(.powered) { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }

/* ---------- Plan cards ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; }
.plan .ribbon { position: absolute; top: -12px; left: 20px; background: var(--accent); color: var(--accent-fg); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan h3 { font-size: 1.05rem; }
.plan.current { border-color: var(--line-strong); }
.plan.current h3::after { content: "Current"; margin-left: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price span { color: var(--muted); font-size: 0.95rem; }
.plan .save { color: var(--ok); font-weight: 600; font-size: 0.875rem; }
.plan ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; color: var(--fg-2); font-size: 0.95rem; }
.plan ul li { display: flex; gap: 10px; align-items: flex-start; }
.plan ul li svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 2px; }
.plan .btn { margin-top: auto; }
.plan .note { color: var(--muted); font-size: 0.85rem; }
/* Pricing on the home page is two steps: buy the card (shop), then a plan per card. The step
   numbers are blue (structure), the shop button stays the black primary. */
.buyrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--blue-line); border-radius: var(--radius); background: var(--surface); margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.buyrow > div { flex: 1 1 320px; min-width: 0; }
.buyrow strong { display: block; font-size: 1.1rem; }
.buyrow p { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.buystep { margin: 0 0 14px; font-size: 1.1rem; }
.buyrow .no, .buystep .no { color: var(--blue-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .buyrow .btn { width: 100%; } }

/* ---------- Legal pages: privacy notice and terms ---------- */
.prose { max-width: 66ch; }
.prose h1 { margin-top: 14px; }
.prose .date { color: var(--muted); font-size: 0.875rem; margin-top: 6px; }
.prose h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose p { color: var(--fg-2); }
.prose p + p { margin-top: 0.75em; }
.prose .foot { margin-top: 32px; font-size: 0.875rem; color: var(--muted); }

/* ---------- Marketing ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px 0 24px; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding: 56px 0 40px; } }
.hero h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); letter-spacing: -0.035em; margin: 16px 0; line-height: 1.05; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { max-width: 52ch; }
.hero .actions { margin-top: 28px; }
.hero .proof { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; color: var(--muted); font-size: 0.875rem; }
.hero .proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero .proof svg { width: 16px; height: 16px; color: var(--ok); }
.demo { position: relative; min-height: 340px; display: grid; place-items: center; }
.demo .glow { position: absolute; inset: 10% 5%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); filter: blur(12px); }
.cardimg {
  width: min(78%, 340px); height: auto; border-radius: 6.5%; transform: rotate(-5deg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08); position: relative;
  transition: transform 0.4s ease;
}
.demo:hover .cardimg { transform: rotate(-2deg) translateY(-4px); }
.phonepill {
  position: absolute; right: 0; bottom: -3%; display: flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px 10px 12px; box-shadow: var(--shadow-md); font-size: 0.9rem; font-weight: 600;
  animation: float 5s ease-in-out infinite;
}
.phonepill .g { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.phonepill .g svg { width: 16px; height: 16px; }
.phonepill small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.section { padding: 48px 0 8px; }
.section .head { max-width: 62ch; margin-bottom: 28px; }
.section .head h2 { margin-top: 12px; margin-bottom: 8px; }
.section .head p { color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.step .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; margin-bottom: 14px; }
.step .ic svg { width: 22px; height: 22px; }
.step .no { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 4px; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.95rem; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--muted); font-size: 1.2rem; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 16px; }
/* The closing band is the card's black in both themes; a hairline keeps it a panel on the dark page */
.cta-band { margin-top: 56px; border-radius: var(--radius-lg); padding: 40px 32px; background: #161616; color: #f7f7f7; border: 1px solid transparent; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-band h2, .cta-band p { color: #f7f7f7; }
.cta-band p { opacity: 0.9; margin-top: 6px; }
.cta-band .btn { background: #f7f7f7; color: #141414; border-color: transparent; }
.cta-band .btn:hover { background: #ffffff; }
@media (prefers-color-scheme: dark) { .cta-band { border-color: var(--line-strong); } }

/* ---------- Logo block, branding ---------- */
.logobox { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logobox img { width: 132px; height: 132px; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; flex: none; }
.logobox .meta { flex: 1; min-width: 200px; }
.urlbox { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 6px 6px 6px 12px; margin-top: 8px; min-width: 0; }
.urlbox code { background: none; border: 0; padding: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.urlbox .btn { flex: none; }
.glyph-lg { width: 96px; height: 96px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.glyph-lg svg { width: 36px; height: 36px; }

/* Home page film: a poster tile in the hero, played only in a near full-screen popup. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--blue-soft); border-color: var(--blue-line); }
.btn svg { width: 18px; height: 18px; }
.filmtile {
  position: relative; display: block; width: 100%; max-width: 620px; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease; color: #fff;
}
.filmtile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.filmtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%); pointer-events: none; }
.filmtile:hover { transform: translateY(-3px); text-decoration: none; }
.filmtile:hover img { transform: scale(1.03); }
.filmtile:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.filmtile .play {
  position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 1;
  display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.55), 0 0 0 10px rgba(255, 255, 255, 0.18);
  transition: transform 0.2s ease;
}
.filmtile .play svg { width: 36px; height: 36px; }
.filmtile:hover .play { transform: scale(1.08); }
.filmtile .filmlabel { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-weight: 700; font-size: 1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.filmtile .filmlabel small { display: block; font-weight: 500; font-size: 0.8rem; opacity: 0.85; }
@media (max-width: 480px) { .filmtile .play { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .filmtile .play svg { width: 28px; height: 28px; } }

html.film-open { overflow: hidden; }
.filmmodal {
  position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(6, 8, 14, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: filmfade 0.2s ease;
}
.filmmodal[hidden] { display: none; }
.filmbox {
  /* --cap is the music credit's line under the box. */
  --gap: 3vmin; --cap: 28px; position: relative; aspect-ratio: 16 / 9; flex: none;
  width: min(100vw - 2 * var(--gap), (100vh - 2 * var(--gap) - var(--cap)) * 16 / 9);
  width: min(100vw - 2 * var(--gap), (100dvh - 2 * var(--gap) - var(--cap)) * 16 / 9);
  border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.9);
  animation: filmgrow 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.filmbox.tall {
  aspect-ratio: 9 / 16;
  width: min(100vw - 2 * var(--gap), (100vh - 2 * var(--gap) - var(--cap)) * 9 / 16);
  width: min(100vw - 2 * var(--gap), (100dvh - 2 * var(--gap) - var(--cap)) * 9 / 16);
}
.filmbox video { display: block; width: 100%; height: 100%; background: #000; }
.filmtools { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.filmtools select, .filmclose {
  min-height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.filmtools select { width: auto; padding: 0 32px 0 14px; background-image: none; appearance: none; cursor: pointer; }
.filmtools .quality { position: relative; }
.filmtools .quality::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.filmtools .quality[hidden] { display: none; }
.filmclose { width: 40px; padding: 0; display: grid; place-items: center; cursor: pointer; }
.filmclose svg { width: 20px; height: 20px; }
.filmclose:hover, .filmtools select:hover { background: rgba(0, 0, 0, 0.8); }
.filmend {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; align-content: center; justify-content: center;
  background: rgba(6, 8, 14, 0.55); z-index: 1; padding: 24px;
}
.filmend[hidden] { display: none; }
.filmcredit { margin: 0; padding: 0 12px; max-width: 100%; text-align: center; font-size: 0.72rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.filmcredit a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
@keyframes filmfade { from { opacity: 0; } }
@keyframes filmgrow { from { opacity: 0; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) { .filmmodal, .filmbox { animation: none; } .filmtile, .filmtile img { transition: none; } }