/* ============================================================================
   Arloom — landing page stylesheet
   Tokens are verbatim from @arloom/design-system (worktree feat/design-system-react,
   design-system/src/tokens/tokens.css). Do NOT hand-edit token values here — they
   are mirrored from the app. Run scripts/sync-design-system.mjs to refresh.
   Only the "page layer" below the token blocks is landing-page-specific.
   ========================================================================= */

/* ── 1. TOKENS (mirrored — do not edit) ─────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* heritage palette */
  --heritage-gold: #D4A853;
  --heritage-gold-rgb: 212 168 83;
  --heritage-gold-light: #E8C97A;
  --heritage-gold-light-rgb: 232 201 122;
  --heritage-gold-dark: #B8923D;
  --heritage-gold-shimmer: #F5E6B3;
  --heritage-gold-classic: #D4AF37;
  --heritage-gold-classic-rgb: 212 175 55;
  --heritage-warm-brown: #8B7355;
  --heritage-warm-brown-rgb: 139 115 85;
  --heritage-chocolate-brown: #874312;
  --heritage-bronze: #CD7F32;
  --heritage-bronze-light: #D9A066;
  --heritage-parchment: #F8F6F1;
  --heritage-parchment-rgb: 248 246 241;
  --heritage-parchment-dark: #D4C4A8;
  --heritage-parchment-light: #E8D9BC;
  --heritage-cream: #F5F5DC;
  --heritage-amber: #E8A87C;
  --heritage-sage: #7F9F9F;
  --heritage-sage-rgb: 127 159 159;
  --heritage-deep-green: #2F4F4F;
  --heritage-deep-green-rgb: 47 79 79;
  --heritage-sepia: #704214;
  --heritage-sepia-rgb: 112 66 20;
  --heritage-sepia-light: #A67B5B;
  --heritage-ink-black: #2C2C2C;
  --heritage-ink-brown: #3D2914;
  --heritage-ink-faded: #6B5B4B;
  --heritage-success: #10B981;
  --heritage-warning: #F59E0B;
  --heritage-error: #EF4444;
  --heritage-slate-gray: #6B7280;
  --heritage-slate-gray-light: #9CA3AF;
  --heritage-slate-gray-dark: #4B5563;

  /* tier colours */
  --heritage-tier-free: #6B7280;
  --heritage-tier-basic: #92400E;
  --heritage-tier-standard: #D4AF37;
  --heritage-tier-premium: #E5E4E2;

  /* brand */
  --brand-warm-brown: #874312;
  --brand-warm-brown-rgb: 135 67 18;
  --brand-deep-green: #2E5A3C;
  --brand-soft-orange: #E8A857;
  --brand-text-secondary: #877264;

  /* gradients */
  --gradient-gold-gradient: linear-gradient(180deg, #E8C97A, #D4A853, #B8923D);
  --gradient-parchment-gradient: linear-gradient(180deg, #F8F6F1, #E8D9BC, #D4C4A8);
  --gradient-tier-free-gradient: linear-gradient(180deg, #6B7280, #4B5563);
  --gradient-tier-basic-gradient: linear-gradient(180deg, #92400E, #78350F);
  --gradient-tier-standard-gradient: linear-gradient(180deg, #D4AF37, #B8860B);
  --gradient-tier-premium-gradient: linear-gradient(180deg, #E5E4E2, #C0C0C0);

  /* corner radii */
  --dimen-corner-radius-small: 8px;
  --dimen-corner-radius-medium: 16px;
  --dimen-corner-radius-large: 24px;
  --dimen-corner-radius-sheet: 32px;
  --dimen-corner-radius-full: 9999px;

  /* spacing */
  --dimen-spacing-x-small: 4px;
  --dimen-spacing-small: 8px;
  --dimen-spacing-medium: 16px;
  --dimen-spacing-large: 24px;
  --dimen-spacing-x-large: 32px;

  /* sizing */
  --dimen-button-height: 48px;
  --dimen-button-height-large: 56px;
  --dimen-trading-card-width: 280px;
  --dimen-trading-card-height: 420px;

  /* shadows (stock Tailwind values as emitted by the DS bundle) */
  --arloom-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --arloom-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --arloom-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --arloom-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

  /* type — the DS ships NO font files; this is the system stack it resolves to.
     --arloom-font-display is a LANDING-PAGE addition (system serif, zero network
     cost) for heritage character in headlines. Swap in a webfont here if the brand
     later adopts one; nothing else needs to change. */
  --arloom-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --arloom-font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --arloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* semantic scheme — light (default) */
  --md-primary: #874312;
  --md-primary-rgb: 135 67 18;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FCEFE6;
  --md-on-primary-container: #341100;
  --md-secondary: #2E5A3C;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #B5F0C4;
  --md-on-secondary-container: #002111;
  --md-tertiary: #E8A857;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFDDB5;
  --md-on-tertiary-container: #2A1800;
  --md-background: #F8F7F6;
  --md-background-rgb: 248 247 246;
  --md-on-background: #171411;
  --md-surface: #FFFFFF;
  --md-surface-rgb: 255 255 255;
  --md-on-surface: #171411;
  --md-surface-variant: #F4DED3;
  --md-on-surface-variant: #877264;
  --md-outline: #E5E0DC;
  --md-outline-variant: #E5E0DC;
  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
}

/* Follow the OS only where no explicit theme is pinned. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --md-primary: #C48455;
    --md-primary-rgb: 196 132 85;
    --md-on-primary: #522300;
    --md-primary-container: #743300;
    --md-on-primary-container: #DCBBA4;
    --md-secondary: #9AD4A9;
    --md-on-secondary: #003921;
    --md-secondary-container: #005232;
    --md-on-secondary-container: #B5F0C4;
    --md-tertiary: #FFB95B;
    --md-on-tertiary: #462A00;
    --md-tertiary-container: #643F00;
    --md-on-tertiary-container: #FFDDB5;
    --md-background: #211811;
    --md-background-rgb: 33 24 17;
    --md-on-background: #E8E6E3;
    --md-surface: #2D241E;
    --md-surface-rgb: 45 36 30;
    --md-on-surface: #E8E6E3;
    --md-surface-variant: #362E28;
    --md-on-surface-variant: #B0A69E;
    --md-outline: #44362D;
    --md-outline-variant: #44362D;
    --md-error: #FFB4AB;
    --md-on-error: #690005;
  }
}

/* Explicit pins win in BOTH directions and must come after the media query. */
[data-theme='light'] {
  --md-primary: #874312;
  --md-primary-rgb: 135 67 18;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FCEFE6;
  --md-on-primary-container: #341100;
  --md-secondary: #2E5A3C;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #B5F0C4;
  --md-on-secondary-container: #002111;
  --md-tertiary: #E8A857;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFDDB5;
  --md-on-tertiary-container: #2A1800;
  --md-background: #F8F7F6;
  --md-background-rgb: 248 247 246;
  --md-on-background: #171411;
  --md-surface: #FFFFFF;
  --md-surface-rgb: 255 255 255;
  --md-on-surface: #171411;
  --md-surface-variant: #F4DED3;
  --md-on-surface-variant: #877264;
  --md-outline: #E5E0DC;
  --md-outline-variant: #E5E0DC;
  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
}

[data-theme='dark'],
.dark {
  --md-primary: #C48455;
  --md-primary-rgb: 196 132 85;
  --md-on-primary: #522300;
  --md-primary-container: #743300;
  --md-on-primary-container: #DCBBA4;
  --md-secondary: #9AD4A9;
  --md-on-secondary: #003921;
  --md-secondary-container: #005232;
  --md-on-secondary-container: #B5F0C4;
  --md-tertiary: #FFB95B;
  --md-on-tertiary: #462A00;
  --md-tertiary-container: #643F00;
  --md-on-tertiary-container: #FFDDB5;
  --md-background: #211811;
  --md-background-rgb: 33 24 17;
  --md-on-background: #E8E6E3;
  --md-surface: #2D241E;
  --md-surface-rgb: 45 36 30;
  --md-on-surface: #E8E6E3;
  --md-surface-variant: #362E28;
  --md-on-surface-variant: #B0A69E;
  --md-outline: #44362D;
  --md-outline-variant: #44362D;
  --md-error: #FFB4AB;
  --md-on-error: #690005;
}

/* ── 2. SIGNATURE HELPERS (mirrored — do not edit) ──────────────────────── */

/* Pointy-top hexagon: vertex at top centre, flat left/right sides.
   Do NOT substitute a flat-top hexagon — it reads as a different brand. */
.arloom-hexagon {
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.arloom-parchment {
  background-color: var(--heritage-parchment);
  background-image:
    radial-gradient(at 20% 30%, rgba(212, 168, 83, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(139, 115, 85, 0.06) 0px, transparent 50%);
}

/* Parchment is theme-invariant — it is always aged paper, in both themes. Text
   on it must therefore stay dark in dark mode too; inheriting the dark-theme
   on-surface colours here puts pale text on a light background (measured at
   2.04:1 before this rule existed). */
.arloom-parchment,
.arloom-parchment .who,
.arloom-parchment .k { color: var(--heritage-ink-black); }
.arloom-parchment .who,
.arloom-parchment .k { color: var(--heritage-sepia); }

.arloom-shimmer { position: relative; overflow: hidden; }

.arloom-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--heritage-gold-light) 50%, transparent 80%);
  opacity: .3;
  transform: translateX(-100%);
  animation: arloom-shimmer-sweep 2.5s ease-in-out infinite;
}

@keyframes arloom-shimmer-sweep { to { transform: translateX(100%); } }

/* ── 3. PAGE LAYER (landing-page specific) ──────────────────────────────── */

/* Page-layer colours. These are NOT design-system tokens and are not mirrored.
   --md-on-surface-variant is the app's secondary-text colour, but at #877264 it
   measures 4.25:1 on our light background — under the 4.5:1 WCAG AA floor for
   body text. In an app that colour usually sits on larger type or is decorative;
   on a marketing page it is most of the running text. So the page uses a darker
   value in light mode and defers to the token in dark, where it already passes. */
:root {
  --page-muted: var(--heritage-ink-faded);   /* #6B5B4B — 6.1:1 on #F8F7F6 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --page-muted: var(--md-on-surface-variant); }
}
[data-theme='light'] { --page-muted: var(--heritage-ink-faded); }
[data-theme='dark'], .dark { --page-muted: var(--md-on-surface-variant); }

*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding keeps the sticky header from covering whatever an in-page
   anchor lands on — without it, #how / #pricing / #faq all land underneath it. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--arloom-font-sans);
  -webkit-font-smoothing: antialiased;
  background: var(--md-background);
  color: var(--md-on-background);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--arloom-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--dimen-spacing-medium);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 var(--dimen-spacing-medium); text-wrap: pretty; }

a { color: var(--md-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
section > .wrap > h2, section > .narrow > h2 { margin-bottom: var(--dimen-spacing-large); }

.eyebrow {
  font-family: var(--arloom-font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--heritage-sepia);
  margin-bottom: var(--dimen-spacing-small);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .eyebrow { color: var(--heritage-gold); }
}
[data-theme='dark'] .eyebrow { color: var(--heritage-gold); }

.lede { font-size: clamp(1.05rem, 1.9vw, 1.3rem); color: var(--page-muted); }

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dimen-spacing-small);
  min-height: var(--dimen-button-height);
  padding: 0 var(--dimen-spacing-large);
  border-radius: var(--dimen-corner-radius-full);
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  white-space: nowrap;
  max-width: 100%;
}
/* Polish button labels run ~30% longer than English and overflow a 390px
   viewport while nowrap holds them on one line. Let them wrap instead. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; padding-block: 10px; height: auto; }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--heritage-gold); outline-offset: 2px; }

.btn-primary {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--arloom-shadow-md);
}
.btn-primary:hover { box-shadow: var(--arloom-shadow-lg); }
/* In dark mode the token pair (#522300 on #C48455) measures 4.24:1 — under AA
   for the button label. Ink brown only reaches 4.44:1; ink black clears it at
   4.52:1. That is a thin margin, so if --md-primary is ever lightened upstream
   this needs rechecking — the audit in scratchpad/audit.mjs catches it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn-primary { color: var(--heritage-ink-black); }
}
[data-theme='dark'] .btn-primary { color: var(--heritage-ink-black); }

.btn-outline {
  background: transparent;
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline);
}
.btn-outline:hover { background: var(--md-surface-variant); }

.btn-lg { min-height: var(--dimen-button-height-large); padding-inline: var(--dimen-spacing-x-large); }

/* — nav — */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(var(--md-background-rgb) / .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--md-outline);
}
.nav-inner { display: flex; align-items: center; gap: var(--dimen-spacing-large); min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--arloom-font-display); font-size: 1.3rem; font-weight: 600; color: var(--md-on-background); text-decoration: none; }
/* The simplified woven "A" (design-system/brand/gen_woven_assets.py writes assets/arloom-mark.png
   at 4x), the same mark as the app icon. */
.brand-mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; gap: var(--dimen-spacing-large); margin-left: auto; align-items: center; }
.nav-links a { color: var(--page-muted); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--md-on-surface); }
/* .nav-links a (0,1,1) outranks .btn-primary (0,1,0), so without this the nav
   CTA renders its label in the muted nav colour on the primary fill — a 1.6:1
   contrast failure. Restate the button colours at equal-or-higher specificity. */
.nav-links a.btn-primary { color: var(--md-on-primary); }
.nav-links a.btn-outline { color: var(--md-on-surface); }
.lang { display: flex; gap: 2px; align-items: center; font-size: .85rem; font-weight: 600; }
.lang a { padding: 4px 7px; border-radius: var(--dimen-corner-radius-small); text-decoration: none; }
.lang [aria-current='true'] { background: var(--md-surface-variant); color: var(--md-on-surface); }
@media (max-width: 860px) { .nav-links a:not(.btn):not(.lang a) { display: none; } .lang a { display: inline-block; } }
/* Below ~560px brand + language switch + CTA no longer fit on one row and the
   button overflows the viewport. The hero carries the same CTA immediately
   below, so drop it from the bar rather than shrinking it into illegibility. */
@media (max-width: 560px) { .nav-links > a.btn { display: none; } }

/* — hero — */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); position: relative; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(at 15% 20%, rgb(var(--heritage-gold-rgb) / .13) 0px, transparent 55%),
    radial-gradient(at 85% 10%, rgb(var(--heritage-warm-brown-rgb) / .10) 0px, transparent 50%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: var(--dimen-spacing-large); }
