/* ForgeLab platform styles (Storeforge internally).
   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: #13201A;
  --ink-2: #4B5B53;
  --ink-3: #7A8880;
  --surface: #FFFFFF;
  --line: #DCE2DD;
  --line-strong: #C5CEC7;
  --green: #0B6B43;
  --green-deep: #084D31;
  --green-wash: #E4F1EA;
  --signal: #E0692B;

  /* older marketing names, kept as aliases so nothing that reads them breaks */
  --counter: #F2F4F1;
  --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: #1A1D1F;
  --primary-hover: #303436;
  --focus: #005BD3;
  --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;
  padding: 12px clamp(16px, 5vw, 56px);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, #F2F4F1 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.brand {
  font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.brand__mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: var(--green); color: #fff; border-radius: 9px;
  font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.5px;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.brand__mark svg { width: 20px; height: 20px; display: block; }
.brand__by { font-family: var(--sans, inherit); font-weight: 500; font-size: 0.72em; color: var(--ink-2); letter-spacing: 0; }
.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, 107, 67, 0.06); }
.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 { font-size: 17px; gap: 8px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__by { display: none; }
  .topnav__links .btn--small { padding: 9px 14px; font-size: 14px; }
}

.sitefoot {
  border-top: 1px solid var(--line);
}
.sitefoot__inner {
  display: grid; grid-template-columns: 1.6fr 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 .brand { font-size: 17px; }
.sitefoot__brand p { max-width: 36ch; }
.sitefoot__col { display: grid; gap: 6px; align-content: start; }
.sitefoot__col h2 { color: var(--ink); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: 1.2px; 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(--mono); font-size: 13.5px;
  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: 2px dashed 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(--ink); }
.mk .btn:hover { background: #26352D; }
.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: translateY(1px); }

.eyebrow {
  font: 600 12.5px var(--mono); text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--green); margin-bottom: 14px;
}

/* the till slip: white paper with a torn bottom edge. Drop shadows go on the parent
   (a mask clips the element's own box-shadow). */
.slip {
  background: var(--surface); color: var(--ink);
  font: 400 13.5px/1.5 var(--mono); font-variant-numeric: tabular-nums;
  padding: 22px 22px 34px;
  --tooth: 7px;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
    50% / calc(2 * var(--tooth)) 100%;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
    50% / calc(2 * var(--tooth)) 100%;
}
.slip__head { text-align: center; font-weight: 600; letter-spacing: 1.2px; padding-bottom: 10px; text-transform: uppercase; }
.slip__head small { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; letter-spacing: 0.6px; }
.slip__tear { border-top: 1.5px dashed var(--line-strong); margin: 10px 0; }
.slip__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 2px 0; }
.slip__row > :last-child { white-space: nowrap; }
.slip__row--total { font-weight: 600; font-size: 15px; }
.slip__row--paid { color: var(--green); font-weight: 600; }
.slip__row--muted { color: var(--ink-2); }
.slip__foot { text-align: center; color: var(--ink-2); font-size: 12px; padding-top: 12px; line-height: 1.55; }
.slip__foot strong { color: var(--ink); font-weight: 600; }

