/* croplock.com marketing stylesheet — S29-09 (Claude Design marketing system).
 * Flattened from the design-system colors_and_type.css (tokens + font @import)
 * + marketing.css (mkt-* component classes), per the Launch Preview Review
 * handoff. The mkt-* class names are the API — do not rename. Font @import is
 * kept at the top (must precede rules); the build head drops its old font link.
 */
/* ============================================================================
   Croplock — Colors & Type   (product: Croplock · company: Croppr LLC)
   ----------------------------------------------------------------------------
   Direction A — "Field Journal"
   Adopted 2026-06. Rich chocolate sidebar, warm parchment content, deep navy
   accent. Barlow Condensed for all display / heading tiers, Inter for UI/data.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Direction B · Sidebar chrome (near-black warm brown) ──────────────── */
  --ink:            #181008;   /* sidebar background */
  --ink-2:          #0E0A04;   /* gradient bottom-stop */
  --ink-soft:       #251508;   /* raised panels on sidebar */
  --ink-line:       rgba(245,240,232,0.07);
  --on-ink:         #F8F5F0;   /* primary text on sidebar */
  --on-ink-dim:     rgba(248,245,240,0.42);

  /* ── Direction B · Content surfaces (clean near-white) ─────────────────── */
  --paper:          #FAF8F4;   /* warm canvas */
  --surface:        #FFFFFF;   /* card surface */
  --grouping:       #F3EFE9;
  --border:         #E6DED6;
  --border-strong:  #D8D0C8;   /* stronger dividers */

  /* ── Direction B · Text ──────────────────────────────────────────────────── */
  --text-primary:   #1A1008;
  --text-secondary: #6B5240;
  --text-tertiary:  #9B8070;
  --text-on-dark:   #F5F0E8;

  /* ── Direction B · Accent (assertive deep navy) ────────────────────────── */
  --navy:           #163A72;
  --navy-bright:    #5080C8;
  --navy-tint:      #E4EDF8;
  --navy-hover:     #102D5C;

  /* cobalt aliases */
  --cobalt:         #163A72;
  --cobalt-accent:  #102D5C;
  --cobalt-dark:    #0A1F42;
  --cobalt-light:   #E4EDF8;
  --cobalt-pale:    #EDF3FC;

  /* ── Clay — the single warm accent (upsell / pro only) ───────────────── */
  --clay:           #C2603D;
  --clay-deep:      #A24E30;
  --clay-tint:      #F7EBE4;

  /* ── Status (functional only — never decorative) ─────────────────────── */
  --status-ok:      #2E6B4F;
  --status-warn:    #A06820;
  --status-alert:   #8B2E2E;
  --ok-tint:        #E3F2EC;
  --warn-tint:      #FBF0DE;
  --alert-tint:     #FAECEC;

  /* legacy status names */
  --status-optimal: #2E6B4F;
  --status-warning: #A06820;
  --optimal-bg:     #E3F2EC;
  --warning-bg:     #FBF0DE;
  --alert-bg:       #FAECEC;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --radius-card:    12px;
  --radius-btn:     8px;
  --radius-badge:   6px;
  --radius-input:   8px;
  --radius-pill:    999px;
  --radius-hero:    16px;
  --radius-card-lg: 12px;
  --radius-tile:    10px;

  /* ── Elevation (warm-toned shadows) ──────────────────────────────────── */
  --shadow-0:  none;
  --shadow-1:  0 1px 3px rgba(28,16,8,0.05), 0 1px 2px rgba(28,16,8,0.04);
  --shadow-2:  0 4px 12px rgba(28,16,8,0.08), 0 2px 4px rgba(28,16,8,0.05);
  --shadow-3:  0 4px 16px rgba(30,58,95,0.12), 0 2px 6px rgba(30,58,95,0.08);
  --shadow-4:  0 20px 40px rgba(28,16,8,0.14), 0 8px 16px rgba(28,16,8,0.07);
  --shadow-soft: 0 1px 2px rgba(28,16,8,0.04), 0 4px 16px rgba(28,16,8,0.06);
  --shadow-lift: 0 2px 4px rgba(28,16,8,0.05), 0 12px 32px rgba(28,16,8,0.10);
  --shadow-ai:   0 2px 6px rgba(30,58,95,0.10), 0 14px 36px rgba(30,58,95,0.12);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  150ms;

  /* ── Spacing (4px grid) ───────────────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ── Type families ────────────────────────────────────────────────────── */
  --font-display: 'Barlow Condensed', system-ui, sans-serif; /* ALL display/heading tiers */
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-prose:   'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Legacy names (keep for existing component refs) ─────────────────── */
  --bg:               var(--paper);
  --bg-bottom:        var(--surface);
  --ink-text:         var(--text-primary);
  --ink-text-2:       var(--text-secondary);
  --ink-text-3:       var(--text-tertiary);
  --paper-border:     var(--border);
  --cobalt-bright:    var(--navy-bright);
}

