/* Storeforge platform styles (Storeforge by ForgeLab).
   Loaded by EVERY platform surface: marketing + auth (base.html), platform admin
   (base.html + dash.css) and the merchant dashboard (dash/base.html + dash.css).

   1. Tokens + base            shared by everything
   2. Nav + footer             base.html chrome (marketing, auth, admin)
   3. Shared controls          .btn, form globals, .receipt, .palettepick: the dashboard
                               and admin pages use these, keep their names and shape
   4. Marketing (body.mk)      landing, auth, onboarding, legal. Scoped so nothing
                               here leaks into the dashboard or admin pages.
   See docs/design-system.md for the tokens, type and voice. */

* { box-sizing: border-box; margin: 0; }

/* ── 1. tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* design-system platform tokens */
  --ink: #101A15;
  --ink-2: #4A5852;
  --ink-3: #5E6B65;
  --surface: #FFFFFF;
  --line: #E1E5E1;
  --line-strong: #C9D0CA;
  --green: #0B6E4F;
  --green-deep: #07533B;
  --green-wash: #E2F2EA;
  --signal: #C2501A;
  --spark: #F5A524;

  /* older marketing names, kept as aliases so nothing that reads them breaks */
  --counter: #F4F5F3;
  --paper: var(--surface);
  --ink-soft: var(--ink-2);
  --orange: var(--signal);

  /* dashboard tokens: dash.css reads these; the dashboard pass owns their values */
  --canvas: #F6F6F7;
  --border: #E3E3E3;
  --border-strong: #D0D0D0;
  --text: #232729;
  --text-sub: #616A6E;
  --primary: var(--green);          /* brand: primary buttons are Forge green */
  --primary-hover: var(--green-deep);
  --focus: var(--green);
  --good-bg: #CDFEE1; --good-text: #0C5132;
  --warn-bg: #FFE7BB; --warn-text: #5E4200;
  --bad-bg: #FEDAD9; --bad-text: #8E1F0B;
  --info-bg: #E0F0FF; --info-text: #00527C;
  --radius: 12px;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --shadow-card: 0 1px 2px rgba(20, 24, 26, 0.06), 0 0 0 1px var(--border);
}
body {
  font-family: var(--body);
  background: var(--counter);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.12; }
a { color: var(--green); }
.muted { color: var(--ink-2); font-weight: 400; }
.mono { font-family: var(--mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font: 600 14px var(--body); text-decoration: none;
}
.skiplink:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 2. nav + footer ───────────────────────────────────────────────────────── */
.topnav {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  /* same edge as .wrap / .sitefoot__inner: centred 1120px column, its own gutter inside */
  padding: 12px calc(max(0px, (100% - 1120px) / 2) + clamp(16px, 5vw, 56px));
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, #F4F5F3 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
/* The logo is one outlined SVG (app/templates/_brand.html, generated by
   scripts/make_brand_assets.py), sized by height. Its anvil body spans the
   wordmark's cap height, so never set it in HTML text next to a separate mark. */
.brand {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--ink);
  border-radius: 8px; flex: none;
}
.brand:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.sflogo { display: block; height: 34px; width: auto; overflow: visible; }
.brand__narrow { display: none; }
.brand--foot .sflogo { height: 30px; }
.sitefoot__tag { font: 700 17px/1.3 var(--display); color: var(--ink); letter-spacing: -0.01em; margin-top: 4px; }
.topnav__links { display: flex; gap: 6px; align-items: center; }
.topnav__links a:not(.btn) {
  text-decoration: none; font-weight: 500; color: var(--ink); font-size: 14.5px;
  white-space: nowrap; padding: 8px 10px; border-radius: 8px;
}
.topnav__links a:not(.btn):hover { color: var(--green); background: rgba(11, 110, 79, 0.07); }
.topnav__links a[aria-current="page"] { color: var(--green); }
.topnav__links .btn { margin-left: 6px; }
.nav-wide { display: none; }
@media (min-width: 900px) { .nav-wide { display: inline-block; } }
@media (max-width: 560px) {
  .topnav { padding: 10px 14px; gap: 8px; }
  .topnav__links { gap: 2px; }
  .nav-demo { display: none; }
  .brand__wide { display: none; }
  .brand__narrow { display: block; height: 25px; }
  .topnav__links .btn--small { padding: 9px 14px; font-size: 14px; white-space: nowrap; }
}
/* Small phones (320-360): the lockup stays at the brand's 20px minimum height
   class and the nav button tightens, so the bar never scrolls sideways. */
@media (max-width: 360px) {
  .topnav { padding: 10px 12px; gap: 6px; }
  .brand__narrow { height: 20px; }
  .topnav__links a:not(.btn) { padding: 8px 6px; }
  .topnav__links .btn--small { padding: 9px 10px; font-size: 13.5px; margin-left: 2px; }
}

.sitefoot {
  border-top: 1px solid var(--line);
}
.sitefoot__inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px;
  max-width: 1120px; margin: 0 auto;
  padding: 44px clamp(16px, 5vw, 56px) 52px; font-size: 14px; color: var(--ink-2);
}
.sitefoot__brand { display: grid; gap: 10px; justify-items: start; }
.sitefoot__brand p { max-width: 36ch; }
.sitefoot__col { display: grid; gap: 6px; align-content: start; }
.sitefoot__col h2 { color: var(--ink); font: 600 14px var(--body); margin-bottom: 4px; }
.sitefoot__col a { color: var(--ink-2); text-decoration: none; padding: 3px 0; }
.sitefoot__col a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) { .sitefoot__inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .sitefoot__brand { grid-column: 1 / -1; } }

