/* GENERATED by scripts/build-landing-legal.mjs - do not edit by hand. */
@font-face {
  font-family: 'Aldrich';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Aldrich-400-latin.ttf') format('truetype');
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Michroma-400-latin.ttf') format('truetype');
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
}
img,
svg {
  display: block;
}
.brand-mark {
  height: 1.5em;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.contact-doc {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
/* Source: src/styles/tokens.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS - Sellway React App
   Migrated from legacy dashboard/css/shared.css + styles.css
   All hardcoded values extracted into reusable CSS custom properties.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. CORE PALETTE (surface / background) ── */
:root {
  --bg: #070709;
  --s1: #0f0f13;
  --s2: #18181f;
  --b: #25252f;
  /* Brand artwork (payment method marks) is cut for a light plate. The plate
     must stay light in every theme or the dark marks (Apple Pay, Link) vanish. */
  --brand-plate: #ffffff;
}

/* ── 2. ACCENT / TEXT ── */
:root {
  --acc: #ffffff;
  --acc2: #888888;
  --on-acc: #070709;
  --text: #f0eeea;
  --muted: #6b6b7a;
}

/* ── 3. SEMANTIC COLORS ── */
:root {
  --warn: #fbbf24;
  --danger: #f87171;
  --success: #22c55e;
  --info: #38bdf8;
  /* ── Stock composition tiers: high green → medium yellow → low orange → out red.
     Page CSS must use these tokens, never raw hex (see sellway-ui skill). */
  --stock-high: #22c55e;
  --stock-med: #eab308;
  --stock-low: #f97316;
  --stock-out: #f87171;
}

/* ── 4. BORDER / OVERLAY TOKENS ── */
:root {
  --bd: rgba(255, 255, 255, 0.06);
  --bd-top: rgba(255, 255, 255, 0.1);
  --bd-strong: rgba(255, 255, 255, 0.13);
  --hover-bd: rgba(255, 255, 255, 0.3);
  --ov: rgba(0, 0, 0, 0.2);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-strong: rgba(255, 255, 255, 0.09);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --card-bg: rgba(255, 255, 255, 0.025);
  --card-dark: rgba(0, 0, 0, 0.25);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --modal-ovl: rgba(7, 7, 9, 0.85);
  --chip: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.12);
}

/* ── 4b. SEMANTIC TONE PAIRS (theme-relative status tints) ──
   Consumed by webhookevents / offers badges and
   sheets. Derived from the semantic tokens so light themes tint correctly. */
:root {
  --tone-danger-fg: var(--danger);
  --tone-danger-bg: color-mix(in srgb, var(--danger) 12%, transparent);
  --tone-danger-bd: color-mix(in srgb, var(--danger) 30%, transparent);
  --tone-success-fg: var(--success);
  --tone-success-bg: color-mix(in srgb, var(--success) 12%, transparent);
  --tone-success-bd: color-mix(in srgb, var(--success) 30%, transparent);
  --tone-warn-fg: var(--warn);
  --tone-warn-bg: color-mix(in srgb, var(--warn) 12%, transparent);
  --tone-warn-bd: color-mix(in srgb, var(--warn) 30%, transparent);
  --tone-info-fg: var(--info);
  --tone-info-bg: color-mix(in srgb, var(--info) 12%, transparent);
  --tone-info-bd: color-mix(in srgb, var(--info) 30%, transparent);
  --tone-neutral-fg: var(--muted);
  --tone-neutral-bg: var(--chip);
  --tone-neutral-bd: var(--chip-border);
  --r-card: 10px;
}

/* ── 5. TOPBAR / NAV OVERLAYS ── */
:root {
  --topbar-bg: rgba(7, 7, 9, 0.9);
  /* The nav strip is chrome, not content. Every consumer reads this one token
     (.topbar, .sidebar-brand, .content margin, panel offsets) so the bar and
     the sidebar logo shrink in lockstep instead of drifting apart. The tallest
     in-flow child is the owner chip at 34px, which leaves real headroom here. */
  --topbar-height: 40px;
  /* Junction fillet radius: the sidebar/topbar arch. Deliberately above the
     4/6/8 component scale - an 8px arc drawn with a 2px stroke renders as a
     nub, not a curve. */
  --nav-arc: 14px;
  --nav-ovl: rgba(7, 7, 9, 0.6);
}

/* ── 6. BORDER RADIUS ── */
:root {
  --r: 4px;
  --radius: 0px;
}

/* ── 7. SPACING SCALE ── */
:root {
  --sp-0: 0px;
  --sp-px: 1px;
  --sp-0_5: 2px;
  --sp-1: 4px;
  --sp-1_5: 6px;
  --sp-2: 8px;
  --sp-2_5: 10px;
  --sp-3: 12px;
  --sp-3_5: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
}

/* ── 8. LAYOUT TOKENS ── */
:root {
  --sidebar: clamp(160px, 15vw, 200px);
  --sidebar-collapsed: 56px;
  --sidebar-width: var(--sidebar);
  --c-pad: clamp(12px, 3vw, 32px);
  --c-gap: clamp(12px, 2vw, 24px);
  --content-max: 1200px;
}

html[data-sidebar-collapsed='true'],
body[data-sidebar-collapsed='true'] {
  --sidebar-width: var(--sidebar-collapsed);
}

/* ── 9. BREAKPOINTS ── */
:root {
  --bp-xs: 320px;
  --bp-sm: 360px;
  --bp-md: 480px;
  --bp-lg: 700px;
  --bp-xl: 768px;
  --bp-2xl: 1024px;
}

/* ── 10. Z-INDEX SCALE ── */
:root {
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-sticky: 50;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 9999;
  --z-max: 10002;
  --z-supreme: 2147483647; /* Maximum 32-bit integer, above Ollen chatbox */
}

/* ── 11. SHADOWS ── */
:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-glow: none;
}

