/* ============================================
   Design system: see brand/design-system.md
   Voice / message: see brand/voice-and-message.md
   ============================================ */

/* ============================================
   PALETTE STATUS, Aug 12, 2026.

   Turmeric Yellow palette applied Aug 11. Display font changed from
   Paytone One to Outfit Aug 12 after Kevin rejected Paytone One as
   too rounded and childish. Evidence: Halbert Ch. 18 says layout should
   not cause reader to notice the layout. Paytone One violated that rule.

   Display: Outfit 800 (h1), 700 (h2), 600 (h3). Body: Poppins 400-700.
   Palette: cream bg, turmeric yellow accent (#FFC629), dark amber text.

   The --veg-* tokens are settled. They are the real colors of the real
   ferments and they carry the Brine Bar band at the bottom of this file.
   ============================================ */
:root {
  --bg: #F5F0E8;
  --bg-card: #FFFFFF;
  --bg-tint: #FFF8E6;
  --text: #1A1A1A;
  --text-muted: #6B6560;
  --accent: #FFC629;
  --accent-dark: #B06A00;
  --accent-light: #FFF3D1;
  --border: #E0DCD6;
  --amber: #B06A00;
  --amber-bg: #FFF8E6;
  --star: #FFC629;
  --rust: #D92B20;
  --rust-bg: #FDE8E8;

  /* The product colors. These are the lineup, and they are brand assets. */
  --veg-onion: #e8256b;
  --veg-cabbage: #7b3fa0;
  --veg-carrot: #f2811d;
  --veg-chili: #d92b20;
  --veg-dill: #6a9a29;
  --veg-turmeric: #ffc629;
  --veg-beet: #a01b4a;
  --veg-spirulina: #12868c;
  --veg-gold: #d8a53a;
  --veg-coconut: #f0e4c8;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(16, 23, 26, 0.07);
  --shadow-lg: 0 8px 40px rgba(16, 23, 26, 0.1);
  --shadow-img: 0 18px 50px rgba(9, 63, 63, 0.18);

  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  --space: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); }

.container { width: min(1120px, 92vw); margin-inline: auto; }
.narrow { max-width: 46rem; }
.center-block { text-align: center; }

h1, h2, h3 { font-family: var(--font-display); color: var(--accent-dark); }
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.6rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}

.site-header .container {
  display: flex; align-items: center; gap: 1.25rem;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
}
.site-nav a:hover { color: var(--accent-dark); }
.site-nav a[aria-current="page"] {
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.nav-cta {
  display: inline-block;
  padding: 0.55rem 1.15rem;
  background: var(--accent);
  color: #000 !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.nav-cta:hover { background: var(--accent-dark); }

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 0.5rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
}

.center-cta { text-align: center; margin: 2.5rem 0 0; }

/* ---------- Failure-first pain block (funnel) ---------- */
.section-pain { padding-top: 2rem; padding-bottom: 2rem; }
.pain-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--rust);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
}
.pain-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.pain-list li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  color: var(--text-muted);
}
.pain-list li:last-child { border-bottom: none; }
.pain-list strong { color: var(--text); }
.pain-open {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.pain-close {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent-dark);
  line-height: 1.45;
}

/* ---------- Community page ---------- */
.community-hero {
  padding: 3.5rem 0 0;
  text-align: center;
}
.community-hero .container { max-width: 46rem; }
.community-hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.6rem);
  margin: 0 0 1rem;
  line-height: 1.08;
}
.community-hero .lead { margin: 0 auto 1.75rem; font-size: 1.12rem; color: var(--text-muted); }
.community-hero .hero-cta { justify-content: center; }
.community-hero-figure { margin: 3rem 0 0; }
.community-hero-figure img {
  width: 100%;
  max-width: 1200px;
  max-height: 450px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-img);
}

.life-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.life-card { margin: 0; }
.life-card-wide { grid-column: 1 / -1; }
.life-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.life-card-wide img { aspect-ratio: 21 / 9; }
.life-card figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
}

.community-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.community-feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.feature-icon {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.community-feature h3 { margin: 0 0 0.5rem; font-size: 1.12rem; }
.community-feature p { margin: 0; color: var(--text-muted); font-size: 0.96rem; }

.rhythm-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.rhythm-day {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
}
.rhythm-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}
.rhythm-day p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.rhythm-impact { margin-top: 0; }

/* ---------- Hero ---------- */
.hero-split { padding: 3.5rem 0 3rem; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-light);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.hero-copy h1 {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  letter-spacing: -0.025em;
}

.hero-copy .lead {
  font-size: 1.18rem;
  color: var(--text-muted);
  margin: 0 0 1.9rem;
  max-width: 34rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-copy .mentor {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--accent-dark);
  margin: 1.6rem 0 0;
}

.hero-figure { margin: 0 auto; max-width: 520px; }
.hero-figure img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-img);
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-card); color: var(--accent-dark); border: 2px solid var(--accent); }
.btn-secondary:hover { border-color: var(--accent-dark); }

/* ---------- Trust bar ---------- */
.trust-bar {
  background: var(--accent-dark);
  color: #fff;
  padding: 0.9rem 0;
  font-size: 0.9rem;
}
.trust-bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; justify-content: center;
}
.trust-bar li { opacity: 0.93; position: relative; }
.trust-bar li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.95rem;
  opacity: 0.45;
}

/* ---------- Sections ---------- */
.section { padding: var(--space) 0; }
.section-alt { background: var(--bg-card); border-block: 1px solid var(--border); }
.section-tint { background: var(--bg-tint); }

.section-head { margin-bottom: 2.5rem; }
.section-head.center { text-align: center; }
.section h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin: 0 0 0.7rem; letter-spacing: -0.015em; line-height: 1.2; }
.section-intro { color: var(--text-muted); max-width: 44rem; margin: 0; }
.section-head.center .section-intro { margin-inline: auto; }

.big-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text);
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

/* ---------- The course ---------- */
.course-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 3rem;
  align-items: start;
}
.course-copy h2 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); margin: 0 0 0.75rem; }
.course-lead { font-size: 1.05rem; color: var(--text-muted); margin: 0 0 1.25rem; max-width: 34rem; }
.course-price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 1.5rem;
}
.course-price-note {
  display: block;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.course-includes {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.course-includes li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.4rem;
  font-size: 0.98rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.course-includes li:last-child { border-bottom: none; }
.course-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-dark);
  font-weight: 700;
}
.btn-lg { padding: 0.95rem 1.75rem; font-size: 1.05rem; }
.course-fine { font-size: 0.88rem; color: var(--text-muted); margin: 1rem 0 0; }
.bundle-mention { margin-top: 1.5rem; padding: 1.25rem; background: var(--amber-bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.bundle-mention h4 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--amber); }
.bundle-mention p { font-size: 0.92rem; margin: 0; }
.course-modules {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.course-modules h3 { margin: 0 0 1.1rem; font-size: 1.05rem; }
.module-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mod;
}
.module-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.module-list li:last-child { border-bottom: none; }
.module-list li strong { color: var(--text); font-weight: 600; }
.module-list li span { white-space: nowrap; font-size: 0.82rem; }
.module-total {
  margin: 1.1rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.calc-upsell {
  margin: 1.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-muted);
}
.calc-upsell a { color: var(--accent-dark); font-weight: 600; }
.capture-box a { color: var(--accent-light); }

