/* ──────────────────────────────────────────────────────────────
   site.css — public surfaces: marketing pages, docs, join page,
   printable poster. Built on the shared tokens. Loaded after
   app.css, never inside the business app shell.

   Marketing rhythm: one 12-column grid inside a 1200px wrap,
   section spacing on an 8px scale (128 / 96 / 72), type on a
   perfect-fourth-ish scale (13 · 15 · 17 · 19 · 24 · 32 · 48 · 76).
   Paper everywhere, white only for raised surfaces, the teal ink
   as the single accent. The product (card-preview) carries all
   business colour.
   ────────────────────────────────────────────────────────────── */

body.site { background: var(--paper); font-size: 15px; }
.site .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.site h1, .site h2, .site h3 { letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.site {
  --lp-sec: 128px;
  --lp-device: color-mix(in srgb, var(--ink) 55%, #000);
  --lp-raised: var(--surface);
  --lp-hair-strong: color-mix(in srgb, var(--hair) 70%, var(--ink) 12%);
  --lp-quiet: var(--slate-500);   /* small secondary text: 4.5:1 on paper */
}

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 50; height: 64px;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);
}
.site-nav.scrolled { border-bottom-color: var(--hair); }
.site-nav .wrap { display: flex; align-items: center; height: 64px; gap: 28px; }
.site-logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; color: var(--ink); }
.site-logo:hover { color: var(--ink); }
.site-logo i { width: 26px; height: 26px; border-radius: 7px; background: url(/assets/icon.svg) center / contain no-repeat; display: inline-block; flex: none; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin-left: 12px; }
.site-nav ul a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--body); font-size: 14px; font-weight: 500; transition: color var(--t-fast) var(--ease); }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--ink); }
.site-nav .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.site .btn { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.site .btn-lg { height: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.site .btn-quiet { color: var(--ink); }
.site .btn-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.site .btn-ghost { background: var(--surface); border-color: var(--hair); color: var(--ink); }
.site .btn-ghost:hover:not(:disabled) { border-color: var(--lp-hair-strong); background: var(--surface); }

/* ── Shared marketing type ───────────────────────────────── */
.lp-sec { padding: var(--lp-sec) 0; border-top: 1px solid var(--hair); }
.lp-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px;
  align-items: end; margin-bottom: 64px;
}
.lp-head h2, .lp-split-copy h2, .lp-faq-head h2 {
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.032em; font-weight: 600; max-width: 18ch; text-wrap: balance;
}
.lp-head p { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 38ch; }
.lp-head-solo { grid-template-columns: 1fr; }
.lp-head-bare { display: flex; justify-content: flex-end; margin-bottom: 32px; }
.lp-lead { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 34em; text-wrap: pretty; }
.lp-body { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 34em; }
.lp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Hero ────────────────────────────────────────────────── */
/* The phone is cut by the hero's bottom hairline: the product sits on the page
   rather than floating over it. */
.lp-hero { overflow: hidden; }
.lp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px;
  align-items: center; min-height: 700px; padding-top: 48px;
}
.lp-hero-copy { padding-bottom: 72px; }
.lp-hero h1 {
  font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -.042em; font-weight: 600;
  max-width: 11ch; margin-bottom: 28px; text-wrap: balance;
}
.lp-hero .lp-lead { margin-bottom: 36px; max-width: 30em; }
.lp-hero-note { margin-top: 20px; font-size: 14px; color: var(--lp-quiet); }
.lp-hero-device { align-self: end; height: 660px; position: relative; }

