/* mernero.com v2: one stylesheet. Tokens first, then base, layout, components, pages, intro.
   CSP: style-src 'self' only. No inline styles anywhere; JS only toggles classes or uses the CSSOM. */

@font-face { font-family: "Michroma"; src: url("../assets/fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira SC"; src: url("../assets/fonts/SairaSemiCondensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira SC"; src: url("../assets/fonts/SairaSemiCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Saira SC"; src: url("../assets/fonts/SairaSemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
/* Metric-matched fallback (Arial/Helvetica scaled to Saira's width) so text barely moves when the web font arrives (CLS). */
@font-face { font-family: "Saira fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 91.2%; ascent-override: 124.5%; descent-override: 48.1%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jbmono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  /* surfaces (app v3 charcoal) */
  --bg-0: #19191B;
  --bg-1: #222224;
  --bg-2: #2C2C2E;
  --bg-well: #141415;
  --line: #2E2E31;
  --line-2: #3A3A3D;
  /* text */
  --text-1: #EDEDF0;
  --text-2: #B4B4BA;
  --text-3: #939399;
  --ink: #19191B;
  --ink-2: #3D3D44;
  /* brand */
  --brand: #7F54EB;
  --brand-hover: #8C65F0;
  --brand-press: #6F45DB;
  --brand-text: #AE9EFA;
  --brand-tint: #ECE6FD;
  /* app track colours, used as section accents */
  --iris: #9C7CF4;
  --teal: #29B9C7;
  --orchid: #D886B5;
  --copper: #E18B6A;
  --sage: #6CB97E;
  --sky: #62ACE8;
  --sage-tint: #E3F2E6;
  /* darker shades for text/icons on the light plan bodies and fills (all AA, see README) */
  --brand-ink: #3B1F8F;
  --brand-ink-hover: #2A1570;
  --brand-check: #5A35C7;
  --sage-ink: #17331F;
  --sage-check: #2F6B3E;
  --copper-ink: #8A3F22;
  --copper-line: #B65A38;
  --ink-hover: #2C2C30;

  --font-display: "Michroma", "Saira SC", "Saira fallback", system-ui, sans-serif;
  --font-body: "Saira SC", "Saira fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-display: clamp(2rem, 5.4vw, 5rem);
  --fs-h2: clamp(1.5rem, 2.8vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1.6vw, 1.4375rem);
  --fs-body: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --fs-small: 1rem;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container: 1312px;
  --anchor-offset: 80px; /* sticky header height + gap, for #anchors */
  --gutter: clamp(20px, 4.4vw, 64px);

  --r-xs: 4px; --r-btn: 8px; --r-md: 10px; --r-lg: 14px;
  --shadow-shot: 0 0 0 1px var(--line-2), 0 32px 80px rgba(0, 0, 0, .55);
  --ring: 2px solid var(--brand-text);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--text-1); }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--font-display); letter-spacing: -.01em; line-height: 1.14; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 50; background: var(--text-1); color: var(--ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-btn); font-weight: 600; }
.skip-link:focus { top: var(--s-4); }

.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--s-9) 0; }
.sec-head { max-width: 46rem; margin-bottom: var(--s-7); }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head p { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lead); }

