/* Webfonts via Google Fonts (free) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

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

/* The .oo class is a no-op now. The wordmark image already shows the
   gold-OO treatment; in body-text "Chooszy" we want plain ink so the
   word reads as a word, not as branded marketing. */
.oo { /* intentionally empty */ }

:root {
  /* Core palette - matches the chooszy-app's screen (white) */
  --bg: #ffffff;
  --bg-warm: rgba(212, 175, 55, 0.03);
  --bg-card: #ffffff;
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.4);
  --gold-pale: rgba(212, 175, 55, 0.08);
  --ink: #000;
  --text: #161412;
  --text-sub: #6b6760;

  /* Legacy names preserved so the existing ~1500 lines below cascade
     correctly into the new palette. */
  --forest: #161412;
  --accent: var(--gold);
  --teal: var(--gold);
  --teal-light: rgba(212, 175, 55, 0.1);
  --olive: var(--text-sub);
  --blaze: var(--gold);
  --accent-mid: rgba(212, 175, 55, 0.3);
  --accent-pale: var(--gold-pale);

  /* Fonts */
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --page-max: 1200px;
  --content-max: 720px;
}

/* Editorial italic for em/i (the original site banned italics; the new
   aesthetic relies on them for emphasis). */
em, i { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* Drop the marketing photography - fully typographic now to match the app. */
.hero-image-wrap, .hero-image, .hero-overlay,
.image-break, .image-break-overlay,
.edit-featured-img, .edit-card-img, .article-hero-img,
picture { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--forest);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled { border-bottom-color: rgba(0, 5, 0, 0.1); }

.nav-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--forest);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.nav-links a:hover { opacity: 1; }

.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--forest);
  margin-bottom: 5px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.nav-burger span:last-child { margin-bottom: 0; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 40px 80px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-image {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 4/5;
  box-shadow: 0 40px 80px rgba(0, 5, 0, 0.1);
}

.hero-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 32px;
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(52px, 9vw, 88px);
  line-height: 0.95;
  color: var(--blaze);
  margin-bottom: 48px;
  max-width: 900px;
  text-wrap: balance;
}

.hero-headline em {
  font-style: normal;
  color: var(--forest);
  white-space: nowrap;
}
.hero-top-line {
}
.hero-payoff-line {
  white-space: nowrap;
}
.hero-be {
  color: var(--forest);
  font-weight: 300;
}
.hero-wordmark {
  height: 1em;
  width: auto;
  vertical-align: -0.16em;
  display: inline;
  margin: 0 0.04em;
}

.hero-belief {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--forest);
  opacity: 0.75;
  margin-bottom: 48px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta:hover { gap: 18px; }

.hero-cta .arrow {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--blaze);
  position: relative;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta:hover .arrow { width: 48px; }
.hero-cta-mobile { display: none !important; }
.hero-cta-desktop { align-self: flex-start; }

.hero-cta .arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--blaze);
  border-right: 1px solid var(--blaze);
  transform: rotate(45deg);
}

/* PROBLEM SECTION */
.problem {
  padding: 120px 40px;
  background: var(--bg-warm);
  color: var(--forest);
}

.problem-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.problem-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 24px;
}

.problem-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin-bottom: 32px;
  color: var(--forest);
  text-wrap: balance;
}

.problem-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.problem-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
}

.problem-stat-number {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 10vw, 120px);
  line-height: 1;
  color: var(--blaze);
  margin-bottom: 16px;
}

.problem-stat-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 12px;
}

.problem-stat-desc {
  font-size: 15px;
  opacity: 0.6;
  max-width: 280px;
}

/* BELIEF SECTION */
.belief {
  padding: 140px 40px;
  text-align: center;
}

.belief-inner {
  max-width: 680px;
  margin: 0 auto;
}

.belief-text {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.6;
  color: var(--forest);
}

.belief-text em {
  font-style: normal;
  color: var(--teal);
}

.belief-line {
  width: 60px;
  height: 2px;
  background: var(--teal);
  margin: 48px auto 0;
}

/* THE EDIT */
.edit {
  padding: 100px 40px 120px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.edit-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 64px;
}

.edit-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 56px);
  color: var(--forest);
}

.edit-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
}

.edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.edit-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--teal-light);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: var(--forest);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.edit-featured:hover { transform: translateY(-4px); }

.edit-featured-img {
  height: 100%;
  min-height: 380px;
  overflow: hidden;
}

.edit-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.edit-featured:hover .edit-featured-img img { transform: scale(1.03); }