/* ============================================================================
   SEMANTIC TYPE — product type scale
   Display / heading: Barlow Condensed (uppercase, tight tracking)
   UI data & labels: Inter
   Prose / AI notes: DM Sans
   ============================================================================ */

.cr-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cr-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cr-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cr-h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-primary);
}

.cr-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cr-label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.cr-body {
  font-family: var(--font-prose);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cr-caption {
  font-family: var(--font-prose);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.cr-numeric {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.cr-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ============================================================================
   BRAND (marketing) identity — croppr-brand-guide.pdf v1.0
   Use for covers, decks, brand collateral — NOT the app UI.
   ============================================================================ */
:root {
  --brand-cobalt-dark:   #003087;
  --brand-cobalt-mid:    #0047AB;
  --brand-cobalt-accent: #1565C0;
  --brand-cobalt-light:  #E8F0FE;
  --brand-cobalt-pale:   #F0F5FF;
  --brand-warm-grey:     #546E7A;
  --brand-off-white:     #F8F9FB;
  --brand-amber-alert:   #E65100;
}


/* ===== marketing.css ===== */
/* ============================================================================
   Croplock — Marketing Site Stylesheet
   Extends tokens from: colors_and_type.css (design system)
   Surface: croplock.com public marketing pages
   ============================================================================ */

/* ── Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-prose);
  background: var(--paper);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.mkt-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 52px);
}
.mkt-section          { padding: clamp(64px, 9vw, 108px) 0; }
.mkt-section.tight    { padding: clamp(40px, 5vw, 64px) 0; }
.mkt-section.parchment{ background: var(--paper); }
.mkt-section.white    { background: var(--surface); }
.mkt-section.ink      { background: linear-gradient(165deg, #1C1108 0%, #0E0A04 100%); color: var(--on-ink); }
.mkt-section.navy-fill{ background: linear-gradient(135deg, var(--navy) 0%, var(--navy-hover) 100%); color: #fff; }
.mkt-section.grouping { background: var(--grouping); }

/* ── Type scale (marketing — display tier is larger than app) ─────────────── */
.mkt-eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
  display: block;
  margin-bottom: 14px;
}
.mkt-eyebrow.on-dark { color: var(--clay); }
.mkt-eyebrow.on-navy { color: rgba(255,255,255,0.65); }

.mkt-display {
  font-family: var(--font-display);
  font-weight: 800;
  /* S29-09: dialed down from clamp(56px, 9.5vw, 112px) — Curtis: hero way too big. */
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}

.mkt-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}

.mkt-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-wrap: balance;
}

.mkt-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.mkt-h2.on-dark, .mkt-h3.on-dark { color: var(--on-ink); }
.mkt-h2.on-navy, .mkt-h3.on-navy { color: #fff; }

.mkt-lead {
  font-family: var(--font-prose);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--text-secondary);
}
.mkt-lead.on-dark { color: var(--on-ink-dim); }
.mkt-lead.on-navy { color: rgba(255,255,255,0.78); }

.mkt-body {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.mkt-small {
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
}

.mkt-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.mkt-header {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border);
}

.mkt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  gap: 16px;
}