/* iPhone, drawn in CSS: hardware black frame, 12px bezel, island, status bar. */
.iphone {
  width: 396px; padding: 12px; border-radius: 62px; margin: 0 auto;
  background: var(--lp-device);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--lp-device) 70%, #fff 30%),
    inset 0 0 0 5px var(--lp-device),
    0 40px 80px -30px rgba(10, 70, 63, .35),
    0 18px 36px -18px rgba(28, 43, 42, .30);
  font-family: -apple-system, 'SF Pro Text', var(--font), sans-serif;
}
.iphone-screen {
  position: relative; height: 820px; border-radius: 50px; overflow: hidden;
  background: #F2F2F4; color: #000;
}
.ios-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 4px 30px 0 40px; }
.ios-time { font-size: 16px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ios-island { position: absolute; left: 50%; top: 11px; width: 118px; height: 35px; margin-left: -59px; border-radius: 20px; background: #000; }
.ios-icons { display: flex; align-items: center; gap: 6px; }
.ios-bars { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.ios-bars b { width: 3px; border-radius: 1px; background: currentColor; }
.ios-bars b:nth-child(1) { height: 4px; } .ios-bars b:nth-child(2) { height: 6px; }
.ios-bars b:nth-child(3) { height: 8px; } .ios-bars b:nth-child(4) { height: 11px; }
.ios-batt { position: relative; width: 25px; height: 12px; border-radius: 4px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.ios-batt::before { content: ""; position: absolute; inset: 1.5px; right: 5px; border-radius: 2px; background: currentColor; }
.ios-batt::after { content: ""; position: absolute; right: -3.5px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: color-mix(in srgb, currentColor 40%, transparent); }

/* Pass-update notification: solid, like a banner on a light wallpaper. */
.ios-note {
  position: absolute; z-index: 3; top: 58px; left: 10px; right: 10px;
  display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center;
  padding: 12px 14px; border-radius: 22px;
  background: #FFFFFF;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 10px 30px -8px rgba(0, 0, 0, .22);
}
.ios-note-ic { width: 38px; height: 38px; border-radius: 9px; background: #000; color: #fff; display: grid; place-items: center; }
.ios-note-txt { min-width: 0; }
.ios-note-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.25; }
.ios-note-row b { font-weight: 600; }
.ios-note-row span { color: rgba(60, 60, 67, .6); font-size: 13px; }
.ios-note p { color: #000; font-size: 14px; line-height: 1.3; margin-top: 1px; }

.wallet-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 14px 22px; }
.wallet-bar b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.wallet-bar span { display: flex; gap: 10px; }
.wallet-bar i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 120, 128, .14); color: #000; }
.wallet-stack { padding: 6px 14px 0; }
.wallet-peek { height: 58px; overflow: hidden; border-radius: 16px 16px 0 0; }
.wallet-peek .cpv { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .10); }
.wallet-peek + .wallet-peek, .wallet-peek + .wallet-front { margin-top: -4px; }
.wallet-front { position: relative; }
.wallet-front .cpv { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .10), 0 -6px 16px -8px rgba(0, 0, 0, .28); }
.wallet-front .cpv-top .cpv-fig { transition: color .6s var(--ease); }

/* The one orchestrated moment. Hidden states exist only when JS has run and
   motion is welcome; everything ends visible even if a script never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js .lp-hero-device .iphone { animation: lp-rise 1s var(--ease) .1s both; }
  .js .ios-note { animation: lp-drop .6s var(--ease) 1.2s both; }
}
@keyframes lp-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes lp-drop { from { opacity: 0; transform: translateY(-22px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Logo row ────────────────────────────────────────────── */
.lp-logos { border-top: 1px solid var(--hair); padding: 36px 0; }
.lp-logos .wrap { display: flex; align-items: center; gap: 48px; }
.lp-logos p { font-size: 14px; color: var(--lp-quiet); max-width: 22ch; line-height: 1.4; flex: none; }
.lp-logos ul { list-style: none; display: flex; flex: 1; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.lp-logos li { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); opacity: .42; white-space: nowrap; }

/* ── How it works (a real sequence) ──────────────────────── */
.lp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.lp-steps li { border-top: 1px solid var(--ink); padding-top: 20px; }
.lp-step-n { display: block; font-size: 13px; font-weight: 500; color: var(--lp-quiet); margin-bottom: 40px; }
.lp-step-fig { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; color: var(--ink); }
.lp-step-fig b { font-size: 64px; line-height: .9; font-weight: 400; letter-spacing: -.03em; color: var(--brand-700); }
.lp-step-fig span { font-size: 15px; color: var(--body); }
.lp-steps h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 8px; }
.lp-steps p:last-child { font-size: 15px; line-height: 1.6; color: var(--body); max-width: 32ch; }