.edit-featured-content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.edit-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.edit-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(248, 94, 0, 0.08);
  padding: 4px 12px;
  border-radius: 4px;
}

.edit-date {
  font-size: 12px;
  color: var(--forest);
  opacity: 0.4;
}

.edit-card-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 16px;
}

.edit-card-excerpt {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.65;
  margin-bottom: 24px;
}

.edit-card-author {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.4;
}

.edit-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--forest);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 5, 0, 0.06);
}

.edit-card:hover { transform: translateY(-4px); }

.edit-card-img {
  height: 220px;
  overflow: hidden;
}

.edit-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.edit-card:hover .edit-card-img img { transform: scale(1.03); }

.edit-card-body { padding: 28px; }

.edit-card-body .edit-card-title { font-size: 22px; }
.edit-card-body .edit-card-excerpt { font-size: 14px; margin-bottom: 16px; }

/* APP SECTION */
.app {
  padding: 120px 40px;
  background: var(--bg-warm);
}

.app-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
}

.app-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 24px;
}

.app-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  margin-bottom: 28px;
  text-wrap: balance;
}

.app-text {
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.7;
  margin-bottom: 36px;
}

.app-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.app-feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 8px;
  flex-shrink: 0;
}

.app-feature-text {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.7;
}

/* PHONE MOCKUP */
.phone-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-frame {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  height: 620px;
  background: #1a1a1a;
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 40px 80px rgba(0, 5, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.phone-scroll-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--bg));
  border-radius: 0 0 32px 32px;
  z-index: 5;
  pointer-events: none;
}

.phone-content {
  padding: 44px 20px 40px;
  animation: phoneScroll 12s ease-in-out infinite;
}

@keyframes phoneScroll {
  0%, 6% { transform: translateY(0); }
  14%, 20% { transform: translateY(-320px); }
  28%, 34% { transform: translateY(-520px); }
  42%, 48% { transform: translateY(-720px); }
  56%, 62% { transform: translateY(-900px); }
  72%, 78% { transform: translateY(-400px); }
  90%, 100% { transform: translateY(0); }
}

/* Phone home screen elements */
.ph-logo-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.ph-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ph-logo-text {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--forest);
}
.ph-headline {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  color: var(--blaze);
  margin-bottom: 6px;
}
.ph-payoff {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: 26px;
  line-height: 1.15;
  color: var(--forest);
  margin-bottom: 16px;
}
.ph-belief {
  font-size: 12px;
  line-height: 1.6;
  color: var(--forest);
  opacity: 0.55;
  margin-bottom: 24px;
}
.ph-hero-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 24px;
}
.ph-belief-block {
  margin-bottom: 24px;
}
.ph-belief-text {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--forest);
}
.ph-belief-bold {
  font-weight: 700;
  color: var(--teal);
}
.ph-belief-line {
  display: block;
  margin-top: 4px;
}
.ph-whisky-img {
  width: calc(100% + 40px);
  height: 140px;
  object-fit: cover;
  border-radius: 0;
  margin: 0 -20px 24px;
}
.ph-divider-thin {
  height: 1px;
  background: var(--forest);
  opacity: 0.06;
  margin-bottom: 24px;
}

/* Verdict screen elements */
.v-hero {
  background: var(--teal-light);
  border: 1px solid var(--teal);
  border-radius: 16px;
  padding: 24px 20px;
  margin-bottom: 20px;
  text-align: center;
}

.v-name {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 22px;
  color: var(--forest);
  margin-bottom: 6px;
}

.v-micro {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.4;
  margin-bottom: 4px;
}

.v-verdict {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  color: var(--forest);
  line-height: 1.3;
}

.v-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.v-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
}

.v-dot.dim { opacity: 0.2; }

.v-compat {
  background: var(--accent-pale);
  border-left: 3px solid var(--teal);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 12px;
  font-style: normal;
  color: var(--forest);
  line-height: 1.5;
}

.v-section {
  margin-bottom: 20px;
}

.v-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.35;
  margin-bottom: 8px;
}

.v-body {
  font-size: 12px;
  line-height: 1.65;
  color: var(--forest);
  opacity: 0.75;
}

.v-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.v-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-pale);
  color: var(--teal);
}

.v-divider {
  height: 1px;
  background: var(--forest);
  opacity: 0.08;
  margin: 4px 0 20px;
}

.v-flag {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.v-flag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.v-flag-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--forest);
  opacity: 0.7;
}

