/* M1 Fit — design system
   Red and black, taken from the logo. ONE dark theme across the marketing site,
   the coach app and the member app.

   Everything is driven from the tokens below. That matters: components and even
   inline `color: var(--ink-2)` in templates follow the palette automatically,
   which is how the whole product was flipped to dark without rewriting views.
   The ink ramp runs LIGHT-to-dark (--ink is the brightest), so a higher number
   still means "quieter", exactly as it did on the light theme. */

:root {
  /* Brand, sampled from the M1 FIT logo: signal red, brushed silver, near-black. */
  --accent: #ec2b39;          /* lifted from #d21f2c so it clears 4.5:1 on black */
  --accent-hover: #ff4b57;
  --accent-soft: rgba(236,43,57,.14);
  --accent-ink: #ff7b84;      /* accent text ON dark — the old ink was for light */
  --accent-deep: #8f1119;     /* dark end of the red: gradients, text on white */

  --dark: #0a0a0b;            /* the logo's own ground */
  --dark-2: #17171a;
  --dark-3: #2a2a2e;
  --silver: #c9cdd2;

  /* Text ramp. Contrast on --card (#131316): ink 15.8:1, ink-2 11.2:1,
     ink-3 6.4:1, ink-4 4.1:1 (decorative only, never body copy). */
  --ink: #f4f4f5;
  --ink-2: #cfcfd6;
  --ink-3: #9ea0a8;
  --ink-4: #74757d;

  --bg: #0a0a0b;
  --card: #131316;
  --card-2: #1a1a1f;          /* hover / nested surface */
  --line: #2a2a31;
  --line-2: #1f1f25;

  /* Status colours re-tuned for a dark ground: the hue carries the meaning,
     the tint carries the surface. */
  --good: #4ade80; --good-bg: rgba(22,163,74,.15);
  --warn: #fbbf24; --warn-bg: rgba(180,83,9,.18);
  /* Destructive is a distinct crimson, and is only ever used as an outline —
     so a solid red "Save" never reads the same as "Delete". */
  --bad:  #fb7185; --bad-bg:  rgba(159,18,57,.2);
  --info: #7dd3fc; --info-bg: rgba(3,105,161,.16);

  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.5);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: .8125rem; }
.muted { color: var(--ink-3); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }

/* ------------------------------------------------------------- structure */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1rem; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; }
.row.tight { gap: .375rem; }
.between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ nav */
/* The app bar is dark because the logo is a dark-ground mark — putting it on
   white would need a fabricated knockout version we do not have. */