.mkt-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.mkt-header__logo-img {
  height: 40px;
  width: auto;
  /* natural sepia tones on light background */
}

.mkt-header__wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.mkt-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.mkt-header__navlink {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.mkt-header__navlink:hover { color: var(--text-primary); background: var(--grouping); }
.mkt-header__navlink.is-active { color: var(--text-primary); }
.mkt-header__navlink.is-active::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--clay);
  border-radius: 1px;
  margin-top: 3px;
}

.mkt-header__actions { flex-shrink: 0; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mkt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mkt-btn:hover { opacity: 0.91; transform: translateY(-1px); }
.mkt-btn:active { transform: translateY(0); opacity: 1; }

.mkt-btn.lg { font-size: 15px; padding: 13px 28px; }

.mkt-btn.primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 10px rgba(22,58,114,0.22);
}
.mkt-btn.primary:hover { box-shadow: 0 4px 18px rgba(22,58,114,0.30); }

.mkt-btn.clay {
  background: var(--clay);
  color: #fff;
  box-shadow: 0 2px 10px rgba(194,96,61,0.22);
}
.mkt-btn.clay:hover { box-shadow: 0 4px 18px rgba(194,96,61,0.30); }

.mkt-btn.outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.mkt-btn.outline:hover { background: var(--navy-tint); }

.mkt-btn.outline-light {
  background: transparent;
  color: rgba(248,245,240,0.82);
  border: 1.5px solid rgba(245,240,232,0.22);
}
.mkt-btn.outline-light:hover {
  border-color: rgba(245,240,232,0.48);
  color: var(--on-ink);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.mkt-hero {
  background: var(--paper);
  padding: clamp(64px, 10vw, 120px) 0 clamp(56px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.mkt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(22,58,114,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.mkt-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mkt-hero__copy { display: flex; flex-direction: column; gap: 24px; }

.mkt-hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Audience fork ────────────────────────────────────────────────────────── */
.mkt-fork-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.mkt-fork-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-hero);
  padding: 32px;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mkt-fork-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.mkt-fork-card.is-pro {
  border-color: rgba(194,96,61,0.28);
  background: linear-gradient(160deg, #fff 0%, #fdf4ef 100%);
}

.mkt-fork-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.mkt-fork-card.is-pro .mkt-fork-card__eyebrow { color: var(--clay); }

.mkt-fork-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy);
  margin-bottom: 4px;
}
.mkt-fork-card.is-pro .mkt-fork-card__price { color: var(--clay-deep); }

.mkt-fork-card__price-note {
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}

.mkt-fork-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mkt-fork-card__desc {
  font-family: var(--font-prose);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.mkt-fork-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px;
  padding: 0;
}
.mkt-fork-card__features li {
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.mkt-fork-card__features li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
  margin-top: 6px;
}
.mkt-fork-card.is-pro .mkt-fork-card__features li::before { background: var(--clay); }

.mkt-fork-card__cta { margin-top: auto; }

/* ── Feature cards ────────────────────────────────────────────────────────── */
.mkt-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.mkt-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-1);
}

.mkt-feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--navy-tint);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.mkt-feature-card__icon svg { width: 22px; height: 22px; }

.mkt-feature-card__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.mkt-feature-card__body {
  font-family: var(--font-prose);
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* ── Compliance pack ──────────────────────────────────────────────────────── */
.mkt-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(308px, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.mkt-pack-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--clay);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mkt-pack-card__code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--clay-deep);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.mkt-pack-card__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 10px;
}

.mkt-pack-card__body {
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
}

/* ── Compare (two-column State T&T vs. Federal) ──────────────────────────── */
.mkt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.mkt-compare__col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mkt-compare__col.is-federal {
  border-color: rgba(22,58,114,0.25);
  box-shadow: var(--shadow-3);
}

.mkt-compare__head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--grouping);
}

.mkt-compare__head.is-navy {
  background: var(--navy);
  border-color: var(--navy);
}