/* ---------- The society (two doors) ---------- */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.door {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.door:hover {
  border-color: var(--accent-dark);
  box-shadow: var(--shadow);
}
.door-active {
  border-color: var(--accent-dark);
  background: var(--accent-light);
}
.door-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.5rem;
}
.door h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.door p { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--text-muted); }
.door-link { font-size: 0.9rem; font-weight: 600; color: var(--accent-dark); }
.doors-fine {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
  font-size: 0.93rem;
  color: var(--text-muted);
}

/* ---------- Bread line ---------- */
.section-bread {
  background: linear-gradient(180deg, var(--amber-bg) 0%, var(--bg) 28%);
  border-block: 1px solid var(--border);
}
.bread-hero { margin-bottom: 3rem; }
.swap-bread { margin-bottom: 3rem; }
.section-bread .benefit-grid { margin-bottom: 3rem; }
.bread-capture {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.bread-capture h3 { margin: 0 0 0.5rem; }
.bread-capture > p {
  max-width: 32rem;
  margin: 0 auto 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.capture-form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  max-width: 28rem;
  margin: 0 auto;
}
.capture-form-inline input[type="email"] {
  flex: 1 1 200px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.capture-form-inline button {
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.capture-form-inline button:hover { background: var(--accent-dark); }

/* ---------- The swap ---------- */
.swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
}

.swap-col {
  border-radius: var(--radius);
  padding: 1.75rem 1.6rem;
  height: 100%;
}
.swap-bad { background: var(--rust-bg); border: 1px solid #eddcd4; }
.swap-good { background: var(--accent-light); border: 1px solid #d3e3d8; }

.swap-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.swap-bad .swap-label { color: var(--rust); }
.swap-good .swap-label { color: var(--accent-dark); }

.swap-col ul { list-style: none; margin: 0; padding: 0; }
.swap-col li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  font-size: 0.97rem;
  line-height: 1.5;
}
.swap-col li + li { border-top: 1px solid rgba(44, 40, 37, 0.07); }
.swap-bad li::before {
  content: "×";
  position: absolute; left: 0; top: 0.45rem;
  color: var(--rust); font-weight: 700; font-size: 1.1rem;
}
.swap-good li::before {
  content: "✓";
  position: absolute; left: 0; top: 0.5rem;
  color: var(--accent-dark); font-weight: 700;
}

.swap-arrow {
  font-size: 2rem;
  color: var(--text-muted);
  opacity: 0.5;
}

/* ---------- Wide figures ---------- */
.wide-figure { margin: 0 auto; max-width: 520px; }
.wide-figure-lg { max-width: 620px; margin-bottom: 2.5rem; }
.wide-figure img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-img);
}
.wide-figure figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---------- Benefits ---------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem 2.5rem;
  margin-bottom: 3.5rem;
}
.benefit {
  position: relative;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.benefit-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-light);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.benefit h3 { font-size: 1.18rem; margin: 0 0 0.5rem; }
.benefit p { margin: 0; color: var(--text-muted); font-size: 0.98rem; }

/* ---------- Honesty block ---------- */
.honesty {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: center;
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.honesty img { border-radius: var(--radius); box-shadow: var(--shadow); }
.honesty blockquote { margin: 0; }
.honesty blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--accent-dark);
  margin: 0 0 1rem;
}
.honesty cite {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---------- Taste ---------- */
.taste-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.9vw, 1.85rem);
  line-height: 1.4;
  color: var(--accent-dark);
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 3rem;
}
.taste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.25rem 3rem;
}
#taste .wide-figure { margin-bottom: 2.75rem; }
.flavour {
  border-top: 3px solid var(--accent);
  padding-top: 1rem;
}
.flavour h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.flavour p { margin: 0; color: var(--text-muted); font-size: 0.98rem; }