.v-take {
  background: var(--forest);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.v-take .v-label {
  color: #fff;
  opacity: 0.35;
}

.v-take-text {
  font-size: 12px;
  line-height: 1.65;
  color: #fff;
  opacity: 0.8;
}

.v-questions {
  background: #fff;
  border: 1px solid rgba(0, 5, 0, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.v-questions-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 12px;
}

.v-q {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 5, 0, 0.05);
}

.v-q:last-child { border-bottom: none; }

.v-q-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  min-width: 16px;
}

.v-q-text {
  font-size: 11px;
  line-height: 1.5;
  color: var(--forest);
  opacity: 0.7;
}

/* IMAGE BREAK */
.image-break {
  width: 100%;
  height: 50vh;
  min-height: 360px;
  overflow: hidden;
  position: relative;
}

.image-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-break-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
}

/* CTA SECTION */
.cta {
  padding: 160px 40px;
  text-align: center;
  position: relative;
  background: linear-gradient(to bottom, var(--bg-warm), var(--bg));
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
}

.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta > *:not(.cta-bg) { position: relative; z-index: 1; }

/* PRICING */
.pricing-section {
  padding: 120px 40px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(149, 147, 217, 0.04) 100%);
}
.pricing-section-header {
  max-width: 1100px;
  margin: 0 auto 72px;
}
.pricing-section-header h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.pricing-section-header p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-sub);
}
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--bg);
  border: 1px solid rgba(0, 5, 0, 0.08);
  border-radius: 20px;
  padding: 44px 36px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 5, 0, 0.06);
}
.pricing-card.featured {
  border-color: var(--blaze);
  box-shadow: 0 0 0 1px var(--blaze), 0 8px 40px rgba(149, 147, 217, 0.12);
}
.pricing-card.companion-card {
  background: var(--forest);
  color: #fff;
  border-color: transparent;
}
.pricing-badge {
  display: inline-block;
  background: var(--blaze);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 40px;
  margin-bottom: 24px;
  height: 27px;
}
.pricing-badge.invisible { visibility: hidden; }
.pricing-tier-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 12px;
}
.pricing-card.companion-card .pricing-tier-name { opacity: 0.5; }
.pricing-price {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-price span {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  opacity: 0.4;
}
.pricing-annual {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 28px;
}
.pricing-card.companion-card .pricing-annual { color: rgba(255,255,255,0.4); }
.pricing-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sub);
  margin-bottom: 32px;
  min-height: 80px;
}
.pricing-card.companion-card .pricing-description { color: rgba(255,255,255,0.6); }
.pricing-features {
  list-style: none;
  margin-bottom: 36px;
  flex-grow: 1;
}
.pricing-features li {
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 5, 0, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pricing-card.companion-card .pricing-features li {
  border-color: rgba(255, 255, 255, 0.08);
}
.pricing-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 7px;
}
.pricing-cta {
  display: block;
  text-align: center;
  padding: 16px;
  border-radius: 60px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-cta:hover { transform: translateY(-1px); }
.pricing-cta-free {
  background: transparent;
  border: 1.5px solid rgba(0, 5, 0, 0.15);
  color: var(--forest);
}
.pricing-cta-pro {
  background: var(--blaze);
  color: #fff;
  border: none;
}
.pricing-cta-companion {
  background: #fff;
  color: var(--forest);
  border: none;
}

@media (max-width: 768px) {
  .pricing-section { padding: 80px 24px; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 420px; }
}

.cta-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1;
  color: var(--forest);
  margin-bottom: 32px;
  text-wrap: balance;
}

.cta-headline em {
  font-style: normal;
  color: var(--teal);
  white-space: nowrap;
}

.cta-sub {
  font-size: 16px;
  opacity: 0.5;
  margin-bottom: 32px;
}

.waitlist-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.waitlist-input {
  flex: 1;
  min-width: 220px;
  padding: 14px 20px;
  border: 1px solid rgba(0, 5, 0, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--forest);
  outline: none;
  transition: border-color 0.2s;
}

.waitlist-input::placeholder { color: var(--text-sub); opacity: 0.6; }
.waitlist-input:focus { border-color: var(--forest); }

.waitlist-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  background: var(--forest);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.waitlist-btn:hover { opacity: 0.85; transform: translateY(-2px); }

.waitlist-success {
  font-size: 15px;
  color: var(--forest);
  opacity: 0.7;
  margin-bottom: 20px;
  display: none;
}