.topbar {
  background: var(--dark); border-bottom: 1px solid #000;
  position: sticky; top: 0; z-index: 40;
}
.topbar .inner { max-width: var(--max); margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.logo:hover { text-decoration: none; }
.logo .mark {
  width: 30px; height: 30px; border-radius: 99px; display: block; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.logo .wm { font-size: .95rem; }
.logo .wm i { color: var(--accent); font-style: normal; }
nav.main { display: flex; gap: .125rem; flex-wrap: wrap; }
nav.main a {
  padding: .4rem .7rem; border-radius: 8px; color: #b8b8bd; font-weight: 500; font-size: .9rem;
}
nav.main a:hover { background: var(--dark-3); color: #fff; text-decoration: none; }
nav.main a.on { background: var(--accent); color: #fff; font-weight: 600; }
.topbar .btn { background: transparent; border-color: var(--dark-3); color: #d4d4d8; }
.topbar .btn:hover { background: var(--dark-3); color: #fff; }
.topbar .small.muted { color: #8a8a91 !important; }
nav.main a .dot {
  display: inline-block; min-width: 17px; padding: 0 4px; margin-left: .3rem; border-radius: 99px;
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; text-align: center; line-height: 17px;
}
.imp-bar { background: #7c2d12; color: #fed7aa; font-size: .8rem; border-bottom: 1px solid #9a3412; }
.imp-bar .inner { max-width: var(--max); margin: 0 auto; padding: .4rem 1rem; display: flex; gap: .75rem; align-items: center; }
.imp-bar form { margin: 0; }
.imp-bar button { background: #fed7aa; color: #78350f; border: 0; border-radius: 6px; padding: .15rem .5rem; font-size: .75rem; font-weight: 700; cursor: pointer; }

main { padding: 1.5rem 0 4rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .15rem; }

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.125rem; box-shadow: var(--shadow);
}
.card.pad-0 { padding: 0; overflow: hidden; }
.card h2, .card h3 { margin-bottom: .75rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.card-head h2, .card-head h3 { margin: 0; }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: .875rem 1rem; }
.stat .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.stat .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-top: .15rem; }
.stat .s { font-size: .8rem; color: var(--ink-3); }
.stat.accent { background: var(--accent-soft); border-color: transparent; }
.stat.accent .k, .stat.accent .s { color: var(--accent-ink); opacity: .8; }
.stat.accent .v { color: var(--accent-ink); }

/* ---------------------------------------------------------------- forms */
label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2); margin-bottom: .25rem; }
input, select, textarea {
  width: 100%; padding: .5rem .625rem; font: inherit; color: var(--ink);
  background: var(--dark-2); border: 1px solid var(--line); border-radius: 9px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
textarea { min-height: 84px; resize: vertical; }
.field { margin-bottom: .75rem; }
.field .hint { font-size: .75rem; color: var(--ink-3); margin-top: .2rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; margin: 0 0 1rem; }
legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 0 .4rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; color: var(--ink-2); margin-bottom: .35rem; }
.check label { margin: 0; font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: 9px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: .875rem;
  cursor: pointer; transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--card-2); border-color: #3a3a43; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.danger { color: var(--bad); border-color: #fecaca; }
.btn.danger:hover { background: var(--bad-bg); }
.btn.sm { padding: .3rem .6rem; font-size: .8rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; padding: .55rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .625rem .75rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--card-2); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- pieces */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 99px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em; background: var(--line-2); color: var(--ink-2);
}
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad  { background: var(--bad-bg);  color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); }

.note { border-radius: var(--r); padding: .75rem 1rem; font-size: .875rem; border: 1px solid; }
.note.ok   { background: var(--good-bg); border-color: rgba(74,222,128,.35); color: #bbf7d0; }
.note.warn { background: var(--warn-bg); border-color: rgba(251,191,36,.35); color: #fde68a; }
.note.bad  { background: var(--bad-bg);  border-color: rgba(251,113,133,.35); color: #fecdd3; }
.note.info { background: var(--info-bg); border-color: rgba(125,211,252,.35); color: #bae6fd; }

.avatar {
  width: 36px; height: 36px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex: none;
}
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); }
.empty .big { font-size: 1.75rem; margin-bottom: .5rem; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.tabs a { padding: .5rem .85rem; font-weight: 600; font-size: .875rem; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--accent-ink); border-bottom-color: var(--accent); }

.bar { height: 7px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar.warn > i { background: var(--warn); }

details.acc { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .5rem; background: var(--card); }
details.acc > summary { padding: .7rem .9rem; cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; gap: .5rem; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "+"; color: var(--ink-3); font-weight: 700; }
details.acc[open] > summary::after { content: "−"; }
details.acc > .body { padding: 0 .9rem .9rem; }

/* -------------------------------------------------------------- ticklist */
.tick { display: flex; gap: .75rem; align-items: flex-start; padding: .7rem .25rem; border-bottom: 1px solid var(--line-2); }
.tick:last-child { border-bottom: 0; }
.tick input[type=checkbox] { width: 22px; height: 22px; margin-top: .1rem; flex: none; cursor: pointer; }
.tick .t { flex: 1; min-width: 0; }
.tick .t b { display: block; font-weight: 600; }
.tick.done .t b { text-decoration: line-through; color: var(--ink-3); }
.tick .meta { font-size: .78rem; color: var(--ink-3); }

/* --------------------------------------------------------------- thread */
.thread { display: flex; flex-direction: column; gap: .6rem; max-height: 62vh; overflow-y: auto; padding: .25rem; }
.msg { max-width: 78%; padding: .55rem .8rem; border-radius: 14px; font-size: .9rem; }
.msg .when { display: block; font-size: .68rem; opacity: .7; margin-top: .25rem; }
.msg.coach { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.coach a { color: #fff; text-decoration: underline; }
.msg.member { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.msg audio { display: block; margin-top: .35rem; max-width: 240px; }
.msg img { max-width: 100%; border-radius: 8px; margin-top: .35rem; display: block; }

/* ---------------------------------------------------------------- chart */
.chart { width: 100%; height: 180px; display: block; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { fill: var(--accent); opacity: .08; }
.chart .pt { fill: var(--accent); }
.chart .goal { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart text { font-size: 10px; fill: var(--ink-3); }

/* --------------------------------------------------------- member shell */
.mobile { max-width: 560px; margin: 0 auto; padding-bottom: 5rem; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--card);
  border-top: 1px solid var(--line); display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; text-align: center; padding: .5rem .25rem .55rem; font-size: .68rem; font-weight: 600;
  color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: .15rem;
}
.tabbar a:hover { text-decoration: none; }
.tabbar a.on { color: var(--accent-ink); }
.tabbar .ic { display: block; height: 20px; line-height: 0; }
.hero-m {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff; padding: 1.25rem 1rem 1.5rem; border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.hero-m h1 { color: #fff; font-size: 1.35rem; }
.hero-m .sub { opacity: .85; font-size: .85rem; }
.hero-m .kpis { display: flex; gap: .5rem; margin-top: 1rem; }
.hero-m .kpi { flex: 1; background: rgba(255,255,255,.15); border-radius: var(--r); padding: .55rem .65rem; }
.hero-m .kpi .k { font-size: .68rem; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.hero-m .kpi .v { font-size: 1.15rem; font-weight: 700; }

/* --------------------------------------------------------------- extras */
.pill-row { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; }
.pill-row a, .pill-row button {
  flex: none; padding: .3rem .7rem; border-radius: 99px; border: 1px solid var(--line);
  background: var(--card); font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.pill-row a.on, .pill-row button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill-row a:hover { text-decoration: none; }

.scale { display: flex; gap: .3rem; }
.scale input { display: none; }
.scale label {
  flex: 1; text-align: center; padding: .45rem 0; border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; font-weight: 600; margin: 0; color: var(--ink-2); background: var(--card);
}
.scale input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; }

footer.site { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--ink-3); font-size: .8rem; }

/* =====================================================================
   MARKETING SITE — red & black, taken from the logo.
   Everything here is scoped to `body.site`. The coach and member screens are
   dense tables and forms where a light surface reads better, so they keep the
   original palette; only the marketing pages go dark.
   ===================================================================== */
body.site { background: var(--dark); }

/* Feature icon chip — marketing only, tinted with the brand red. */
body.site .feat .ic {
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid rgba(236,43,57,.28);
}
body.site .compare { background: var(--card); }
body.site .table-wrap.card { background: var(--card); }
body.site .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
body.site .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
body.site input::placeholder, body.site textarea::placeholder { color: var(--ink-4); }

/* Section rhythm: pure black, then a lifted charcoal, alternating. */
body.site section.band { background: var(--dark); }
body.site section.band.alt { background: #101013; border-block: 1px solid #1c1c21; }
body.site section.band.dark {
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(210,31,44,.16), transparent 70%),
    #0d0d0f;
  border-block: 1px solid #1c1c21;
}
body.site .section-head p { color: #8a8a91; }
body.site .trustbar { background: #101013; border-bottom: 1px solid #1c1c21; }

.site-bar { background: var(--dark); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid #000; }
.site-bar .inner { max-width: var(--max); margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1rem; }
.site-bar .brand { display: flex; align-items: center; gap: .55rem; }
.site-bar .brand img { height: 30px; width: auto; display: block; border-radius: 3px; }
.site-nav { display: flex; gap: .1rem; flex-wrap: wrap; }
.site-nav a { padding: .4rem .65rem; border-radius: 8px; font-size: .875rem; font-weight: 500; color: #b8b8bd; }
.site-nav a:hover { color: #fff; background: var(--dark-3); text-decoration: none; }
.site-nav a.on { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 0 0; }
.burger { display: none; background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; padding: .2rem .4rem; }
@media (max-width: 820px) {
  .burger { display: block; }
  .site-nav { display: none; width: 100%; order: 10; padding-bottom: .4rem; }
  .site-nav.open { display: flex; flex-direction: column; }
  .site-bar .inner { flex-wrap: wrap; }
}

.hero {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(210,31,44,.30), transparent 65%),
    linear-gradient(180deg, #0a0a0b 0%, #141417 100%);
  color: #fff; padding: 3rem 0 3.25rem; text-align: center;
}
.hero img.lockup { width: min(430px, 80vw); height: auto; display: block; margin: 0 auto 1.25rem; border-radius: 10px; }
.hero h1 { color: #fff; font-size: clamp(1.75rem, 5vw, 2.6rem); max-width: 20ch; margin: 0 auto .75rem; }
.hero p.lede { color: #c9c9cf; font-size: 1.05rem; max-width: 60ch; margin: 0 auto; }
.hero .kicker {
  display: inline-block; margin-bottom: 1rem; padding: .22rem .7rem; border-radius: 99px;
  background: rgba(210,31,44,.16); color: #ff8a92; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; border: 1px solid rgba(210,31,44,.4);
}
.hero .cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.hero .btn { border-color: rgba(255,255,255,.22); background: transparent; color: #fff; padding: .6rem 1.2rem; }
.hero .btn:hover { background: rgba(255,255,255,.1); }
.hero .btn.primary { background: var(--accent); border-color: var(--accent); }
.hero .btn.primary:hover { background: var(--accent-hover); }

.trustbar { background: var(--dark-2); color: #8a8a91; padding: .7rem 0; font-size: .8rem; }
.trustbar .inner { max-width: var(--max); margin: 0 auto; padding: 0 1rem; display: flex; gap: 1.5rem;
  justify-content: center; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.trustbar b { color: var(--silver); font-weight: 700; }

section.band { padding: 3rem 0; }
section.band.alt { background: #101013; border-block: 1px solid var(--line-2); }
section.band.dark { background: var(--dark); color: #fff; }
section.band.dark h2, section.band.dark h3 { color: #fff; }
section.band.dark p { color: #b8b8bd; }
.section-head { text-align: center; max-width: 62ch; margin: 0 auto 2rem; }
.section-head h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
.section-head p { color: var(--ink-3); margin: 0; }
section.band.dark .section-head p { color: #9a9aa2; }
.eyebrow { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }

.feat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; }
.feat .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); margin-bottom: .7rem;
}
/* Vendored icons are stroke-on-currentColor at a 24 grid; the wrapper decides
   the colour, the svg just inherits it. */
svg.ico { display: block; }
.ico-missing { display: inline-block; width: 1em; height: 1em; }
.feat h3 { font-size: .98rem; margin-bottom: .3rem; }
.feat p { color: var(--ink-3); font-size: .875rem; margin: 0; }

.steps { counter-reset: s; display: grid; gap: 1rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.step::before {
  counter-increment: s; content: counter(s); flex: none;
  width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: .9rem;
}
.step h3 { font-size: .98rem; margin-bottom: .2rem; }
.step p { color: var(--ink-3); font-size: .875rem; margin: 0; }

.compare { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); }
.compare th, .compare td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); text-align: left; }
.compare thead th { background: var(--dark); color: #fff; font-size: .74rem; }
.compare thead th:first-child { border-radius: var(--r) 0 0 0; }
.compare thead th:last-child { border-radius: 0 var(--r) 0 0; }
.compare td.yes { color: var(--good); font-weight: 700; }
.compare td.no  { color: var(--ink-4); }
.compare tbody tr:hover { background: var(--card-2); }

.price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem; position: relative; }
.price-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lg); }
.price-card .tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: .18rem .6rem; border-radius: 99px; white-space: nowrap;
}
.price-card .amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; }
.price-card .amt small { font-size: .8rem; font-weight: 500; color: var(--ink-3); }
.price-card ul { margin: 0 0 1.1rem; padding: 0; list-style: none; font-size: .875rem; }
.price-card li { padding: .28rem 0 .28rem 1.35rem; position: relative; color: var(--ink-2); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.price-card li.off { color: var(--ink-4); }
.price-card li.off::before { content: "—"; color: var(--ink-4); }

.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: .5rem; }
.faq summary { padding: .9rem 1.1rem; cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 800; font-size: 1.15rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 1.1rem 1rem; color: var(--ink-2); font-size: .9rem; }
.faq .a p:last-child { margin-bottom: 0; }

.docs { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } }
.docs-toc { position: sticky; top: 70px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: .8rem; font-size: .875rem; }
.docs-toc a { display: block; padding: .3rem .5rem; border-radius: 7px; color: var(--ink-2); }
.docs-toc a:hover { background: var(--line-2); text-decoration: none; }
.docs-toc strong { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); padding: .3rem .5rem; }
.doc-section { scroll-margin-top: 76px; margin-bottom: 2rem; }
.doc-section h2 { padding-bottom: .4rem; border-bottom: 2px solid var(--accent); display: inline-block; }
.doc-section ol, .doc-section ul { padding-left: 1.2rem; color: var(--ink-2); font-size: .92rem; }
.doc-section li { margin-bottom: .35rem; }
.kbd { background: var(--line-2); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: .05rem .35rem; font-size: .82rem; font-weight: 600; white-space: nowrap; }

.cta-band { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; padding: 2.75rem 0; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(1.3rem, 3.4vw, 1.8rem); }
.cta-band p { color: rgba(255,255,255,.86); max-width: 55ch; margin: 0 auto 1.25rem; }
.cta-band .btn { background: #fff; color: var(--accent-deep); border-color: #fff; font-weight: 700; padding: .6rem 1.3rem; }
.cta-band .btn:hover { background: #f4f4f5; }
.cta-band .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-band .btn.ghost:hover { background: rgba(255,255,255,.12); }

footer.site-foot { background: var(--dark); color: #8a8a91; padding: 2.5rem 0 1.5rem; font-size: .875rem; }
footer.site-foot img.lockup { height: 48px; width: auto; margin-bottom: .7rem; border-radius: 3px; }
footer.site-foot h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .6rem; }
footer.site-foot a { color: #b8b8bd; display: block; padding: .16rem 0; }
footer.site-foot a:hover { color: #fff; text-decoration: none; }
footer.site-foot .base { border-top: 1px solid var(--dark-3); margin-top: 1.75rem; padding-top: 1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; }
footer.site-foot .base a { display: inline; }

.wa-float {
  line-height: 0;
  position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 52px; height: 52px; border-radius: 99px;
  background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.wa-float:hover { text-decoration: none; transform: translateY(-2px); }

/* =====================================================================
   MOTION
   All CSS keyframes — no requestAnimationFrame anywhere, because rAF does not
   fire in some embedded webviews and the page must never depend on it to be
   readable. Everything below is decoration over content that is already there.
   ===================================================================== */
@keyframes riseIn   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn   { from { opacity: 0; transform: scale(.94); }    to { opacity: 1; transform: none; } }
@keyframes glowPulse{ 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes sheen    { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes barGrow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- hero: a staggered entrance, driven purely by animation-delay --- */
body.site .hero > .wrap > * { animation: riseIn .7s cubic-bezier(.22,.9,.3,1) both; }
body.site .hero img.lockup { animation: zoomIn .8s cubic-bezier(.22,.9,.3,1) both; }
body.site .hero .kicker { animation-delay: .12s; }
body.site .hero h1      { animation-delay: .2s; }
body.site .hero p.lede  { animation-delay: .3s; }
body.site .hero .cta    { animation-delay: .4s; }

/* A red glow behind the hero that breathes, sitting under the content. */
body.site .hero { position: relative; overflow: hidden; }
body.site .hero::before {
  content: ""; position: absolute; inset: -30% 20% auto 20%; height: 70%;
  background: radial-gradient(closest-side, rgba(210,31,44,.5), transparent 72%);
  filter: blur(38px); animation: glowPulse 7s ease-in-out infinite; pointer-events: none;
}
body.site .hero > .wrap { position: relative; z-index: 1; }

/* A slow light sweep across the top rule, echoing the logo's brushed metal. */
body.site .hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), var(--accent), transparent);
  background-size: 220% 100%; animation: sheen 5s linear infinite;
}

/* --- scroll reveal ---
   Content is visible by DEFAULT. The hidden state only applies once JS has
   confirmed IntersectionObserver works (html.js-reveal), and app.js also runs a
   failsafe timer that reveals everything regardless — so a browser where the
   observer never fires shows the page in full rather than a blank column. */
.js-reveal body.site .reveal { opacity: 0; transform: translateY(22px); }
body.site .reveal { transition: opacity .65s cubic-bezier(.22,.9,.3,1), transform .65s cubic-bezier(.22,.9,.3,1); }
body.site .reveal.in { opacity: 1; transform: none; }
body.site .reveal:nth-child(2) { transition-delay: .07s; }
body.site .reveal:nth-child(3) { transition-delay: .14s; }
body.site .reveal:nth-child(4) { transition-delay: .21s; }
body.site .reveal:nth-child(5) { transition-delay: .28s; }
body.site .reveal:nth-child(6) { transition-delay: .35s; }

/* --- hover micro-interactions --- */
body.site .feat, body.site .step, body.site .card {
  transition: transform .22s cubic-bezier(.22,.9,.3,1), border-color .22s, box-shadow .22s;
}
body.site .feat:hover, body.site .step:hover {
  transform: translateY(-4px); border-color: rgba(210,31,44,.5);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(210,31,44,.18);
}
body.site .feat .ic { transition: transform .25s cubic-bezier(.3,1.4,.5,1), background .22s; }
body.site .feat:hover .ic { transform: scale(1.12) rotate(-6deg); background: rgba(210,31,44,.22); }
body.site .btn { transition: background .18s, border-color .18s, transform .12s, box-shadow .18s; }
body.site .btn.primary:hover { box-shadow: 0 6px 20px rgba(210,31,44,.42); transform: translateY(-1px); }
body.site .site-nav a { transition: color .16s, background .16s; }
body.site .compare tbody tr { transition: background .16s; }

/* Underline that grows from the left on the marketing nav. */
body.site .site-nav a { position: relative; }
body.site .site-nav a::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: 2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.9,.3,1);
}
body.site .site-nav a:hover::after, body.site .site-nav a.on::after { transform: scaleX(1); }
body.site .site-nav a.on { box-shadow: none; }

/* CTA band gets a slow drifting highlight so it does not read as a flat slab. */
body.site .cta-band { position: relative; overflow: hidden; }
body.site .cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  width: 60%; animation: floaty 9s ease-in-out infinite;
}
body.site .cta-band .wrap { position: relative; z-index: 1; }

body.site .wa-float {
  line-height: 0; animation: floaty 3.4s ease-in-out infinite; transition: transform .2s, box-shadow .2s; }
body.site .wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 26px rgba(37,211,102,.5); }

/* Progress bars animate out from zero when revealed. */
body.site .bar > i { transform-origin: left; animation: barGrow .9s cubic-bezier(.22,.9,.3,1) both; }

/* Accessibility: honour the OS "reduce motion" setting completely. */
@media (prefers-reduced-motion: reduce) {
  body.site *, body.site *::before, body.site *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .js-reveal body.site .reveal { opacity: 1 !important; transform: none !important; }
}

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.75rem; }
.prose h3 { margin-top: 1.25rem; font-size: .98rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: .3rem; }

@media print {
  .topbar, .tabbar, .btn, form, footer.site { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; }
}