/* ---------- The pantry ---------- */
.pantry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.pantry-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
}
.panel-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}
.pantry-panel p { color: var(--text-muted); font-size: 0.98rem; margin: 0 0 0.9rem; }
.pantry-panel p:last-child { margin-bottom: 0; }
.pantry-panel .pantry-punch {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--accent-dark);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-block: 1.25rem;
}
.shelf-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.1rem;
}
.shelf-table th, .shelf-table td {
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.shelf-table tr:last-child th, .shelf-table tr:last-child td { border-bottom: none; }
.shelf-table th { font-weight: 600; }
.shelf-table th span {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.shelf-table td {
  text-align: right;
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
}
.pantry-panel .pantry-fine { font-size: 0.9rem; }
.pantry-note {
  max-width: 46rem;
  margin: 0 auto 2.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.93rem;
}
.pantry-history {
  background: var(--amber-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  max-width: 50rem;
  margin-inline: auto;
}
.pantry-history p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #6a5210;
}
.pantry-history strong { color: var(--amber); }

/* Kevin's calm-capability beat. Sits under the pantry note, own voice, own colour. */
.pantry-calm {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  margin-top: 2rem;
}
.pantry-calm p {
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-size: 1.02rem;
}
.pantry-calm p:last-child { margin-bottom: 0; }

/* ---------- Brine Bar tour (brine funnel) ---------- */
.live-brine-callout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.live-brine-copy p {
  color: var(--text-muted);
  margin: 0 0 1rem;
  font-size: 0.98rem;
}
.live-brine-lead {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.45;
  color: var(--accent-dark) !important;
}
.live-brine-punch {
  font-weight: 600;
  color: var(--text) !important;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-top: 1.25rem !important;
}
.live-brine-figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-img);
}
.live-brine-figure figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.flavor-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.flavor-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.flavor-gold { background: #c4a035; }
.flavor-yellow { background: #e8b923; }
.flavor-red { background: #9c3d3d; }
.flavor-blue { background: #3a7ca5; }
.flavor-pink { background: #d4799a; }
.flavor-orange { background: #d97b32; }
.flavor-coral { background: #e07a6a; }
.flavor-cream { background: #e8dcc4; border: 1px solid var(--border); }
.brine-bar-note,
.center-muted {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.day-tour {
  display: grid;
  gap: 1rem;
  max-width: 52rem;
  margin-inline: auto;
}
.day-slot {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
}
.day-time {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  padding-top: 0.2rem;
}
.day-slot h3 {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  color: var(--accent-dark);
}
.day-slot p {
  margin: 0;
  grid-column: 2;
  color: var(--text-muted);
  font-size: 0.96rem;
}
.learn-stack {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 56rem;
  margin-inline: auto;
}
.learn-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
}
.learn-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.35rem;
}
.learn-do strong,
.learn-get strong {
  display: block;
  font-size: 1.05rem;
  color: var(--accent-dark);
  margin-bottom: 0.35rem;
}
.learn-do p,
.learn-get p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-muted);
}
.learn-arrow {
  font-size: 1.4rem;
  color: var(--accent-dark);
  font-weight: 700;
  line-height: 1;
}
.learn-close { margin-bottom: 2rem; }
.learn-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.voice-cards .voice-card { border-top: 3px solid var(--star); }
.voice-disclaimer {
  max-width: 40rem;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.voice-pull {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  line-height: 1.4;
  color: var(--accent-dark);
  text-align: center;
  max-width: 28rem;
  margin: 1.25rem auto 0;
  font-style: italic;
}
.brine-tour-block {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.brine-tour-block-spaced { margin-top: 3.5rem; }
.brine-tour-heading {
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  color: var(--accent-dark);
  margin: 0 0 1.25rem;
  text-align: center;
}
.brine-tour-intro h3 {
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  color: var(--accent-dark);
  margin: 0.35rem 0 0.75rem;
}
.brine-tour-intro .center-muted { margin-bottom: 0; }
.brine-steps {
  max-width: 44rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  display: grid;
  gap: 1rem;
}
.brine-steps li {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.brine-steps strong { color: var(--accent-dark); }
.brine-recipe-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.brine-recipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.brine-recipe-card h3,
.brine-recipe-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1.12rem;
  color: var(--accent-dark);
}
.brine-recipe-card p {
  margin: 0 0 1rem;
  font-size: 0.93rem;
  color: var(--text-muted);
}
.mini-table,
.shot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.mini-table th,
.shot-table th {
  text-align: left;
  font-weight: 600;
  color: var(--accent-dark);
  padding: 0.4rem 0.65rem 0.4rem 0;
  vertical-align: top;
  white-space: nowrap;
}
.mini-table td,
.shot-table td {
  color: var(--text-muted);
  padding: 0.4rem 0;
  vertical-align: top;
}
.shot-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.shot-table tbody td {
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.65rem 0.55rem 0;
}
.shot-table tbody td:first-child { font-weight: 600; color: var(--accent-dark); }
.shot-dose {
  margin: 1rem 0 0 !important;
  font-size: 0.88rem !important;
  font-weight: 600;
  color: var(--text) !important;
}
.brine-tour-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.brine-tour-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.brine-tour-panel h3 {
  margin: 0 0 0.65rem;
  font-size: 1.12rem;
  color: var(--accent-dark);
}
.brine-tour-panel p {
  margin: 0 0 0.85rem;
  font-size: 0.93rem;
  color: var(--text-muted);
}
.brine-tour-panel p:last-child { margin-bottom: 0; }
.brine-cost-panel { background: var(--amber-bg); border-color: #e8dcc0; }
.brine-cost-panel h3,
.brine-cost-panel p { color: #6a5210; }
.brine-cost-punch {
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  line-height: 1.45 !important;
  border-left: 3px solid var(--amber);
  padding-left: 0.85rem;
  margin-top: 1rem !important;
}
.brine-sell-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.55rem;
}
.brine-sell-list li {
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.5;
}
.brine-cost-panel .btn { margin-top: 1rem; }
.brine-tour-cta { margin-top: 3rem; padding-top: 1rem; }
.day-slot h4 {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  color: var(--accent-dark);
}

/* ---------- Halbert sell blocks (brine funnel) ---------- */
.sell-letter {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}
.sell-letter h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  line-height: 1.25;
  color: var(--accent-dark);
  margin: 0.5rem 0 1.25rem;
}
.sell-letter p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.sell-punch {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem) !important;
  line-height: 1.45 !important;
  color: var(--accent-dark) !important;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-top: 1.5rem !important;
}
.sell-figure { margin-bottom: 2.5rem; }
.sell-block {
  max-width: 46rem;
  margin: 0 auto 2.75rem;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sell-block-alt { background: var(--bg); }
.sell-block h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  color: var(--accent-dark);
}
.sell-block > p {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}
.sell-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.sell-benefits li {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-left: 1rem;
  border-left: 3px solid var(--accent-light);
}
.sell-benefits strong { color: var(--accent-dark); }
.sell-flavor-close {
  text-align: center;
  max-width: 36rem;
  margin: 1.25rem auto 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.sell-objection {
  max-width: 40rem;
  margin: 0 auto 2.75rem;
  padding: 1.75rem 2rem;
  background: var(--rust-bg);
  border-radius: var(--radius-lg);
  border: 1px solid #e8d4cc;
}
.sell-objection h3 {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  color: var(--rust);
}
.sell-objection p {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #6b4030;
}
.sell-objection p:last-child { margin-bottom: 0; }
.sell-close {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}
.sell-price-line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  color: var(--accent-dark);
  margin: 0 0 1.5rem;
}
.sell-ps {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.sell-ps p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.sell-ps p:last-child { margin-bottom: 0; }
.course-lead-secondary { margin-top: -0.5rem !important; opacity: 0.92; }
.course-ps {
  margin-top: 1.25rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: left;
}
.day-tour-compact { margin-top: 0.5rem; }

/* ---------- Objections ---------- */
.objections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 600px) {
  .objections { grid-template-columns: 1fr; }
}
.objection {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.objection h3 {
  font-size: 1.08rem;
  margin: 0 0 0.6rem;
  font-style: italic;
}
.objection p { margin: 0; color: var(--text-muted); font-size: 0.96rem; }
.objection strong { color: var(--text); }

/* ---------- Impact row ---------- */
.impact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
  text-align: left;
}
.impact img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}
.impact h3 { font-size: 1.08rem; margin: 0 0 0.45rem; }
.impact p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.section-alt .card { background: var(--bg); }
.card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.card .tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rust);
  margin-bottom: 0.6rem;
}

/* ---------- Calculator ---------- */
.calculator-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.calc-grid label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.calc-grid input, .calc-grid select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
.calc-grid input:focus, .calc-grid select:focus {
  outline: 2px solid var(--accent-light);
  border-color: var(--accent-dark);
}
.calc-grid small { display: block; margin-top: 0.3rem; color: var(--text-muted); font-size: 0.8rem; }
.unit-input-row { display: flex; gap: 0.5rem; }
.unit-input-row input { flex: 1; min-width: 0; }
.unit-input-row select { width: auto; min-width: 5rem; flex-shrink: 0; }

.calc-results {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-top: 0.5rem;
}
.calc-results .label {
  margin: 0 0 0.2rem;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.big-number {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1;
  margin: 0;
}
.big-number .unit { font-size: 1.1rem; font-weight: 400; color: var(--text-muted); font-family: var(--font); }
.calc-meta { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.92rem; }

.calc-note {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  background: var(--amber-bg);
  border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
}

/* ---------- Story ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.story h2 { margin-top: 0; }
.story p { color: var(--text-muted); }
.story p.pull {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--accent-dark);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}

/* ---------- Testimonials ---------- */
.stars { color: var(--star); font-size: 0.95rem; letter-spacing: 0.05em; }
.testimonial .quote {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text);
  margin: 0.6rem 0 0.9rem;
  line-height: 1.55;
}
.testimonial .who { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.placeholder-note {
  background: var(--amber-bg);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--amber);
  margin-bottom: 1.25rem;
}

/* ---------- Capture ---------- */
.capture-box {
  background: var(--accent-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
}
.capture-box h2 { color: #fff; margin: 0 0 0.6rem; }
.capture-box > p { opacity: 0.9; margin: 0 auto 1.75rem; max-width: 34rem; }
.capture-lead {
  opacity: 0.88 !important;
  font-size: 0.95rem !important;
  margin-top: -1rem !important;
  margin-bottom: 1.5rem !important;
}
.capture-ps {
  max-width: 34rem;
  margin-inline: auto;
  border-top-color: rgba(255,255,255,0.2);
}
.capture-ps p { color: rgba(255,255,255,0.85); }
.mill-cta-note {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}

.capture-form {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: center; max-width: 29rem; margin-inline: auto;
}
.capture-form input[type="email"] {
  flex: 1 1 200px;
  padding: 0.9rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}
.capture-form button {
  padding: 0.9rem 1.6rem;
  background: #fff;
  color: var(--accent-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}
.capture-form button:hover { background: var(--accent-light); }
.capture-fine { font-size: 0.8rem; opacity: 0.75; margin: 1rem 0 0; }

/* ---------- Placeholders ---------- */
.img-placeholder {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, var(--accent-light), var(--accent-light) 12px, var(--bg-tint) 12px, var(--bg-tint) 24px);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--accent-dark);
  font-size: 0.9rem; text-align: center; padding: 1.25rem;
  border: 2px dashed var(--accent);
}
.img-placeholder strong { font-size: 1.05rem; margin-bottom: 0.3rem; }
.img-placeholder small { color: var(--text-muted); }

/* ---------- Funnel-mode header (landing pages) ---------- */
.header-funnel .container { justify-content: space-between; }
.header-funnel .logo { font-size: 1.15rem; }

.header-funnel-start {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.header-back {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.header-back:hover { color: var(--accent-dark); }

.logo-with-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.logo-mark {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.logo-with-mark span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Society hero (platform home) ---------- */
.society-hero { padding: 4.5rem 0 0; text-align: center; }
.society-hero .container { max-width: 50rem; }
.society-hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  margin: 0.6rem 0 1.4rem;
  line-height: 1.05;
}
.society-hero .lead { margin: 0 auto 2rem; font-size: 1.15rem; }
.society-hero .hero-cta { justify-content: center; }

.society-hero-figure { margin: 3.5rem 0 0; }
.society-hero-figure img {
  width: 100%;
  max-width: 1400px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---------- Manifesto ---------- */
.manifesto p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 1.3rem;
}
.manifesto-pull {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem) !important;
  font-style: italic;
  line-height: 1.45 !important;
  color: var(--accent-dark) !important;
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
  margin: 2rem 0 !important;
}

/* ---------- Ecosystem grid ---------- */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.eco-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.eco-card h3 { margin: 0.8rem 0 0.6rem; font-size: 1.25rem; }
.eco-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 1.25rem; }
.eco-link { margin-top: auto; font-weight: 600; font-size: 0.92rem; color: var(--accent-dark); text-decoration: none; }
.eco-link:hover { text-decoration: underline; }

.eco-status {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.status-live { background: var(--accent-dark); color: #fff; }
.status-soon { background: transparent; color: var(--accent-dark); border: 1px solid var(--accent); }
.status-planned { background: var(--bg-tint); color: var(--text-muted); border: 1px solid var(--border); }

.eco-note {
  margin: 2rem auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------- Society reveal (end of landing pages) ---------- */
.society-reveal { padding-top: 0; }
.reveal-box {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
}
.reveal-box h2 { margin: 0.5rem 0 1rem; }
.reveal-lead {
  max-width: 40rem;
  margin: 0 auto 2rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.reveal-links { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Hub hero (index) ---------- */
.hub-hero { padding: 4rem 0 0; text-align: center; }
.hub-hero-copy { max-width: 44rem; margin: 0 auto; }
.hub-hero-logo {
  width: clamp(7rem, 18vw, 10rem);
  height: auto;
  margin: 0 auto 1.25rem;
  display: block;
}
.hub-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0.5rem 0 1.25rem; }
.hub-hero .lead { margin: 0 auto 2rem; }
.hub-hero .hero-cta { justify-content: center; }

.hub-hero-figure { margin: 3rem 0 0; }
.hub-hero-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- Thank-you redirect (post Kit submit) ---------- */
.page-thank-you .site-header { border-bottom: 1px solid var(--border); }
.page-thank-you .nav-cta { display: none; }

.thank-you-hero {
  padding: 3rem 0 2.5rem;
  text-align: center;
}
.thank-you-logo {
  width: clamp(5rem, 14vw, 8rem);
  height: auto;
  margin: 0 auto 1rem;
  display: block;
}
.thank-you-hero h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  margin: 0.5rem 0 1rem;
}
.thank-you-inbox {
  margin: 2rem auto 0;
  max-width: 32rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  text-align: left;
}
.thank-you-inbox p { margin: 0 0 0.75rem; color: var(--text-muted); }
.thank-you-inbox p:last-child { margin-bottom: 0; }
.thank-you-fine { font-size: 0.88rem; opacity: 0.85; }

.thank-you-promise {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thank-you-promise li {
  padding: 0.85rem 0 0.85rem 1.6rem;
  position: relative;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.55;
}
.thank-you-promise li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent-dark);
  font-weight: 700;
}
.thank-you-mentor {
  margin: 2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--accent-dark);
}
.thank-you-mentor.center { text-align: center; }

.thank-you-catalog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.thank-you-door-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.35);
}
.thank-you-bundle {
  margin-top: 1.75rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.thank-you-tripwire {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.thank-you-tripwire h2 { margin: 0.5rem 0 1rem; }
.thank-you-tripwire p { color: var(--text-muted); margin: 0 0 1rem; }
.thank-you-close {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.page-thank-you .center { text-align: center; }

@media (max-width: 900px) {
  .thank-you-catalog { grid-template-columns: 1fr; }
}

/* ---------- Thesis pair (index) ---------- */
.thesis-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
}

.thesis-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.thesis-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 1rem;
}
.thesis-stat {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-dark);
  margin: 0;
}
.thesis-stat-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0.4rem 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.thesis-col p { color: var(--text-muted); }
.thesis-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-dark);
  text-decoration: none;
}
.thesis-link:hover { text-decoration: underline; }

.thesis-close {
  max-width: 42rem;
  margin: 2.5rem auto 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 1.02rem;
}

/* ---------- Big doors (index) ---------- */
.big-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.big-door {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.big-door:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(44, 40, 37, 0.13);
}
.big-door figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.big-door figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.big-door-body { padding: 1.75rem; display: flex; flex-direction: column; flex: 1; }
.big-door-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.big-door h3 {
  font-size: 2rem;
  margin: 0.5rem 0 0.75rem;
}
.big-door-body > p { color: var(--text-muted); margin: 0 0 1.25rem; }

.big-door-facts { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.big-door-facts li {
  font-size: 0.92rem;
  color: var(--text-muted);
  padding: 0.45rem 0 0.45rem 1.5rem;
  position: relative;
  border-top: 1px solid var(--border);
}
.big-door-facts li::before {
  content: "\2022";
  position: absolute;
  left: 0.35rem;
  color: var(--accent-dark);
  font-weight: 700;
}
.big-door-cta { margin-top: auto; font-weight: 700; color: var(--accent-dark); }
.big-door-bread .big-door-label,
.big-door-bread .big-door-facts li::before { color: var(--rust); }
.big-door-bread .big-door-cta { color: var(--rust); }

/* ---------- What we won't say (index) ---------- */
.wont-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.wont {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--rust-bg);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.wont-mark {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--rust);
  color: #fff;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
}
.wont p { margin: 0; font-size: 0.95rem; color: var(--text); }

.honesty-line {
  margin-top: 2.5rem;
  text-align: center;
}
.honesty-line blockquote {
  margin: 0 auto;
  max-width: 40rem;
  border: none;
  padding: 0;
}
.honesty-line p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--accent-dark);
  margin: 0;
}