.mkt-compare__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mkt-compare__head.is-navy .mkt-compare__title { color: #fff; }

.mkt-compare__subtitle {
  font-family: var(--font-prose);
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.mkt-compare__head.is-navy .mkt-compare__subtitle { color: rgba(255,255,255,0.58); }

.mkt-compare__list {
  list-style: none;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mkt-compare__item {
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mkt-compare__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  margin-top: 6px;
}
.mkt-compare__col.is-federal .mkt-compare__item::before { background: var(--navy-bright); }

/* ── Price block ──────────────────────────────────────────────────────────── */
.mkt-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mkt-price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(72px, 10vw, 108px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
}

.mkt-price-note {
  font-family: var(--font-prose);
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}

.mkt-price-includes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.mkt-price-includes li {
  font-family: var(--font-prose);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}

.mkt-price-includes li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clay);
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── Waitlist form ────────────────────────────────────────────────────────── */
.mkt-waitlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}

.mkt-waitlist__row {
  display: flex;
  gap: 8px;
}

.mkt-waitlist__input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-input);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--surface);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mkt-waitlist__input::placeholder { color: var(--text-tertiary); }
.mkt-waitlist__input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(22,58,114,0.10);
}

.mkt-waitlist__status {
  font-family: var(--font-prose);
  font-size: 13px;
  color: var(--text-tertiary);
  min-height: 18px;
  transition: color var(--dur) var(--ease);
}
.mkt-waitlist__status.is-success { color: var(--status-ok); font-weight: 500; }
.mkt-waitlist__status.is-error   { color: var(--status-alert); }

/* ── Device UI preview (hero) ─────────────────────────────────────────────── */
.mkt-device-frame {
  border-radius: 14px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(28,16,8,0.08);
  overflow: hidden;
  background: #F0EEE9;
}

.mkt-device-frame__topbar {
  height: 9px;
  background: #1A1410;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 5px;
}
.mkt-device-frame__topbar span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
}

.mkt-device-frame__shell {
  display: grid;
  grid-template-columns: 160px 1fr;
}

.mkt-device-frame__sidebar {
  background: linear-gradient(180deg, #181008 0%, #0D0804 100%);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mkt-device-frame__brand {
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,245,240,0.65);
  padding: 0 8px 12px;
  line-height: 1.35;
  border-bottom: 1px solid rgba(245,240,232,0.06);
  margin-bottom: 8px;
}

.mkt-device-frame__navitem {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(248,245,240,0.40);
  padding: 7px 10px;
  border-radius: 6px;
}
.mkt-device-frame__navitem.is-active {
  background: rgba(245,240,232,0.09);
  color: rgba(248,245,240,0.88);
  box-shadow: inset 2px 0 0 #5080C8;
}

.mkt-device-frame__main {
  background: #FAF8F4;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
}

.mkt-device-frame__status-banner {
  background: #E3F2EC;
  border: 1px solid #B8D9C7;
  border-radius: 8px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2E6B4F;
}
.mkt-device-frame__status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2E6B4F; flex-shrink: 0;
}

.mkt-device-frame__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 13px 15px;
}

.mkt-device-frame__card-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.mkt-device-frame__vitals {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.mkt-device-frame__vital-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}
.mkt-device-frame__vital-num .u {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-left: 1px;
}

.mkt-device-frame__vital-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 3px;
}

