/* ===========================================================================
   Omnibriq — the public site's stylesheet.

   Hand-written rather than generated, and that is the deliberate choice: this
   site has no build dependency at all (`node build.mjs` is the whole
   toolchain), so adding Tailwind here would mean a second node_modules tree and
   a CSS build step to maintain for one static site. What is below is about 900
   lines, loads as one file, and can be read end to end.

   How it is organised:
     1. Tokens        — colour, type, space, radius, shadow. Everything else
                        references these; no raw hex below this block.
     2. Reset + base
     3. Layout        — the shell, sections, grids
     4. Components    — buttons, header, cards, plans, forms, FAQ, article
     5. Utilities
     6. Motion + print

   Dark mode is defined once, under `prefers-color-scheme: dark`, by
   redefining the tokens — not by restating component rules. A visitor's OS
   setting is honoured; there is no theme switcher, because a marketing site
   that remembers a theme preference is solving a problem nobody has.
   =========================================================================== */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Brand. The green matches the product app's `brand` scale in
     frontend/tailwind.config.js, deepening to teal so the gradient does not
     read as a WhatsApp clone. */
  --brand-50: #ecfdf3;
  --brand-100: #d1fadf;
  --brand-200: #a6f4c5;
  --brand-400: #32d583;
  --brand-500: #16a34a;
  --brand-600: #15803d;
  --brand-700: #166534;
  --accent-600: #0f766e;

  /* Neutrals, warmed very slightly so large white areas do not glare. */
  --ink-900: #0b1220;
  --ink-800: #141c2b;
  --ink-700: #26303f;
  --ink-500: #5b6675;
  --ink-400: #7d8795;
  --ink-200: #dfe3e9;
  --ink-100: #eef0f4;
  --ink-50: #f7f8fa;

  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: var(--ink-50);
  --surface-invert: var(--ink-900);
  --border: var(--ink-200);
  --border-strong: #c9cfd8;

  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-invert: #ffffff;

  --link: var(--brand-600);
  --focus: #2563eb;

  /* Type. A system stack: it renders instantly, matches the OS the visitor is
     already reading, and avoids a third-party font request on every page. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* A fluid scale. clamp() rather than breakpoints, so there is no step where
     a headline is awkwardly large for its container. */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1: clamp(1.14rem, 1.08rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.6vw, 1.7rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --step-4: clamp(1.95rem, 1.5rem + 2vw, 3rem);
  --step-5: clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(11 18 32 / 6%), 0 1px 3px rgb(11 18 32 / 5%);
  --shadow: 0 4px 6px -2px rgb(11 18 32 / 5%), 0 12px 24px -6px rgb(11 18 32 / 10%);
  --shadow-lg: 0 10px 20px -8px rgb(11 18 32 / 12%), 0 30px 60px -20px rgb(11 18 32 / 18%);

  --shell: 1180px;
  --shell-narrow: 760px;
  --gutter: 1rem;
}

@media (min-width: 640px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b1220;
    --surface-raised: #121a29;
    --surface-sunken: #080d17;
    --surface-invert: #060a12;
    --border: #222d40;
    --border-strong: #32405a;

    --text: #eef2f8;
    --text-soft: #a3aec0;
    --text-faint: #7f8a9d;

    --link: var(--brand-400);
    --focus: #60a5fa;

    --brand-50: #0d2a1b;
    --brand-100: #11351f;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 4px 10px -2px rgb(0 0 0 / 45%), 0 16px 32px -12px rgb(0 0 0 / 55%);
    --shadow-lg: 0 12px 24px -8px rgb(0 0 0 / 50%), 0 40px 70px -24px rgb(0 0 0 / 65%);
  }
}

/* ── 2. Reset + base ───────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* the sticky header's height, for #anchors */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  letter-spacing: -0.03em;
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentcolor;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}