/* ── Programs ────────────────────────────────────────────── */
.lp-prog { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: stretch; }
.lp-prog-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.lp-prog-tabs button {
  position: relative; display: grid; gap: 3px; text-align: left; padding: 18px 0 18px 20px;
  border-bottom: 1px solid var(--hair); color: var(--body); transition: color var(--t-fast) var(--ease);
}
.lp-prog-tabs button::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px;
  background: var(--brand-600); transform: scaleY(0); transition: transform var(--t-base) var(--ease);
}
.lp-prog-tabs button b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.lp-prog-tabs button span { font-size: 14px; line-height: 1.4; color: var(--lp-quiet); }
.lp-prog-tabs button:hover b { color: var(--brand-700); }
.lp-prog-tabs button.on::before { transform: none; }
.lp-prog-tabs button.on b { color: var(--brand-700); }
.lp-prog-tabs button.on span { color: var(--body); }
.lp-prog-stage {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 56px; border-radius: 24px; background: var(--lp-raised); border: 1px solid var(--hair); min-height: 560px;
}
.lp-prog-card { display: flex; justify-content: center; }
.lp-prog-copy h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 14px; max-width: 18ch; }
.lp-prog-copy > p { font-size: 16px; line-height: 1.6; color: var(--body); margin-bottom: 24px; }
.lp-prog-copy ul { list-style: none; border-top: 1px solid var(--hair); }
.lp-prog-copy li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
.lp-prog-copy li svg { color: var(--brand-600); margin-top: 3px; }
.prog-mock .cpv, .prog-copy { transition: opacity .22s var(--ease); }
.fade { opacity: 0; }

/* ── Two-column feature sections ─────────────────────────── */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.lp-split-copy h2 { margin-bottom: 20px; }
.lp-split-copy .lp-body { margin-bottom: 32px; }
.lp-facts { list-style: none; border-top: 1px solid var(--hair); margin-bottom: 36px; }
.lp-facts:last-child { margin-bottom: 0; }
.lp-facts li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 16px; color: var(--ink); }
.lp-facts li svg { color: var(--brand-600); }