.mkt-device-frame__advisory {
  background: linear-gradient(180deg, #EAF2FE, #F4F8FF);
  border: 1px solid #CFE0FA;
  border-radius: 8px;
  padding: 10px 13px;
  font-family: var(--font-prose);
  font-size: 11px;
  line-height: 1.55;
  color: #163A72;
}
.mkt-device-frame__advisory strong {
  font-size: 9px;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
}

/* ── Stat callouts ────────────────────────────────────────────────────────── */
.mkt-stat-row {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.mkt-stat { display: flex; flex-direction: column; gap: 4px; }
.mkt-stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.mkt-stat__num.on-dark { color: var(--on-ink); }
.mkt-stat__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mkt-stat__label.on-dark { color: var(--on-ink-dim); }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.mkt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.mkt-badge.navy { background: var(--navy-tint); color: var(--navy); }
.mkt-badge.clay { background: var(--clay-tint); color: var(--clay-deep); }
.mkt-badge.ink  { background: rgba(245,240,232,0.12); color: rgba(248,245,240,0.80); }
.mkt-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
hr.mkt-divider { border: none; height: 1px; background: var(--border); }

/* ── Disclaimer block ─────────────────────────────────────────────────────── */
.mkt-disclaimer {
  background: var(--grouping);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 28px;
}
.mkt-disclaimer__heading {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.mkt-disclaimer p {
  font-family: var(--font-prose);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.mkt-disclaimer p:last-child { margin-bottom: 0; }

/* ── CTA strip ────────────────────────────────────────────────────────────── */
.mkt-cta-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── Window: early notice strip ──────────────────────────────────────────── */
.mkt-notice {
  background: var(--clay-tint);
  border: 1px solid rgba(194,96,61,0.22);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.mkt-notice__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 8px;
}
.mkt-notice__body {
  font-family: var(--font-prose);
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
}
.mkt-notice__badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-deep);
  background: rgba(194,96,61,0.12);
  border: 1px solid rgba(194,96,61,0.25);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* ── Legal page ───────────────────────────────────────────────────────────── */
.mkt-legal-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 0;
}
.mkt-legal-wrap h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 40px 0 12px;
}
.mkt-legal-wrap h2:first-child { margin-top: 0; }
.mkt-legal-wrap p, .mkt-legal-wrap li {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.mkt-legal-wrap ul, .mkt-legal-wrap ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.mkt-legal-wrap a { color: var(--navy); text-decoration: underline; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.mkt-footer {
  background: var(--grouping);
  border-top: 1px solid var(--border);
}

.mkt-footer__inner {
  padding: 52px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.mkt-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.mkt-footer__logo-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mkt-footer__logo-img {
  height: 52px;
  width: auto;
  /* natural sepia tones on light background */
}
.mkt-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mkt-footer__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.mkt-footer__tagline {
  font-family: var(--font-prose);
  font-size: 12px;
  color: var(--text-tertiary);
}

.mkt-footer__nav {
  display: flex;
  gap: 8px 28px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.mkt-footer__navlink {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.mkt-footer__navlink:hover { color: var(--text-primary); }

.mkt-footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mkt-footer__copy {
  font-family: var(--font-prose);
  font-size: 12px;
  color: var(--text-tertiary);
}

.mkt-footer__legal {
  font-family: var(--font-prose);
  font-size: 11px;
  color: var(--text-tertiary);
  opacity: 0.6;
}

/* ── Spacing utilities ────────────────────────────────────────────────────── */
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-md { display: flex; flex-direction: column; gap: 16px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }
.stack-xl { display: flex; flex-direction: column; gap: 48px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 28px; }
.mt-xl { margin-top: 48px; }
.text-center { text-align: center; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mkt-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .mkt-fork-grid  { grid-template-columns: 1fr; gap: 16px; }
  .mkt-compare    { grid-template-columns: 1fr; gap: 16px; }
  .mkt-notice     { grid-template-columns: 1fr; }
  .mkt-notice__badge { display: none; }
  .mkt-device-frame { display: none; } /* device mockup hidden on mobile */
}

@media (max-width: 640px) {
  .mkt-header__wordmark { display: none; }
  .mkt-header__navlink  { padding: 7px 10px; font-size: 10px; }
  .mkt-pack-grid { grid-template-columns: 1fr; }
  .mkt-feature-grid { grid-template-columns: 1fr; }
  .mkt-waitlist__row { flex-direction: column; }
  .mkt-footer__top { flex-direction: column; }
  .mkt-stat-row { gap: 28px; }
}

/* ── Skip link — visible on focus only (a11y). The build emits
   <a class="skip-link" href="#main"> ahead of the header. ─────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: 0 0 8px 0;
  font-family: var(--font-ui);
  font-weight: 600;
}
.skip-link:focus { left: 0; }