/* placeholder chip: every .tbd must be resolved before launch */
.tbd { display: inline-block; padding: 0 .4em; border: 1px solid var(--copper); border-radius: var(--r-xs); color: var(--copper); font-size: .85em; font-weight: 600; line-height: 1.5; letter-spacing: .02em; }
.on-light .tbd { color: var(--copper-ink); border-color: var(--copper-line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font: 600 1.0625rem/1 var(--font-body); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 0 var(--s-6); font-size: 1.1875rem; }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: 1rem; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }
.btn--primary:active { background: var(--brand-press); }
.btn--ghost { border-color: var(--line-2); color: var(--text-1); background: transparent; }
.btn--ghost:hover { border-color: var(--brand-text); color: var(--text-1); background: rgba(174, 158, 250, .08); }
.btn--light { background: #fff; color: var(--brand-ink); }
.btn--light:hover { background: var(--brand-tint); color: var(--brand-ink-hover); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-hover); color: #fff; }
.btn--outline-light { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(25, 25, 27, .94); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(25, 25, 27, .82); backdrop-filter: blur(12px); } }
.header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); min-height: 72px; }
.brand { display: block; width: 178px; }
.brand img { width: 178px; height: 40px; }
.main-nav ul { display: flex; gap: var(--s-1); list-style: none; justify-content: center; }
.main-nav a { display: block; padding: var(--s-2) var(--s-3); color: var(--text-2); text-decoration: none; font-weight: 500; border-radius: var(--r-xs); }
.main-nav a:hover { color: var(--text-1); }
.main-nav a[aria-current="page"] { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }

/* ---------- hero (home) ---------- */
.hero { padding: var(--s-8) 0 0; }
.hero h1 { font-size: var(--fs-display); max-width: 15ch; }
.hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: end; margin-top: var(--s-6); }
.hero-lead { max-width: 40rem; font-size: var(--fs-lead); color: var(--text-2); }
.hero-lead strong { color: var(--text-1); font-weight: 500; }
.dl { display: grid; gap: var(--s-3); justify-items: start; }
.dl-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.req { font-size: var(--fs-small); color: var(--text-3); max-width: 30rem; }
.req a { color: var(--text-2); white-space: nowrap; }
.req a:hover { color: var(--text-1); }

.stage { position: relative; margin-top: var(--s-8); padding: var(--s-8) 0 var(--s-9); overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; background: url("../assets/img/timeline-lanes.svg") center / cover no-repeat; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-0) 0%, rgba(25, 25, 27, 0) 18%, rgba(25, 25, 27, 0) 70%, var(--bg-0) 100%); }
.stage .shot { position: relative; z-index: 1; width: min(1120px, calc(100% - 2 * var(--gutter))); margin: 0 auto; border-radius: var(--r-lg); box-shadow: var(--shadow-shot); overflow: hidden; }
.stage .shot img { width: 100%; }

/* ---------- channel strips (home features) ---------- */
.strips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--bg-1); }
.strip { display: flex; flex-direction: column; border-left: 1px solid var(--line-2); }
.strip:first-child { border-left: 0; }
.strip-band { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-4) var(--s-5); color: var(--ink); }
.strip-band h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: .01em; }
.strip-band span { font-weight: 600; font-size: var(--fs-small); }
.strip--ai .strip-band { background: var(--brand-text); }
.strip--tune .strip-band { background: var(--teal); }
.strip--mix .strip-band { background: var(--orchid); }
.strip--modes .strip-band { background: var(--copper); }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line-2); }
.strip-body { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-5); flex: 1; }
.strip-body p { color: var(--text-2); }
.strip-body .q { color: var(--text-1); }
.strip-link { margin-top: auto; padding: 0 var(--s-5) var(--s-5); }
.strip-link a { font-weight: 600; }
.strip--ai .strip-link a { color: var(--brand-text); }
.strip--tune .strip-link a { color: var(--teal); }
.strip--mix .strip-link a { color: var(--orchid); }
.strip--modes .strip-link a { color: var(--copper); }
.strip-link a:hover { color: var(--text-1); }

/* ---------- local AI band ---------- */
.local { background: var(--bg-well); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.local-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.local-grid h2 { font-size: var(--fs-h2); }
.local-grid > div > p { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lead); }
.fn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; list-style: none; border-top: 1px solid var(--line-2); }
.fn-list li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--line-2); }
.fn-list .dot { flex: none; width: 12px; height: 12px; margin-top: .55em; border-radius: 3px; }
.fn-list li:nth-child(1) .dot { background: var(--orchid); }
.fn-list li:nth-child(2) .dot { background: var(--teal); }
.fn-list li:nth-child(3) .dot { background: var(--copper); }
.fn-list li:nth-child(4) .dot { background: var(--sky); }
.fn-list b { display: block; font-weight: 600; }
.fn-list span { color: var(--text-2); font-size: var(--fs-small); }
.byok { margin-top: var(--s-5); color: var(--text-2); }