.cta-or {
  font-size: 13px;
  opacity: 0.35;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-btn-primary {
  background: var(--forest);
  color: #fff;
}

.cta-btn-primary:hover { opacity: 0.85; transform: translateY(-2px); }

.cta-btn-secondary {
  background: transparent;
  color: var(--forest);
  border: 1px solid rgba(0, 5, 0, 0.2);
}

.cta-btn-secondary:hover { border-color: var(--forest); transform: translateY(-2px); }

.cta-mate {
  font-size: 15px;
  color: var(--forest);
  opacity: 0.5;
  margin-top: 36px;
}

.cta-mate a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-mate a:hover { opacity: 0.8; }

/* MATES SECTION */
.mates {
  padding: 120px 40px;
  background: var(--bg-warm);
  color: var(--forest);
}

.mates-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mates-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.mates-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--text);
  text-wrap: balance;
}

.mates-headline em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--text);
}

.mates-text {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.mates-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mates-card {
  background: var(--bg);
  border: 1px solid rgba(0, 5, 0, 0.08);
  border-radius: 20px;
  padding: 36px 32px;
  transition: background 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mates-card:hover {
  background: var(--bg);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 5, 0, 0.06);
}

/* Legacy mates-card mono number ("01", "02", "03"). Kept for any cached
   pages during deploy. New structure uses .mates-card-numeral. */
.mates-card-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

/* Roman-numeral spine for mates cards - matches the doors-panel numeral
   recipe so the homepage reads as one editorial vocabulary. */
.mates-card-numeral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 14px;
}

h3.mates-card-title,
.mates-card-title {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  color: var(--text);
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mates-card-desc {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* MIRROR SECTION */
.mirror {
  padding: 120px 40px;
  background: #fff;
}

.mirror-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.mirror-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.4;
  margin-bottom: 20px;
}

.mirror-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  color: var(--forest);
  margin-bottom: 24px;
  text-wrap: balance;
}

.mirror-headline em {
  font-style: normal;
  color: var(--teal);
}

.mirror-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--forest);
  opacity: 0.6;
  margin-bottom: 20px;
}

.mirror-points {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.mirror-point {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.mirror-point-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 8px;
  flex-shrink: 0;
}

.mirror-point-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--forest);
  opacity: 0.7;
}

.mirror-visual {
  background: var(--bg);
  border-radius: 24px;
  padding: 48px 36px;
  text-align: center;
  border: 1px solid rgba(0, 5, 0, 0.08);
}

@media (max-width: 768px) {
  .mirror-visual {
    padding: 36px 28px;
  }
}

.mirror-visual-icon {
  font-size: 56px;
  margin-bottom: 20px;
}

.mirror-visual-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 8px;
}

.mirror-visual-sub {
  font-size: 15px;
  color: var(--forest);
  opacity: 0.5;
  margin-bottom: 28px;
}

.mirror-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.mirror-bar-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.5;
  margin-bottom: 6px;
}

.mirror-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 5, 0, 0.06);
  overflow: hidden;
}

.mirror-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s var(--ease-smooth);
}

/* FOOTER */
.footer {
  padding: 60px 40px;
  border-top: 1px solid rgba(0, 5, 0, 0.08);
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  font-size: 13px;
  font-style: normal;
  opacity: 0.4;
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.3s;
}

.footer-links a:hover { opacity: 1; }