/* ---------- Capture interest choice ---------- */
.capture-choice {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  font-size: 0.9rem;
}
.capture-choice label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; opacity: 0.9; }

/* ---------- Mill section (bread) ---------- */
.mill-verdict {
  max-width: 46rem;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  text-align: center;
}
.mill-verdict-line {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 1rem;
  line-height: 1.35;
}
.mill-verdict p:last-child { margin: 0; color: var(--text-muted); font-size: 0.98rem; }

.mill-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.mill-fact {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--rust);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.mill-fact h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.mill-fact p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

.mill-cta {
  margin-top: 2.5rem;
  padding: 2rem;
  text-align: center;
  background: var(--accent-light);
  border-radius: var(--radius-lg);
}
.mill-cta h3 { margin: 0 0 0.5rem; font-size: 1.4rem; }
.mill-cta p { max-width: 38rem; margin: 0 auto 1.5rem; color: var(--text-muted); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
.breadcrumb a { color: var(--accent-dark); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 0.4rem; opacity: 0.5; }

/* ---------- Course catalog (hub) ---------- */
.catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.catalog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.catalog-featured {
  border-color: var(--accent-dark);
  box-shadow: 0 6px 24px rgba(60, 92, 70, 0.12);
}
.catalog-card h3 { margin: 0.75rem 0 0.4rem; font-size: 1.25rem; }
.catalog-card > p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 1.25rem; }
.catalog-card .btn { margin-top: auto; }