/* ── 12. BORDER WIDTHS ── */
:root {
  --bw-0: 0px;
  --bw-px: 1px;
  --bw-sm: 1.5px;
  --bw-md: 2px;
}

/* ── 13. TYPOGRAPHY ── */
:root {
  /* Font families. UI text runs the *theme font*: the dashboard font picker
     writes the chosen face to --font-ui on <html> (see ThemeContext.tsx and
     public/theme-init.js), defaulting to Aldrich. --ff-sans is an alias, not
     a second opinion - it must follow the setting, or the ~99 rules that use
     it drift away from the ~81 that use --font-ui and the dashboard renders
     in two faces at once. --ff-mono is written by the same two places (the
     stored pick, or the Cascadia default with no pick), so the ~300
     mono-styled rules follow the picker as well. Only --ff-code
     (identifiers/data), --num-font (numbers) and the brand faces stay fixed
     by design.

     Aldrich is the dashboard's face on purpose - it is the house identity and
     it is the first entry in the picker. It ships a single 400 weight, so the
     scale below is capped at --fw-semibold (500); nothing should ask for more,
     because the browser would synthesise it. The same face is offered on the
     buyer side by the storefront font pickers, where buyerFont.ts resolves it
     from the self-hosted set. Inter is self-hosted too and stays in the picker
     for anyone who wants a quieter UI face. */
  --font-ui: 'Sellway Digits', 'Aldrich', system-ui, -apple-system, sans-serif;
  --ff-sans: var(--font-ui);
  --ff-mono: 'Cascadia Mono', Consolas, monospace;
  /* Numeric data role. Money, counts, quantities, dates and percentages are
     mono so columns line up and a figure scans the same whatever face the
     seller picked. 'Sellway Digits' is a digits-only cut of DM Mono (see
     public/fonts/fonts.css): it claims digits and the punctuation inside a
     number, then letters fall through to the surrounding UI face. Fixed on
     purpose - unlike --ff-mono it must not follow the font picker. */
  --ff-display: 'Sellway Digits', 'Poppins', sans-serif;
  /* Fixed mono, deliberately NOT the font picker and not --ff-mono (that is the
     Cascadia coding stack). Reserved for the few places that must read the same
     whatever face the seller picked - a status word the dashboard scans at a
     glance. Unlike --ff-brand this is a face choice, not a role, so it must not
     follow --font-ui. Self-hosted; see public/fonts/fonts.css. */
  --ff-dm-mono: 'DM Mono', 'Cascadia Mono', Consolas, monospace;
  /* Fixed code/identifier face (coupon codes, order codes, hex values, JSON
     editors). Deliberately NOT the font picker: data must scan the same
     whatever face the seller picked. Same stack as --ff-mono today, but a
     separate role so code can diverge from UI mono later without touching
     100+ call sites. Self-hosted; see public/fonts/fonts.css. */
  --ff-code: 'Cascadia Mono', Consolas, monospace;
  /* Non-logo brand type (inbox title, 404 heading/buttons, Studio card titles).
     It is a role, not a face: it must follow the font picker exactly like
     --font-ui does, or those few headings keep rendering in a second typeface
     while the rest of the dashboard moves with the setting. */
  --ff-brand: var(--font-ui);
  /* Logo wordmark face (Sellway lockups: sidebar, intro, auth, legal, 404).
     Deliberately NOT the theme font - the lockup is fixed brand art. */
  /* Logo wordmark face (Sellway lockups: sidebar, intro, auth, legal, 404,
     studio). Michroma, self-hosted only — no Google Fonts request. */
  --ff-logo: 'Michroma', sans-serif;
  --ff-bitcount: 'Bitcount', monospace;

  /* Font sizes */
  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 15px;
  --fs-2xl: 18px;
  --fs-3xl: 20px;
  --fs-4xl: 22px;
  --fs-5xl: 28px;
  --fs-6xl: 32px;
  --fs-7xl: 36px;
  --fs-8xl: 42px;
  --fs-9xl: 48px;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tighter: -2px;
  --ls-tight: -1px;
  --ls-snug: -0.5px;
  --ls-normal: 0;
  --ls-wide: 0.03em;
  --ls-wider: 0.05em;
  --ls-widest: 0.06em;
  --ls-ultra: 0.08em;
  --ls-mega: 0.1em;
  --ls-max: 0.12em;

  /* ── 13b. FONT WEIGHT RULE (MANDATORY ARCHITECTURE RULE) ──
     NEVER USE THICK / HEAVY FONT WEIGHTS ON TEXT.
     Font weights across UI text are capped strictly at 500 (--fw-medium).
     Weights of 600, 700, 800, 900, "bold", and "bolder" are strictly prohibited in text styling.
     Aldrich and the Sellway typography system only provide 400 (regular) and 500 (medium) cuts.
     Specifying 600+ or bold causes browsers to synthetically stroke/smear the font into a faux-bold,
     which renders as glitched, thick, illegible, blurry glyphs.
     Visual hierarchy MUST be achieved through:
       1. Font size (e.g. --fs-lg, --fs-xl)
       2. Letter spacing / uppercase tracking
       3. Text color & contrast (var(--text), var(--muted), var(--acc))
     Never through thick weights. */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 500;
  --fw-heavy: 500;
  --fw-max: 500;
}