/* ---------- plan blocks (Free sage / Pro purple) ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; }
.plan-head { display: grid; gap: var(--s-3); padding: var(--s-6); }
.plan-name { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.plan-price .amt { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -.02em; }
.plan-price .per { font-weight: 500; font-size: 1.0625rem; }
.plan-sum { font-size: 1.0625rem; }
.plan-cta { margin-top: var(--s-3); display: grid; gap: var(--s-2); justify-items: start; }
.plan-cta small { font-size: var(--fs-small); }
.plan-body { flex: 1; padding: var(--s-6); color: var(--ink); }
.plan-body ul { list-style: none; display: grid; gap: var(--s-3); }
.plan-body li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; }
.plan-body li svg { width: 22px; height: 22px; margin-top: .15em; }
.plan--free .plan-head { background: var(--sage); color: var(--ink); }
.plan--free .plan-body { background: var(--sage-tint); }
.plan--free li svg { color: var(--sage-check); }
.plan--pro .plan-head { background: var(--brand); color: #fff; }
.plan--pro .plan-body { background: var(--brand-tint); }
.plan--pro li svg { color: var(--brand-check); }
.plan--pro .plan-cta small { color: #fff; }
.plan--free .plan-cta small { color: var(--sage-ink); }
.plan--free .plan-sum { color: var(--sage-ink); }
.plan--pro .plan-sum { color: #fff; }
.plans-note { margin-top: var(--s-5); color: var(--text-2); }
.checkout-status { min-height: 1.5em; font-size: var(--fs-small); color: #fff; }
.checkout-status:empty { display: none; }

/* ---------- CTA band ---------- */
.band { background: var(--brand); color: #fff; padding: var(--s-9) 0; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); align-items: center; }
.band h2 { font-size: var(--fs-h2); max-width: 18ch; }
.band p { margin-top: var(--s-4); font-size: var(--fs-lead); color: #fff; max-width: 36rem; }
.band .dl-actions { justify-content: flex-start; }
.band :focus-visible { outline-color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-well); border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-7); font-size: var(--fs-small); color: var(--text-3); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.footer-brand img { width: 160px; height: 36px; }
.footer-brand p { margin-top: var(--s-4); max-width: 26rem; }
.site-footer h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--text-1); margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text-1); text-decoration: underline; }
.footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }

/* ---------- pricing page ---------- */
.page-hero { padding: var(--s-8) 0 var(--s-7); }
.page-hero h1 { font-size: clamp(1.875rem, 4.4vw, 4rem); max-width: 18ch; }
.page-hero p { margin-top: var(--s-5); max-width: 42rem; font-size: var(--fs-lead); color: var(--text-2); }

.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); list-style: none; padding: var(--s-6) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-bottom: var(--s-7); }
.promises li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); align-items: start; }
.promises svg { width: 40px; height: 40px; }
.promises b { display: block; font-weight: 600; line-height: 1.3; }
.promises span { color: var(--text-2); font-size: var(--fs-small); line-height: 1.45; display: block; margin-top: var(--s-1); }
.promises li:nth-child(1) svg { color: var(--teal); }
.promises li:nth-child(2) svg { color: var(--sage); }
.promises li:nth-child(3) svg { color: var(--copper); }
.promises li:nth-child(4) svg { color: var(--orchid); }

.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.compare caption { text-align: left; }
.compare th, .compare td { padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; padding-top: var(--s-4); }
.compare thead th:first-child { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--text-3); }
.compare thead .col-free { box-shadow: inset 0 4px 0 var(--sage); padding-top: var(--s-4); }
.compare thead .col-pro { box-shadow: inset 0 4px 0 var(--brand); padding-top: var(--s-4); }
.compare tbody th { font-weight: 500; color: var(--text-1); width: 34%; }
.compare td { color: var(--text-2); width: 33%; }
.compare td.yes { color: var(--text-1); }
.compare .num { font-weight: 600; color: var(--text-1); }