.catalog-status {
  align-self: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.catalog-status.status-live { background: var(--accent-light); color: var(--accent-dark); }
.catalog-status.status-best { background: var(--accent); color: #000; }
.catalog-status.status-soon { background: var(--rust-bg); color: var(--rust); }

.catalog-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.75rem;
}
.catalog-was {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 0.3rem;
}

.ladder-note {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-tint);
  border-radius: var(--radius);
  text-align: center;
}
.ladder-note p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ---------- Jar / quantity guide ---------- */
.jar-guide {
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.jar-guide > p { color: var(--text-muted); font-size: 0.95rem; margin: 0.5rem 0 1rem; }

.jar-sizes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.jar-sizes li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.jar-sizes li:last-child { border-bottom: none; }
.jar-sizes strong { min-width: 7rem; color: var(--text); }
.jar-sizes span { color: var(--text-muted); font-size: 0.92rem; }

.jar-note { font-size: 0.9rem; margin-bottom: 0 !important; }

/* ---------- Cross-sell ---------- */
.cross-sell {
  margin-top: 1.75rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.cross-sell p { margin: 0 0 1rem; color: var(--text-muted); }
.cross-sell strong { color: var(--text); }

/* ---------- Footer ---------- */
.site-footer {
  padding: 2.5rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.footer-links { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.disclaimer { max-width: 44rem; margin: 1rem auto 0; font-size: 0.78rem; line-height: 1.55; opacity: 0.85; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy .lead { max-width: none; }
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 4vw 1rem;
    box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-header { position: sticky; }
  .site-header .container { position: relative; flex-wrap: wrap; }
  .site-header .nav-cta { order: 3; margin-left: 0; }
  .swap { grid-template-columns: 1fr; }
  .swap-arrow { transform: rotate(90deg); justify-self: center; }
  .honesty { grid-template-columns: 1fr; padding: 1.5rem; }
  .story { grid-template-columns: 1fr; gap: 1.75rem; }
  .course-grid { grid-template-columns: 1fr; gap: 2rem; }
  .doors { grid-template-columns: 1fr; }
  .taste-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .pantry-grid { grid-template-columns: 1fr; }
  .live-brine-callout { grid-template-columns: 1fr; }
  .learn-item { grid-template-columns: 1fr; }
  .learn-arrow { transform: rotate(90deg); justify-self: center; }
  .day-slot { grid-template-columns: 1fr; }
  .day-slot p { grid-column: 1; }
  .brine-recipe-row { grid-template-columns: 1fr; }
  .brine-tour-split { grid-template-columns: 1fr; }
  .catalog { grid-template-columns: 1fr; }
  .thesis-pair { grid-template-columns: 1fr; }
  .big-doors { grid-template-columns: 1fr; }
  .wont-grid { grid-template-columns: 1fr; }
  .mill-facts { grid-template-columns: 1fr; }
  .eco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life-grid { grid-template-columns: 1fr; }
  .community-features { grid-template-columns: 1fr; }
  .rhythm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .eco-grid { grid-template-columns: 1fr; }
  .rhythm-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --space: 2.75rem; }
  .hero-split { padding-top: 2.25rem; }
  .calculator-wrap { padding: 1.25rem; }
  .capture-box { padding: 2rem 1.25rem; }
  .trust-bar ul { gap: 0.5rem 1.4rem; font-size: 0.82rem; }
  .pantry-panel { padding: 1.35rem; }
  .pantry-history { padding: 1.35rem; }
  .jar-guide { padding: 1.25rem; }
  .hub-hero { padding-top: 2.5rem; }
  .hub-hero-figure { margin-top: 2rem; }
  .thesis-col { padding: 1.5rem 1.35rem; }
  .mill-verdict { padding: 1.35rem; }
  .mill-cta { padding: 1.5rem 1.25rem; }
  .society-hero { padding-top: 2.5rem; }
  .society-hero-figure { margin-top: 2rem; }
  .society-hero-figure img { border-radius: var(--radius) var(--radius) 0 0; }
  .reveal-box { padding: 2rem 1.25rem; }
  .site-header .logo { font-size: 0.95rem; line-height: 1.2; }
  .header-funnel-start { gap: 0.55rem; }
  .header-back { font-size: 0.82rem; }
  .logo-mark { width: 2.35rem; height: 2.35rem; }
  .nav-cta { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   THE SALES LETTER  (the-swap.html)
   A long-form direct-response page. One offer, closed four times.
   Type is set larger and the measure narrower than the rest of the
   site on purpose: this page is read, not scanned.
   ============================================================ */

.page-letter { background: var(--bg); }
.page-letter .container.narrow { max-width: 44rem; }

/* ---- headline block ---- */
.letter-head {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.letter-prehead {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 600;
  margin: 0 0 1.1rem;
}
.letter-head h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1.2rem;
}
.letter-deck {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 1.8rem;
}
.letter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-dark);
}
.letter-strip li::before {
  content: "\2713";
  margin-right: 0.4rem;
  color: var(--accent-dark);
}

/* The hero photograph sits between the deck and the proof strip, wider than
   the reading column. Halbert L19: the reader is hooked on the first look,
   before a word is read, so nothing may push this below the fold. */
.letter-head-visual { padding-bottom: 3rem; }
.letter-head-visual .hero-figure {
  max-width: 1040px;
  margin: 0 auto 2rem;
  padding: 0 var(--gutter, 1.5rem);
}
.letter-head-visual .hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- letter body: the reading surface ---- */
.letter-body { padding: 3rem 0 1rem; }
.letter-body > .container > .kicker,
.letter-body > .container.narrow > .kicker { display: block; margin-bottom: 0.6rem; }
.letter-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.2;
  margin: 0 0 1.4rem;
}
.letter-body h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.letter-body p {
  font-size: 1.09rem;
  line-height: 1.68;
  margin: 0 0 1.25rem;
}
.letter-salute {
  font-family: var(--font-display);
  font-size: 1.2rem !important;
  margin-bottom: 1.5rem !important;
}
/* The opening line. This was a magazine drop cap until Aug 11, 2026, and it was
   broken: the cap stood two lines tall over a one-line command, so it hung below
   the text and dragged the next paragraph into an indent around it. A drop cap
   needs a paragraph to wrap, and the opener here is deliberately one sentence.
   Halbert opens on a command in plain type anyway. He never set a drop cap. */
.letter-body .letter-open {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.35;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 1.4rem;
}

/* The standalone punch line. Budget: one per screen. */
.punch {
  font-family: var(--font-display);
  font-size: 1.32rem !important;
  line-height: 1.42 !important;
  font-weight: 600;
  color: var(--accent-dark);
  border-left: 4px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.15rem;
  margin: 2rem 0 2rem !important;
}

/* ---- the villain arc ---- */
.villain-section { background: var(--bg-tint); padding-bottom: 2.5rem; }
.villain-arc {
  list-style: none;
  counter-reset: arc;
  margin: 2rem 0 0;
  padding: 0;
}
.arc-step {
  counter-increment: arc;
  position: relative;
  padding: 0 0 1.9rem 3.4rem;
  border-left: 2px solid var(--border);
  margin-left: 1rem;
}
.arc-step:last-child { border-left-color: transparent; padding-bottom: 0.5rem; }
.arc-step::before {
  content: counter(arc);
  position: absolute;
  left: -1.05rem;
  top: 0;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Narrative beats in the villain arc. These are sentences in a story, so they
   render as headings but are not headings, which keeps the document outline
   honest. See website/tools/fix_arc_headings.py */
.arc-step .arc-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.7rem;
  padding-top: 0.15rem;
}

.arc-step h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  margin-bottom: 0.7rem;
  padding-top: 0.15rem;
}
.villain-close {
  margin-top: 2rem !important;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}

/* ---- the receipt box: a sourced fact, with its limit attached ---- */
.receipt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.5rem 0.5rem;
  margin: 1.6rem 0 1.8rem;
}
.receipt p { font-size: 1rem !important; line-height: 1.62 !important; }
.receipt-note,
.receipt-limit {
  font-size: 0.93rem !important;
  color: var(--text-muted);
}
.receipt-limit {
  border-top: 1px dashed var(--border);
  padding-top: 0.9rem;
  font-style: italic;
}
.letter-body > .container > .receipt-limit,
.letter-body > .container.narrow > .receipt-limit {
  background: var(--amber-bg);
  border: 1px solid #e8dcb8;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  font-size: 0.98rem !important;
  font-style: normal;
}