.hero .lede { max-width: 34ch; }

/* — waitlist form — */
.signup { display: flex; gap: var(--dimen-spacing-small); flex-wrap: wrap; margin-top: var(--dimen-spacing-large); }
.signup input[type=email] {
  flex: 1 1 17rem;
  min-height: var(--dimen-button-height-large);
  padding: 0 var(--dimen-spacing-medium);
  border: 1px solid var(--md-outline);
  border-radius: var(--dimen-corner-radius-full);
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 1rem;
}
.signup input[type=email]:focus-visible { outline: 3px solid var(--heritage-gold); outline-offset: 1px; border-color: transparent; }
.microcopy { font-size: .87rem; color: var(--page-muted); margin-top: var(--dimen-spacing-small); }

/* — hero visual — */
.hero-shot { position: relative; display: grid; place-items: center; }
.hero-shot img {
  border-radius: var(--dimen-corner-radius-large);
  box-shadow: var(--arloom-shadow-xl);
  max-height: 460px;
  width: auto;
}

/* — trust bar — */
.trustbar { border-block: 1px solid var(--md-outline); background: var(--md-surface); padding-block: var(--dimen-spacing-large); }
.trustbar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--dimen-spacing-medium) var(--dimen-spacing-large); }
.trustbar li { display: flex; gap: 10px; font-size: .92rem; color: var(--page-muted); line-height: 1.45; }
.trustbar .ico { flex: none; font-size: 1.1rem; line-height: 1.3; }