.ends { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
.ends h2 { font-size: var(--fs-h2); }
.ends-lead { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lead); }
.ends ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); border-top: 1px solid var(--line-2); }
.ends li { display: grid; grid-template-columns: 14px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-2); }
.ends li::before { content: ""; width: 14px; height: 14px; margin-top: .45em; border-radius: 3px; background: var(--sage); }
.ends li:nth-child(4)::before { background: var(--brand-text); }
.ends li b { display: block; font-weight: 600; }
.ends li span { color: var(--text-2); }

.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq details:first-of-type { border-top: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; font-weight: 600; font-size: var(--fs-h3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r-xs); font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; color: var(--brand-text); transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover::after { border-color: var(--brand-text); }
.faq details > div { padding: 0 0 var(--s-5); color: var(--text-2); max-width: 44rem; }
.faq details > div p + p { margin-top: var(--s-3); }

/* ---------- shared: spacing helpers, tags, steps ---------- */
.sec--top0 { padding-top: 0; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tag { display: inline-block; padding: 2px var(--s-3); border-radius: var(--r-xs); font-size: var(--fs-small); font-weight: 600; line-height: 1.6; }
.tag--free { background: var(--sage); color: var(--ink); }
.tag--pro { background: var(--brand); color: #fff; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--s-3); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); align-items: start; color: var(--text-2); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; margin-top: .05em; border-radius: var(--r-xs); background: var(--bg-2); color: var(--text-1); font-weight: 600; font-size: var(--fs-small); }
.steps--big { gap: 0; border-top: 1px solid var(--line-2); }
.steps--big li { grid-template-columns: 36px 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-2); }
.steps--big li::before { width: 36px; height: 36px; background: var(--brand); color: #fff; font-size: 1.0625rem; }
.steps--big b { display: block; font-weight: 600; color: var(--text-1); }
.placeholder-status { min-height: 1.5em; font-size: var(--fs-small); color: var(--text-2); }
.placeholder-status:empty { display: none; }

/* ---------- features page ---------- */
.jump { margin-top: var(--s-6); }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jump a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-btn); color: var(--text-1); text-decoration: none; font-weight: 500; }
.jump a::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--brand-text)); }
.jump a:hover { border-color: var(--c, var(--brand-text)); }
.jump--ai, .feat--ai { --c: var(--brand-text); }
.jump--tune, .feat--tune { --c: var(--teal); }
.jump--mix, .feat--mix { --c: var(--orchid); }
.jump--modes, .feat--modes { --c: var(--copper); }
.jump--rec, .feat--rec { --c: var(--sky); }
.feat { padding: var(--s-8) 0 0; scroll-margin-top: var(--anchor-offset); }
.feat--rec { padding-bottom: var(--s-9); }
.feat-band { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c); color: var(--ink); }
.feat-band h2 { font-size: clamp(1.375rem, 2.2vw, 2rem); }
.feat-band span { font-weight: 600; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; margin-top: var(--s-6); }
.feat-lead { font-size: var(--fs-lead); color: var(--text-1); }
.ticks { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; color: var(--text-2); }
.ticks svg { width: 22px; height: 22px; margin-top: .2em; color: var(--c); }
.feat-media { display: grid; gap: var(--s-5); }
.shot--feat { margin: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-shot); }
.shot--feat img { width: 100%; }

