/* ==========================================================================
   Aura POS — public website stylesheet
   --------------------------------------------------------------------------
   Every colour token here mirrors app/shared/.../ui/theme/AuraColors.kt and
   every radius mirrors AuraDesign.kt, so the marketing site and the product
   are visibly the same thing. When a token changes in AuraColors.kt, change it
   here too.

   Typography is a system stack on purpose. The site has to render instantly on
   a phone on mobile data — that is often *why* someone is reading it — and a
   webfont round-trip buys nothing a good system stack doesn't already give.
   Money and metrics use the mono stack because POS figures should be tabular.

   The identity split is deliberate:
     • dark, near-black "terminal" surfaces with cyan glow  = the product
     • light neutral surfaces with white cards               = the reading copy
   Aura's terminal is what the customer recognises, so heroes and bands are
   dark; anything with more than a paragraph of prose is light.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Brand — AuraColors.Primary / PrimaryDark / Secondary */
  --cyan: #00BCD4;
  --teal: #00838F;
  --cyan-soft: #26C6DA;

  /* Terminal / dark chrome — AuraColors.Bg, ChromeStart…ChromeEnd */
  --term-1: #040E14;
  --term-2: #061318;
  --chrome-1: #04161D;
  --chrome-2: #062A35;
  --chrome-3: #073A46;
  --chrome-raised: #0B3E4C;

  /* Light surfaces — AuraColors.Light* */
  --page: #F4F7F9;
  --card: #FFFFFF;
  --surface: #FAFCFD;
  --border: #DCE6EA;
  --border-soft: #E6EEF1;
  --divider: #EFF4F6;

  /* Text — AuraColors.LightInk / LightTextPrimary / LightMuted / LightFaint */
  --ink: #08222B;
  --text: #0F2A33;
  --muted: #5F7C86;
  --faint: #9DB2BA;

  /* On-dark text. Cyan-tinted rather than grey so it belongs to the terminal. */
  --on-dark: #E0F7FA;
  --on-dark-2: #A9C9D4;
  --on-dark-3: #7796A2;

  /* Semantic — AuraStatus */
  --success: #15803D;
  --success-bg: #ECFDF5;
  --success-bd: #BBF7D0;
  --warn: #B45309;
  --warn-bg: #FFFBEB;
  --warn-bd: #FDE68A;
  --error: #DC2626;
  --error-bg: #FEF2F2;
  --error-bd: #FECACA;
  --info-bg: #E0F7FA;
  --info-bd: #B2EBF2;
  --accent: #7C3AED;
  --accent-bg: #F5F3FF;
  --accent-bd: #DDD6FE;
  --whatsapp: #25D366;

  /* Code */
  --code-bg: #04161D;
  --code-fg: #D7EEF3;

  /* Type stacks */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Shape + rhythm — AuraRadius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --maxw: 1180px;
  --nav-h: 66px;

  --shadow-sm: 0 1px 3px rgba(8, 34, 43, .06);
  --shadow: 0 4px 20px rgba(8, 34, 43, .08);
  --shadow-lg: 0 18px 48px rgba(8, 34, 43, .16);
  --glow: 0 6px 22px rgba(0, 131, 143, .26);
  --glow-cyan: 0 6px 22px rgba(0, 188, 212, .3);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The document is the only scroller on every page. Without this, overscrolling
     at either end rubber-bands the whole document — which drags the pinned
     header away from the top of the window on the way past. */
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  /* The header is fixed (see .nav), so it is out of flow and the first section
     would start underneath it. */
  padding-top: var(--nav-h);
  background: var(--card);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.02em;
}
p { margin: 0; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre, .mono, .num { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
ul, ol { margin: 0; padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Hover effects that *move* something are suspended while the page is scrolling.
   The pointer stays put and the content travels under it, so without this every
   card and button in a grid lifts and drops in turn as it passes the cursor —
   the other half of what reads as flicker on the way up and down. aura.js sets
   `is-scrolling` on <html> for as long as the page is moving; with JavaScript
   off the class never appears and hover behaves exactly as it did. */
.is-scrolling .btn:hover,
.is-scrolling .card--link:hover { transform: none; }
.is-scrolling .card--link:hover .more { gap: 6px; }

/* Skip link — keyboard users land on content, not eight nav items. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Layout helpers ────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--page); }
.section--soft { background: var(--surface); }
/* Desktop rhythm reads as dead space on a phone: 84 top + 84 bottom puts ~168px
   of nothing between sections on a 390px screen, half a viewport of scrolling
   past nothing. */
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .section--tight { padding: 36px 0; }
  .section-head { margin-bottom: 30px; }
}
.center { text-align: center; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.eyebrow--onDark { color: var(--cyan); }

h2.h-section { font-size: clamp(28px, 3.4vw, 40px); }
.lede { color: var(--muted); font-size: 17px; max-width: 68ch; }
.lede--onDark { color: var(--on-dark-2); }
.section-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.section-head .lede { margin: 14px auto 0; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease,
              border-color .14s ease, color .14s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: linear-gradient(120deg, var(--teal), var(--cyan)); color: #04161D; box-shadow: var(--glow); }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(0, 188, 212, .38); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--teal); }
/* No backdrop-filter here either: these sit on the hero, so blurring behind them
   pulls the hero's gradients into the scroll's per-frame paint. */
.btn-onDark {
  background: rgba(255, 255, 255, .09); color: #fff;
  border-color: rgba(0, 188, 212, .34);
}
.btn-onDark:hover { background: rgba(0, 188, 212, .16); border-color: var(--cyan); }
.btn-cyan { background: var(--cyan); color: #04161D; box-shadow: var(--glow-cyan); }
.btn-cyan:hover { background: #4DD0E1; }
.btn-sm { padding: 9px 15px; font-size: 14px; border-radius: var(--r-sm); }
.btn-lg { padding: 15px 28px; font-size: 16px; }

/* ── Top navigation ────────────────────────────────────────────────────── */
/* Fixed, opaque and on its own compositor layer — all three for the same reason.
   This header used to be `position: sticky` with a translucent background and
   `backdrop-filter: saturate(180%) blur(12px)`. A blurred backdrop has to be
   re-sampled from whatever is behind it on *every* frame of a scroll, and behind
   it is a hero built from two large radial gradients; the raster could not keep
   up, so the bar visibly lagged the scroll (it looked like the header could be
   dragged down off the top) and the page flickered on the way up and down.
   Opaque removes the backdrop work — .93 alpha over near-black was invisible
   anyway — and translateZ(0) keeps the bar on a layer the compositor can move
   without repainting it. body's padding-top reserves the space it no longer
   occupies in flow. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  background: var(--chrome-1);
  border-bottom: 1px solid rgba(0, 188, 212, .16);
  transform: translateZ(0);
}
.nav-inner { display: flex; align-items: center; gap: 26px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #04161D; letter-spacing: -.03em;
}
.brand-word {
  font-weight: 800; font-size: 19px; letter-spacing: .18em; color: var(--cyan);
}
.brand small {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(0, 188, 212, .12);
  border: 1px solid rgba(0, 188, 212, .3);
  padding: 2px 7px; border-radius: 5px; align-self: center;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav-links a {
  color: var(--on-dark-2); font-size: 14.5px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-sm);
  transition: background .13s ease, color .13s ease;
}
.nav-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav-links a[aria-current="page"] {
  color: var(--cyan); background: rgba(0, 188, 212, .13); font-weight: 600;
}
.nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-cta .btn-ghost {
  background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.nav-cta .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-sm); width: 42px; height: 38px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--on-dark); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--on-dark);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    padding: 12px 16px 18px;
    background: var(--chrome-1); border-bottom: 1px solid rgba(0, 188, 212, .16);
    box-shadow: var(--shadow-lg);
    /* The header is fixed, so this menu is too — it can no longer be scrolled
       into view, and eight links do not fit a phone held sideways. */
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav[data-open="true"] .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 16px; }
  .nav-cta .btn-ghost { display: none; }
}

/* Must follow the 1080px block — it re-shows the ghost button hidden above. */
@media (max-width: 430px) {
  /* On a small phone the brand, a wide CTA and the toggle will not share a line.
     Swap the wide "Book a demo" for the short "Sign in" so the header still
     offers a way in without pushing the page sideways. */
  .wrap { padding: 0 16px; }
  .nav-inner { gap: 12px; }
  .brand-word { font-size: 17px; letter-spacing: .14em; }
  .nav-cta .btn-primary { display: none; }
  .nav-cta .btn-ghost { display: inline-flex; }
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 13px 18px; font-size: 15px; }
}

/* ── Hero (dark terminal chrome) ───────────────────────────────────────── */
/* The cyan glow is stacked as background layers rather than drawn into an
   `inset: 0` ::after. Same picture, one box to rasterise instead of two — and a
   full-bleed overlay on every dark section is exactly the kind of thing that
   turns a scroll into a repaint. The dark bands below do the same. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(760px 420px at 86% -10%, rgba(0, 188, 212, .26), transparent 62%),
    radial-gradient(620px 380px at -6% 108%, rgba(0, 131, 143, .4), transparent 60%),
    linear-gradient(150deg, var(--term-1) 0%, var(--chrome-2) 58%, var(--chrome-3) 100%);
}
.hero-inner {
  position: relative; z-index: 1; display: grid;
  /* minmax(0,…) everywhere a grid holds mono numerals: the default `auto`
     minimum refuses to shrink below min-content and the page then scrolls
     sideways on a phone. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px; align-items: center;
  /* padding-block, never the shorthand: this element is also .wrap, and .wrap's
     horizontal padding IS the page gutter. A shorthand would zero it and the
     hero copy would sit flush to the screen edge on a phone. */
  padding-block: 84px 96px;
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; padding-block: 60px 68px; }
}
.hero h1 { font-size: clamp(36px, 5.2vw, 58px); letter-spacing: -.03em; color: #fff; }
.hero h1 .grad {
  background: linear-gradient(96deg, var(--cyan), #7FE3F0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { color: var(--on-dark-2); font-size: 18px; margin-top: 20px; max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding: 0; }
.hero-meta li {
  list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--on-dark-3);
}
.hero-meta li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(0, 188, 212, .18); flex-shrink: 0;
}

/* Page hero for the inner pages — same chrome, no product mock. */
.hero--inner .hero-inner { grid-template-columns: minmax(0, 1fr); padding-block: 64px 68px; }
.hero--inner h1 { font-size: clamp(32px, 4.4vw, 46px); }
.hero--inner p.lede { max-width: 68ch; }

/* ── Product mock (the fake terminal in the hero) ──────────────────────── */
.shot {
  background: var(--term-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 188, 212, .2); overflow: hidden;
}
.shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  background: rgba(0, 0, 0, .3); border-bottom: 1px solid rgba(0, 188, 212, .14);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 188, 212, .3); display: block; }
.shot-bar .url {
  margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--on-dark-3);
  background: rgba(255, 255, 255, .06); padding: 4px 10px; border-radius: 6px;
}
.shot-bar .badge-sync {
  margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: #00E676; background: rgba(0, 230, 118, .12);
  border: 1px solid rgba(0, 230, 118, .3); padding: 3px 8px; border-radius: 5px;
}
.shot-body { padding: 14px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .shot-body { grid-template-columns: 1fr; padding: 11px; } }