/* ── 14. TRANSITIONS ── */
:root {
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear: linear;
  --duration-fast: 0.08s;
  --duration-normal: 0.15s;
  --duration-slow: 0.25s;
  --duration-slower: 0.3s;
  --duration-slowest: 0.4s;
}

/* ── 15. FOCUS / ACCESSIBILITY ── */
:root {
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc);
  --focus-ring-offset: 0 0 0 2px var(--bg);
}

/* ── 2b. THEME VARIABLE BLOCKS ──
   Defines every theme's CSS variables via [data-theme] selectors so the
   correct colors paint from the very first frame (set by the inline head
   script) - BEFORE settings.js runs. settings.js still re-applies these
   same values via root.style.setProperty(); this just removes the
   dependency on JS timing for the first paint. Mirrors DASHBOARD_THEMES
   in settings.js exactly. */
html[data-theme='autocart'] {
  --bg: #0a0a0a;
  --s1: #121212;
  --s2: #1c1c1c;
  --b: #2a2a2a;
  --acc: #ffffff;
  --acc2: #9a9a9a;
  --on-acc: #0a0a0a;
  --text: #f5f5f5;
  --muted: #777777;
  --chip: rgba(255, 255, 255, 0.05);
  --chip-border: rgba(255, 255, 255, 0.1);
  --topbar-bg: rgba(10, 10, 10, 0.9);
  --nav-ovl: rgba(10, 10, 10, 0.6);
  --ov: rgba(0, 0, 0, 0.25);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.05);
  --bd-top: rgba(255, 255, 255, 0.09);
  --bd-strong: rgba(255, 255, 255, 0.12);
  --hover-bd: rgba(255, 255, 255, 0.28);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-dark: rgba(0, 0, 0, 0.3);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --r: 4px;
  color-scheme: dark;
}
html[data-theme='plain-dark'] {
  --bg: #070709;
  --s1: #0f0f13;
  --s2: #18181f;
  --b: #25252f;
  --acc: #ffffff;
  --acc2: #888888;
  --on-acc: #070709;
  --text: #f0eeea;
  --muted: #6b6b7a;
  --chip: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.12);
  --topbar-bg: rgba(7, 7, 9, 0.9);
  --nav-ovl: rgba(7, 7, 9, 0.6);
  --ov: rgba(0, 0, 0, 0.2);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.06);
  --bd-top: rgba(255, 255, 255, 0.1);
  --bd-strong: rgba(255, 255, 255, 0.13);
  --hover-bd: rgba(255, 255, 255, 0.3);
  --card-bg: rgba(255, 255, 255, 0.025);
  --card-dark: rgba(0, 0, 0, 0.25);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --r: 4px;
  color-scheme: dark;
}
html[data-theme='dark-blue'] {
  --bg: #0a0e1a;
  --s1: #111726;
  --s2: #1a2438;
  --b: #25304a;
  --acc: #ffffff;
  --acc2: #888888;
  --on-acc: #0a0e1a;
  --text: #e8ecf5;
  --muted: #6b6b7a;
  --chip: rgba(255, 255, 255, 0.05);
  --chip-border: rgba(255, 255, 255, 0.1);
  --topbar-bg: rgba(10, 14, 26, 0.9);
  --nav-ovl: rgba(10, 14, 26, 0.6);
  --ov: rgba(0, 0, 0, 0.25);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.05);
  --bd-top: rgba(255, 255, 255, 0.09);
  --bd-strong: rgba(255, 255, 255, 0.12);
  --hover-bd: rgba(255, 255, 255, 0.28);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-dark: rgba(0, 0, 0, 0.3);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --r: 4px;
  color-scheme: dark;
}
html[data-theme='evergreen'] {
  /* Lighter olive canvas; the olive edges/accents sit a touch darker so the
     surfaces stay distinguishable now that the base is brighter. Text and
     icon colours are deliberately the shared defaults - no per-theme
     recolouring. */
  --bg: #333d29;
  --s1: #3d4a31;
  --s2: #49573a;
  --b: #5b6e4b;
  --acc: #d6f75c;
  --acc2: #a3cf58;
  --on-acc: #242b1c;
  --text: #f1f6e6;
  --muted: #9dab8d;
  --chip: rgba(255, 255, 255, 0.05);
  --chip-border: rgba(255, 255, 255, 0.1);
  --topbar-bg: rgba(51, 61, 41, 0.9);
  --nav-ovl: rgba(51, 61, 41, 0.6);
  --ov: rgba(0, 0, 0, 0.25);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.06);
  --bd-top: rgba(255, 255, 255, 0.1);
  --bd-strong: rgba(255, 255, 255, 0.14);
  --hover-bd: rgba(255, 255, 255, 0.28);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-dark: rgba(0, 0, 0, 0.3);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --r: 4px;
  color-scheme: dark;
}
html[data-theme='slate-grey'] {
  --bg: #15171c;
  --s1: #1d2027;
  --s2: #252932;
  --b: #343946;
  --acc: #ffffff;
  --acc2: #9399a8;
  --on-acc: #15171c;
  --text: #eef0f4;
  --muted: #777e8f;
  --chip: rgba(255, 255, 255, 0.06);
  --chip-border: rgba(255, 255, 255, 0.12);
  --topbar-bg: rgba(21, 23, 28, 0.9);
  --nav-ovl: rgba(21, 23, 28, 0.6);
  --ov: rgba(0, 0, 0, 0.25);
  --ovl: rgba(255, 255, 255, 0.05);
  --ovl-hover: rgba(255, 255, 255, 0.04);
  --bd: rgba(255, 255, 255, 0.06);
  --bd-top: rgba(255, 255, 255, 0.1);
  --bd-strong: rgba(255, 255, 255, 0.14);
  --hover-bd: rgba(255, 255, 255, 0.28);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-dark: rgba(0, 0, 0, 0.3);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --r: 4px;
  color-scheme: dark;
}
html[data-theme='light-grey'] {
  --bg: #e6e8ec;
  --s1: #f6f7f9;
  --s2: #eef0f3;
  --b: #c2c6cf;
  --acc: #0c0c10;
  --acc2: #3f4450;
  --on-acc: #ffffff;
  --text: #111318;
  --muted: #565b66;
  --chip: rgba(0, 0, 0, 0.05);
  --chip-border: rgba(0, 0, 0, 0.16);
  --topbar-bg: rgba(246, 247, 249, 0.92);
  --nav-ovl: rgba(0, 0, 0, 0.35);
  --ov: rgba(0, 0, 0, 0.03);
  --ovl: rgba(0, 0, 0, 0.04);
  --ovl-hover: rgba(0, 0, 0, 0.05);
  --bd: rgba(0, 0, 0, 0.08);
  --bd-top: rgba(0, 0, 0, 0.1);
  --bd-strong: rgba(0, 0, 0, 0.12);
  --hover-bd: rgba(0, 0, 0, 0.18);
  --card-bg: rgba(0, 0, 0, 0.015);
  --card-dark: rgba(0, 0, 0, 0.04);
  --sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.6) 100%
  );
  --modal-ovl: rgba(0, 0, 0, 0.4);
  --r: 4px;
  color-scheme: light;
}
html[data-theme='white'] {
  --bg: #ffffff;
  --s1: #fafafa;
  --s2: #f0f0f2;
  --b: #d5d5db;
  --acc: #0a0a0d;
  --acc2: #44444c;
  --on-acc: #ffffff;
  --text: #0a0a0d;
  --muted: #585860;
  --chip: rgba(0, 0, 0, 0.045);
  --chip-border: rgba(0, 0, 0, 0.16);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --nav-ovl: rgba(0, 0, 0, 0.3);
  --ov: rgba(0, 0, 0, 0.03);
  --ovl: rgba(0, 0, 0, 0.04);
  --ovl-hover: rgba(0, 0, 0, 0.05);
  --bd: rgba(0, 0, 0, 0.08);
  --bd-top: rgba(0, 0, 0, 0.1);
  --bd-strong: rgba(0, 0, 0, 0.12);
  --hover-bd: rgba(0, 0, 0, 0.18);
  --card-bg: rgba(0, 0, 0, 0.015);
  --card-dark: rgba(0, 0, 0, 0.04);
  --modal-ovl: rgba(0, 0, 0, 0.4);
  --r: 4px;
  color-scheme: light;
}