/* ---------- download page ---------- */
.mobile-note { display: none; }
html[data-os="mobile"] .page-hero .mobile-note { display: block; color: var(--text-1); border-left: 3px solid var(--copper); padding-left: var(--s-4); }
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.platform { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--bg-1); scroll-margin-top: var(--anchor-offset); }
.platform-head { display: grid; gap: var(--s-4); justify-items: start; padding: var(--s-6); border-top: 6px solid var(--sky); }
.platform--mac .platform-head { border-top-color: var(--iris); }
.platform-head h2 { font-size: var(--fs-h2); }
.platform-rec { display: inline-block; visibility: hidden; padding: 2px var(--s-3); border-radius: var(--r-xs); background: var(--brand); color: #fff; font-weight: 600; font-size: var(--fs-small); }
.platform-body { display: grid; gap: var(--s-4); padding: 0 var(--s-6) var(--s-6); }
.platform-body h3 { font-size: var(--fs-h3); margin-top: var(--s-3); }
.req-list { margin: 0; border-top: 1px solid var(--line-2); }
.req-list div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); }
.req-list dt { color: var(--text-2); }
.req-list dd { margin: 0; }
html[data-os="windows"] .platform--windows, html[data-os="mac"] .platform--mac { border-color: var(--brand); }
html[data-os="windows"] .platform--windows .platform-rec, html[data-os="mac"] .platform--mac .platform-rec { visibility: visible; }
html:not([data-os="windows"]):not([data-os="mac"]) .platform-rec { display: none; }
html[data-os="windows"] .platform--mac .btn, html[data-os="mac"] .platform--windows .btn { background: transparent; border-color: var(--line-2); color: var(--text-1); }
html[data-os="windows"] .platform--mac .btn:hover, html[data-os="mac"] .platform--windows .btn:hover { border-color: var(--brand-text); }
.pro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.pro-grid h2 { font-size: var(--fs-h2); }
.pro-cta { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-6); }

/* ---------- support page ---------- */
.faq-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); }
.faq-row + .faq-row { margin-top: var(--s-7); }
.faq-group { padding-top: var(--s-5); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); color: var(--text-1); }
.faq-row:nth-child(2) .faq-group { color: var(--teal); }
.faq-row:nth-child(3) .faq-group { color: var(--brand-text); }
.faq-row:nth-child(4) .faq-group { color: var(--orchid); }
.faq-row:nth-child(5) .faq-group { color: var(--copper); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; scroll-margin-top: var(--anchor-offset); }
.contact-grid h2 { font-size: var(--fs-h2); }
.contact-note { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-small); max-width: 30rem; }
form[name="contact"] { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--text-3); border-radius: var(--r-btn); background: var(--bg-0); color: var(--text-1); font: inherit; color-scheme: dark; }
.field textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-2); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--ring); outline-offset: 2px; border-color: var(--brand-text); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--copper); }
.hint { font-size: var(--fs-small); color: var(--text-3); }
.form-actions { display: grid; gap: var(--s-3); justify-items: start; }
.form-actions .btn[disabled] { opacity: .7; cursor: progress; }
.form-status { min-height: 1.5em; font-size: var(--fs-small); color: var(--text-1); }
.form-status:empty { display: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- thanks page ---------- */
.page-hero--tall { padding: var(--s-9) 0; min-height: 50vh; }
.th-actions { margin-top: var(--s-6); }

/* ---------- legal pages ---------- */
.draft-band { background: var(--copper); color: var(--ink); padding: var(--s-3) 0; }
.draft-band p { font-weight: 500; }
.draft-band strong { font-weight: 600; }
.legal { max-width: calc(48rem + 2 * var(--gutter)); padding-top: var(--s-8); padding-bottom: var(--s-9); }
.legal-head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--line-2); }
.legal-head h1 { font-size: clamp(1.75rem, 3.6vw, 3rem); }
.legal-meta { margin-top: var(--s-4); color: var(--text-3); font-size: var(--fs-small); }
.legal-intro { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--text-2); }
.legal section { margin-top: var(--s-7); scroll-margin-top: var(--anchor-offset); }
.legal h2 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; margin-bottom: var(--s-4); }
.legal p, .legal li { color: var(--text-2); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--s-3); }
.legal ul { padding-left: 1.25em; display: grid; gap: var(--s-2); }
.legal code { font-family: inherit; font-weight: 600; color: var(--text-1); }
.atty { display: block; padding-left: var(--s-3); border-left: 3px solid var(--copper); color: var(--copper); font-size: var(--fs-small); font-weight: 500; }