li + li {
  margin-top: var(--space-2);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

pre {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--ink-900);
  color: #e6edf3;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.6;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

blockquote {
  margin: 0 0 var(--space-5);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 3px solid var(--brand-400);
  color: var(--text-soft);
}

blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 650;
  background: var(--surface-sunken);
  white-space: nowrap;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-scroll table {
  margin: 0;
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: top 0.15s;
}

.skip-link:focus {
  top: var(--space-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 3. Layout ─────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  max-width: var(--shell-narrow);
}

.section {
  padding-block: var(--space-8);
}

@media (min-width: 900px) {
  .section {
    padding-block: var(--space-9);
  }
}

.section-sunken {
  background: var(--surface-sunken);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 44rem;
  margin-bottom: var(--space-7);
}

.section-head.is-centred {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .eyebrow {
    color: var(--brand-400);
  }
}

.eyebrow .icon {
  width: 1.1em;
  height: 1.1em;
}

.section-lede {
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 42rem;
}

.section-head.is-centred .section-lede {
  margin-inline: auto;
}

.section-subhead {
  margin-top: var(--space-8);
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* ── 4. Components ─────────────────────────────────────────────────────── */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--accent-600));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  box-shadow: var(--shadow);
  color: #fff;
}

.btn-outline {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .btn-outline:hover {
    color: var(--brand-400);
  }
}

.btn-ghost {
  background: var(--brand-50);
  color: var(--brand-700);
  border-color: color-mix(in srgb, var(--brand-500) 25%, transparent);
}

@media (prefers-color-scheme: dark) {
  .btn-ghost {
    color: var(--brand-200);
  }
}

.btn-quiet {
  background: none;
  color: var(--text);
  padding-inline: var(--space-3);
}

.btn-quiet:hover {
  color: var(--brand-600);
}

.btn-invert {
  background: #fff;
  color: var(--ink-900);
}

.btn-invert:hover {
  color: var(--ink-900);
  box-shadow: var(--shadow);
}