/* Scanner: the phone cropped by a raised panel. */
.lp-scan-stage {
  height: 660px; overflow: hidden; border-radius: 24px; background: var(--lp-raised);
  border: 1px solid var(--hair); padding-top: 56px;
}
.lp-scan-stage .iphone { width: 340px; border-radius: 56px; padding: 11px; }
.lp-scan-stage .iphone-screen { height: 700px; border-radius: 45px; background: #0E1413; color: #fff; }
.lp-viewfinder { height: 176px; display: grid; place-items: center; align-content: center; gap: 18px; }
.lp-vf-frame { position: relative; width: 108px; height: 108px; }
.lp-vf-frame b { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; }
.lp-vf-frame b:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.lp-vf-frame b:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.lp-vf-frame b:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.lp-vf-frame b:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.lp-viewfinder span { font-size: 13px; color: rgba(255, 255, 255, .62); }
.lp-sheet {
  background: var(--surface); color: var(--ink); border-radius: 28px 28px 0 0; min-height: 420px;
  padding: 22px 20px; display: grid; gap: 16px; align-content: start; font-family: var(--font);
}
.lp-sheet-who { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lp-sheet-who b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.lp-sheet-who small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-sheet small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.lp-sheet-row { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.lp-sheet-row b { font-size: 24px; font-weight: 500; }
.lp-sheet-row .fig { font-weight: 400; }
.lp-sheet-amount { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.lp-sheet-amount small { margin: 0; font-size: 13px; color: var(--body); }
.lp-sheet-amount b { font-size: 24px; font-weight: 400; }
.lp-sheet-amount b span { font-family: var(--font); font-size: 14px; color: var(--muted); }
.lp-sheet .btn { height: 48px; border-radius: 12px; font-size: 15px; pointer-events: none; }
.lp-sheet .btn-quiet { height: 36px; color: var(--body); }

/* Automations: a ledger of rules and the moment each one fires. */
.lp-split-text { align-items: start; }
.lp-channels { font-size: 15px; color: var(--ink); font-weight: 500; }
.lp-rules { list-style: none; border-top: 1px solid var(--ink); }
.lp-rules li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.lp-rules b { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.lp-rules span { font-size: 15px; color: var(--body); text-align: right; }

/* ── Developers — the one dark surface ───────────────────── */
.dev { background: var(--brand-800); color: var(--brand-50); border-top: 0; }
.dev h2 { color: #fff; }
.dev .lp-body { color: var(--brand-100); }
.dev .lp-facts { border-color: color-mix(in srgb, #fff 14%, transparent); }
.dev .lp-facts li { color: #fff; border-color: color-mix(in srgb, #fff 14%, transparent); }
.dev .lp-facts li svg { color: var(--brand-200); }
.lp-split-dev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.dev .lp-split-copy h2 { font-size: clamp(30px, 2.8vw, 40px); max-width: 16ch; }
.lp-btn-dark { border: 1px solid color-mix(in srgb, #fff 32%, transparent); color: #fff; background: transparent; }
.lp-btn-dark:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; }
.code { max-width: 820px; margin: 0 auto; border: 1px solid color-mix(in srgb, var(--brand-500) 40%, var(--brand-800)); border-radius: var(--r-lg); overflow: hidden; background: color-mix(in srgb, var(--brand-800) 80%, #000); }
.code .bar { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 30%, var(--brand-800)); }
.code .bar button { padding: 6px 12px; border-radius: 6px; color: var(--brand-200); background: transparent; border: 0; font: inherit; font-size: 12.5px; cursor: pointer; }
.code .bar button.on { background: color-mix(in srgb, var(--brand-500) 30%, var(--brand-800)); color: #fff; }
.code pre { font-family: var(--font-mono); font-size: 13px; line-height: 1.75; padding: 24px; overflow: auto; color: var(--brand-50); margin: 0; }
.code pre[hidden] { display: none; }
.code .k { color: var(--brand-300); } .code .s { color: var(--brand-100); } .code .c { color: var(--brand-400); }
.lp-code .code { max-width: none; border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }

/* ── Testimonials ────────────────────────────────────────── */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.lp-quotes figure { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; border-top: 1px solid var(--ink); padding-top: 24px; }
.lp-quotes blockquote p { font-size: 20px; line-height: 1.45; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.lp-quotes figcaption { display: grid; gap: 2px; font-size: 14px; }
.lp-quotes figcaption b { font-weight: 600; color: var(--ink); }
.lp-quotes figcaption span { color: var(--lp-quiet); }

/* ── Pricing ─────────────────────────────────────────────── */
/* One table: a 1px gap over a hairline background draws every divider,
   whatever the column count at a breakpoint. */
.plans {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 20px; overflow: hidden;
}
.plan { background: var(--surface); padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 24px; position: relative; }
.plan.pop { background: color-mix(in srgb, var(--brand-50) 55%, var(--surface)); }
.plan.pop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-600); }
.plan-name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 22px; }
.plan h3 { font-size: 17px; letter-spacing: -.01em; }
.plan .tag { font-size: 13px; font-weight: 500; color: var(--brand-700); }
.plan .price { display: grid; gap: 4px; }
.plan .price-fig { display: flex; align-items: flex-start; gap: 3px; font-family: var(--font-fig); font-variant-numeric: tabular-nums; color: var(--ink); }
.plan .price-sym { font-size: 22px; line-height: 1.4; }
.plan .price-fig [data-price] { font-size: 52px; line-height: 1; letter-spacing: -.02em; }
.plan .price small { font-size: 13.5px; color: var(--lp-quiet); }
.plan .btn { height: 44px; }
.plan ul { list-style: none; display: grid; gap: 11px; font-size: 14.5px; color: var(--body); border-top: 1px solid var(--hair); padding-top: 22px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.plan li svg { color: var(--brand-600); margin-top: 2px; }
.bill-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--lp-quiet); justify-self: end; }
.bill-toggle label[data-bill] { cursor: pointer; transition: color var(--t-fast) var(--ease); }
.bill-toggle label.on { color: var(--ink); font-weight: 500; }

/* ── FAQ ─────────────────────────────────────────────────── */
.lp-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; margin-top: var(--lp-sec); }
.lp-faq-head h2 { margin-bottom: 16px; }
.lp-faq-head p { font-size: 16px; color: var(--body); }
.lp-faq-head a { color: var(--brand-700); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--muted); transition: transform var(--t-base) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--ink); }
.faq summary:hover svg { color: var(--ink); }
.faq p { padding: 0 48px 24px 0; color: var(--body); font-size: 16px; line-height: 1.6; max-width: 60ch; }

/* ── Final CTA ───────────────────────────────────────────── */
.lp-cta { padding: 0 0 var(--lp-sec); }
.cta-band {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 28px; padding: 80px 72px;
}
.cta-band h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.04em; max-width: 12ch; color: var(--brand-800); text-wrap: balance; }
.cta-band p { font-size: 17px; color: var(--brand-800); opacity: .8; margin-bottom: 24px; }

/* ── Sub-page head (pricing, programs) ───────────────────── */
.hero { padding: 104px 0 72px; }
.lp-page-head h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; max-width: 14ch; margin-bottom: 20px; text-wrap: balance; }
.lp-page-head p { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 36em; }
.lp-page-head + .lp-sec { border-top: 0; padding-top: 0; }
.kicker { font-size: 14px; font-weight: 600; color: var(--brand-700); margin-bottom: 12px; display: block; }
.prog-sec { padding: 96px 0; border-top: 1px solid var(--hair); }
.prog { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.prog h3 { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 14px; }
.prog > div > p { color: var(--body); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.prog ul { list-style: none; border-top: 1px solid var(--hair); }
.prog li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
.prog .mock { display: flex; justify-content: center; }

/* ── Footer ──────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--hair); padding: 72px 0 40px; color: var(--body); font-size: 14px; }
.site-foot .cols { display: grid; grid-template-columns: minmax(240px, 2.4fr) repeat(4, minmax(0, 1fr)); column-gap: 48px; row-gap: 32px; margin-bottom: 64px; }
.site-foot .cols > div:first-child { padding-right: 32px; }
.site-foot-blurb { margin-top: 16px; max-width: 30ch; color: var(--lp-quiet); font-size: 14px; line-height: 1.5; }
.site-foot .foot-h { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.site-foot ul { list-style: none; display: grid; gap: 10px; }
.site-foot ul a { color: var(--body); }
.site-foot ul a:hover { color: var(--ink); }
.site-foot .bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--lp-quiet); border-top: 1px solid var(--hair); padding-top: 24px; }
.site-foot-lang { display: flex; gap: 16px; }
.site-foot-lang a { color: var(--lp-quiet); }
.site-foot-lang a[aria-current] { color: var(--ink); font-weight: 500; }

/* ── Legal + docs prose ──────────────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 22px; margin: 36px 0 12px; }
.prose h3 { font-size: 17px; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--body); font-size: 15px; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 16px 20px; display: grid; gap: 6px; }
.prose code { font-family: var(--font-mono); font-size: 13px; background: var(--paper); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; }
.docs-shell { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; padding: 48px 0 96px; }
.docs-nav { position: sticky; top: 88px; display: grid; gap: 4px; }
.docs-nav b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 4px; }
.docs-nav a { padding: 6px 10px; border-radius: 6px; font-size: 14px; color: var(--body); }
.docs-nav a:hover { background: var(--paper); color: var(--ink); }
.docs-nav a.on { background: var(--brand-50); color: var(--brand-800); font-weight: 500; }
.endpoint { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; margin: 8px 0; }
.endpoint b { font-weight: 600; color: var(--brand-700); min-width: 54px; }

/* ── Join page ───────────────────────────────────────────── */
body.join { background: var(--paper); }
.join-wrap { max-width: 460px; margin: 0 auto; padding: 24px 20px 64px; display: grid; gap: 22px; }
.join-head { text-align: center; display: grid; gap: 6px; }
.join-head h1 { font-size: 24px; }
.join-head p { color: var(--body); font-size: 14px; }
.join-card { display: flex; justify-content: center; }
.join-form { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 16px; box-shadow: var(--shadow-sm); }
.phone-field { display: flex; gap: 8px; }
.phone-field .select { width: 104px; flex: none; }
.otp-input { letter-spacing: .5em; text-align: center; font-family: var(--font-mono); font-size: 20px; height: 52px; }
.join-step[hidden] { display: none; }
.join-step { display: grid; gap: 16px; }
.join-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.join-row .field-group + .field-group { margin-top: 0; }
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-choice label { position: relative; cursor: pointer; }
.seg-choice input { position: absolute; opacity: 0; inset: 0; }
.seg-choice span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--r);
  border: 1px solid var(--field-border); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--slate-700);
  transition: border-color var(--t-fast), background-color var(--t-fast); }
.seg-choice input:checked + span { border-color: var(--brand-600); background: color-mix(in srgb, var(--brand-600) 8%, var(--surface)); color: var(--brand-700); }
.seg-choice input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.join-who { display: flex; align-items: center; gap: 12px; }
.join-who b { display: block; font-weight: 600; }
.join-who small { display: block; font-size: 13px; }
.join-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-600); color: #fff; font-weight: 600; font-size: 14px; }
.join-actions { display: grid; gap: 10px; }
.wallet-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 10px; font-weight: 500; font-size: 15px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); }
.wallet-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.wallet-btn.dark:hover { color: #fff; }
.wallet-btn[data-platform="ios"], .wallet-btn[data-platform="android"] { background: #000; border-color: #000; color: #fff; font-weight: 600; }
.wallet-btn[data-platform="ios"]:hover, .wallet-btn[data-platform="android"]:hover { color: #fff; opacity: .88; }
.join-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.inline-error { color: var(--danger); font-size: 13px; min-height: 18px; }

/* ── Poster (A5 / A6 print) ──────────────────────────────── */
body.poster { background: var(--paper); }
.poster-sheet {
  width: 148mm; min-height: 210mm; margin: 24px auto; background: #fff;
  border: 1px solid var(--hair); border-radius: 8px;
  padding: 18mm 14mm; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10mm; box-shadow: var(--shadow-md);
}
.poster-sheet.a6 { width: 105mm; min-height: 148mm; padding: 12mm 10mm; gap: 6mm; }
.poster-sheet h1 { font-size: 30px; }
.poster-sheet .poster-qr img { width: 62mm; height: 62mm; }
.poster-sheet.a6 .poster-qr img { width: 46mm; height: 46mm; }
.poster-sheet .poster-url { font-family: var(--font-mono); font-size: 12px; color: var(--body); word-break: break-all; }
.poster-bar { max-width: 720px; margin: 0 auto; padding: 20px; display: flex; gap: 10px; justify-content: center; }
@media print {
  .poster-bar, .site-nav, .site-foot { display: none !important; }
  body.poster { background: #fff; }
  .poster-sheet { margin: 0; border: 0; border-radius: 0; box-shadow: none; page-break-after: always; }
  @page { size: A5; margin: 0; }
}


/* ── Responsive: 360 / 768 / 1024 / 1280 / 1536 ──────────── */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .lp-prog { grid-template-columns: 1fr; gap: 24px; }
  .lp-prog-tabs { flex-direction: row; border-top: 0; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .lp-prog-tabs::-webkit-scrollbar { display: none; }
  .lp-prog-tabs button { flex: none; padding: 9px 16px; border: 1px solid var(--hair); border-radius: var(--pill); background: transparent; }
  .lp-prog-tabs button::before, .lp-prog-tabs button span { display: none; }
  .lp-prog-tabs button b { font-size: 14px; font-weight: 500; color: var(--body); }
  .lp-prog-tabs button.on { background: var(--ink); border-color: var(--ink); }
  .lp-prog-tabs button.on b { color: #fff; }
}
@media (max-width: 960px) {
  .site { --lp-sec: 88px; }
  .site-nav ul { display: none; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding-top: 56px; }
  .lp-hero-copy { padding-bottom: 0; }
  .lp-hero-device { height: 560px; }
  .lp-head, .lp-split, .lp-split-dev, .lp-faq, .cta-band { grid-template-columns: minmax(0, 1fr); }
  .lp-head { gap: 16px; margin-bottom: 48px; }
  .lp-split { gap: 56px; }
  .lp-split > .lp-scan-stage { order: 2; }
  .lp-steps, .lp-quotes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-step-n { margin-bottom: 20px; }
  .lp-logos .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .lp-logos ul { justify-content: flex-start; gap: 12px 28px; }
  .lp-logos li { font-size: 16px; }
  .lp-faq { gap: 24px; }
  .cta-band { padding: 56px 40px; }
  .docs-shell, .prog { grid-template-columns: 1fr; }
  .prog { gap: 40px; }
  .docs-nav { position: static; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .site-foot .cols > div:first-child { grid-column: 1 / -1; }
  .hero { padding: 72px 0 48px; }
}
@media (max-width: 720px) {
  .lp-prog-stage { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; min-height: 0; }
}
@media (max-width: 560px) {
  .site { --lp-sec: 72px; }
  .site .wrap { padding: 0 20px; }
  .site-nav .wrap { gap: 12px; }
  .site-nav .btn-quiet { padding: 0 12px; }
  .lp-hero h1 { font-size: 44px; letter-spacing: -.038em; }
  .lp-hero .lp-lead { font-size: 17px; }
  .lp-hero .lp-actions .btn { flex: 1 1 auto; }
  .lp-hero-device { height: 500px; }
  .lp-hero-device .iphone { zoom: .86; }
  .lp-scan-stage { height: 580px; padding-top: 40px; }
  .bill-toggle { justify-self: start; }
  .lp-prog-tabs { margin: 0 -20px; padding: 0 20px; }
  .lp-scan-stage .iphone { zoom: .9; }
  .lp-head p, .lp-body { font-size: 16px; }
  .lp-step-fig b { font-size: 52px; }
  .plans { grid-template-columns: 1fr; }
  .lp-prog-stage { padding: 0; border: 0; background: transparent; }
  .lp-prog-card { overflow: visible; }
  .lp-rules li { flex-direction: column; gap: 4px; }
  .lp-rules span { text-align: left; }
  .lp-quotes blockquote p { font-size: 18px; }
  .faq summary { font-size: 16px; }
  .faq p { padding-right: 0; }
  .cta-band { padding: 40px 24px; border-radius: 20px; }
  .cta-band .lp-actions .btn { flex: 1 1 auto; }
  .lp-page-head p { font-size: 17px; }
  .poster-sheet { width: auto; min-height: 0; }
}
@media (max-width: 380px) {
  .lp-hero-device .iphone { zoom: .8; }
  .site-nav .btn-quiet { display: none; }
  .lp-prog-card .cpv, .lp-scan-stage .iphone { zoom: .9; }
}

/* The hidden attribute must beat component display rules. */
[hidden] { display: none !important; }

/* ── Wallet badges (components/wallet-badges) ─────────────────
   Official artwork is used as-is: never recoloured, stretched or restyled.
   Apple left, Google right, both 48px high (Google's minimum is 48dp; Google's
   condensed badge is the one made for side-by-side). A phone too narrow for both
   at full size stacks them rather than shrinking either. */
.wallet-badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.wallet-badge { display: inline-flex; flex: none; line-height: 0; -webkit-tap-highlight-color: transparent; }
.wallet-badge img { height: 48px; width: auto; display: block; }
.wallet-badge:active { transform: scale(.98); }
.wallet-badge.is-fallback { line-height: 1.1; align-items: center; gap: 9px; height: 48px; padding: 0 14px 0 12px; border-radius: 10px;
  background: #000; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.wallet-badge.is-fallback:hover { color: #fff; }
.wallet-badge.is-fallback span { display: grid; text-align: left; }
.wallet-badge.is-fallback small { font-size: 10.5px; font-weight: 500; opacity: .72; }
.wallet-badge.is-fallback svg.i { width: 20px; height: 20px; }

/* ── Contact page ─────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.contact-item { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--hair); border-radius: var(--r-lg, 14px); background: var(--surface); color: var(--ink); text-decoration: none; }
a.contact-item:hover { border-color: var(--brand-500); color: var(--ink); }
.contact-item svg.i { width: 22px; height: 22px; color: var(--brand-700); flex: none; margin-top: 2px; }
.contact-item b { display: block; font-weight: 600; margin-bottom: 4px; }
.contact-item span span { color: var(--body); font-size: 15px; word-break: break-word; }
.contact-note { margin-top: 24px; color: var(--lp-quiet, var(--muted)); font-size: 14px; }

/* ── Nav language switch (SQ default) ──────────────────────── */
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; margin-right: 6px; }
.lang-switch a { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--lp-quiet, var(--muted)); padding: 4px 10px; border-radius: 999px; line-height: 1; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current] { background: var(--brand-600); color: #fff; }
.lang-switch a[aria-current]:hover { color: #fff; }

/* ── Join pages: back for signed-in customers ─────────────── */
.join-back { display: flex; justify-content: space-between; align-items: center; margin: -8px 0 -6px; }
.join-back a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--body); padding: 6px 8px 6px 2px; }
.join-back a:hover { color: var(--ink); }
.join-back .join-back-home { color: var(--brand-700); }