/* ── 3. shared controls (dashboard + admin depend on these) ───────────────── */
.btn {
  display: inline-block; background: var(--primary); color: #fff;
  border: none; border-radius: 8px; cursor: pointer;
  font: 600 14px var(--ui); text-decoration: none;
  padding: 10px 18px; line-height: 1.4;
}
.btn:hover { background: var(--primary-hover); }
/* body.dash a (dark text) out-specifies .btn: force button text colours on LINK
   buttons everywhere so a dark button can never end up with dark text */
a.btn, body.dash a.btn { color: #fff; }
a.btn--big, body.dash a.btn--big { color: #fff; }
a.btn--secondary, body.dash a.btn--secondary { color: var(--text); }
a.btn--ghost, body.dash a.btn--ghost { color: var(--ink); }
a.btn--ghostlight, body.dash a.btn--ghostlight { color: #fff; }
.btn--big { padding: 13px 26px; font-size: 16px; background: var(--green); }
.btn--big:hover { background: var(--green-deep); }
.btn--small { padding: 6px 12px; font-size: 13px; }
.btn--secondary {
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 0 rgba(0,0,0,0.04);
}
.btn--secondary:hover { background: #F6F6F7; }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn--ghost:hover { background: #fff; border-color: var(--ink); }
.btn--current { background: var(--primary); color: #fff; pointer-events: none; }
.btn--danger { background: var(--bad-text); color: #fff; }
.btn--danger:hover { background: #6E1708; }
.linkbtn { background: none; border: none; color: #A33; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

.formerror { background: var(--bad-bg); color: var(--bad-text); padding: 10px 14px; border-radius: 8px; font-size: 14px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 13.5px; }
input, textarea, select {
  font: 400 14.5px var(--ui); padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; color: var(--text);
  width: 100%;
}
input:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -1px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.check input { width: auto; }
fieldset.palettepick { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: grid; gap: 8px; }
fieldset.palettepick legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
fieldset.refundlines { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; margin: 4px 0 10px; }
fieldset.refundlines legend { font-weight: 600; font-size: 13px; padding: 0 6px; }
fieldset.refundlines p { margin: 0; font-size: 13px; }
.palettepick__opt { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.palettepick__opt input { width: auto; }
.swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; }

/* old auth card: still the admin pages' fallback */
.authwrap { display: flex; justify-content: center; padding: clamp(24px, 6vw, 64px) 16px; }
.authcard {
  background: var(--paper); border-radius: 16px; border: 1px solid var(--line);
  padding: 34px; width: 100%; max-width: 420px; display: grid; gap: 16px;
  box-shadow: 0 14px 40px rgba(10, 61, 40, 0.08);
}
.authcard--wide { max-width: 560px; }
.authcard h1 { font-size: 28px; }

.receipt {
  background: var(--paper); width: 300px; padding: 22px 20px;
  font-family: var(--body); font-size: 14px; font-variant-numeric: tabular-nums;
  box-shadow: 0 18px 40px rgba(10, 61, 40, 0.18);
  transform: rotate(2deg); border-radius: 4px;
}
.receipt--flat { transform: none; box-shadow: none; border: 1px solid var(--border); width: 100%; }
.receipt__head { text-align: center; font-weight: 600; letter-spacing: 1px; padding-bottom: 12px; }
.receipt__head span { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.receipt__tear { border-top: 1px solid var(--line); margin: 10px 0; }
.receipt__row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.receipt__row--total { font-weight: 600; font-size: 15px; }
.receipt__paid { color: var(--green); font-weight: 600; }
.receipt__foot { text-align: center; color: var(--ink-2); font-size: 12px; padding-top: 12px; }

/* ── 4. marketing surfaces (body.mk) ───────────────────────────────────────── */
body.mk { --focus: var(--green); background: var(--counter); }
body.mk main { display: block; }
.mk .btn { font-family: var(--body); background: var(--green); }  /* brand: primary buttons are Forge green */
.mk .btn:hover { background: var(--green-deep); }
.mk .btn--big { background: var(--green); padding: 14px 26px; font-size: 16px; min-height: 48px; }
.mk .btn--big:hover { background: var(--green-deep); }
.mk .btn--small { padding: 8px 14px; font-size: 14px; }
.mk .btn--ghost { background: transparent; border: 1.5px solid var(--line-strong); padding: 12.5px 22px; font-size: 16px; min-height: 48px; }
.mk .btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.mk .btn--block { display: block; width: 100%; text-align: center; }
.mk .btn:active { transform: scale(.98); }
.mk .btn--big { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(16, 26, 21, .16); }
.mk .btn svg { width: 20px; height: 20px; flex: none; }
.mk .btn--wa { display: flex; align-items: center; justify-content: center; gap: 10px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--body); color: var(--green); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); flex: none; }

/* ── landing ── */
.landing .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 56px); }
.landing .band { padding: clamp(52px, 7vw, 88px) 0; }
.nowrap { white-space: nowrap; }
.landing .band--white { background: var(--surface); border-block: 1px solid var(--line); }
.landing main h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -0.012em; }
.landing .band__lede { color: var(--ink-2); font-size: 17px; margin-top: 12px; max-width: 52ch; }
.landing .band__head { margin-bottom: clamp(28px, 4vw, 44px); }

.landing .hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 88px);
}
.hero__copy { padding-top: clamp(0px, 2vw, 24px); }
.hero h1 {
  font-size: clamp(40px, 6vw, 74px); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; margin-bottom: 22px; max-width: 13ch;
}
.hero h1 em { font-style: normal; color: var(--green); }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--ink-2); max-width: 44ch; line-height: 1.6; }
.lede strong { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ticks {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 22px;
  font: 500 14px var(--body); color: var(--ink-2);
}
.ticks li::before { content: "\2713\00a0"; color: var(--green); font-weight: 700; }

/* hero: an order card and the payout under it */
.paycard { justify-self: center; width: min(100%, 400px); margin: 12px 0 0; display: grid; gap: 12px; }
.paycard__order, .paycard__payout {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 26, 21, .05), 0 18px 40px rgba(7, 83, 59, .10);
}
.paycard__order { padding: 20px 22px 18px; }
.paycard__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.paycard__shop { display: flex; align-items: center; gap: 10px; font: 700 16px var(--display); letter-spacing: -.01em; }
.paycard__shop i {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: #7A4A2A; color: #fff; font: 800 14px var(--display); font-style: normal;
}
.paycard__pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  background: #DDF4E6; color: #0C6B3F; font: 600 12.5px var(--body);
}
.paycard__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.paycard__ref { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.paycard__lines { list-style: none; padding: 12px 0; margin: 14px 0 0; border-block: 1px solid var(--line); display: grid; gap: 8px; font-size: 14.5px; }
.paycard__lines li, .paycard__total { display: flex; justify-content: space-between; gap: 14px; }
.paycard__lines li > :last-child, .paycard__total strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.paycard__lines .is-muted { color: var(--ink-2); }
.paycard__total { align-items: baseline; padding-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.paycard__total strong { font: 700 24px var(--body); letter-spacing: -.02em; color: var(--ink); }
.paycard__payout {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-left: clamp(0px, 4vw, 28px);
  background: var(--green-deep); border-color: var(--green-deep); color: #fff;
}
.paycard__bank { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); }
.paycard__bank svg { width: 22px; height: 22px; }
.paycard__payout strong { display: block; font: 600 15.5px var(--body); font-variant-numeric: tabular-nums; }
.paycard__payout span { display: block; font-size: 13.5px; color: #CFE6DA; }
@media (prefers-reduced-motion: no-preference) {
  .paycard__order { animation: card-rise .5s cubic-bezier(.23, 1, .32, 1) .1s both; }
  .paycard__payout { animation: card-rise .5s cubic-bezier(.23, 1, .32, 1) .45s both; }
}
@keyframes card-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .landing .hero { grid-template-columns: 1fr; }
  .paycard { justify-self: start; }   /* single column: sit on the text's left edge */
}
@media (max-width: 480px) {
  .hero__cta .btn { flex: 1 1 100%; text-align: center; }
  .hero h1 { max-width: 14ch; }
  .paycard__order { padding: 18px 16px 16px; }
  .paycard__payout { margin-left: 0; }
}

/* hero visual (2026-10-19): the live demo shop on a phone, with the order
   card tucked under its lower left so the shop and the money read together.
   The card only covers the phone's bottom-left corner: the deal timer at the
   top and the WhatsApp button at the bottom right stay in view. */
.landing .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.herovis { display: grid; justify-self: center; width: min(100%, 470px); padding-bottom: 130px; }
.herovis > * { grid-area: 1 / 1; }
.herovis .hphone { justify-self: end; width: min(280px, 62%); display: block; border-radius: 42px; }
.herovis .hphone:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.hphone__frame { display: block; border-radius: 42px; padding: 9px; background: #16130F;
  box-shadow: 0 2px 4px rgba(16, 26, 21, .12), 0 40px 80px -30px rgba(16, 26, 21, .45); }
.hphone__screen { display: block; border-radius: 33px; overflow: hidden; aspect-ratio: 1 / 2; background: #fff; }
.hphone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.herovis .paycard { align-self: end; justify-self: start; width: min(100%, 262px); margin: 0 0 -130px; gap: 10px; position: relative; z-index: 1; }
.herovis .paycard__order { padding: 14px 16px 12px; }
.herovis .paycard__shop { font-size: 15px; }
.herovis .paycard__ref { font-size: 12.5px; }
.herovis .paycard__lines { font-size: 13px; gap: 6px; margin-top: 10px; padding: 10px 0; }
.herovis .paycard__total { font-size: 13px; padding-top: 10px; }
.herovis .paycard__total strong { font-size: 20px; }
.herovis .paycard__payout { margin-left: 0; padding: 11px 14px; gap: 12px; }
.herovis .paycard__bank { width: 34px; height: 34px; }
.herovis .paycard__payout strong { font-size: 14px; }
.herovis .paycard__payout span { font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .herovis .hphone { animation: card-rise .6s cubic-bezier(.23, 1, .32, 1) both; }
}
@media (max-width: 860px) {
  .landing .hero { grid-template-columns: 1fr; }
  .herovis { justify-self: start; width: min(100%, 440px); margin-top: 8px; padding-bottom: 0; }
  .herovis > * { grid-area: auto; }
  .herovis .hphone { width: min(260px, 72%); }
  .herovis .paycard { width: min(80%, 300px); margin: -70px 0 0; }
}

/* steps: a real sequence, so numbered */
.howsteps {
  list-style: none; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.howsteps li { padding: clamp(22px, 3vw, 32px); counter-increment: step; }
.howsteps li + li { border-left: 1px solid var(--line); }
.howsteps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 16px;
  border-radius: 50%; background: var(--green-wash); color: var(--green-deep);
  font: 700 15px var(--body);
}
.howsteps h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.howsteps p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 760px) {
  .howsteps { grid-template-columns: 1fr; }
  .howsteps li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* dashboard showcase */
.showcase { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.showcase__text { color: var(--ink-2); font-size: 17px; margin-top: 14px; max-width: 42ch; }
.checklist { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; font-size: 15.5px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; }
.checklist li::before { content: "\2713"; color: var(--green); font-weight: 700; flex: none; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }

.mock {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  background: var(--counter); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(8, 77, 49, 0.14);
  font: 400 12px/1.4 var(--body); color: var(--ink); min-height: 360px;
}
.mock__side { background: var(--counter); color: var(--ink-2); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
/* the real logo, at the brand's 20px minimum, like the dashboard sidebar */
.mock__brand { display: flex; align-items: center; padding: 2px 6px 14px; }
.mock__logo { display: block; height: 20px; width: auto; }
.mock__nav { padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; }
.mock__nav--on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.mock__nav b { background: var(--signal); color: #fff; font: 600 10px var(--body); border-radius: 99px; padding: 0 6px; }
.mock__main { display: flex; flex-direction: column; min-width: 0; }
.mock__top { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.mock__top strong { font-weight: 600; }
.mock__live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #0C6B3F; }
.mock__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1FA463; }
.mock__trial { margin-left: auto; font: 600 11px var(--body); color: #7A4B00; background: #FFEBC2; border-radius: 99px; padding: 1px 8px; }
.mock__page { padding: 16px; display: grid; gap: 12px; }
.mock__title { font: 700 18px var(--display); letter-spacing: -0.01em; }
.mock__today {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.mock__today > div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; min-width: 0; }
.mock__today small { display: block; color: var(--ink-2); font: 500 10.5px var(--body); margin-bottom: 2px; }
.mock__today span { font: 650 16px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock__today .is-signal span { color: #B4501C; }
.mock__today .is-signal small::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); margin-right: 5px; vertical-align: middle; }
.mock__card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mock__cardhead { padding: 9px 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.mock__row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 70px 64px; gap: 8px; align-items: center; padding: 8px 12px; }
.mock__row + .mock__row { border-top: 1px solid #EEF1EE; }
.mock__row .m { font: 500 11px var(--body); font-variant-numeric: tabular-nums; }
.mock__row .m--ref { color: var(--ink-2); }
.mock__row .m--amt { text-align: right; }
.mock__row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__pill { justify-self: end; font: 600 10px var(--body); padding: 2px 8px; border-radius: 99px; background: #DDF4E6; color: #0C6B3F; }
.mock__pill--warn { background: #FFEBC2; color: #7A4B00; }
.mock__pill--info { background: #DDEFF7; color: #0B5A7A; }
@media (max-width: 560px) {
  .mock { grid-template-columns: 1fr; min-height: 0; }
  .mock__side { display: none; }
  .mock__row { grid-template-columns: 70px minmax(0, 1fr) 62px; }
  .mock__row .mock__pill { display: none; }
  .mock__today span { font-size: 13px; }
}

/* what's in the box: a quiet list, not a wall of cards */
.features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.features li { border-top: 1px solid var(--line-strong); padding: 22px 0 30px; }
.features svg { width: 24px; height: 24px; color: var(--green); display: block; margin-bottom: 14px; }
.features h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.features p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } .features li { padding: 20px 0 22px; } }

.importband {
  margin-top: clamp(28px, 4vw, 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: clamp(22px, 3.5vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 32px; align-items: center;
}
.importband h3 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.importband p { color: var(--ink-2); font-size: 15.5px; max-width: 62ch; }
@media (max-width: 720px) { .importband { grid-template-columns: 1fr; } .importband .btn { justify-self: start; } }

/* pricing: two plan cards, do it yourself and we build it for you */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 2px rgba(16, 26, 21, .04);
}
.plan h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.plan__for { color: var(--ink-2); font-size: 15.5px; margin-top: -6px; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0 2px; }
.plan__price strong { font: 800 48px/1 var(--display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.plan__price span { color: var(--ink-2); font-size: 15px; }
.plan .checklist { margin-top: 4px; flex: 1; font-size: 15px; }
.plan .btn { margin-top: 8px; }
.plan__fine { color: var(--ink-2); font-size: 13.5px; text-align: center; }
.plan--build { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.plan--build .plan__for, .plan--build .plan__price span, .plan--build .plan__fine { color: #CFE6DA; }
.plan--build .checklist li::before { color: #9FE0BD; }
.plan--build .plan__fine a { color: #fff; }
.plan__tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px;
  border-radius: 99px; background: rgba(255, 255, 255, .12); color: #fff; font: 600 12.5px var(--body);
}
.plan__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--spark); }
.mk .plan--build .btn--big { background: #fff; color: var(--green-deep); }
.mk .plan--build .btn--big:hover { background: var(--green-wash); }
.plan--build :focus-visible { outline-color: #fff; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* faq */
.faqgrid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.faqgrid .band__head { position: sticky; top: 90px; }
.faq { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  cursor: pointer; font: 600 17px var(--body); padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font: 500 18px var(--body); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 50%;
  transition: transform 0.18s ease;
}
.faq summary:hover { color: var(--green); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding: 0 44px 20px 0; line-height: 1.65; font-size: 15.5px; max-width: 62ch; }
@media (max-width: 860px) { .faqgrid { grid-template-columns: 1fr; } .faqgrid .band__head { position: static; } .faq details p { padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* closing CTA */
.ctaband { background: var(--green-deep); color: #fff; }
.ctaband .wrap { padding-block: clamp(52px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.ctaband h2 { color: #fff; }
.ctaband p { color: #CFE3D8; margin-top: 10px; font-size: 17px; max-width: 46ch; }
.mk .ctaband .btn--big { background: #fff; color: var(--green-deep); }
.mk .ctaband .btn--big:hover { background: var(--green-wash); }
.ctaband :focus-visible { outline-color: #fff; }
@media (max-width: 720px) { .ctaband .wrap { grid-template-columns: 1fr; } .ctaband .btn { justify-self: start; } }

/* ── auth (register, login, forgot, reset, admin key) ── */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 62px); }
.auth__side {
  background: var(--green-deep); color: #fff; position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column; justify-content: center; gap: 36px;
}
.auth__side h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.04; text-wrap: balance; }
.auth__side h2 em { font-style: normal; color: #9FE0BD; }
.auth__side p { color: #CFE3D8; font-size: 16px; }
.sidecard {
  width: min(100%, 340px); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px; padding: 6px 18px; display: grid;
}
.sidecard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 15px; }
.sidecard__row + .sidecard__row { border-top: 1px solid rgba(255, 255, 255, .12); }
.sidecard__row > :first-child { color: #CFE6DA; min-width: 0; }
.sidecard__row > :last-child { margin: 0; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sidecard__row--total > :last-child { font-size: 18px; }
.sidecard__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 700 16px var(--display); }
.sidecard__pill { font: 600 12px var(--body); padding: 3px 10px; border-radius: 99px; background: #DDF4E6; color: #0C6B3F; }
.auth__side > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: clamp(0px, 3vw, 40px); }
.auth__main { display: flex; justify-content: center; align-items: center; padding: clamp(28px, 6vw, 72px) clamp(16px, 5vw, 56px); }
.auth--solo { grid-template-columns: 1fr; }

.authform { width: 100%; max-width: 400px; display: grid; gap: 18px; }
.authform h1 { font-size: clamp(30px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.015em; }
.authform__sub { color: var(--ink-2); font-size: 16px; margin-top: -8px; }
.authform__facts { display: none; }
.authform__alt { color: var(--ink-2); font-size: 15px; text-align: center; padding-top: 4px; }
.authform__fine { color: var(--ink-2); font-size: 13px; text-align: center; }
.authform__where { border-top: 1px solid var(--line); padding-top: 14px; overflow-wrap: anywhere; }
.authform .formerror {
  display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45;
  background: #FDE0D8; color: #9B2C12; border: 1px solid #F5BFAF; padding: 12px 14px;
}
.authform .formerror::before {
  content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #9B2C12; color: #fff; font: 700 12px var(--body); margin-top: 1px;
}
.authform .formnote { background: var(--green-wash); color: var(--green-deep); border-radius: 8px; padding: 12px 14px; font-size: 14.5px; }

.field { display: grid; gap: 6px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mk .field label { font: 600 14px var(--body); color: var(--ink); display: block; }
.field__top a { font-size: 14px; font-weight: 500; }
.field__hint { font-size: 13.5px; color: var(--ink-2); }
.field__warn { font-size: 13.5px; color: #7A4B00; font-weight: 600; }
.mk .field input:not([type="radio"]) {
  font: 400 16px var(--body); color: var(--ink); height: 48px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mk .field input::placeholder { color: var(--ink-3); }
.mk .field input:hover { border-color: #AEB9B1; }
.mk .field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.18); }
.mk .field input[aria-invalid="true"] { border-color: #9B2C12; }
.mk .field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(155, 44, 18, 0.16); }
.pw { position: relative; }
.mk .pw input:not([type="radio"]) { padding-right: 76px; }
.pw__toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  height: 38px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent;
  font: 600 13.5px var(--body); color: var(--green); cursor: pointer;
}
.pw__toggle:hover { background: var(--green-wash); }
.pw__toggle[hidden] { display: none; }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__side { display: none; }
  .auth__main { align-items: flex-start; padding-top: 28px; padding-bottom: 56px; }
  .authform__facts {
    display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin-top: -4px;
    font: 500 13.5px var(--body); color: var(--ink-2);
  }
  .authform__facts li::before { content: "\2713\00a0"; color: var(--green); font-weight: 700; }
}

/* ── onboarding ── */
.onb { max-width: 1080px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.progress { list-style: none; padding: 0; display: flex; gap: 8px; margin-bottom: clamp(24px, 4vw, 40px); font: 500 13px var(--body); color: var(--ink-2); flex-wrap: wrap; }
.progress li { display: flex; align-items: center; gap: 8px; }
.progress li + li::before { content: ""; width: 24px; border-top: 1.5px solid var(--line-strong); margin-right: 0; }
.progress b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-weight: 600; font-size: 11px; }
.progress .is-done b { background: var(--green); border-color: var(--green); color: #fff; }
.progress .is-now { color: var(--ink); font-weight: 600; }
.progress .is-now b { border-color: var(--ink); }

.onbform {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-rows: repeat(6, auto) 1fr; column-gap: clamp(32px, 6vw, 80px); row-gap: 22px;
}
.onbform > * { grid-column: 1; }
.onbform h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.04; }
.onbform .authform__sub { margin-top: 10px; font-size: 17px; max-width: 46ch; }
.onbform__link { font: 500 14px var(--body); color: var(--ink-2); overflow-wrap: anywhere; }
.onbform__link b { color: var(--green); font-weight: 600; }
.onbform .btn--big { justify-self: start; min-width: 240px; }

.palettes { border: 0; padding: 0; min-width: 0; }
.palettes legend { font: 600 14px var(--body); margin-bottom: 8px; padding: 0; }
.palettes__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.palopt { position: relative; cursor: pointer; display: block; }
.palopt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.palopt__card {
  display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: 10px; background: var(--surface);
  border: 1.5px solid var(--line); transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font: 600 13.5px var(--body); color: var(--ink); text-align: center;
}
.palopt__chips { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 34px; border-radius: 6px; overflow: hidden; }
.palopt__chips i { display: block; }
.palopt__card small { display: block; font: 400 12px var(--body); color: var(--ink-2); margin-top: -6px; }
.palopt:hover .palopt__card { border-color: var(--line-strong); }
.palopt input:checked + .palopt__card { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.palopt input:focus-visible + .palopt__card { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 560px) {
  .palettes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* live storefront preview: a phone showing the merchant's shop in their colours */
.preview { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: 84px; }
.preview__cap { font: 500 13px var(--body); color: var(--ink-2); text-align: center; margin-top: 12px; }
.phone {
  --pa: #D95B2B; --pad: #A83F17; --pi: #221410;
  border-radius: 34px; background: var(--ink); padding: 10px;
  box-shadow: 0 30px 60px rgba(19, 32, 26, 0.22);
  max-width: 320px; margin: 0 auto;
}
.phone__screen { background: #FBFAF8; border-radius: 26px; overflow: hidden; color: var(--pi); font: 400 12px/1.45 var(--body); position: relative; }
.phone__bar { background: var(--pad); color: #fff; text-align: center; font: 600 10.5px var(--body); padding: 22px 10px 6px; transition: background 0.2s ease; }
.phone__head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid #ECE8E3; }
.phone__logo { width: 30px; height: 30px; border-radius: 8px; background: var(--pa); color: #fff; display: grid; place-items: center; font: 800 14px var(--display); flex: none; transition: background 0.2s ease; }
.phone__name { font: 800 15px var(--display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.phone__cart { margin-left: auto; border: 1px solid #E2DDD6; border-radius: 99px; padding: 3px 9px; font-weight: 600; font-size: 11px; display: flex; gap: 5px; align-items: center; flex: none; }
.phone__cart b { background: var(--pa); color: #fff; border-radius: 99px; padding: 0 6px; font-size: 10px; transition: background 0.2s ease; }
.phone__body { padding: 14px; display: grid; gap: 12px; }
.phone__intro { color: #6B635B; }
.phone__chips { display: flex; gap: 6px; }
.phone__chips span { border: 1px solid #E2DDD6; border-radius: 99px; padding: 2px 10px; font-weight: 600; font-size: 11px; }
.phone__chips span:first-child { background: var(--pi); color: #fff; border-color: var(--pi); }
.phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phone__prod i { display: block; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--pa) 18%, #EFEAE4), #E6E0D9); }
.phone__prod span { display: block; font-weight: 600; margin-top: 6px; }
.phone__prod em { font: 500 11px var(--mono); font-style: normal; color: #6B635B; }
.phone__wa { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: #25D366; box-shadow: 0 4px 12px rgba(0,0,0,.2); display: grid; place-items: center; }
.phone__wa svg { width: 20px; height: 20px; }
.phone__wa[hidden] { display: none; }
.phone__body { padding-bottom: 62px; }
.phone__btn { background: var(--pa); color: #fff; text-align: center; border-radius: 10px; padding: 10px; font-weight: 600; transition: background 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .phone *, .palopt__card { transition: none !important; } }

.nextsteps { margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.nextsteps h2 { font: 600 15px var(--body); color: var(--green); margin-bottom: 16px; }
.nextsteps ol { list-style: none; padding: 0; counter-reset: nx; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nextsteps li { counter-increment: nx; font-size: 15px; color: var(--ink-2); }
.nextsteps li strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.nextsteps li::before { content: counter(nx); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); font: 600 12px var(--body); color: var(--ink); margin-bottom: 10px; }

@media (max-width: 900px) {
  .onbform { grid-template-columns: 1fr; grid-template-rows: none; }
  .preview { grid-column: 1; grid-row: auto; position: static; }
  .phone { max-width: 300px; }
  .phone { max-width: 280px; }
  .phone__intro, .phone__chips { display: none; }
  .phone__prod i { aspect-ratio: 4 / 3; }
  .nextsteps ol { grid-template-columns: 1fr 1fr; }
  .onbform .btn--big { justify-self: stretch; }
}
@media (max-width: 480px) {
  .nextsteps ol { grid-template-columns: 1fr; gap: 16px; }
  .nextsteps li { position: relative; padding-left: 38px; }
  .nextsteps li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .progress { gap: 6px; font-size: 12px; flex-wrap: nowrap; }
  .progress li { gap: 6px; }
  .progress li + li::before { width: 12px; }
}

/* ── legal pages ── */
.legal {
  max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px); padding: clamp(28px, 5vw, 64px) clamp(16px, 5vw, 56px) 88px;
}
.legal__toc { position: sticky; top: 84px; align-self: start; font-size: 14px; }
.legal__toc h2 { font: 600 13.5px var(--body); color: var(--ink-2); margin-bottom: 10px; }
.legal__toc ol { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 1.5px solid var(--line); }
.legal__toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.legal__toc, .legal__toc ol { max-width: 100%; min-width: 0; }
.legal__toc a:hover { color: var(--ink); border-left-color: var(--green); }
.legal__toc details summary { display: none; }
.legalwrap { max-width: 68ch; }
.legaleyebrow {
  font: 600 14px var(--body); color: var(--green); margin-bottom: 12px;
}
.legalwrap h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.legalwrap h1 + :not(.legallead):not(.helpstatus) { margin-top: 18px; }
.legallead { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-top: 18px; }
.helpstatus { font: 600 14px var(--body); margin-top: 14px; }
.helpstatus--up { color: var(--green); }
.helpstatus--down { color: var(--bad-text); }
.legalwrap h2 {
  font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 40px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line); scroll-margin-top: 80px;
}
.legalwrap p, .legalwrap li { font-size: 16.5px; line-height: 1.72; margin-bottom: 14px; }
.legalwrap ul { margin: 0 0 14px 20px; padding: 0; }
.legalstamp { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 14px var(--body); color: var(--ink-2); }
@media (max-width: 860px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal__toc { position: static; order: 0; margin-bottom: 28px; }
  .legal__toc h2 { display: none; }
  .legal__toc details { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 0 14px; }
  .legal__toc details summary { display: flex; justify-content: space-between; cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; }
  .legal__toc details summary::-webkit-details-marker { display: none; }
  .legal__toc details summary::after { content: "+"; font: 500 18px var(--body); color: var(--ink-2); }
  .legal__toc details[open] summary::after { content: "\2212"; }
  .legal__toc ol { border: 0; padding-bottom: 10px; }
  .legal__toc a { padding-left: 0; border: 0; margin: 0; }
  .legal__article { order: 1; }
}

/* Log out is a POST form; the button looks exactly like the nav link it replaced. */
.topnav__out { margin: 0; display: inline-flex; }
.topnav__out button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; font-size: 14.5px; color: var(--ink); white-space: nowrap;
  padding: 8px 10px; border-radius: 8px;
}
.topnav__out button:hover { color: var(--green); background: rgba(11, 110, 79, 0.07); }

/* ── Help: code samples (webhooks page, 2026-10-11) ─────────────────────── */
.legalwrap pre { margin: 14px 0; padding: 14px 16px; overflow-x: auto; background: var(--ink); color: #E8EEEA; border-radius: 10px; font: 500 13px/1.55 var(--mono); tab-size: 2; }
.legalwrap pre code { font: inherit; background: none; padding: 0; color: inherit; white-space: pre; }

/* ═══════════════ QA and design pass, round 5 (2026-10-11) ═══════════════ */
/* The help index has no table of contents beside it, so it is one column, not a 220px column with a blank page next to it. */
.legal.legal--single { display: block; max-width: 760px; }

/* ── status page (round 6, app/uptime.py) ─────────────────────────────── */
.statuspage .statusnow { font-size: 15px; margin: 6px 0 24px; }
.uptimebars { list-style: none; padding: 0; margin: 14px 0 6px; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 40px; }
.uptimebar { border-radius: 3px; background: #DCE2DD; }
.uptimebar--up { background: #0C6B3F; }
.uptimebar--dip { background: #C98A12; }
.uptimebar--down { background: #9B2C12; }
.uptimekey { display: flex; justify-content: space-between; font: 500 12.5px var(--body); color: #5E6B65; margin: 0 0 14px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── /vs-shopify: price comparison (2026-10-19) ── */
.vs .importband { margin-top: 0; background: var(--counter, #F4F5F3); }
.vsbill { justify-self: center; width: min(100%, 420px); margin: 12px 0 0; display: grid; gap: 12px; }
.vsbill__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: 0 1px 2px rgba(16, 26, 21, .05), 0 18px 40px rgba(7, 83, 59, .10);
  display: grid; gap: 18px;
}
.vsbill__head { font-size: 14.5px; color: var(--ink-2); }
.vsbill__head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.vsbill__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.vsbill__name { font: 600 15px var(--body); }
.vsbill__amt { font: 800 30px/1 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.vsbill__row--them .vsbill__amt { color: var(--ink-2); }
.vsbill__row--us .vsbill__amt { color: var(--green); }
.vsbill__sub { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vsbill__bar { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--hover, #F7F8F6); overflow: hidden; margin-top: 4px; }
.vsbill__bar i { display: block; height: 100%; border-radius: inherit; background: var(--line-strong); }
.vsbill__row--us .vsbill__bar i { background: var(--green); }
.vsbill__save { margin-left: clamp(0px, 4vw, 28px); }
@media (prefers-reduced-motion: no-preference) {
  .vsbill__card { animation: card-rise .5s cubic-bezier(.23, 1, .32, 1) .1s both; }
  .vsbill__save { animation: card-rise .5s cubic-bezier(.23, 1, .32, 1) .45s both; }
}
@media (max-width: 860px) { .vsbill { justify-self: start; } }
@media (max-width: 480px) { .vsbill__save { margin-left: 0; } .vsbill__card { padding: 18px 16px; } }

.vscalc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px);
  background: var(--counter, #F4F5F3); border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 3.5vw, 36px);
}
.vscalc__input { display: grid; align-content: start; gap: 10px; }
.vscalc__input > label { font: 600 15px var(--body); color: var(--ink-2); }
.vscalc__sales { font: 800 clamp(40px, 5vw, 56px)/1 var(--display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.vscalc input[type=range] { width: 100%; height: 40px; accent-color: var(--green); cursor: pointer; margin: 4px 0 0; }
.vscalc__scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); margin-top: -6px; }
.vscalc__billing { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 15px; }
.vscalc__billing legend { font: 600 14px var(--body); color: var(--ink-2); margin-bottom: 6px; }
.vscalc__billing label { display: flex; gap: 10px; align-items: center; min-height: 32px; cursor: pointer; }
.vscalc__billing input { accent-color: var(--green); width: 18px; height: 18px; }
.vscalc__out { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; gap: 0; align-content: start; }
.vscalc__line { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.vscalc__line b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vscalc__line--total b { font-size: 18px; }
.vscalc__line--us { color: var(--ink); font-weight: 600; }
.vscalc__line--us b { color: var(--green); font-size: 18px; }
.vscalc__save { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 16px; color: var(--ink-2); font-size: 15px; }
.vscalc__save strong { font: 800 clamp(30px, 3.6vw, 40px)/1 var(--display); letter-spacing: -.015em; color: var(--green); font-variant-numeric: tabular-nums; }
.vscalc__save.is-more strong { color: var(--ink); }
@media (max-width: 760px) { .vscalc { grid-template-columns: 1fr; } }
.vsfine { margin-top: 16px; font-size: 13.5px; color: var(--ink-2); max-width: 90ch; line-height: 1.6; }
.vsfine a { color: var(--green); }

.vstable { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.vstable__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 16px; padding: 16px clamp(16px, 2.5vw, 24px); font-size: 15px; align-items: baseline; }
.vstable__row + .vstable__row { border-top: 1px solid var(--line); }
.vstable__row [role=rowheader] { font-weight: 600; }
.vstable__row [role=cell] { color: var(--ink-2); }
.vstable__row .is-us { color: var(--ink); font-weight: 600; }
.vstable__row .is-us::before { content: "\2713\00a0"; color: var(--green); font-weight: 700; }
.vstable__row--head { background: var(--hover, #F7F8F6); font: 700 15px var(--body); }
.vstable__row--head [role=columnheader]:nth-child(2) { color: var(--green); }
@media (max-width: 640px) {
  .vstable__row { grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .vstable__row [role=rowheader] { grid-column: 1 / -1; }
  .vstable__row--head [role=columnheader]:first-child { display: none; }
}
.vsmove__btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) { .vsmove__btns .btn { flex: 1 1 100%; text-align: center; } }