/* ============================================
   ChinCheck — chincheckapp.com (v7)
   Bone shell + ink scorecard moments + orange CTA + gold/bronze prestige.
   High-converting sales page. Restrained brand, sharp content.
   ============================================ */

/* ── Design Tokens ────────────────────────────── */
:root {
  --bg:             #F4F1EA;   /* bone canvas */
  --bg-raised:      #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  rgba(255, 90, 31, 0.06);
  --bg-card-border: rgba(10, 11, 13, 0.10);

  --ink:            #0A0B0D;   /* black scorecard moment */
  --ink-soft:       #14161A;

  --orange:         #FF5A1F;
  --orange-bright:  #FF7339;
  --orange-dim:     #A83B14;
  --orange-glow:    rgba(255, 90, 31, 0.14);
  --orange-glow-strong: rgba(255, 90, 31, 0.26);

  --gold:           #8A6A2A;   /* bronze-on-bone prestige */
  --gold-bright:    #A6823A;
  --gold-glow:      rgba(138, 106, 42, 0.16);
  --gold-foil:      #E5C879;   /* foil pop on the ink slab */

  --green:          #157A43;
  --red:            #C42A3D;

  --bone:           #F2F0EA;   /* on-orange / on-ink label */

  --text:           #0A0B0D;
  --text-secondary: #54585F;
  --text-muted:     #797D84;
  --text-dim:       #AEB2B8;

  --border:         rgba(10, 11, 13, 0.10);
  --border-strong:  rgba(10, 11, 13, 0.16);
  --border-orange:  rgba(255, 90, 31, 0.30);
  --border-gold:    rgba(138, 106, 42, 0.30);

  --font-display:   'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width:      1180px;
  --radius:         14px;
  --transition:     cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card:    0 1px 2px rgba(10,11,13,0.04), 0 12px 32px rgba(10,11,13,0.07);
  --shadow-lift:    0 20px 60px rgba(10,11,13,0.14);

  /* Brand mark — dark monogram (black C + orange check, New Check Color set)
     so it reads on the light/bone shell. (The white monogram.png is for dark
     surfaces.) */
  --brand-mark: url("monogram-dark.png?v=9");
}

/* ── Reset ────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: 90px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── Typography ───────────────────────────── */
/* Headings are NOT uppercased globally anymore (premium, less shouty).
   Uppercase is applied selectively to fight moments (score, tier, labels). */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.06;
  color: var(--text);
}

h1 { font-size: clamp(42px, 7vw, 76px); }
h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; letter-spacing: -0.02em; }
h3 { font-size: 20px; margin-bottom: 8px; }
h4 { font-size: 16px; }

p { color: var(--text-secondary); font-size: 16px; line-height: 1.7; }

a { color: var(--orange); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--orange-bright); }

.accent { color: var(--orange); }

/* ── Layout ───────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }
section { padding: 104px 0; position: relative; }

/* ── Section headers ──────────────────────── */
.section-header { text-align: center; margin-bottom: 56px; max-width: 660px; margin-left: auto; margin-right: auto; }
.section-header p { font-size: 17px; margin-top: 14px; }

.section-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px; padding: 6px 14px;
  background: var(--orange-glow); border: 1px solid var(--border-orange); border-radius: 4px;
}

/* ── Scroll reveal ────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--transition), transform 0.7s var(--transition); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Buttons ──────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.01em;
  padding: 15px 28px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.2s var(--transition), box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn-primary { background: var(--orange); color: var(--bone); }
.btn-primary:hover { color: var(--bone); transform: translateY(-2px); box-shadow: 0 12px 34px var(--orange-glow-strong); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--text); border-color: var(--text); transform: translateY(-1px); }

/* ── Eyebrow (small live label) ───────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange-dim); background: var(--orange-glow); border: 1px solid var(--border-orange);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-glow); }

/* ── Nav ──────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0;
  background: rgba(244, 241, 234, 0.72);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border); transition: padding 0.3s, background 0.3s;
}
nav.scrolled { padding: 10px 0; background: rgba(244, 241, 234, 0.93); }
nav .container { display: flex; justify-content: space-between; align-items: center; }

.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nav-logo:hover { color: var(--text); }
/* Laurel-brand rebrand (June 2026): the nav shows the CHINCHECK wordmark
   image itself — no separate mark + text. */
.nav-wordmark { height: 20px; width: auto; display: block; }
.nav-mark { width: 30px; height: 30px; background: var(--brand-mark) center / contain no-repeat; flex-shrink: 0; border-radius: 7px; }

.nav-links { display: flex; gap: 30px; align-items: center; list-style: none; }
.nav-links a { color: var(--text-secondary); font-size: 14px; font-weight: 600; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }

.nav-cta {
  background: var(--orange) !important; color: var(--bone) !important;
  padding: 10px 18px; border-radius: 6px; font-weight: 700 !important; font-size: 13px !important;
  transition: transform 0.2s var(--transition), box-shadow 0.2s !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--orange-glow-strong); color: var(--bone) !important; }

.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-secondary); border-radius: 2px; transition: all 0.3s; }

/* ── Hero ─────────────────────────────────── */
.hero { padding-top: 132px; padding-bottom: 80px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, var(--orange-glow) 0%, transparent 65%);
  top: -280px; right: -240px; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
  bottom: -240px; left: -200px; opacity: 0.5; pointer-events: none;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy { max-width: 560px; }
.hero h1 { margin-bottom: 18px; }
.hero h1 .accent {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange), var(--orange-dim));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero .subtitle { font-size: 18px; color: var(--text-secondary); margin-bottom: 28px; line-height: 1.65; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-microcopy { font-size: 13px; color: var(--text-muted); margin-top: 18px; }

/* Official-style store badges — black pill, store logo, two-line label. */
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.store-row-center { justify-content: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #000; color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 9px 18px 9px 14px;
  text-decoration: none;
  transition: transform 0.2s var(--transition), box-shadow 0.2s;
}
.store-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,11,13,0.28); }
.store-badge-ico { width: 28px; height: 28px; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.08; text-align: left; }
.store-badge-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: #fff; }
.store-badge-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: #fff; }

/* ── Hero visual: phone + share card ──────── */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }

.phone {
  position: relative; width: 290px; border-radius: 38px; background: #050607;
  padding: 12px; box-shadow: var(--shadow-lift); z-index: 2;
}
.phone::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.18); z-index: 3; }
.phone-screen { background: var(--bg); border-radius: 28px; padding: 30px 18px 18px; overflow: hidden; }

.app-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-bottom: 10px; }

/* The black scorecard moment */
.verdict-slab { background: var(--ink); border-radius: 16px; padding: 22px 16px 18px; text-align: center; }
.verdict-score { font-family: var(--font-display); font-weight: 700; font-size: 58px; line-height: 1; color: var(--bone); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.verdict-tier { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.12em; margin-top: 8px; }
.verdict-caption { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-foil); margin-top: 8px; font-weight: 700; }
.verdict-strip { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin: 14px 0 10px; }
.vs-best { color: var(--green); } .vs-leak { color: var(--red); } .vs-dot { color: var(--text-dim); }
.verdict-progress { height: 6px; border-radius: 4px; background: rgba(10,11,13,0.08); overflow: hidden; }
.verdict-progress span { display: block; height: 100%; background: var(--orange); border-radius: 4px; }
.verdict-progress-label { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 6px; letter-spacing: 0.04em; }
.app-cta { display: block; width: 100%; margin-top: 14px; background: var(--orange); color: var(--bone); border: none; border-radius: 10px; padding: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; cursor: default; }

/* Floating / standalone share card */
.floating-card {
  position: absolute; right: -6px; bottom: 6px; width: 215px; z-index: 3;
  transform: rotate(4deg);
}
.floating-card, .sharecard {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 18px 16px; box-shadow: var(--shadow-card);
}
.sc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sc-brand { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--text); }
.sc-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: var(--orange); border: 1px solid var(--border-orange); border-radius: 4px; padding: 3px 7px; }
.sc-score { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--text); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sc-tier { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.12em; color: var(--gold); margin-top: 4px; }
.sc-roast { font-size: 12.5px; font-style: italic; color: var(--text); line-height: 1.5; margin-top: 12px; }
.sc-stats { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--text-secondary); }
.sc-stat b { font-weight: 700; margin-right: 4px; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sc-challenge { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--orange); }
.sc-qr { width: 38px; height: 38px; border-radius: 6px; background:
  repeating-conic-gradient(var(--ink) 0% 25%, var(--bg-raised) 0% 50%) 50% / 9px 9px;
  border: 2px solid var(--ink); }

/* ── Category strip ───────────────────────── */
.category-strip { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(10,11,13,0.02); }
.category-line { text-align: center; font-size: 16px; color: var(--text-secondary); max-width: 760px; margin: 0 auto 22px; }
.category-line strong { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip { font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 999px; padding: 8px 16px; }

/* ── How it works ─────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 1000px; margin: 0 auto; }
.step { text-align: center; }
.step-number { width: 54px; height: 54px; border-radius: 12px; background: var(--bg-raised); border: 2px solid var(--border-orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--orange); margin: 0 auto 18px; }
.step h3 { color: var(--text); margin-bottom: 8px; }
.step p { font-size: 15px; max-width: 240px; margin: 0 auto; }

/* ── Verdict / fix / challenge two-col blocks ── */
.verdict-grid, .challenge-grid, .fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.verdict-copy h2, .challenge-copy h2, .fix-copy h2 { margin-top: 6px; }

.check-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--text-secondary); }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange-glow); color: var(--orange-dim); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.challenge-copy .btn { margin-top: 26px; }