/* Product grid inside the mock */
.mock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mock-tile {
  background: rgba(14, 42, 56, .55); border: 1px solid rgba(0, 188, 212, .14);
  border-radius: var(--r-sm); padding: 9px 8px; min-height: 58px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mock-tile b { font-size: 10.5px; color: var(--on-dark); font-weight: 600; line-height: 1.3; }
.mock-tile span { font-family: var(--mono); font-size: 10.5px; color: var(--cyan); font-weight: 600; }
.mock-tile .vat {
  font-family: var(--sans); font-size: 8px; font-weight: 700; letter-spacing: .05em;
  color: var(--on-dark-3); border: 1px solid rgba(0, 188, 212, .22);
  border-radius: 3px; padding: 0 3px; align-self: flex-start;
}
.mock-tile.is86 { opacity: .45; }
.mock-tile.is86 .vat { color: #FF5252; border-color: rgba(255, 82, 82, .4); }

/* Cart panel inside the mock */
.mock-cart {
  background: rgba(14, 42, 56, .5); border: 1px solid rgba(0, 188, 212, .16);
  border-radius: var(--r-sm); padding: 11px; display: flex; flex-direction: column; gap: 7px;
}
.mock-cart .head {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-3);
}
.mock-line { display: flex; align-items: baseline; gap: 7px; font-size: 10.5px; color: var(--on-dark); }
.mock-line .q { font-family: var(--mono); color: var(--cyan); font-weight: 600; flex-shrink: 0; }
.mock-line .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-line .a { font-family: var(--mono); font-weight: 600; flex-shrink: 0; }
.mock-line.seat .n::after {
  content: 'S2'; font-family: var(--mono); font-size: 8px; color: var(--cyan);
  background: rgba(0, 188, 212, .14); border-radius: 3px; padding: 0 3px; margin-left: 5px;
}
.mock-cart .rule { height: 1px; background: rgba(0, 188, 212, .16); margin: 2px 0; }
.mock-total { display: flex; justify-content: space-between; align-items: baseline; }
.mock-total span { font-size: 10px; color: var(--on-dark-3); }
.mock-total b { font-family: var(--mono); font-size: 16px; color: #fff; font-weight: 700; }
.mock-pay {
  margin-top: 2px; text-align: center; border-radius: var(--r-xs); padding: 8px;
  background: linear-gradient(120deg, var(--teal), var(--cyan));
  color: #04161D; font-size: 11px; font-weight: 700;
}

/* ── Stat strip ────────────────────────────────────────────────────────── */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .stat-strip { grid-template-columns: minmax(0, 1fr); } }
.stat { background: var(--card); padding: 24px 20px; text-align: center; }
.stat b {
  display: block; font-family: var(--mono); font-size: 24px; font-weight: 600;
  color: var(--teal); letter-spacing: -.02em;
}
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.card--link {
  display: block; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card--link:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow); border-color: #B4DDE4;
}
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; }
.card .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--teal);
  padding-block: 4px; /* clears the 24px minimum target size when it is a link */
}
.card--link:hover .more { gap: 10px; }