/* — generic cards — */
.card {
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--dimen-corner-radius-medium);
  padding: var(--dimen-spacing-large);
  box-shadow: var(--arloom-shadow-sm);
}
.grid { display: grid; gap: var(--dimen-spacing-large); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* — steps — */
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: calc(var(--dimen-spacing-large) + 14px); }
.steps .card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--dimen-spacing-medium));
  left: var(--dimen-spacing-large);
  width: 40px; height: 44px;
  display: grid; place-items: center;
  background: var(--gradient-gold-gradient);
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  font-family: var(--arloom-font-display);
  font-size: 1.15rem; font-weight: 700;
  color: var(--heritage-ink-black);
}

/* — transcript / quote blocks — */
.transcript {
  border-left: 3px solid var(--heritage-gold);
  padding: var(--dimen-spacing-medium) var(--dimen-spacing-large);
  border-radius: 0 var(--dimen-corner-radius-medium) var(--dimen-corner-radius-medium) 0;
  font-style: italic;
  color: var(--md-on-surface);
}
.transcript .who { display: block; font-style: normal; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--heritage-sepia); margin-bottom: 6px; }

/* — ACEO extraction list — */
.aceo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dimen-spacing-small); }
.aceo-list li {
  display: grid;
  grid-template-columns: 2rem 8.5rem 1fr;
  gap: var(--dimen-spacing-small);
  align-items: baseline;
  padding: var(--dimen-spacing-small) var(--dimen-spacing-medium);
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  border-radius: var(--dimen-corner-radius-small);
}
.aceo-list .k { font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--heritage-sepia); }
/* Only .aceo-list sits on a themed surface. .transcript is on .arloom-parchment,
   which is aged paper in BOTH themes — giving it the dark-theme gold put 2.04:1
   text on a light background. Do not add .transcript .who back to this rule. */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .aceo-list .k { color: var(--heritage-gold); } }