/* ── 16. HAND-ROLLED PRIMITIVE SCALE (anti-slop lock-in) ──
   Restrained radius, full 1px borders, tabular numerals, visible
   focus, 8pt spacing. One accent + neutrals; semantic tones separate. */
:root {
  --sheen: none;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-pill: 999px;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc);
  /* Numeric face used by .ac-nums, stat values and native numeric controls.
     The digits-only face keeps figures mono whatever UI face the seller
     picked; the rest of the stack handles letters in numeric labels. */
  --num-font: 'Sellway Digits', 'Cascadia Mono', Consolas, monospace;
  --surface-raised: var(--s1);
  --surface-sunken: var(--card-dark);
  --stat-value-size: 24px;
  --table-row-h: 48px;
  --table-row-h-dense: 38px;
}

html[data-density='compact'] {
  --table-row-h: var(--table-row-h-dense);
}

/* Source: src/styles/legal.css */
/* ───────────────────────────────────────────────────────────────────────────── */
/* Legal pages - industry-standard SaaS document layout (Stripe/Linear style). */
/* SOURCE for landing/legal/legal.css: scripts/build-landing-legal.mjs prepends */
/* fonts + tokens.css and writes the standalone stylesheet used by              */
/* sellway.cc/legal/terms, /policy, /refund and /contact.                     */
/* Themed via Sellway custom properties (--bg, --s1, --acc, --muted, ...).    */
/* ───────────────────────────────────────────────────────────────────────────── */