.icon-tile {
  width: 44px; height: 44px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--teal), var(--cyan)); flex-shrink: 0;
}
.icon-tile svg {
  width: 22px; height: 22px; stroke: #fff; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.icon-tile--cyan { background: linear-gradient(135deg, var(--cyan), #7FE3F0); }
.icon-tile--cyan svg { stroke: #04161D; }
.icon-tile--deep { background: linear-gradient(135deg, var(--chrome-2), var(--teal)); }
.icon-tile--accent { background: linear-gradient(135deg, var(--accent), #A78BFA); }
.icon-tile--soft { background: var(--info-bg); border: 1px solid var(--info-bd); }
.icon-tile--soft svg { stroke: var(--teal); }

/* Module card with a corner tag ("Terminal", "Back office", "Guest") */
.mod { position: relative; }
.mod .where {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--divider); color: var(--muted);
}
.where.terminal { background: var(--info-bg); color: var(--teal); }
.where.office { background: var(--accent-bg); color: var(--accent); }
.where.guest { background: var(--success-bg); color: #166534; }
.where.kitchen { background: var(--warn-bg); color: #92400E; }

/* ── Feature rows (alternating) ────────────────────────────────────────── */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.feature + .feature { margin-top: 88px; }
.feature--flip .feature-text { order: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature + .feature { margin-top: 56px; }
  .feature--flip .feature-text { order: 0; }
}
.feature h3 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 14px; }
.check-list { list-style: none; padding: 0; margin-top: 22px; }
.check-list li {
  position: relative; padding-left: 30px; margin-bottom: 11px;
  font-size: 15px; color: var(--text);
}
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--success-bg); border: 1px solid var(--success-bd);
}
.check-list li::after {
  content: ''; position: absolute; left: 5.5px; top: 12px; width: 7px; height: 3.5px;
  border-left: 2px solid var(--success); border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}
.check-list--onDark li { color: var(--on-dark-2); }
.check-list--onDark li::before { background: rgba(0, 230, 118, .12); border-color: rgba(0, 230, 118, .34); }
.check-list--onDark li::after { border-color: #00E676; }

/* ── Dark band ─────────────────────────────────────────────────────────── */
.band {
  background:
    radial-gradient(680px 380px at 92% 6%, rgba(0, 188, 212, .18), transparent 60%),
    linear-gradient(150deg, var(--chrome-1), var(--chrome-2) 55%, var(--chrome-3));
  color: #fff; padding: 84px 0; position: relative; overflow: hidden;
}
.band .wrap { position: relative; z-index: 1; }
.band h2, .band h3 { color: #fff; }
@media (max-width: 640px) { .band { padding: 52px 0; } }
.band-card {
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(0, 188, 212, .18);
  border-radius: var(--r); padding: 22px;
}
.band-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.band-card p { color: var(--on-dark-2); font-size: 14px; }
.band-card .tag {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  color: var(--cyan); background: rgba(0, 188, 212, .12);
  border: 1px solid rgba(0, 188, 212, .3);
  padding: 2px 8px; border-radius: 5px; margin-bottom: 12px;
}

/* ── Two-column split (verticals) ──────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  padding: 34px 30px; color: #fff; display: flex; flex-direction: column;
  background:
    radial-gradient(420px 260px at 90% -20%, rgba(0, 188, 212, .22), transparent 62%),
    linear-gradient(150deg, var(--chrome-1), var(--chrome-3));
  border: 1px solid rgba(0, 188, 212, .2);
}
.split-card > * { position: relative; z-index: 1; }
.split-card h3 { font-size: 24px; color: #fff; }
.split-card p { color: var(--on-dark-2); font-size: 15px; margin-top: 10px; }
.split-card .btn { margin-top: auto; align-self: flex-start; }
.split-card .check-list { margin-bottom: 26px; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px 22px; display: flex; flex-direction: column; height: 100%;
}
.plan--featured { border-color: var(--teal); box-shadow: var(--glow); position: relative; }
.plan--featured::before {
  content: 'Most venues'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, var(--teal), var(--cyan)); color: #04161D;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.plan h3 { font-size: 19px; }
.plan .for { font-size: 13.5px; color: var(--muted); margin-top: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.plan ul { list-style: none; padding: 16px 0 0; margin: 0 0 22px; flex: 1; }
.plan li { font-size: 13.5px; color: var(--text); padding: 5px 0 5px 22px; position: relative; }
.plan li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); font-weight: 700; font-size: 12px; }
.plan li.off { color: var(--faint); }
.plan li.off::before { content: '—'; color: var(--faint); }
.plan .btn { width: 100%; }

/* Comparison matrix */
/* overflow-y is pinned to `hidden` here and on every other sideways scroller
   below. Left at its default, `overflow-x: auto` computes overflow-y to `auto`
   too, which quietly makes the box a *vertical* scroller as well: a trackpad
   flick over the table is then swallowed by it instead of scrolling the page,
   and the page stutters to a stop under the pointer. Nothing is clipped — none
   of these boxes constrain their height. */
.matrix-scroll {
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
}
.matrix { min-width: 720px; font-size: 14px; }
.matrix th, .matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--divider); }
.matrix thead th {
  background: var(--surface); font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); position: sticky; top: 0;
}
.matrix tbody th { font-weight: 600; color: var(--text); }
.matrix td { text-align: center; color: var(--muted); }
.matrix td.yes { color: var(--success); font-weight: 700; }
.matrix td.no { color: var(--faint); }
.matrix tbody tr:hover { background: var(--surface); }
.matrix caption { caption-side: bottom; padding: 12px 16px; font-size: 13px; color: var(--muted); text-align: left; }
/* A matrix whose cells are sentences needs them ragged-right, or every row
   reads as a caption. */
.matrix--prose td { text-align: left; line-height: 1.55; }
.matrix--prose td.yes, .matrix--prose td.no { text-align: center; }

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cta {
  background:
    radial-gradient(520px 300px at 88% -30%, rgba(0, 188, 212, .3), transparent 64%),
    linear-gradient(120deg, var(--chrome-2), var(--teal) 62%, #00A0AE);
  border-radius: var(--r-xl); padding: 52px 44px; color: #fff; text-align: center;
  position: relative; overflow: hidden;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); }
.cta p { color: rgba(255, 255, 255, .88); margin: 14px auto 0; max-width: 60ch; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 620px) { .cta { padding: 38px 22px; } }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { background: var(--chrome-1); color: var(--on-dark-3); padding: 60px 0 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
/* Five columns stop fitting well before the mobile breakpoint — step down to
   three first, otherwise the section headings wrap mid-word around 1000px. */
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #4E7280; margin-bottom: 14px;
}
.footer ul { list-style: none; padding: 0; }
/* Padding rather than a taller line-height: the link's own box has to clear the
   24px minimum target size, and a 14px link in a five-column list is 17px tall
   without it — a mis-tap away from the wrong page on every phone. */
.footer li { margin-bottom: 4px; }
.footer a { color: var(--on-dark-2); font-size: 14px; display: inline-block; padding: 4px 0; }
.footer a:hover { color: var(--cyan); text-decoration: none; }
.footer .about { font-size: 14px; color: var(--on-dark-3); margin-top: 14px; max-width: 34ch; }
.footer-base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(0, 188, 212, .14);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: #4E7280;
}