/* Verdict card (full, light with ink accents) */
.verdict-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px 30px; box-shadow: var(--shadow-card); max-width: 420px; }
.vc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.vc-score { font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 1; letter-spacing: -0.03em; color: var(--text); margin-top: 6px; font-variant-numeric: tabular-nums; }
.vc-out { font-size: 22px; color: var(--text-dim); font-weight: 600; letter-spacing: 0; }
.vc-tier { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.1em; margin-top: 4px; }
.vc-roast { font-size: 15px; font-style: italic; color: var(--text); line-height: 1.55; margin: 18px 0; }
.vc-rows { display: grid; gap: 0; border-top: 1px solid var(--border); }
.vc-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.vc-k { color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.vc-v { font-weight: 700; color: var(--text); }

/* ── Six metrics ──────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.metric-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius); padding: 28px 26px; transition: all 0.3s var(--transition); position: relative; overflow: hidden; }
.metric-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: top; transition: transform 0.35s var(--transition); }
.metric-card:hover { transform: translateY(-3px); border-color: var(--border-orange); box-shadow: var(--shadow-card); }
.metric-card:hover::before { transform: scaleY(1); }
.metric-name { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text); margin-bottom: 8px; }
.metric-card p { font-size: 14.5px; }

/* ── Share card (challenge section) ───────── */
.challenge-visual { display: flex; justify-content: center; }
.sharecard { width: 320px; }
.sharecard .sc-score { font-size: 64px; }

/* ── Fix pack ─────────────────────────────── */
.fix-visual { display: flex; justify-content: center; }
.fix-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 28px 28px 24px; box-shadow: var(--shadow-card); width: 340px; }
.fix-leak { display: flex; align-items: baseline; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fix-leak-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); width: 100%; }
.fix-leak-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text); }
.fix-leak-score { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-left: auto; font-variant-numeric: tabular-nums; }
.fix-pack-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 12px; }
.fix-pack { list-style: none; display: grid; gap: 10px; }
.fix-pack li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.fix-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.fix-card .app-cta { margin-top: 16px; }

/* ── Pricing ──────────────────────────────── */
.pricing { text-align: center; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 760px; margin: 0 auto; }
.price-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 16px; padding: 36px 30px; text-align: left; position: relative; transition: all 0.3s var(--transition); }
.price-card.featured { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-glow) 0%, var(--bg-card) 60%); box-shadow: 0 0 40px var(--gold-glow); }
.price-card.featured::before { content: 'MOST POPULAR'; position: absolute; top: -12px; left: 30px; background: var(--gold); color: #1A1614; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; padding: 5px 12px; border-radius: 4px; }
.price-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 4px; color: var(--text); }
.price-tagline { font-size: 14px; color: var(--text-secondary); margin-bottom: 18px; }
.price-amount { font-family: var(--font-display); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; color: var(--text); line-height: 1; margin-bottom: 8px; }
.price-amount small { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.price-features { list-style: none; margin-top: 18px; }
.price-features li { font-size: 14.5px; color: var(--text-secondary); padding: 8px 0 8px 26px; position: relative; }
.price-features li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 800; }
.pricing-reassure { margin-top: 28px; font-size: 13px; color: var(--text-muted); }

/* ── Trust ────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.trust-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius); padding: 26px 26px; }
.trust-card h3 { font-size: 17px; color: var(--text); margin-bottom: 8px; }
.trust-card p { font-size: 14.5px; }
.trust-links { text-align: center; margin-top: 28px; font-size: 15px; color: var(--text-secondary); }

/* ── Tier ladder ──────────────────────────── */
.tiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 980px; margin: 0 auto; }
.tier-card { position: relative; background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 12px; padding: 20px 20px; text-align: center; transition: all 0.3s var(--transition); overflow: hidden; }
.tier-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, var(--tier-color, transparent) 0%, transparent 62%); opacity: 0.10; transition: opacity 0.3s; }
.tier-card:hover { transform: translateY(-2px); border-color: var(--tier-color, var(--border-orange)); }
.tier-card:hover::before { opacity: 0.18; }
.tier-card.tier-top { border-color: var(--border-gold); }
.tier-range { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: 0.01em; color: var(--tier-color, var(--text)); line-height: 1.1; position: relative; z-index: 1; }

/* ── FAQ (homepage, <details>) ────────────── */
.faq-home .faq-list { max-width: 800px; margin: 0 auto; }
details.faq-item { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 12px; padding: 0; margin-bottom: 12px; transition: border-color 0.3s; }
details.faq-item[open] { border-color: var(--border-orange); }
details.faq-item summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 24px; position: relative; font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--text); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--orange); transition: transform 0.2s; }
details.faq-item[open] summary::after { content: '−'; }
details.faq-item p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; padding: 0 24px 20px; margin: 0; }