.legal-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-sans, system-ui, sans-serif);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.legal-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--bd);
}

.legal-logo {
  font-family: var(--ff-logo);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--text);
}

.legal-logo span {
  color: var(--acc);
}

.legal-nav-close {
  display: flex;
  justify-content: flex-end;
}

.nav-close-btn {
  text-decoration: none;
  color: var(--muted);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bd);
  background: transparent;
  border-radius: var(--r);
  transition:
    color var(--duration-normal),
    border-color var(--duration-normal),
    background var(--duration-normal);
}

.nav-close-btn:hover {
  color: var(--text);
  background: var(--ovl-hover);
  border-color: var(--bd-strong);
}

.nav-close-btn svg {
  width: 14px;
  height: 14px;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.legal-header {
  max-width: 1128px;
  margin: 0 auto;
  padding: 120px 24px 36px;
  text-align: left;
}

.legal-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-medium);
  font-family: var(--ff-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  background: var(--chip);
  margin-bottom: 20px;
}

.legal-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.legal-title span {
  color: var(--acc2);
}

.legal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.legal-meta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

/* ── Doc tabs (underline style) ────────────────────────────────────────────── */
.legal-tabs-wrap {
  position: sticky;
  top: 64px;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd);
}

.legal-tabs {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.legal-tabs::-webkit-scrollbar {
  display: none;
}

.legal-tab {
  position: relative;
  padding: 15px 2px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--duration-normal);
}