/* SCROLL REVEALS */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .nav { padding: 16px 24px; z-index: 100; background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-burger { display: block; position: fixed; top: 16px; right: 24px; z-index: 10001; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #FFFFFF;
    padding: 100px 40px 40px;
    gap: 0;
    z-index: 10000;
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid rgba(0, 5, 0, 0.06); }
  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 15px;
    opacity: 0.8;
    color: var(--forest);
  }
  .hero { padding: 100px 24px 60px; grid-template-columns: 1fr; }
  .hero-label { display: none; }
  .hero-headline { font-size: clamp(18px, 6.5vw, 88px); overflow: visible; }
  .hero-top-line { font-weight: 500; white-space: nowrap; }
  .hero-payoff-line { display: block; margin-top: 8px; }
  .hero-image { aspect-ratio: 16/9; max-height: 300px; }
  .hero-belief { font-size: 16px; max-width: 100%; }
  .hero-cta-desktop { display: none !important; }
  .hero-cta-mobile { display: inline-flex !important; }
  .problem { padding: 80px 24px; }
  .problem-inner { grid-template-columns: 1fr; gap: 48px; }
  .problem-stat-desc { text-wrap: balance; }
  .belief { padding: 80px 24px; }
  .belief-headline { font-size: clamp(28px, 7vw, 56px); }

  /* The Edit section is gone; mates, pricing, cta show on mobile too. */
  .edit { display: none; }

  /* Friends section stacks on mobile (was a 2-col grid that crushed cards). */
  .mates { padding: 80px 24px; }
  .mates-inner { grid-template-columns: 1fr; gap: 40px; }
  .mates-headline { font-size: clamp(28px, 7vw, 40px); }
  .mates-card { padding: 28px 24px; }

  /* Pricing also stacks on mobile. */
  .pricing-section { padding: 80px 24px; }
  .pricing-cards { grid-template-columns: 1fr; gap: 16px; }

  .app { padding: 80px 24px; }
  .app-inner { grid-template-columns: 1fr; gap: 48px; }
  .phone-frame { width: 280px; min-width: 280px; max-width: 280px; }
  .mirror { padding: 48px 24px; background: var(--bg); }
  .mirror-inner { grid-template-columns: 1fr; gap: 24px; }
  .mirror-label { margin-bottom: 12px; }
  .mirror-headline { font-size: clamp(24px, 6.5vw, 36px); margin-bottom: 12px; font-weight: 400; }
  .mirror-text { font-size: 15px; line-height: 1.6; margin-bottom: 0; opacity: 0.75; }
  .mirror-text:nth-of-type(2) { display: none; }
  .mirror-points { display: none; }
  .mirror-cta { display: inline-flex; }
  .mirror-visual { padding: 24px 20px; background: #FFFFFF; }
  .mirror-visual-icon { font-size: 24px; margin-bottom: 8px; }
  .mirror-visual-title { font-size: 17px; }
  .mirror-visual-sub { font-size: 13px; margin-bottom: 16px; }
  .mirror-bar-label { font-size: 13px; }
  .mirror-bars { gap: 10px; }
  .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
}

/* ===== APP-ALIGNED VISUAL OVERRIDES (final cascade layer) ===== */
/* These rules sit at the end so they win the cascade against earlier
   explicit non-italic + legacy palette rules. */

body { background: var(--bg) !important; color: var(--text); font-family: var(--sans); }

/* Big editorial headlines pick up Playfair italic, like the app. */
.hero-headline, .hero-payoff, .hero-payoff-line,
.problem-headline, .belief-text,
.app-headline, .mirror-headline, .mates-headline,
.cta-headline, .pricing-headline,
.edit-title, .edit-card-title, .edit-featured-content h3, .article-headline,
.faq-q, .section-title,
h1, h2, h3 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The "BE " in "BE Chooszy" - italic Playfair, ink. */
.hero-be { font-family: var(--serif) !important; font-style: italic !important; font-weight: 500; }

/* Eyebrow labels - JetBrains Mono caps, gold. */
.hero-label, .problem-label, .app-label, .mirror-label, .mates-label,
.section-eyebrow, .edit-tag, .edit-meta, .edit-date, .edit-read-time,
.edit-section-title, .problem-stat-label, .mirror-bar-label,
.mirror-visual-sub, .pricing-card-label {
  font-family: var(--mono) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Italic emphasis inside headlines. */
.hero-headline em, .belief-text em, .problem-headline em,
.cta-headline em, .site-cta-headline em {
  font-style: italic !important;
  font-family: var(--serif) !important;
  color: var(--text);
}

/* Buttons / CTAs - match the app's dark-on-cream language with gold hover. */
.hero-cta, .cta-btn, .cta-btn-primary, .mirror-cta, .edit-link, .pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--text);
  color: #f4f1ea;
  border: 1px solid var(--text);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.hero-cta:hover, .cta-btn:hover, .cta-btn-primary:hover,
.mirror-cta:hover, .edit-link:hover, .pricing-cta:hover {
  background: var(--gold);
  color: var(--text);
  border-color: var(--gold);
  text-decoration: none;
}