/* ---- mechanism ---- */
.mech-section { background: var(--bg-card); }
.mech-box {
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 0.4rem;
  margin: 1.7rem 0;
}
.mech-punch {
  font-family: var(--font-display);
  font-size: 1.22rem !important;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 1.1rem !important;
}
.proof-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 2.2rem 0 1rem;
}
.proof {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
}
.proof p { font-size: 0.99rem !important; line-height: 1.6 !important; }
.proof h3 { font-size: 1.02rem; color: var(--accent-dark); }
/* Named .proof-honesty rather than .honesty on purpose. A bare .honesty already
   exists above as a two-column grid block, and reusing it turned this paragraph
   into a grid that wrapped one word per line. */
.proof-honesty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent-dark);
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-bottom: 0 !important;
}

/* ---- the offer card ---- */
.letter-offer { padding: 3.5rem 0; background: var(--bg-tint); }
.offer-card {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.4rem 2.2rem;
}
.offer-label {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.offer-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.offer-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.8rem;
}
.offer-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.offer-list li {
  position: relative;
  padding: 0 0 1.05rem 1.85rem;
  font-size: 1.02rem;
  line-height: 1.6;
}
.offer-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05rem;
  color: var(--accent-dark);
  font-weight: 700;
}
.offer-bonus {
  background: var(--amber-bg);
  border: 1px solid #e8dcb8;
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 0.6rem;
  margin: 0 0 1.9rem;
}
.bonus-label {
  display: inline-block;
  background: var(--amber);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}
.offer-bonus h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 0.8rem;
  color: var(--text);
}
.offer-bonus p {
  font-size: 0.99rem;
  line-height: 1.62;
  margin: 0 0 0.9rem;
}

.offer-price-row {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-bottom: 1.4rem;
}
.offer-price {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.55rem;
  color: var(--accent-dark);
}
.offer-price-note {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}
.offer-card .btn-lg { width: 100%; text-align: center; }

.guarantee {
  margin-top: 1.9rem;
  background: var(--accent-light);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
}
.guarantee h3 {
  font-size: 1.05rem;
  color: var(--accent-dark);
  margin: 0 0 0.7rem;
}
.guarantee p { font-size: 0.99rem; line-height: 1.62; margin: 0 0 0.8rem; }
.guarantee-fine {
  font-size: 0.89rem !important;
  color: var(--text-muted);
  margin-bottom: 0 !important;
}

/* ---- the repeated close ---- */
.close-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  margin: 2.2rem 0 1rem;
  text-align: center;
}
.close-block p { margin-bottom: 1.1rem; }
.close-block .btn { margin: 0 auto; }
.close-final {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  padding: 2.2rem 1.8rem;
}
.close-final p { color: #eef3ee; }
.close-final .btn-primary { background: var(--bg-card); color: var(--accent-dark); }
.close-final .btn-primary:hover { background: #fff; }
.close-fine {
  font-size: 0.9rem !important;
  color: #c7d5c9 !important;
  margin: 1.1rem 0 0 !important;
}

/* ---- objections ---- */
.objections-section { background: var(--bg-card); }
.obj {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 0.4rem;
}
.obj:first-of-type { border-top: none; padding-top: 0.3rem; }
.obj h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--accent-dark);
}