/* ── Long-form content page (features / security / developers) ─────────── */
.prose { max-width: 820px; }
.prose h2 { font-size: 26px; margin: 52px 0 14px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose h3 { font-size: 18.5px; margin: 30px 0 10px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose p { margin-top: 12px; color: var(--text); }
.prose ul, .prose ol { margin-top: 12px; color: var(--text); }
.prose li { margin-bottom: 7px; }
.prose hr { border: 0; border-top: 1px solid var(--divider); margin: 44px 0; }
.prose table { margin-top: 18px; font-size: 14.5px; }
/* Reference tables can be wider than the content column. Let the table scroll
   rather than the page — no per-page wrapper markup needed. */
@media (max-width: 1100px) { .prose table { display: block; overflow-x: auto; overflow-y: hidden; } }
.prose th, .prose td { padding: 11px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--surface); font-weight: 600; font-size: 13px; }
.prose :not(pre) > code {
  background: var(--divider); border: 1px solid var(--border-soft); border-radius: 5px;
  padding: 1.5px 6px; font-size: .87em; color: #05606B;
  /* Endpoint paths are single unbreakable tokens — without this they widen the
     table past the column and the whole page scrolls sideways. */
  overflow-wrap: anywhere;
}

/* Numbered step list */
.steps { list-style: none; padding: 0; margin-top: 22px; counter-reset: step; }
.steps > li {
  position: relative; padding: 0 0 22px 46px; margin: 0; counter-increment: step;
  border-left: 2px solid var(--divider);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--cyan)); color: #04161D;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.steps > li > strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.steps p { margin-top: 6px; }