.cta-btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.cta-btn-secondary:hover { background: var(--text); color: #f4f1ea; }

/* Cards - cream-tinted with gold left border, matches the app's pillar
   cards on the Intro page. */
.edit-card, .edit-featured, .mates-card, .companion-card,
.pricing-card, .faq-item {
  background: var(--bg-card) !important;
  border: 1px solid rgba(17, 17, 17, 0.08) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 22px rgba(20, 18, 14, 0.04);
}

/* Mirror visual */
.mirror-bar-fill { background: var(--gold); }
.mirror-bar { background: rgba(212, 175, 55, 0.15); }
.mirror-point-dot { background: var(--gold); }
.mirror-visual { background: var(--bg-card); border: 1px solid var(--gold-soft); border-radius: 14px; }
.mirror-visual-title { font-family: var(--serif); font-style: italic; }

/* App feature dots */
.app-feature-dot { background: var(--gold); }

/* Waitlist form - match the app's input + button aesthetic */
.waitlist-input, .edit-signup-input {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 8px;
  font-family: var(--sans);
  color: var(--text);
}
.waitlist-input:focus, .edit-signup-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}
.waitlist-btn, .edit-signup-btn {
  background: var(--text);
  color: #f4f1ea;
  border: 1px solid var(--text);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.waitlist-btn:hover, .edit-signup-btn:hover { background: var(--gold); color: var(--text); }

/* Footer */
.footer { background: var(--bg); border-top: 1px solid rgba(17, 17, 17, 0.08); color: var(--text-sub); }
.footer-links a {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.footer-links a:hover { color: var(--gold); text-decoration: none; }

/* Nav hover + white-tinted blur */
.nav .nav-links a:hover { color: var(--gold); opacity: 1; }
.nav { background: rgba(255, 255, 255, 0.9); }

/* Stat numbers - italic Playfair gold */
.problem-stat-number { font-family: var(--serif) !important; font-style: italic !important; color: var(--gold); }

/* Phone preview - real app screenshot inside the marketing phone frame.
   Wrapper scrolls vertically so the tall screenshot can be panned through. */
.phone-content { padding: 0 !important; }
.phone-scroll-mask { display: none !important; }
.phone-screenshot-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 32px;
  scrollbar-width: none;
}
.phone-screenshot-scroll::-webkit-scrollbar { display: none; }
.phone-screenshot-img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* ============================================================
   Desktop split-page architecture.
   On the homepage at desktop width, only Hero + Belief + the
   doors panel render. The Problem, App, Mates, Pricing, CTA
   sections continue to render on mobile (long scroll) and on
   their dedicated pages, but are hidden on desktop home.
   Mobile keeps the original single-scroll experience.
   ============================================================ */
.home-doors { display: none; }
.nav-links-desktop { display: none; }

@media (min-width: 900px) {
  .page-home .problem,
  .page-home .app,
  .page-home .mates,
  .page-home .pricing-section,
  .page-home .cta { display: none !important; }

  .page-home .home-doors { display: block; }
  .page-home .home-audits-ticker { display: block; }

  .nav-links-desktop { display: flex; }
  .nav-links-mobile { display: none !important; }
}

/* Audits ticker - thin horizontal magazine-style strip between Belief and
   Doors on the desktop homepage. Names the three audits in italic Playfair
   so visitors meet the audit vocabulary before the App door describes it
   in detail. Hidden on mobile (the long-scroll App section already covers
   this ground). */
.home-audits-ticker {
  display: none;
  background: var(--cream, #f4f1ea);
  border-top: 1px solid rgba(22, 20, 18, 0.22);
  border-bottom: 1px solid rgba(22, 20, 18, 0.22);
  padding: 18px 56px;
}
.home-audits-ticker-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.home-audits-ticker-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
}
.home-audits-ticker-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.home-audits-ticker-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.home-audits-ticker-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Doors panel - the 3 cards on desktop home that lead to subpages. */
.home-doors {
  padding: 80px var(--page-pad) 120px;
  background: #fff;
}
.home-doors-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.home-doors-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 18px;
}
.home-doors-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--text);
  text-align: center;
  margin-bottom: 56px;
  letter-spacing: -0.01em;
}
.home-doors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.home-door {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.10);
  border-left: 2px solid var(--gold);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  min-height: 280px;
}
.home-door:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 17, 17, 0.22);
  border-left-color: var(--gold);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.06);
  text-decoration: none;
}
/* Legacy class - kept for any cached page rendering during deploy. The
   new structure uses .home-door-numeral-row / .home-door-numeral / .home-door-eyebrow. */
.home-door-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

/* Roman-numeral spine for doors - italic Playfair gold numeral on the
   left, mono eyebrow on the right, both baseline-aligned. */
.home-door-numeral-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.home-door-numeral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.home-door-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 8px;
  text-align: right;
}
.home-door-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 14px;
}
.home-door-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-sub);
  margin-bottom: auto;
  padding-bottom: 24px;
}
.home-door-cta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.home-door-cta::after {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 180ms ease;
}
.home-door:hover .home-door-cta::after { width: 36px; }