/* ── 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.02em; }
.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: start;
  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.025em;
  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 13px var(--mono); color: var(--ink-2);
}
.ticks li::before { content: "\2713\00a0"; color: var(--green); font-weight: 700; }

/* the till: a printer slot the slip feeds out of, once, on load */
.till { justify-self: center; width: min(100%, 390px); margin: 18px 0 0; }
.till__slot {
  height: 16px; border-radius: 9px; background: var(--ink); position: relative; z-index: 2;
  box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.07), 0 10px 24px rgba(19, 32, 26, 0.18);
}
.till__window {
  margin: -8px 14px 0; padding-bottom: 40px;
  clip-path: inset(8px -60px -80px -60px);
  filter: drop-shadow(0 18px 28px rgba(8, 77, 49, 0.16)) drop-shadow(0 2px 3px rgba(8, 77, 49, 0.08));
}
.till__window .slip { padding: 34px 28px 40px; font-size: 14.5px; }
@media (prefers-reduced-motion: no-preference) {
  .till__window .slip { animation: slip-feed 1.5s steps(15, end) 0.35s both; }
  .till__window .slip__row--paid,
  .till__window .slip__foot { animation: slip-ink 0.3s ease-out 2s both; }
}
@keyframes slip-feed { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes slip-ink { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  .landing .hero { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero__cta .btn { flex: 1 1 100%; text-align: center; }
  .till__window .slip { padding: 30px 20px 36px; font-size: 13.5px; }
  .hero h1 { max-width: 14ch; }
}

/* 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: 1.5px dashed var(--line-strong); }
.howsteps li::before {
  content: "Step " counter(step); display: block; margin-bottom: 14px;
  font: 600 12.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--green);
}
.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: 1.5px dashed var(--line-strong); }
}

/* 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(--ink); color: #C9D3CD; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.mock__brand { display: flex; align-items: center; gap: 7px; color: #fff; font: 800 13px var(--display); padding: 0 6px 12px; }
.mock__brand i { width: 18px; height: 18px; border-radius: 5px; background: var(--green); }
.mock__nav { padding: 6px 8px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; border-left: 2px solid transparent; }
.mock__nav--on { background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 600; border-left-color: #3FBF7F; }
.mock__nav b { background: var(--signal); color: #fff; font: 600 10px var(--mono); 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: 500 11px var(--mono); 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); padding: 12px 14px 20px; gap: 10px;
  --tooth: 5px;
}
.mock__today small { display: block; color: var(--ink-2); font: 500 10.5px var(--body); margin-bottom: 2px; }
.mock__today span { font: 600 16px var(--mono); font-variant-numeric: tabular-nums; }
.mock__today .is-signal span { color: #B4501C; }
.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(--mono); 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: 14px; }
}

/* 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: the bill, as a slip */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pricing__copy .checklist { margin-top: 26px; }
.pricing__copy .btn { margin-top: 30px; }
.pricing__bill { position: relative; width: 100%; max-width: 380px; justify-self: center; filter: drop-shadow(0 18px 30px rgba(8, 77, 49, 0.13)); }
.pricing__bill .slip { padding: 26px 24px 38px; font-size: 14px; }
.slip__big { text-align: center; padding: 8px 0 4px; }
.slip__big strong { display: block; font: 800 56px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.slip__big span { font: 500 13px var(--mono); color: var(--ink-2); }
.stamp {
  position: absolute; top: 18px; right: -10px; transform: rotate(8deg);
  font: 700 15px/1.1 var(--mono); letter-spacing: 1px; text-transform: uppercase; text-align: center;
  color: var(--signal); border: 2.5px solid currentColor; border-radius: 6px; padding: 6px 10px;
  background: rgba(255, 255, 255, 0.6); mix-blend-mode: multiply;
}
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } .stamp { right: 6px; } }

/* 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(--mono); 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.03em; line-height: 1.02; text-wrap: balance; }
.auth__side h2 em { font-style: normal; color: #9FE0BD; }
.auth__side p { color: #CFE3D8; font-size: 16px; }
.auth__side .slip { width: min(100%, 320px); }
.auth__slipwrap { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.28)); }
.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.025em; }
.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__eyebrow { color: var(--green); font-size: 13px; font-weight: 600; margin-bottom: -12px; }
.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(--mono); 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, 107, 67, 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 12.5px var(--mono); 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 12.5px var(--mono); 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 dashed 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.03em; line-height: 1.02; }
.onbform .authform__sub { margin-top: 10px; font-size: 17px; max-width: 46ch; }
.onbform__link { font: 500 13.5px var(--mono); 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 12.5px var(--mono); 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: 1.5px dashed var(--line-strong); }
.nextsteps h2 { font: 600 12.5px var(--mono); text-transform: uppercase; letter-spacing: 1.2px; 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(--mono); 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 12px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; 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; }
.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 12.5px var(--mono); letter-spacing: 1.4px; text-transform: uppercase;
  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.025em; }
.legallead { font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-top: 18px; }
.helpstatus { font: 600 13px var(--mono); 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: 1.5px dashed var(--line-strong); font: 500 13px var(--mono); color: var(--ink-2); }
@media (max-width: 860px) {
  .legal { grid-template-columns: 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(--mono); 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, 107, 67, 0.06); }