/* Callouts */
.note {
  border-radius: var(--r-sm); padding: 15px 18px; margin-top: 22px; font-size: 14.5px;
  border: 1px solid var(--info-bd); background: var(--info-bg); color: #0B4B53;
  border-left: 4px solid var(--teal);
}
.note strong { color: var(--teal); }
.note.warn { background: var(--warn-bg); border-color: var(--warn-bd); border-left-color: var(--warn); color: #7C4A02; }
.note.warn strong { color: #92400E; }
.note.tip { background: var(--success-bg); border-color: var(--success-bd); border-left-color: var(--success); color: #14532D; }
.note.tip strong { color: #166534; }
.note p { color: inherit; margin-top: 6px; }
.note p:first-child { margin-top: 0; }
.note a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ── Code blocks ───────────────────────────────────────────────────────── */
.code {
  position: relative; margin-top: 20px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--code-bg); border: 1px solid #123441;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px 8px 14px; background: #061F28; border-bottom: 1px solid #123441;
}
.code-head span {
  font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.code-copy {
  background: rgba(255, 255, 255, .07); color: var(--on-dark);
  border: 1px solid rgba(0, 188, 212, .24); border-radius: 6px;
  font-size: 11.5px; font-weight: 600; padding: 6px 10px; cursor: pointer;
  font-family: var(--sans); min-height: 24px; /* 24px minimum target size */
}
.code-copy:hover { background: rgba(0, 188, 212, .16); color: #fff; }
.code-copy[data-done="true"] { color: #00E676; border-color: rgba(0, 230, 118, .4); }
.code pre {
  margin: 0; padding: 15px 16px; overflow-x: auto; overflow-y: hidden;
  color: var(--code-fg); font-size: 13px; line-height: 1.62; tab-size: 2;
}
.code pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* Method pills for the API tables */
.m {
  display: inline-block; min-width: 52px; text-align: center; color: #fff;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 3px 7px; border-radius: 5px; letter-spacing: .03em;
}
.m.get { background: var(--success); }
.m.post { background: #0284A0; }
.m.put { background: var(--warn); }
.m.delete { background: var(--error); }
.ep-table { margin-top: 20px; font-size: 14px; }
.ep-table td:first-child { width: 76px; }
.ep-table td code { white-space: nowrap; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill {
  font-size: 13px; font-weight: 500; padding: 6px 13px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.pill--onDark { background: rgba(255, 255, 255, .07); border-color: rgba(0, 188, 212, .22); color: var(--on-dark-2); }
.pill--brand { background: var(--info-bg); border-color: var(--info-bd); color: var(--teal); font-weight: 600; }

.kbd {
  font-family: var(--mono); font-size: 12px; background: var(--card);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  padding: 2px 6px; color: var(--text);
}

/* Jump bar on the long pages */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.jump a:hover { border-color: var(--cyan); color: var(--teal); text-decoration: none; }
.jump--onDark a { background: rgba(255, 255, 255, .07); border-color: rgba(0, 188, 212, .22); color: var(--on-dark-2); }
.jump--onDark a:hover { background: rgba(0, 188, 212, .16); color: #fff; border-color: var(--cyan); }

/* One block per module on the features page */
.mod-block { scroll-margin-top: calc(var(--nav-h) + 16px); }
.mod-block + .mod-block { margin-top: 60px; padding-top: 60px; border-top: 1px solid var(--divider); }
.mod-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.mod-head .icon-tile { margin-bottom: 0; width: 52px; height: 52px; }
.mod-head .icon-tile svg { width: 25px; height: 25px; }
.mod-head h2 { font-size: clamp(23px, 2.6vw, 29px); }
.mod-head .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod-head .lede { margin-top: 10px; font-size: 16px; }
@media (max-width: 560px) { .mod-head { flex-direction: column; gap: 12px; } }

.feat { border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; background: var(--card); }
.feat h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.feat p { font-size: 14px; color: var(--muted); }

/* FAQ — <details> so it works with JS off */
.faq { border: 1px solid var(--border); border-radius: var(--r); background: var(--card); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--divider); }
.faq summary {
  cursor: pointer; padding: 18px 22px; font-size: 16px; font-weight: 600;
  color: var(--ink); list-style: none; display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; font-family: var(--mono); font-size: 20px;
  font-weight: 400; color: var(--teal); line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--surface); }
.faq .answer { padding: 0 22px 20px; color: var(--muted); font-size: 15px; }
.faq .answer p + p { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   Help centre (/help)
   --------------------------------------------------------------------------
   The help centre is generated by HelpRoutes.kt but is not a separate site: it
   uses the same shell, the same tokens and, wherever one fits, the same
   component as a hand-written page — .hero--inner for the masthead, .card for
   collections, .prose for the article body, .note for the guide's asides.
   Everything below is what a documentation site needs and a marketing page
   does not: a search box with a type-ahead, breadcrumbs, a section index and a
   prev/next pager.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Search ────────────────────────────────────────────────────────────── */
.help-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 660px; margin-top: 28px; text-align: left;
  background: var(--card); border-radius: var(--r);
  padding: 6px 6px 6px 42px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45);
}
.help-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--sans); color: var(--text);
  /* 16px exactly: iOS Safari zooms the whole page in on focus below it, and a
     zoomed help centre is one a reader has to pan sideways to escape. */
  font-size: 16px; padding: 11px 0; text-overflow: ellipsis;
}
.help-search input::placeholder { color: var(--faint); }
.help-search-ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
}
.help-search .btn { flex-shrink: 0; }
.help-search:focus-within { box-shadow: 0 0 0 3px rgba(0, 188, 212, .45), 0 14px 34px -12px rgba(0, 0, 0, .45); }
@media (max-width: 480px) {
  .help-search { padding-left: 38px; }
  .help-search-ico { left: 12px; }
  .help-search .btn { padding: 9px 12px; }
}

.help-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); overflow-y: auto; max-height: min(62vh, 440px);
}
.help-results a { display: block; padding: 11px 16px; border-top: 1px solid var(--divider); }
.help-results a:first-child { border-top: 0; }
.help-results a:hover, .help-results a:focus-visible { background: var(--surface); text-decoration: none; }
.help-results .r-col {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
}
.help-results .r-title { display: block; font-size: 15px; font-weight: 650; color: var(--ink); margin-top: 2px; }
.help-results .r-snip {
  display: block; font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.help-results-none { padding: 15px 16px; font-size: 14px; color: var(--muted); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.help-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  font-size: 13.5px; color: var(--muted); min-width: 0;
}
.help-crumbs a { color: var(--teal); padding: 4px 0; }
.help-crumbs .sep { color: var(--faint); }
.help-crumbs [aria-current] { color: var(--text); }
.hero-inner > .help-crumbs { margin-bottom: 18px; }
.help-crumbs--onDark { color: var(--on-dark-3); }
.help-crumbs--onDark a { color: var(--cyan); }
.help-crumbs--onDark .sep { color: var(--on-dark-3); }
.help-crumbs--onDark [aria-current] { color: var(--on-dark-2); }

/* ── Collection cards (the /help index) ────────────────────────────────── */
.help-col { display: flex; flex-direction: column; }
/* inline-block so the padding counts: a card title is a standalone link, not one
   inline in a sentence, so it owes the reader a 24px-tall target. */
.help-col h3 a { color: var(--ink); display: inline-block; padding-block: 2px; }
.help-col h3 a:hover { color: var(--teal); text-decoration: none; }
.help-num { font-family: var(--mono); font-size: .78em; color: var(--faint); margin-right: 8px; }

/* Article lists — the one component that has to be tappable above all else. */
.help-links { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--divider); }
.help-links li { margin: 0; }
.help-links a {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--divider); color: var(--text); font-size: 14.5px;
}
.help-links li:last-child a { border-bottom: 0; }
.help-links a:hover { color: var(--teal); text-decoration: none; }
.help-links .n { font-family: var(--mono); font-size: 12px; color: var(--faint); min-width: 20px; flex-shrink: 0; }
.help-links a:hover .n { color: var(--teal); }

.help-h { font-size: 20px; margin: 48px 0 16px; }
.help-foot .lede { margin: 14px auto 0; max-width: 62ch; }

/* ── Article: the dark crumb + search bar under the header ─────────────── */
.help-bar {
  background: var(--chrome-1); border-bottom: 1px solid rgba(0, 188, 212, .16);
  padding: 12px 0;
}
.help-bar-inner { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.help-bar .help-crumbs { flex: 1 1 240px; }
.help-search--slim {
  margin-top: 0; flex: 0 1 320px; max-width: 340px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0, 188, 212, .2);
}
.help-search--slim input { padding: 7px 0; }
@media (max-width: 560px) { .help-search--slim { flex-basis: 100%; max-width: none; } }

/* ── Article layout ────────────────────────────────────────────────────── */
.help-layout {
  display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: 44px; align-items: start; padding-top: 40px; padding-bottom: 68px;
}
/* Below this the sidebar would take a third of the screen to list forty links.
   The phone gets "More in this collection" under the article instead, and /help
   itself lists every section, so nothing becomes unreachable by hiding it. */
@media (max-width: 1024px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 26px; padding-bottom: 46px; }
  .help-side { display: none; }
}
.help-side {
  position: sticky; top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; padding-right: 8px;
  /* Reaching the end of the section list must not then start scrolling the
     article — one flick, one thing moving. */
  overscroll-behavior: contain;
}
.help-side h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 22px 0 6px;
}
.help-side h4:first-child { margin-top: 0; }
.help-side ul { list-style: none; padding: 0; margin: 0; }
.help-side a {
  display: block; padding: 6px 10px; border-radius: var(--r-xs);
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  border-left: 2px solid transparent;
}
.help-side a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.help-side a[aria-current="page"] {
  background: var(--info-bg); border-left-color: var(--cyan);
  color: var(--teal); font-weight: 650;
}