/* ---- disqualifier ---- */
/* ---- the villain arc, read as a timeline ----
   Six paragraphs of history is a text desert. Dating each beat lets the eye
   skim the whole shape (Pasteur, the refrigerator, today) before reading a word,
   which is Halbert L19 applied to a section instead of a page. */
.arc-era {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ---- reassurance under the buy button ----
   Brunson's one-line pre-emption of the most common complaint, placed directly
   below the CTA. Ours answers "what am I waiting for after I pay", since the
   whole category ships boxes and we ship nothing. */
.btn-reassure {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ---- FAQ: catches the reader who scrolled past the prose objections ---- */
.faq-section { background: var(--bg-tint); }
.faq-grid { margin: 1.5rem 0 2rem; }
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0.2rem 0;
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 2rem 1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.3rem;
  top: 0.85rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-dark);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  margin: 0 0 1.1rem;
  padding-right: 2rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ---- the figures block: money, stated plainly, late in the letter ---- */
.fact-list { list-style: none; margin: 1.6rem 0 2rem; padding: 0; }
.fact-list li {
  padding: 0.9rem 0 0.9rem 1.4rem;
  border-left: 3px solid var(--accent);
  margin-bottom: 0.8rem;
  background: var(--bg-tint);
  font-size: 1.03rem;
  line-height: 1.6;
}

/* ---- Callout: warning box (celiac, safety) ---- */
.callout-warning {
  background: #fff3e0;
  border-left: 4px solid var(--rust, #c0392b);
  padding: 1.5rem 1.8rem;
  margin: 2rem 0;
  border-radius: 4px;
}
.callout-warning p { margin: 0 0 0.5rem 0; }
.callout-warning p:last-child { margin-bottom: 0; }

.not-for-section { background: var(--rust-bg); }
.not-for { list-style: none; margin: 0; padding: 0; }
.not-for li {
  position: relative;
  padding: 0 0 1.1rem 1.9rem;
  font-size: 1.05rem;
  line-height: 1.63;
}
.not-for li::before {
  content: "\00d7";
  position: absolute;
  left: 0.15rem;
  top: -0.1rem;
  color: var(--rust);
  font-size: 1.3rem;
  font-weight: 700;
}

/* ---- two futures ---- */
.futures-section { background: var(--bg-tint); padding-bottom: 3.5rem; }
.futures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 1.8rem 0 0.5rem;
}
.future {
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 0.6rem;
  border: 1px solid var(--border);
}
.future h3 { font-family: var(--font-display); font-size: 1.18rem; }
.future p { font-size: 1rem !important; line-height: 1.62 !important; }
.future-a { background: var(--bg-card); }
.future-a h3 { color: var(--text-muted); }
.future-b { background: var(--accent-light); border-color: #bcd2c2; }
.future-b h3 { color: var(--accent-dark); }

/* The script line. Halbert device: hand the reader words they can say out loud
   verbatim, never an abstraction. See HALBERT-VOICE.md 6.6 in the Vortex knowledge base. */
.script-line {
  background: var(--bg-card);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.3rem 1.5rem;
  margin: 1.6rem 0 1.8rem;
  box-shadow: var(--shadow);
}
.script-line p {
  font-family: var(--font-display);
  font-size: 1.18rem !important;
  line-height: 1.55 !important;
  font-style: italic;
  color: var(--accent-dark);
  margin: 0 !important;
}

/* ---- signature and P.S. stack ---- */
/* The signature block. Direct-response placement decision, Aug 10 2026, reasoning in
   README: the face belongs at the signature, not the hero. The hero sells the promise.
   The signature proves a human wrote the letter and is accountable for it. Small on
   purpose. This photo is a trust asset, not a proof asset, so it does not get to
   compete with the headline. */
.sig-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 2.4rem 0 1.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.sig-photo {
  width: 100%;
  max-width: 360px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  flex: 0 0 auto;
}
.sig-text { padding-top: 0.2rem; }
.letter-sig {
  font-family: var(--font-display);
  font-size: 1.6rem !important;
  line-height: 1.15 !important;
  margin: 0 0 0.25rem !important;
}
.sig-row .sig-role {
  display: block;
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 0.9rem !important;
}
.sig-note {
  font-size: 0.95rem !important;
  color: var(--text-muted);
  line-height: 1.6 !important;
  margin: 0 0 1rem 0 !important;
}
@media (max-width: 560px) {
  .sig-row { gap: 1.1rem; }
  .sig-photo { max-width: 300px; }
}

/* Founder photo. Kevin's own file, placed at the framing he delivered. Never cropped.
   The source is 682x1024, so max-width is capped below that on purpose. .story collapses
   to a single column on narrow screens, and without the cap a 100% width blew the photo
   up past its native resolution and it went soft. Never let this image upscale.
   Raise the cap only when a full-resolution original replaces the file. */
.founder-figure {
  margin: 0 auto;
  max-width: 400px;
}
.founder-figure img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-img);
  display: block;
}
.founder-figure figcaption {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 0.8rem;
  line-height: 1.5;
  text-align: left;
}
.sig-role {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.ps-block {
  border-top: 2px solid var(--border);
  padding-top: 1.6rem;
}
.ps-block p {
  font-size: 1.01rem !important;
  line-height: 1.64 !important;
}
.ps-block strong { color: var(--accent-dark); }

@media (max-width: 720px) {
  .proof-row { grid-template-columns: 1fr; }
  .futures { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .letter-head { padding: 2.5rem 0 2rem; }
  .letter-body { padding: 2.25rem 0 0.5rem; }
  .letter-body p { font-size: 1.04rem; }
  .arc-step { padding-left: 2.6rem; margin-left: 0.85rem; }
  .arc-step::before { width: 1.8rem; height: 1.8rem; left: -0.95rem; font-size: 0.78rem; }
  .offer-card { padding: 1.8rem 1.3rem; }
  .receipt { padding: 1.2rem 1.15rem 0.4rem; }
  .close-block { padding: 1.4rem 1.15rem; }
  .close-final { padding: 1.8rem 1.2rem; }
  .punch { font-size: 1.18rem !important; padding-left: 0.95rem; }
}

/* ---- Inline mid-page capture. Lighter than the full capture box. ---- */
.inline-capture-section { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.inline-capture {
  border: 1px solid var(--rule, #d9d2c5);
  border-left: 4px solid var(--accent, #7a8b5a);
  border-radius: 6px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--tint, #faf7f1);
}
.inline-capture-lead {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.55;
}
.inline-capture .capture-form { margin: 0 0 0.6rem; }
.inline-capture .capture-fine { margin: 0; }

/* ---- Proof cards. Stand in for testimonials until real ones exist. ---- */
.proof-card { border-top: 3px solid var(--accent, #7a8b5a); }
.proof-card h3 { margin-top: 0; font-size: 1.1rem; }
.proof-card p { margin-bottom: 0; }

/* ---- Pantry close. Body prose after the Cook callout, ends on the reader. ---- */
.pantry-lead {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: 1.15rem;
  font-weight: 600;
}
.pantry-close {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule, #d9d2c5);
  font-size: 1.05rem;
}

/* ---- Reader aside. Speaks to one self-identifying segment mid-letter. ---- */
.reader-aside {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--accent, #7a8b5a);
  border-radius: 6px;
  background: var(--tint, #faf7f1);
}
.reader-aside h3 {
  margin-top: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.35;
}
.reader-aside p:last-child { margin-bottom: 0; }

/* ============================================
   THE BRINE BAR. Added Aug 11, 2026.

   Kevin's read, and the search data backs it: more people will pour the brine
   than pack the vegetables. "pickle juice shot" carries a deeper autocomplete
   tree than anything else this business could rank for. So the shot gets a set
   piece instead of a paragraph.

   The band runs dark on purpose. It is a bar menu sitting inside a warm page,
   and the eight ferment colors need something to burn against. This is a single
   section, not a palette change. The global tokens stay where they are until
   Kevin picks a direction off website/direction.html.

   The glasses are drawn in CSS from the --veg-* tokens. No photography and no
   generated imagery, so nothing here is a placeholder waiting on a shoot.
   ============================================ */
.bar-band {
  position: relative;
  background: #17211f;
  color: #f2ede4;
  padding: clamp(2.75rem, 7vw, 4.5rem) 0;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
}
/* The eight ferment colors as a stripe across the top edge. Cheapest possible
   signal that the reader has walked into a different room. */
.bar-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--veg-gold) 0 12.5%, var(--veg-turmeric) 12.5% 25%,
    var(--veg-carrot) 25% 37.5%, var(--veg-chili) 37.5% 50%,
    var(--veg-onion) 50% 62.5%, var(--veg-beet) 62.5% 75%,
    var(--veg-spirulina) 75% 87.5%, var(--veg-coconut) 87.5% 100%
  );
}
.bar-band .panel-label,
.bar-band .kicker { color: var(--veg-turmeric); }
.bar-band h2,
.bar-band h3,
.bar-band h4 { color: #fffdf8; }
.bar-band h3 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 0.3rem 0 1rem;
}
.bar-band p { color: #ded6c9; }
.bar-band strong { color: #fffdf8; }

/* ---- The rack. Eight glasses, cool to warm, drawn from the product colors. ---- */
.shot-rack {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.4rem, 1.5vw, 0.9rem);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 1.25rem;
}
.shot {
  margin: 0;
  text-align: center;
}
.shot-glass {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 5 / 8;
  /* Tapered wall, then a short kick out to the base, which is what actually
     makes the eye read "shot glass" instead of "colored rectangle". */
  clip-path: polygon(1% 0, 99% 0, 78% 93%, 74% 100%, 26% 100%, 22% 93%);
  /* Barely there. The headspace has to read as empty glass, and anything above
     about 0.07 turns it into a gray cap sitting on top of the drink. */
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.shot-glass i {
  display: block;
  width: 100%;
  height: 80%;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px),
    var(--fill);
}
/* Sheen down the left wall. Does more for the illusion than an outline would,
   and an outline is not available anyway because clip-path eats borders. */
.shot-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0 14%,
    rgba(255, 255, 255, 0.16) 14% 21%,
    transparent 21% 100%
  );
}
.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.73rem;
  line-height: 1.3;
  color: #cdc3b4;
}

/* ---- The menu. Dotted leaders, because that is what a bar menu looks like. ---- */
.bar-menu {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding: 0;
}
.bar-menu li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.98rem;
}
.bar-menu li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.bar-menu .pour {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #fffdf8;
  flex: 0 0 auto;
}
.bar-menu .pour::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--fill, var(--veg-turmeric));
  flex: 0 0 auto;
}
.bar-menu .leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  transform: translateY(-0.25rem);
  min-width: 1rem;
}
.bar-menu .note {
  flex: 0 1 auto;
  text-align: right;
  color: #cdc3b4;
  font-size: 0.9rem;
}