/* ── Final CTA ────────────────────────────── */
.final-cta { text-align: center; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; top: 50%; left: 50%; width: 700px; height: 700px; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--orange-glow) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.final-cta-content { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.final-cta h2 { margin-bottom: 14px; }
.final-cta p { font-size: 18px; margin-bottom: 30px; }
.final-cta .store-row { display: inline-flex; }

/* ── Footer ───────────────────────────────── */
footer { border-top: 1px solid var(--border); padding: 64px 0 40px; background: rgba(10, 11, 13, 0.03); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; }
.footer-left { display: flex; align-items: center; gap: 12px; }
.footer-mark { width: 28px; height: 28px; background: var(--brand-mark) center / contain no-repeat; flex-shrink: 0; border-radius: 6px; }
.footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.footer-tagline { font-size: 14px; color: var(--text-muted); margin-top: 14px; max-width: 280px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.footer-col a { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.footer-col a:hover { color: var(--text); }
/* Legacy footer (legal/contact pages) */
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.footer-links { display: flex; gap: 28px; list-style: none; }
.footer-links a { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.footer-links a:hover { color: var(--text); }
.footer-copy { text-align: center; margin-top: 40px; font-size: 12px; color: var(--text-dim); line-height: 1.6; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Legal pages ──────────────────────────── */
.legal-page { padding-top: 132px; padding-bottom: 80px; }
.legal-page h1 { font-size: clamp(34px, 6vw, 52px); margin-bottom: 8px; }
.legal-date { color: var(--text-dim); font-size: 13px; margin-bottom: 44px; letter-spacing: 0.06em; text-transform: uppercase; }
.legal-page h2 { color: var(--text); font-size: 24px; margin-top: 44px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.legal-page h3 { color: var(--orange); font-size: 17px; margin-top: 26px; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.legal-page p, .legal-page li { font-size: 15px; margin-bottom: 12px; color: var(--text-secondary); line-height: 1.75; }
.legal-page ul { padding-left: 24px; margin-bottom: 16px; }
.legal-page li { margin-bottom: 8px; }
.legal-highlight { background: var(--orange-glow); border-left: 3px solid var(--orange); padding: 22px 26px; border-radius: 8px; margin: 24px 0; }
.legal-highlight p { color: var(--text); margin-bottom: 0; }
.legal-highlight ul { margin-top: 10px; margin-bottom: 0; }
.legal-highlight strong { color: var(--text); }

/* ── Contact page ─────────────────────────── */
.contact-intro { max-width: 600px; text-align: center; margin: 0 auto; }
.contact-intro h1 { margin-bottom: 16px; }
.contact-intro p { font-size: 18px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 52px; }
.contact-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 12px; padding: 32px 28px; text-align: center; transition: all 0.3s var(--transition); }
.contact-card:hover { border-color: var(--border-orange); transform: translateY(-2px); }
.contact-icon { width: 52px; height: 52px; border-radius: 10px; background: var(--orange-glow); border: 1px solid var(--border-orange); display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 18px; }
.contact-card h3 { color: var(--text); margin-bottom: 10px; }
.contact-card p { font-size: 14px; margin-bottom: 16px; }
.contact-card a.contact-link { color: var(--orange); font-weight: 700; font-size: 14px; }
.contact-card a.contact-link:hover { color: var(--orange-bright); }
.faq-section { margin-top: 88px; }
.faq-section h2 { text-align: center; margin-bottom: 44px; }
/* Static FAQ items (contact page uses div + h3 + p) */
.faq-section .faq-item { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: 10px; padding: 24px 26px; margin-bottom: 12px; transition: border-color 0.3s; }
.faq-section .faq-item:hover { border-color: var(--border-orange); }
.faq-section .faq-item h3 { color: var(--text); font-size: 17px; margin-bottom: 10px; font-family: var(--font-body); font-weight: 700; }
.faq-section .faq-item p { font-size: 15px; margin-bottom: 0; color: var(--text-secondary); line-height: 1.7; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 620px; margin: 0 auto; text-align: center; }
  .hero-actions, .store-row { justify-content: center; }
  .hero-visual { min-height: 0; }
  .verdict-grid, .challenge-grid, .fix-grid { grid-template-columns: 1fr; gap: 36px; }
  .verdict-visual, .fix-visual, .challenge-visual { order: 2; }
  .verdict-card { max-width: 100%; margin: 0 auto; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  section { padding: 72px 0; }
  .container { padding: 0 20px; }
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(244, 241, 234, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    flex-direction: column; padding: 14px 24px 24px; gap: 4px; border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 0; font-size: 15px; }
  .nav-cta { text-align: center !important; margin-top: 8px; display: block; padding: 14px 20px !important; }

  .hero { padding-top: 116px; padding-bottom: 56px; }
  .hero h1 { font-size: 40px; }
  .hero .subtitle { font-size: 16px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .store-row { width: 100%; justify-content: center; }

  .hero-visual { flex-direction: column; }
  .phone { width: 250px; }
  .floating-card { position: relative; right: auto; bottom: auto; transform: none; margin: -28px auto 0; width: 230px; }

  .steps, .metrics-grid, .pricing-grid, .trust-grid, .tiers-grid { grid-template-columns: 1fr; gap: 14px; }
  .step p { max-width: 320px; }
  .section-header { margin-bottom: 36px; }
  .price-card { text-align: left; }
  .sharecard { width: 100%; max-width: 340px; }
  .fix-card { width: 100%; max-width: 360px; }

  .footer-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer-content { flex-direction: column; gap: 22px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .tiers-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid, .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v11 — Landing overhaul (June 2026)
   Dark "fight night" ceremony hero + real-screenshot slots +
   roast wall + ceremony final CTA. ADDITIVE ONLY: shared pages
   (contact/privacy/terms) keep using the classes above.
   ============================================================ */

/* ── Ceremony hero — matches the app's black/gold splash ───── */
.hero-ink {
  background: #050607;
  padding-top: 132px; padding-bottom: 88px;
  position: relative; overflow: hidden;
}
.hero-ink::before {
  content: ''; position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(229,200,121,0.10) 0%, transparent 62%);
  top: -320px; left: -260px; pointer-events: none;
}
.hero-ink::after {
  content: ''; position: absolute; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,0.12) 0%, transparent 65%);
  bottom: -280px; right: -200px; pointer-events: none;
}
.hero-ink .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-ink .hero-copy { max-width: 560px; }
.hero-ink h1 { color: #F2F0EA; margin-bottom: 18px; }
.hero-ink h1 .accent {
  background: linear-gradient(135deg, var(--orange-bright), var(--orange));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-ink .subtitle { font-size: 18px; color: rgba(242,240,234,0.72); margin-bottom: 28px; line-height: 1.65; }
.hero-ink .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-ink .hero-microcopy { font-size: 13px; color: rgba(242,240,234,0.45); margin-top: 18px; }

/* Gold eyebrow on ink */
.eyebrow-ink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #E5C879; background: rgba(229,200,121,0.08); border: 1px solid rgba(229,200,121,0.28);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow-ink::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E5C879; box-shadow: 0 0 0 4px rgba(229,200,121,0.15); }

/* Ghost button that reads on ink */
.btn-ghost-ink { background: transparent; color: #F2F0EA; border-color: rgba(242,240,234,0.28); }
.btn-ghost-ink:hover { color: #F2F0EA; border-color: rgba(242,240,234,0.6); transform: translateY(-1px); }

/* Store badges sit on ink — give the black pill a visible edge */
.hero-ink .store-badge, .final-ink .store-badge { border-color: rgba(255,255,255,0.34); background: #0C0D10; }

/* ── Real-screenshot slots ──────────────────────────────────
   Every slot renders a labeled dashed placeholder; when the
   real PNG lands in /shots/ the <img> covers it. */
.shot-screen { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 9 / 19.5; background: #0A0B0D; }
.shot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-fallback {
  position: absolute; inset: 10px; border: 2px dashed rgba(242,240,234,0.16); border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 18px;
}
.shot-fallback b { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.14em; color: rgba(242,240,234,0.55); text-transform: uppercase; }
.shot-fallback small { font-size: 11px; color: rgba(242,240,234,0.32); font-family: monospace; }

/* Floating real share card beside the hero phone. Landscape (1080×600):
   matches the exported info card the founder supplied — the artifact people
   actually drop in group chats. (Was authored 9/16 for a portrait card.) */
.float-shot {
  position: absolute; right: -16px; bottom: -10px; width: 300px; aspect-ratio: 1.8 / 1;
  border-radius: 14px; overflow: hidden; background: #0E0F12;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  transform: rotate(-5deg); z-index: 3;
}
.float-shot .shot-fallback { inset: 8px; border-radius: 8px; }
.float-shot .shot-img { object-fit: cover; }

/* ── How-it-works filmstrip (3 real screens) ────────────────── */
.filmstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 880px; margin: 56px auto 0; }
.film-shot { border-radius: 22px; overflow: hidden; position: relative; aspect-ratio: 9 / 19.5; background: var(--ink); box-shadow: var(--shadow-card); }
.film-shot .shot-fallback { inset: 8px; border-radius: 16px; }
.film-caption { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Roast wall — personality as proof ──────────────────────── */
.roast-wall { background: var(--ink); position: relative; overflow: hidden; }
.roast-wall::before {
  content: ''; position: absolute; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(229,200,121,0.07) 0%, transparent 65%);
  top: -300px; right: -220px; pointer-events: none;
}
.roast-wall .section-header h2 { color: #F2F0EA; }
.roast-wall .section-header p { color: rgba(242,240,234,0.6); }
.roast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 920px; margin: 0 auto; position: relative; z-index: 2; }
.roast-card {
  background: #0E0F12; border: 1px solid rgba(242,240,234,0.07);
  border-left: 3px solid var(--tier-color, #E5C879);
  border-radius: 12px; padding: 24px 26px;
}
.roast-quote { font-size: 17px; line-height: 1.6; color: rgba(242,240,234,0.92); font-style: italic; margin-bottom: 14px; }
.roast-meta { display: flex; align-items: baseline; gap: 10px; }
.roast-score { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #F2F0EA; font-variant-numeric: tabular-nums; }
.roast-tier { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--tier-color, #E5C879); text-transform: uppercase; }

/* ── Ceremony final CTA ─────────────────────────────────────── */
.final-ink {
  background: #050607; position: relative; overflow: hidden; text-align: center;
}
.final-ink::before {
  content: ''; position: absolute; width: 860px; height: 860px; border-radius: 50%; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(229,200,121,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.final-ink .final-cta-content { position: relative; z-index: 2; }
.final-lockup { width: 280px; max-width: 70vw; height: auto; margin: 0 auto 26px; display: block; }
.final-ink h2 { color: #F2F0EA; }
.final-ink p { color: rgba(242,240,234,0.65); max-width: 460px; margin: 14px auto 28px; }

/* ============================================================
   v12 — FULL-DARK landing (body.page-ink, index.html only)
   One world: black canvas, bone text, gold ceremony, orange action.
   The half-light/half-dark v11 page read as indecision. Scoped so
   contact/privacy/terms keep the light theme above.
   ============================================================ */
body.page-ink {
  background: #050607; color: #F2F0EA;
  /* v13: re-point the DESIGN TOKENS for the dark page. The v12 pass overrode
     selectors but left the :root tokens at their bone-shell values, so every
     component that reads var(--text)/var(--bg-card)/etc. kept ink-on-ink text
     (the verdict card score, fix-leak name) or a white card with bone text
     (the share-card mock). Re-pointing the variables fixes ALL consumers. */
  --bg: #050607;
  --bg-raised: #0C0D10;
  --bg-card: #0C0D10;
  --bg-card-hover: rgba(255, 90, 31, 0.08);
  --bg-card-border: rgba(242, 240, 234, 0.10);
  --gold: #E5C879;            /* bronze-on-bone → foil on ink */
  --gold-bright: #EDD491;
  --gold-glow: rgba(229, 200, 121, 0.16);
  --green: #2EBD6B;           /* trend colors brightened for dark */
  --red: #FF6B7D;
  --orange-dim: #FF7339;      /* orange-as-text needs the bright variant */
  --text: #F2F0EA;
  --text-secondary: rgba(242, 240, 234, 0.72);
  --text-muted: rgba(242, 240, 234, 0.55);
  --text-dim: rgba(242, 240, 234, 0.38);
  --border: rgba(242, 240, 234, 0.10);
  --border-strong: rgba(242, 240, 234, 0.18);
  --border-gold: rgba(229, 200, 121, 0.32);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 24px 70px rgba(0, 0, 0, 0.7);
  --brand-mark: url("monogram.png?v=9"); /* white monogram on dark */
}

/* Mock QR on the share-card mock — the light-shell checker mixed --ink with
   --bg-raised, which are both near-black here. Bone-on-ink reads as a QR. */
body.page-ink .sc-qr {
  background: repeating-conic-gradient(#F2F0EA 0% 25%, #0A0B0D 0% 50%) 50% / 9px 9px;
  border-color: rgba(242, 240, 234, 0.28);
}

/* CTA fills — the app's buttons use the deeper #E84E18 (bone label passes
   large-text AA on it); raw #FF5A1F sat just under. Hover keeps the bright
   orange as the lift. */
body.page-ink .btn-primary, body.page-ink .app-cta { background: #E84E18; }
body.page-ink .nav-cta { background: #E84E18 !important; } /* base rule is !important */
body.page-ink .btn-primary:hover, body.page-ink .nav-cta:hover { background: var(--orange) !important; }

/* ── v15: real framed-device mockups (founder-supplied, alpha-trimmed) ──
   The CSS-drawn .phone frame is retired on this page — an actual titanium
   iPhone with a real screenshot inside reads premium in a way a border-radius
   rectangle never will. Transparent PNGs float on the ink canvas with true
   drop-shadows; a gold ring-light glows behind the hero device. */
.hero-device {
  width: min(380px, 82vw); height: auto; display: block;
  position: relative; z-index: 2;
  filter: drop-shadow(0 44px 80px rgba(0, 0, 0, 0.66));
}
.hero-visual::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 580px; height: 580px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(229,200,121,0.13) 0%, rgba(255,90,31,0.05) 45%, transparent 70%);
  pointer-events: none;
}
.film-device {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.55));
}
/* The share card drifts gently beside the hero phone — desktop only (the
   mobile layout un-rotates it), and never under reduced motion. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  @keyframes cardFloat {
    from { transform: rotate(-5deg) translateY(0); }
    to   { transform: rotate(-5deg) translateY(-12px); }
  }
  .float-shot { animation: cardFloat 5.5s ease-in-out infinite alternate; }
}

/* ── v16: unified dark shell on legal/contact + footer wordmark ─────── */

/* Footer brand = the wordmark image on every page (the old .footer-mark
   monogram was the pre-laurel C logo — retired). */
.footer-wordmark { height: 18px; width: auto; display: block; opacity: 0.92; }

/* Legal pages under page-ink: keep the Barlow poster voice but at section
   scale — the global page-ink h2 clamp(36-58px) is hero-sized and would
   shout every numbered clause. */
body.page-ink .legal-page h1 { font-size: clamp(44px, 6.5vw, 72px); }
body.page-ink .legal-page h2 { font-size: 27px; line-height: 1.12; }
body.page-ink .legal-page h3 { color: var(--orange-bright); }
body.page-ink .legal-highlight { background: rgba(255, 90, 31, 0.10); }
body.page-ink .faq-section h2 { font-size: clamp(30px, 4.5vw, 44px); }

/* (v16 mobile screenshot rules live inside the v11 responsive block at the
   end of the file — they must come after the original .float-shot/.filmstrip
   640px rules to win the cascade.) */

/* v17: the challenge section shows a REAL exported fight card (the CSS
   .sharecard mock is retired on this page — actual product art converts). */
.sharecard-img {
  width: 100%; max-width: 480px; height: auto; display: block;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(2deg);
}

/* Poster display type — Barlow Condensed matches the laurel lockup's
   condensed-italic letterforms; headlines + logo finally agree. */
body.page-ink h1, body.page-ink h2 {
  font-family: 'Barlow Condensed', var(--font-display);
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: 0.01em; color: #F2F0EA;
}
body.page-ink h1 { font-size: clamp(56px, 9vw, 104px); line-height: 0.96; }
body.page-ink h2 { font-size: clamp(36px, 5.4vw, 58px); line-height: 1.0; }
body.page-ink h3 { color: #F2F0EA; }
body.page-ink p { color: rgba(242,240,234,0.66); }

/* Nav — dark glass */
body.page-ink nav { background: rgba(5,6,7,0.78); border-bottom-color: rgba(242,240,234,0.08); }
body.page-ink nav.scrolled { background: rgba(5,6,7,0.94); }
body.page-ink .nav-links a { color: rgba(242,240,234,0.62); }
body.page-ink .nav-links a:hover { color: #F2F0EA; }
body.page-ink .nav-hamburger span { background: rgba(242,240,234,0.7); }
@media (max-width: 980px) {
  body.page-ink .nav-links { background: rgba(5,6,7,0.97); }
}

/* Section labels — gold ceremony chips everywhere */
body.page-ink .section-label {
  color: #E5C879; background: rgba(229,200,121,0.08); border-color: rgba(229,200,121,0.3);
}
body.page-ink .section-header p { color: rgba(242,240,234,0.6); }

/* Strip + chips */
body.page-ink .category-strip { background: #07080A; border-top: 1px solid rgba(242,240,234,0.06); border-bottom: 1px solid rgba(242,240,234,0.06); }
body.page-ink .category-line { color: rgba(242,240,234,0.7); }
body.page-ink .category-line strong { color: #F2F0EA; }
body.page-ink .chip { background: rgba(242,240,234,0.05); border: 1px solid rgba(242,240,234,0.12); color: rgba(242,240,234,0.75); }

/* Cards — one dark surface system */
body.page-ink .step, body.page-ink .metric-card, body.page-ink .trust-card,
body.page-ink .price-card, body.page-ink .tier-card, body.page-ink .faq-item,
body.page-ink .fix-card, body.page-ink .verdict-card {
  background: #0C0D10; border-color: rgba(242,240,234,0.08);
}
body.page-ink .step p, body.page-ink .metric-card p, body.page-ink .trust-card p { color: rgba(242,240,234,0.6); }
body.page-ink .metric-name { color: #E5C879; font-family: 'Barlow Condensed', var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 22px; letter-spacing: 0.04em; }
body.page-ink .check-list li { color: rgba(242,240,234,0.78); }

/* Tier ladder pops harder on black */
body.page-ink .tier-card { border-left: 3px solid var(--tier-color); }
body.page-ink .tier-name { color: #F2F0EA; font-family: 'Barlow Condensed', var(--font-display); font-weight: 700; font-style: italic; text-transform: uppercase; font-size: 20px; letter-spacing: 0.04em; }
body.page-ink .tier-range { color: var(--tier-color); }
body.page-ink .tier-top { border-color: #E5C879; box-shadow: 0 0 32px rgba(229,200,121,0.12); }

/* Pricing — Pro card gets the gold ceremony */
body.page-ink .price-amount { font-family: 'Barlow Condensed', var(--font-display); font-weight: 800; font-style: italic; color: #F2F0EA; }
body.page-ink .price-name { color: #F2F0EA; }
body.page-ink .price-tagline { color: rgba(242,240,234,0.55); }
body.page-ink .price-features li { color: rgba(242,240,234,0.75); }
body.page-ink .price-card.featured { border-color: rgba(229,200,121,0.55); box-shadow: 0 0 48px rgba(229,200,121,0.10); }
body.page-ink .price-card.featured .price-name { color: #E5C879; }
body.page-ink .pricing-reassure { color: rgba(242,240,234,0.4); }

/* FAQ */
body.page-ink .faq-item summary { color: #F2F0EA; }
body.page-ink .faq-item p { color: rgba(242,240,234,0.62); }
body.page-ink .faq-item p a { color: var(--orange-bright); }

/* Trust links + misc links on ink */
body.page-ink .trust-links { color: rgba(242,240,234,0.5); }
body.page-ink .trust-links a { color: var(--orange-bright); }

/* Footer */
body.page-ink footer { background: #07080A; border-top: 1px solid rgba(242,240,234,0.07); }
body.page-ink .footer-mark { display: none; }
body.page-ink .footer-brand { color: #F2F0EA; }
body.page-ink .footer-tagline, body.page-ink .footer-copy { color: rgba(242,240,234,0.42); }
body.page-ink .footer-col a { color: rgba(242,240,234,0.55); }
body.page-ink .footer-col a:hover { color: #F2F0EA; }
body.page-ink .footer-col-title { color: rgba(242,240,234,0.35); }

/* Ghost buttons read on ink page-wide */
body.page-ink .btn-ghost { color: #F2F0EA; border-color: rgba(242,240,234,0.28); }
body.page-ink .btn-ghost:hover { color: #F2F0EA; border-color: rgba(242,240,234,0.6); }

/* Surface alternation: every other section lifts off pure black */
body.page-ink .how-it-works, body.page-ink .challenge-section, body.page-ink .tiers-section { background: #07080A; }

/* Hero h1 accent keeps the orange gradient pop at poster size */
body.page-ink .hero-ink h1 .accent {
  background: linear-gradient(120deg, #FF7339, #FF5A1F 70%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── v11 responsive ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-ink .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-ink .hero-visual { min-height: 0; }
}
@media (max-width: 640px) {
  .hero-ink { padding-top: 108px; padding-bottom: 56px; }
  /* v18: kill horizontal page pan on real mobile browsers. clip on body
     alone wasn't enough on iOS Safari (it still pans when true overflow
     exists, and the pan gesture then steals the carousel swipe — founder:
     "the page isn't sturdy"). Belt: clip on BOTH html and body (hidden as
     the fallback for older engines). Suspenders: the actual overflow source
     is fixed below — the filmstrip's bleed margins now match the MOBILE
     container padding (20px; they were tuned to the desktop 28px and poked
     8px past each edge). */
  html, body { overflow-x: hidden; overflow-x: clip; }
  /* v16: bigger hero device, share card overlapping its lower-right corner —
     a composed collage instead of two stacked blocks. */
  .hero-device { width: min(344px, 90vw); }
  .float-shot { position: relative; right: auto; bottom: auto; margin: -76px 6px 0 auto; width: 246px; transform: rotate(-4deg); }
  /* v16: filmstrip becomes a swipeable, edge-to-edge snap carousel — three
     stacked full-width phones was a scroll canyon. */
  .filmstrip {
    display: flex; max-width: none; gap: 16px;
    margin: 44px -20px 0; padding: 10px 20px 22px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* Contain the swipe: horizontal pans that start on the strip stay on
       the strip (no handoff to the page), and reaching the strip's end
       doesn't chain-scroll the page. */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .filmstrip::-webkit-scrollbar { display: none; }
  .filmstrip > div { flex: 0 0 64vw; scroll-snap-align: center; }
  .roast-grid { grid-template-columns: 1fr; }
  .final-lockup { width: 220px; }
}