.help-article { min-width: 0; }
.help-article > .eyebrow { margin-bottom: 4px; }
.help-article h1 { font-size: clamp(27px, 3.6vw, 38px); }
.help-article .prose { max-width: none; }
.help-article .prose > h2:first-child { margin-top: 34px; }

/* On this page */
.help-toc {
  margin-top: 26px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface);
}
.help-toc summary {
  cursor: pointer; padding: 13px 18px; font-size: 14.5px; font-weight: 650;
  color: var(--ink); list-style: none; display: flex; align-items: center; gap: 10px;
}
.help-toc summary::-webkit-details-marker { display: none; }
.help-toc summary::after {
  content: '+'; margin-left: auto; font-family: var(--mono); font-size: 18px;
  line-height: 1; color: var(--teal);
}
.help-toc[open] summary::after { content: '−'; }
.help-toc ul { list-style: none; margin: 0; padding: 0 18px 14px; columns: 2; column-gap: 28px; }
.help-toc li { break-inside: avoid; }
.help-toc a { display: block; padding: 5px 0; font-size: 14px; }
@media (max-width: 640px) { .help-toc ul { columns: 1; } }

/* A guide table is often wider than a phone. Scroll the table, never the page —
   overrides the .prose fallback so the two do not nest into a double scroller. */
.table-scroll { margin-top: 18px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.table-scroll > table { margin-top: 0; }
@media (max-width: 1100px) { .table-scroll > table { display: table; } }

/* Prev / next */
.help-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--divider);
}
.help-pager a {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 18px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
}
.help-pager a:hover { border-color: var(--cyan); text-decoration: none; box-shadow: var(--shadow-sm); }
.help-pager span {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.help-pager b { font-size: 15px; font-weight: 650; color: var(--ink); }
/* Explicit column so "next" stays right-hand when there is no "previous". */
.help-pager .next { grid-column: 2; text-align: right; align-items: flex-end; }
@media (max-width: 560px) {
  .help-pager { grid-template-columns: minmax(0, 1fr); }
  .help-pager .next { grid-column: 1; text-align: left; align-items: flex-start; }
}

/* More in this collection */
.help-more {
  margin-top: 40px; padding: 22px 26px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r);
}
.help-more h2 { font-size: 17px; }
.help-more .help-links { margin-top: 12px; }
.help-more .more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  padding-block: 4px; font-size: 14px; font-weight: 600; color: var(--teal);
}
@media (max-width: 560px) { .help-more { padding: 18px; } }