.legal-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background var(--duration-normal);
}

.legal-tab.active {
  color: var(--text);
}

.legal-tab.active::after {
  background: var(--acc);
}

.legal-tab:hover:not(.active) {
  color: var(--text);
}

/* ── Doc body - sidebar TOC + content column ───────────────────────────────── */
.legal-doc {
  max-width: 1128px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

/* Table of contents */
.legal-toc {
  position: sticky;
  top: 148px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-width: none;
}

.legal-toc::-webkit-scrollbar {
  display: none;
}

.legal-toc-title {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  font-family: var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
  padding-left: 12px;
}

.legal-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  line-height: var(--lh-normal);
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid var(--bd);
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background var(--duration-fast);
}

.legal-toc-link:hover {
  color: var(--text);
  border-left-color: var(--bd-strong);
}

.legal-toc-link.active {
  color: var(--text);
  border-left-color: var(--acc);
  background: var(--ovl-hover);
}

.legal-toc-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--acc2);
  flex-shrink: 0;
}

.legal-toc-link.active .legal-toc-num {
  color: var(--acc);
}

/* Content column */
.legal-main {
  min-width: 0;
}

.legal-section {
  scroll-margin-top: 150px;
  padding: 26px 0;
  border-bottom: 1px solid var(--bd);
}