@media (max-width: 900px) {
  .feat-grid, .pro-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .faq-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .feat { scroll-margin-top: 0; }
}
@media (max-width: 760px) {
  .platforms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .feat { padding-top: var(--s-7); }
  .platform-head, .platform-body { padding-left: var(--s-5); padding-right: var(--s-5); }
  .platform-head .btn, .pro-cta .btn, .form-actions .btn, .th-actions .btn { width: 100%; }
  .platform-head, .pro-cta, .form-actions { justify-items: stretch; }
  .faq-group { padding-top: 0; }
  .legal { padding-top: var(--s-7); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .strips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip:nth-child(3) { border-left: 0; }
  .strip:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-body, .band-grid, .local-grid, .ends { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .header-row { grid-template-columns: auto auto; grid-template-areas: "brand cta" "nav nav"; gap: 0 var(--s-4); min-height: 0; padding-top: var(--s-3); }
  .brand { grid-area: brand; }
  .header-cta { grid-area: cta; justify-self: end; }
  .main-nav { grid-area: nav; margin: var(--s-2) calc(-1 * var(--s-3)) 0; overflow-x: auto; }
  .main-nav ul { justify-content: flex-start; }
  .site-header { position: static; }
}
@media (max-width: 700px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sec { padding: var(--s-8) 0; }
  .brand, .brand img { width: 142px; height: 32px; }
  .main-nav a { padding: var(--s-3) var(--s-2); }
  .main-nav ul { justify-content: space-between; }
  .hero { padding-top: var(--s-6); }
  .stage { margin-top: var(--s-6); padding: var(--s-6) 0 var(--s-7); }
  .stage .shot { border-radius: var(--r-md); }
  .strips { grid-template-columns: minmax(0, 1fr); }
  .strip { border-left: 0; }
  .strip:nth-child(n+2) { border-top: 1px solid var(--line-2); }
  .fn-list, .ends ul { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: minmax(0, 1fr); padding: var(--s-5) 0; }
  .plan-head, .plan-body { padding: var(--s-5); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare th, .compare td { padding: var(--s-3) var(--s-2); font-size: 1rem; }
  .compare tbody th { width: 30%; }
  .dl-actions .btn { width: 100%; }
  .dl { justify-items: stretch; }
  .plan-cta { justify-items: stretch; }
}

@media (max-width: 380px) {
  .main-nav a { padding: var(--s-3) 6px; }
  .header-cta { padding: 0 var(--s-3); }
}

/* ---------- intro overlay (home only, built by js/intro.js) ---------- */
/* html.intro-on is set by intro.js before first paint; content is never hidden without JS. */
html.intro-on body { visibility: hidden; animation: intro-failsafe-show 0s linear 5s forwards; }
html.intro-on .brand img, html.intro-fly .brand img { visibility: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; visibility: visible; animation: intro-failsafe-hide 0s linear 5s forwards; }
.intro svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.intro-skip { position: absolute; right: var(--gutter); bottom: var(--s-6); min-height: 44px; padding: 0 var(--s-4); background: transparent; color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r-btn); font: 500 1rem/1 var(--font-body); cursor: pointer; }
.intro-skip:hover { color: var(--text-1); border-color: var(--brand-text); }
@keyframes intro-failsafe-show { to { visibility: visible; } }
@keyframes intro-failsafe-hide { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.intro-on body { visibility: visible; animation: none; }
  html.intro-on .brand img { visibility: visible; }
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* focus ring colour per surface (AA against the fill) */
.plan--pro .plan-head :focus-visible { outline-color: #fff; }
.plan--free .plan-head :focus-visible, .plan-body :focus-visible { outline-color: var(--ink); }