/* ---- The morning pour. One card, because it is the one people repeat daily. ---- */
.morning-card {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: clamp(1.25rem, 3.5vw, 1.9rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 4px solid var(--veg-chili);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}
.morning-card h4 {
  font-family: var(--font-display);
  margin: 0.35rem 0 0.7rem;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.25;
}
.morning-card p:last-child { margin-bottom: 0; }
.morning-card .recipe-line {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--veg-turmeric);
}

/* ---- Price comparison. Every figure here is sourced. ---- */
.pour-cost {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
}
.bar-band .btn-secondary {
  border-color: var(--veg-turmeric);
  color: var(--veg-turmeric);
}
.bar-band .btn-secondary:hover {
  background: var(--veg-turmeric);
  color: #17211f;
}

@media (max-width: 640px) {
  .shot-rack { grid-template-columns: repeat(4, 1fr); row-gap: 1.1rem; }
  .bar-menu li { flex-wrap: wrap; }
  .bar-menu .leader { display: none; }
  .bar-menu .note { flex: 1 1 100%; text-align: left; }
}

/* ============================================================
   COMMUNITY PAGE, blown out Aug 12, 2026.
   Badge grid, rank progression, weekly rhythm (6-day), founding
   member card. Kevin: "we should be selling them on why they want
   to be a part of that community to begin with."
   ============================================================ */

/* ---- Badge grid: 10 cards, 3 columns desktop ---- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.badge-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.badge-card-teach { border-top-color: var(--accent-dark); }
.badge-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}
.badge-card-teach .badge-marker { background: var(--accent-dark); color: #fff; }
.badge-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 0 0 0.45rem;
}
.badge-card p { margin: 0; color: var(--text-muted); font-size: 0.93rem; line-height: 1.55; }

/* ---- Rank progression track ---- */
.rank-track {
  display: grid;
  gap: 0;
  margin: 2rem 0 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rank-rung {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.5rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.rank-rung:last-child { border-bottom: none; }
.rank-rung-top { background: var(--accent-light); }
.rank-level {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.rank-rung p { margin: 0; font-size: 0.93rem; color: var(--text-muted); }

/* ---- Week grid: 6 cards ---- */
.week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.week-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem;
}
.week-card h3 {
  font-size: 1.05rem;
  margin: 0.35rem 0 0.5rem;
  color: var(--accent-dark);
}
.week-card p { margin: 0; font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* ---- Founding member card ---- */
.founding-card {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.4rem 2.2rem;
}
.founding-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
}
.founding-card p {
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0 0 1.15rem;
  color: var(--text-muted);
}
.founding-card .offer-list { margin-top: 0.5rem; }
.founding-card .btn-lg { width: 100%; text-align: center; }
.founding-card .guarantee {
  margin-top: 1.75rem;
}

/* ---- Community page responsiveness ---- */
@media (max-width: 900px) {
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-rung { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (max-width: 600px) {
  .badge-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: 1fr; }
  .founding-card { padding: 1.75rem 1.3rem; }
}