.btn-lg {
  padding: 0.9rem 1.6rem;
  font-size: var(--step-0);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.btn-row.is-centred {
  justify-content: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 650;
  font-size: var(--step--1);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.15s ease;
}

.link-arrow:hover::after {
  transform: translateX(3px);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 750;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  flex: none;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list li {
  margin: 0;
}

.nav-list > li > a,
.nav-list summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.nav-list summary::-webkit-details-marker {
  display: none;
}

.nav-list > li > a:hover,
.nav-list summary:hover {
  background: var(--surface-sunken);
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .nav-list > li > a:hover,
  .nav-list summary:hover {
    color: var(--brand-400);
  }
}

.chev {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.15s ease;
}

.has-menu details[open] .chev {
  transform: rotate(180deg);
}

.has-menu {
  position: relative;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 21rem;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 0.15rem;
  z-index: 60;
}

.menu-panel a {
  display: grid;
  gap: 0.1rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}

.menu-panel a:hover {
  background: var(--surface-sunken);
}

.menu-panel strong {
  font-size: var(--step-0);
  font-weight: 650;
}

.menu-panel span {
  font-size: var(--step--1);
  color: var(--text-soft);
  line-height: 1.45;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-burger {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

@media (max-width: 1023px) {
  .nav-burger {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 4.25rem 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    max-height: calc(100dvh - 4.25rem);
    overflow-y: auto;
    padding: var(--space-5) var(--gutter) var(--space-7);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .nav-toggle:checked ~ .site-nav {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav-list > li > a,
  .nav-list summary {
    padding: var(--space-3);
    font-size: var(--step-0);
  }

  .menu-panel {
    position: static;
    min-width: 0;
    margin-top: var(--space-1);
    box-shadow: none;
    background: var(--surface-sunken);
  }

  .nav-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .nav-actions .btn {
    width: 100%;
  }
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-8);
}

.hero::before {
  /* A soft brand wash rather than a flat colour block: it gives the top of the
     page depth without a hero image fighting the headline for attention. */
  content: "";
  position: absolute;
  inset: -40% 0 auto;
  height: 150%;
  background: radial-gradient(60% 50% at 18% 18%, color-mix(in srgb, var(--brand-400) 22%, transparent), transparent 70%),
    radial-gradient(45% 45% at 88% 8%, color-mix(in srgb, var(--accent-600) 18%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
}

.hero h1 {
  margin-bottom: var(--space-4);
}

.hero-lede {
  font-size: var(--step-1);
  color: var(--text-soft);
  max-width: 34rem;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 var(--space-6);
  display: grid;
  gap: var(--space-2);
}

/* Positioned rather than flex: a flex container makes every inline element in
   the item its own flex item, so a <strong> mid-sentence would be torn onto its
   own column and the line would break around it. */
.hero-points li {
  position: relative;
  margin: 0;
  padding-left: 2.1rem;
  font-size: var(--step-0);
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")
    center / 0.85rem no-repeat;
}

.hero-aside {
  position: relative;
}

.hero-shot {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface-raised);
}

.hero-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-caption {
  margin: var(--space-3) 0 0;
  font-size: var(--step--1);
  color: var(--text-faint);
  text-align: center;
}

/* The "where we sell" strip under the hero. Sits above the integration chips
   because a visitor outside the named markets needs the answer before they
   decide whether the rest of the page is for them. */
.reach-strip {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.reach-line {
  margin: 0 0 var(--space-2);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.reach-detail {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: 48rem;
}

.reach-strip .market-links {
  gap: var(--space-2) var(--space-4);
  font-size: var(--step--1);
}

.reach-strip .market-links a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.reach-strip .market-links a:hover {
  text-decoration: underline;
}

.trust-strip {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.trust-strip p {
  margin: 0 0 var(--space-3);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list li {
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
}

/* Stat band */

.stat-band {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.stat {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.stat dt {
  font-size: var(--step--1);
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}

.stat dd {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
}

/* Feature grid */

.feature-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .feature-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.feature .icon {
  color: var(--brand-600);
  margin-bottom: var(--space-3);
}

@media (prefers-color-scheme: dark) {
  .feature .icon {
    color: var(--brand-400);
  }
}

.feature h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.feature p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--step--1);
}

/* Product cards */

.product-list {
  display: grid;
  gap: var(--space-6);
}

.product-card {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 820px) {
  .product-card {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6);
  }

  .product-card:nth-child(even) .product-card-media {
    order: 2;
  }
}

.product-card-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunken);
}

.product-card-media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.product-card h3 {
  font-size: var(--step-3);
  margin-bottom: var(--space-2);
}

.product-tagline {
  font-size: var(--step-1);
  color: var(--text-soft);
}

.tick-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.tick-list li {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-size: var(--step--1);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Steps */

.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
}

@media (min-width: 900px) {
  .step-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

.step {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-600));
  color: #fff;
  font-weight: 750;
  font-size: var(--step-0);
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.step p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--step--1);
}

/* Pricing */

.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.billing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.billing-toggle button {
  border: 0;
  background: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.billing-toggle button span {
  font-weight: 500;
  opacity: 0.8;
}

.billing-toggle button.is-active {
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.market-select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-soft);
}

.market-select select {
  font: inherit;
  padding: 0.5rem 0.75rem;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.plan-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .plan-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.plan-featured {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 1px var(--brand-500), var(--shadow);
}

/* Always rendered, even when empty, so the four cards agree on where the plan
   name starts. An element that only exists on the featured card would push that
   one card's price a line below its neighbours. */
.plan-badge {
  margin: 0 0 var(--space-2);
  min-height: 1.1rem;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .plan-badge {
    color: var(--brand-400);
  }
}

.plan-name {
  font-size: var(--step-2);
  margin-bottom: var(--space-1);
}

/* Three lines of the tagline at this size, so the price row lines up across all
   four cards whatever each tagline's length. */
.plan-tagline {
  font-size: var(--step--1);
  color: var(--text-soft);
  min-height: 5em;
}

.plan-price {
  margin: var(--space-4) 0 var(--space-1);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.plan-amount {
  font-size: var(--step-3);
  font-weight: 750;
  letter-spacing: -0.03em;
}

.plan-period {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.plan-annual-note {
  margin: 0 0 var(--space-4);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.plan-ai {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-700);
}

@media (prefers-color-scheme: dark) {
  .plan-ai {
    color: var(--brand-200);
  }
}

.plan-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  flex: 1;
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.plan-points li {
  position: relative;
  margin: 0;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  color: var(--text-soft);
}

.plan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.9rem;
  height: 0.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.pricing-notes {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
}

.pricing-notes p:last-child {
  margin-bottom: 0;
}

.addon-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

@media (min-width: 860px) {
  .addon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.addon-card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.addon-card h3 {
  font-size: var(--step-1);
}

.addon-card p {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.noscript-note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--step--1);
}

/* Comparison table */

.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface-raised);
  min-width: 14rem;
}

.compare-table th {
  text-align: center;
}

.compare-table td:not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

.yes,
.no {
  font-weight: 700;
}

.yes {
  color: var(--brand-600);
}

.no {
  color: var(--text-faint);
}

@media (prefers-color-scheme: dark) {
  .yes {
    color: var(--brand-400);
  }
}

/* Packs */

.pack-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .pack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .pack-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pack-card {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.pack-card .icon {
  color: var(--brand-600);
  margin-bottom: var(--space-3);
}

@media (prefers-color-scheme: dark) {
  .pack-card .icon {
    color: var(--brand-400);
  }
}

.pack-card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.pack-card p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* The "yours isn't listed?" card. A dashed edge and a tinted ground so it reads
   as an invitation rather than as an eighth pack that already exists. */
.pack-card-ask {
  background: var(--brand-50);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--brand-500) 40%, transparent);
}

.pack-card-ask p {
  margin-bottom: var(--space-4);
  color: var(--text);
}

.pack-card-ask .icon {
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .pack-card-ask .icon {
    color: var(--brand-400);
  }
}

/* Integrations */

.integration-list {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .integration-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1060px) {
  .integration-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.integration-group {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.integration-group h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2);
}

.integration-group p {
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* FAQ */

.faq-group + .faq-group {
  margin-top: var(--space-7);
}

.faq-group-title {
  font-size: var(--step-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.faq-list {
  display: grid;
  gap: var(--space-2);
}

.faq-item {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--text-faint);
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item[open] summary {
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .faq-item[open] summary {
    color: var(--brand-400);
  }
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-soft);
  font-size: var(--step--1);
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

/* Forms */

.form-card h2 {
  font-size: var(--step-2);
}

.form-card {
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.field-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 620px) {
  .field-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .field-grid .span-2 {
    grid-column: 1 / -1;
  }
}

/* `align-content: start` matters: the field is a grid item stretched by its
   parent row, and without it the input absorbs the leftover height and renders
   as a box twice its natural size next to a shorter neighbour. */
.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.field label {
  font-size: var(--step--1);
  font-weight: 650;
}

.field .hint {
  font-size: var(--step--1);
  color: var(--text-faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
  outline: none;
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #dc2626;
}

.field-error {
  font-size: var(--step--1);
  color: #dc2626;
}

/* Collapsed until there is something to say. Reserving the line on every field
   would put a ragged gap under half the form, and the one-line shift when an
   error does appear is less distracting than that permanent hole. */
.field-error:empty {
  display: none;
}

/* The honeypot. Visually gone but still a real, focusable-by-bots input — a
   `display: none` field is skipped by some automation, which defeats the point.
   A human never reaches it: it is off-screen and out of the tab order. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  color: var(--text-faint);
}

.form-status {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--step--1);
}

.form-status:empty {
  display: none;
}

.form-status.is-ok {
  background: var(--brand-50);
  border: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  color: var(--brand-700);
}

@media (prefers-color-scheme: dark) {
  .form-status.is-ok {
    color: var(--brand-200);
  }
}

.form-status.is-error {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 35%, transparent);
  color: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  .form-status.is-error {
    color: #fca5a5;
  }
}

.contact-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-8);
  }
}

.contact-aside {
  display: grid;
  gap: var(--space-5);
}

.contact-method {
  padding: var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.contact-method h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--step-1);
}

.contact-method .icon {
  color: var(--brand-600);
}

@media (prefers-color-scheme: dark) {
  .contact-method .icon {
    color: var(--brand-400);
  }
}

.contact-method p {
  margin-bottom: var(--space-3);
  font-size: var(--step--1);
  color: var(--text-soft);
}

.contact-method p:last-child {
  margin-bottom: 0;
}

/* CTA band */

.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-900), #0f2a24 55%, var(--accent-600));
  color: #fff;
}

.cta-band .shell {
  position: relative;
  padding-block: var(--space-8);
  text-align: center;
}

.cta-band h2 {
  color: #fff;
  max-width: 34rem;
  margin-inline: auto;
}

.cta-band p {
  color: color-mix(in srgb, #fff 80%, transparent);
  font-size: var(--step-1);
  max-width: 38rem;
  margin-inline: auto var(--space-6);
}

.cta-band .btn-outline {
  background: transparent;
  border-color: color-mix(in srgb, #fff 45%, transparent);
  color: #fff;
}

.cta-band .btn-outline:hover {
  border-color: #fff;
  color: #fff;
}

.cta-fine {
  margin: var(--space-5) 0 0;
  font-size: var(--step--1);
  color: color-mix(in srgb, #fff 65%, transparent);
}

/* Help centre + articles */

.help-category + .help-category {
  margin-top: var(--space-7);
}

.help-category h2 {
  font-size: var(--step-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 760px) {
  .help-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.help-list li {
  margin: 0;
}

.help-list a {
  display: grid;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.help-list a:hover {
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

.help-list strong {
  font-size: var(--step-0);
  font-weight: 650;
}

.help-list span {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.post-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.post-card h2 {
  font-size: var(--step-2);
}

.post-card h2 a {
  color: inherit;
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--link);
}

.post-card p {
  color: var(--text-soft);
  font-size: var(--step--1);
  flex: 1;
}

.article {
  max-width: 44rem;
  margin-inline: auto;
}

.article-head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.article-head h1 {
  font-size: var(--step-4);
}

.article-meta {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-faint);
}

.article-body {
  font-size: 1.06rem;
  line-height: 1.72;
}

.article-body h1 {
  font-size: var(--step-3);
}

.article-body h2 {
  font-size: var(--step-2);
  margin-top: var(--space-7);
}

.article-body h3 {
  font-size: var(--step-1);
  margin-top: var(--space-6);
}

.article-body > :first-child {
  margin-top: 0;
}

.article-body ul,
.article-body ol {
  padding-left: 1.4rem;
}

.related {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.related h2 {
  font-size: var(--step-1);
}

.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-bottom: var(--space-5);
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: none;
}

.back-link::before {
  content: "←";
}

/* Footer */

.site-footer {
  margin-top: var(--space-8);
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
}

.footer-top {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-8) var(--space-6);
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 0.9fr 1.6fr;
    gap: var(--space-8);
  }
}

.footer-blurb {
  margin-top: var(--space-4);
  color: var(--text-soft);
  max-width: 28rem;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
  color: var(--text-soft);
}

.footer-contact li {
  margin: 0;
}

.footer-cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
  .footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-col h3 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-col li {
  margin: 0;
}

.footer-col a {
  color: var(--text-soft);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--link);
}

.footer-markets {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
}

.market-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.market-links a {
  color: var(--text-soft);
  text-decoration: none;
}

.market-links a:hover {
  color: var(--link);
}

.footer-bottom {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-7);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
}

.footer-bottom p {
  margin: 0;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal li {
  margin: 0;
}

.footer-legal a {
  color: var(--text-soft);
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--link);
}

.footer-legal-pending {
  max-width: 48rem;
}

.footer-note {
  font-size: 0.78rem;
  opacity: 0.85;
}

/* ── 5. Utilities ──────────────────────────────────────────────────────── */

.muted {
  color: var(--text-soft);
}

.centred {
  text-align: center;
}

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--step-1);
}

.callout {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--brand-50);
  border: 1px solid color-mix(in srgb, var(--brand-500) 25%, transparent);
  border-radius: var(--radius-lg);
  font-size: var(--step--1);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout strong {
  color: var(--brand-700);
}

@media (prefers-color-scheme: dark) {
  .callout strong {
    color: var(--brand-200);
  }
}

.split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .split.is-wide-left {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.media-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface-sunken);
}

.media-frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.figure-caption {
  margin: var(--space-3) 0 0;
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* ── 6. Motion + print ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta-band,
  .pricing-controls,
  .skip-link {
    display: none !important;
  }

  /* Every market panel is in the HTML and hidden by script; printing should
     show them all rather than whichever one happened to be visible. */
  .market-panel[hidden] {
    display: block !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}