[data-theme='dark'] .aceo-list .k { color: var(--heritage-gold); }
@media (max-width: 620px) { .aceo-list li { grid-template-columns: 2rem 1fr; } .aceo-list .v { grid-column: 2; } }

/* — chat sample — */
.chat { display: grid; gap: var(--dimen-spacing-medium); }
.bubble { padding: var(--dimen-spacing-medium) var(--dimen-spacing-large); border-radius: var(--dimen-corner-radius-large); max-width: 46ch; }
.bubble.you { background: var(--md-primary); color: var(--md-on-primary); justify-self: end; border-bottom-right-radius: var(--dimen-corner-radius-small); }
.bubble.them { background: var(--md-surface); border: 1px solid var(--md-outline); justify-self: start; border-bottom-left-radius: var(--dimen-corner-radius-small); }
.cite { display: block; margin-top: 10px; font-size: .82rem; color: var(--page-muted); font-style: italic; }

/* — pricing — */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--dimen-spacing-medium); align-items: start; }
/* V1 sells two plans (Free + Premium); keep the pair from stretching across the full wrap. */
.tiers-2 { max-width: 720px; }
.tier { display: flex; flex-direction: column; gap: var(--dimen-spacing-small); }
.tier .name { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.tier .price { font-family: var(--arloom-font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.tier .per { font-size: .85rem; color: var(--page-muted); }
.tier ul { list-style: none; margin: var(--dimen-spacing-small) 0 0; padding: 0; display: grid; gap: 6px; font-size: .92rem; color: var(--page-muted); }
.tier ul li::before { content: '·'; margin-right: 8px; color: var(--heritage-gold); font-weight: 700; }
.tier.featured { border-color: var(--heritage-gold); box-shadow: 0 0 0 1px var(--heritage-gold), var(--arloom-shadow-lg); }
.founding { margin-top: var(--dimen-spacing-large); border-radius: var(--dimen-corner-radius-medium); padding: var(--dimen-spacing-large); background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }

/* — FAQ — */
details.faq { border-bottom: 1px solid var(--md-outline); padding-block: var(--dimen-spacing-medium); }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; gap: var(--dimen-spacing-medium); align-items: flex-start; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; margin-left: auto; font-size: 1.4rem; line-height: 1; color: var(--heritage-gold); flex: none; }
details.faq[open] summary::after { content: '\2212'; }
details.faq > *:not(summary) { margin-top: var(--dimen-spacing-medium); color: var(--page-muted); }
details.faq:focus-within summary { outline: 3px solid var(--heritage-gold); outline-offset: 3px; border-radius: 4px; }

/* — callout / honesty box — */
.callout {
  border: 1px solid var(--heritage-gold);
  border-radius: var(--dimen-corner-radius-medium);
  padding: var(--dimen-spacing-large);
  background: rgb(var(--heritage-gold-rgb) / .07);
}
.callout h3 { margin-bottom: var(--dimen-spacing-small); }

/* — persona vignettes — */
.vignette { border-left: 3px solid var(--heritage-sage); padding-left: var(--dimen-spacing-medium); }
.vignette .said { font-family: var(--arloom-font-display); font-size: 1.12rem; font-style: italic; margin-bottom: var(--dimen-spacing-small); color: var(--md-on-surface); }

/* — flip cards —
   The card faces are real renders of the shipped design-system components
   (design-system/ds-bundle/_screenshots). Flipping is pure CSS + a small
   aria-pressed toggle for touch; see assets/arloom.js for why there is no React. */
.flipcard {
  perspective: 1400px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}
.flipcard-inner {
  position: relative;
  display: block;
  aspect-ratio: 594 / 936;   /* the real TradingCard render's dimensions */
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.flipcard-face.front { position: absolute; inset: 0; }
.flipcard.is-flipped .flipcard-inner { transform: rotateY(180deg); }
.flipcard-face {
  backface-visibility: hidden;
  border-radius: var(--dimen-corner-radius-medium);
  overflow: hidden;
  box-shadow: var(--arloom-shadow-xl);
}
.flipcard-face.back { position: absolute; inset: 0; transform: rotateY(180deg); }
.flipcard-face img { width: 100%; height: 100%; object-fit: contain; }
.flipcard:focus-visible { outline: 3px solid var(--heritage-gold); outline-offset: 6px; border-radius: var(--dimen-corner-radius-medium); }
.flipcard-hint {
  display: block;
  margin-top: var(--dimen-spacing-medium);
  font-size: .85rem;
  color: var(--page-muted);
  text-align: center;
}

/* — footer — */
.footer { border-top: 1px solid var(--md-outline); padding-block: var(--dimen-spacing-x-large); font-size: .9rem; color: var(--page-muted); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--dimen-spacing-medium) var(--dimen-spacing-large); align-items: center; }
.footer a { color: var(--page-muted); }
.footer .spacer { margin-left: auto; }

/* — utilities —
   These exist so the pages carry no inline style="" attributes, which lets the
   Content-Security-Policy in public/_headers keep style-src 'self' without
   'unsafe-inline'. Prefer adding a class here over an inline style. */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-s { margin-top: var(--dimen-spacing-small); }
.block-l { margin: var(--dimen-spacing-large) 0 0; }
.pt-l { padding-top: var(--dimen-spacing-large); }
.pb-l { padding-bottom: var(--dimen-spacing-large); }
.pad-l { padding-block: var(--dimen-spacing-large); }
.ta-left { text-align: left; }
.jc-center { justify-content: center; }
.ai-center { align-items: center; }
.measure { max-width: 62ch; }
.brand-sm { font-size: 1.1rem; }
.brand-sm .brand-mark { width: 20px; height: 20px; }
.shot { border-radius: var(--dimen-corner-radius-medium); box-shadow: var(--arloom-shadow-lg); }
/* Tier label colours. The raw tier tokens are swatch colours, not text colours:
   --heritage-tier-standard (#D4AF37 gold) is 2.1:1 on white and unreadable as
   small uppercase type. These are the nearest in-palette values that clear 4.5:1
   in each theme, so the colour coding survives without failing WCAG AA. */
.t-free { color: var(--heritage-slate-gray-dark); }
.t-basic { color: var(--heritage-tier-basic); }
.t-standard { color: var(--heritage-sepia); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .t-free { color: var(--heritage-slate-gray-light); }
  :root:not([data-theme='light']) .t-basic { color: var(--heritage-bronze-light); }
  :root:not([data-theme='light']) .t-standard { color: var(--heritage-gold); }
}
[data-theme='dark'] .t-free { color: var(--heritage-slate-gray-light); }
[data-theme='dark'] .t-basic { color: var(--heritage-bronze-light); }
[data-theme='dark'] .t-standard { color: var(--heritage-gold); }

.center { text-align: center; }
.center .lede, .center p { margin-inline: auto; }
.mt-l { margin-top: var(--dimen-spacing-large); }
.mt-xl { margin-top: var(--dimen-spacing-x-large); }
.surface-alt { background: var(--md-surface); border-block: 1px solid var(--md-outline); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--dimen-spacing-medium); top: var(--dimen-spacing-medium); z-index: 100; background: var(--md-surface); padding: 12px 18px; border-radius: var(--dimen-corner-radius-small); }

/* — legal documents (privacy.html / terms.html) —
   Everything here is scoped under .legal so it cannot leak into the marketing
   pages. These two documents need four things the marketing pages never did:
   an <h4> heading level, breathing room between numbered clauses, dense data
   tables, and a placeholder treatment loud enough that an unfinished section
   cannot ship looking finished. */
.legal h4 {
  font-family: var(--arloom-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--dimen-spacing-small);
}
/* Direct children of .narrow only, so headings inside a .callout keep their
   own tight spacing instead of inheriting the clause gap. */
.legal .narrow > h2 { margin-top: var(--dimen-spacing-x-large); }
.legal .narrow > h3 { margin-top: var(--dimen-spacing-large); }
.legal .narrow > h4 { margin-top: var(--dimen-spacing-large); }
.legal li { margin-bottom: var(--dimen-spacing-x-small); }
/* Legal callouts sit between paragraphs rather than closing a section, so they
   need block margins the marketing-page .callout deliberately does not have. */
.legal .callout { margin-block: var(--dimen-spacing-large); }

/* The sub-processor and retention tables are four columns wide; without an
   own scroll container they push the whole page sideways on a phone. */
.table-scroll { overflow-x: auto; margin: 0 0 var(--dimen-spacing-medium); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table th,
.legal-table td {
  border: 1px solid var(--md-outline);
  padding: var(--dimen-spacing-small) var(--dimen-spacing-medium);
  text-align: left;
  vertical-align: top;
}
.legal-table th { background: var(--md-surface-variant); color: var(--md-on-surface); font-weight: 600; }

/* One emphasis step above .callout, for the notices the documents themselves
   mark as important (biometrics, age limit, ACEO analysis). Uses --md-primary
   rather than a raw heritage token so it stays legible in both themes. */
.callout-strong { border-color: var(--md-primary); background: rgb(var(--md-primary-rgb) / .08); }

/* Unfilled legal placeholder. Deliberately loud, and deliberately NOT subtle:
   the failure mode this exists to prevent is a controller-identity block that
   renders as though it were complete. Do not soften it — delete the block
   entirely once the real details replace it. */
.callout-todo { border: 2px dashed var(--md-error); background: rgb(var(--heritage-gold-rgb) / .09); }
.callout-todo h3 { color: var(--md-error); }
.todo-flag { font-family: var(--arloom-font-mono); font-weight: 700; font-size: .95em; color: var(--md-error); }

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