.legal-section:first-child {
  padding-top: 0;
}

.legal-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.legal-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.legal-section-num {
  font-size: 11px;
  font-family: var(--ff-mono);
  color: var(--acc2);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  text-transform: uppercase;
}

.legal-section-title {
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}

/* Prose typography (shared with .clause-body for /contact) */
.legal-prose,
.clause-body {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.75;
}

.legal-prose p,
.clause-body p {
  margin: 0 0 10px;
}

.legal-prose p:last-child,
.clause-body p:last-child {
  margin-bottom: 0;
}

.legal-prose strong,
.clause-body strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

.legal-prose a,
.clause-body a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--bd-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast);
}

.legal-prose a:hover,
.clause-body a:hover {
  text-decoration-color: var(--acc2);
}

.legal-prose ul,
.clause-body ul {
  list-style: disc;
  margin: 10px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.legal-prose ul li,
.clause-body ul li {
  padding-left: 2px;
}

.legal-prose ul li::marker,
.clause-body ul li::marker {
  color: var(--acc2);
}

.legal-prose br,
.clause-body br {
  line-height: 1.9;
}

/* ── Mobile / narrow stacked layout (also used by /contact) ────────────────── */
.clauses-mobile {
  display: block;
  max-width: 720px;
}

.clause-mobile {
  scroll-margin-top: 150px;
  padding: 26px 0;
  border-bottom: 1px solid var(--bd);
}

.clause-mobile:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.clause-num {
  font-size: 11px;
  font-family: var(--ff-mono);
  color: var(--acc2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.clause-title {
  font-size: 17px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 12px;
  color: var(--text);
}

/* ── Contact Page Grid & Cards ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.contact-card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg, 12px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--duration-normal), transform var(--duration-normal);
}

.contact-card:hover {
  border-color: var(--bd-strong);
  transform: translateY(-2px);
}

.contact-card-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 12px;
}

.contact-card-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.contact-card-body p {
  margin: 0 0 8px;
}

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

.contact-card-body a {
  color: var(--acc2, #a5b4fc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card-body a:hover {
  color: var(--text);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.legal-footer {
  border-top: 1px solid var(--bd);
  padding: 32px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.legal-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-logo);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text);
}

.legal-footer-logo span {
  color: inherit;
}

.legal-footer-copy {
  font-size: 12px;
  color: var(--muted);
}

.legal-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.legal-footer-links a {
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: color var(--duration-fast);
}

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

/* ── Scroll-to-top ─────────────────────────────────────────────────────────── */
.legal-scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  width: 40px;
  height: 40px;
  background: var(--s1);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: var(--shadow-sm);
  transition:
    opacity var(--duration-slow),
    transform var(--duration-slow),
    border-color var(--duration-normal);
  pointer-events: none;
}

.legal-scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.legal-scroll-top:hover {
  background: var(--s2);
  border-color: var(--hover-bd);
}

.legal-scroll-top svg {
  width: 16px;
  height: 16px;
  color: var(--text);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .legal-toc {
    display: none;
  }

  .legal-header {
    padding: 104px 24px 28px;
  }
}

@media (max-width: 640px) {
  .legal-nav {
    padding: 0 20px;
    height: 60px;
  }

  .legal-tabs-wrap {
    top: 60px;
  }

  .legal-header {
    padding: 96px 20px 24px;
  }

  .legal-doc {
    padding: 24px 20px 80px;
  }

  .legal-tabs {
    padding: 0 20px;
    gap: 22px;
  }

  .legal-footer {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
  }

  .legal-scroll-top {
    bottom: 18px;
    right: 18px;
  }
}