/* ── BASE ── */
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--black);
  /* Sticky footer: body grows to fill the full viewport height so the footer
     always sits at the bottom even when page content is shorter than the screen.
     flex-direction: column keeps all direct children stacking vertically, which
     is identical to normal block layout for the index page sections. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Standalone pages (interview, confirmed, legal) wrap their content in <main>.
   flex: 1 makes it expand to fill the space between the nav and footer. */
main {
  flex: 1;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 48px;
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(14px);
  /* Initially transparent so no border shows at the top of the page.
     JS adds .scrolled once the user scrolls past 20 px, triggering the
     transition below and making content beneath the nav visually separate. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
nav.scrolled { border-color: var(--border); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo img {
  display: block;
  margin-top: 2px;
}
.nav-logo svg { width: 32px; height: 32px; }

.nav-logo-text {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 20px;
  color: var(--green);
  letter-spacing: -0.3px;
}

.nav-cta {
  background: var(--green);
  color: var(--white);
  border: none;
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.nav-cta:hover { background: var(--green-dark); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(ellipse, rgba(45, 106, 79, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.hero-logo svg { width: 72px; height: 72px; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(56px, 10vw, 100px);
  line-height: 0.92;
  letter-spacing: -3px;
  color: var(--green);
  margin-bottom: 15px;
}
.hero-title img {
  display: block;
  margin: 0 auto 15px;
}
.hero-title-dot { color: var(--black); }

.hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2.5vw, 22px);
  color: var(--gray);
  margin-bottom: 40px;
  max-width: 500px;
  line-height: 1.55;
}

.hero-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gray-light);
  margin-bottom: 48px;
}

/* ── SUBSCRIBE FORMS ── */

/* Wrapper that constrains the form to a readable width in the hero. */
.form-wrap {
  width: 100%;
  max-width: 460px;
}

/* Honeypot field: moved off-screen rather than display:none so that
   sophisticated bots that skip hidden elements still miss it, while screen
   readers won't encounter it because aria-hidden is set on the wrapper. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Side-by-side email input + submit button layout. */
.form-row {
  display: flex;
  width: 100%;
}

.subscribe-form input[type="email"] {
  flex: 1;
  padding: 15px 18px;
  border: 1.5px solid var(--border);
  border-right: none;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--black);
  outline: none;
  transition: border-color 0.2s;
  /* Prevents the browser from rounding the left corners on autofill overlays. */
  border-radius: 0;
  -webkit-appearance: none;
}
.subscribe-form input[type="email"]::placeholder { color: var(--gray-light); }
.subscribe-form input[type="email"]:focus { border-color: var(--green); }

.subscribe-form button[type="submit"] {
  position: relative;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  padding: 15px 24px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  border-radius: 0;
}
.subscribe-form button[type="submit"]:hover { background: var(--green-dark); border-color: var(--green-dark); }
.subscribe-form button[type="submit"]:disabled { opacity: 0.65; cursor: not-allowed; }

/* Loading spinner text — only visible while the form is in loading state. */
.btn-loading { display: none; }
.subscribe-form[data-state="loading"] .btn-text { display: none; }
.subscribe-form[data-state="loading"] .btn-loading { display: inline; }

/* On success, hide the input row and show only the status message. */
.subscribe-form[data-state="success"] .form-row { display: none; }

/* ── STATUS MESSAGES ── */
/* .form-status (subscribe forms) and .unsubscribe-status (/unsubscribe) share
   the same typographic base. Error/success colours are defined once here using
   the --color-error token from variables.css so they stay consistent. */
.form-status,
.unsubscribe-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  min-height: 1.4em;
  color: var(--gray-light);
}
.form-status[data-type="error"],
.unsubscribe-status[data-type="error"] { color: var(--color-error); }
.form-status[data-type="success"],
.unsubscribe-status[data-type="success"] { color: var(--green); }
/* Subscribe form status sits below the inline input+button row, centred. */
.form-status { margin-top: 10px; text-align: center; }

/* Note below the form (privacy reassurance, launch date, etc.). */
.form-note {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--gray-light);
  text-align: center;
}

/* ── SOCIAL PROOF BAR ── */
.social-proof {
  padding: 18px 48px;
  display: flex;
  justify-content: center;
  gap: 48px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.sp-item { text-align: center; }
.sp-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--green);
  line-height: 1;
  display: block;
}
.sp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gray-light);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

/* ── SECTIONS ── */
.section {
  padding: var(--section-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -1px;
  margin-bottom: 22px;
  color: var(--black);
}
.section-title em { font-style: italic; color: var(--green); }

.section-body {
  font-size: 16px;
  line-height: 1.78;
  color: var(--gray);
  font-weight: 300;
  max-width: 580px;
}

/* ── PAIN CARDS ── */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  margin-top: 52px;
}
.pain-card {
  background: var(--cream);
  padding: 36px 26px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.pain-card:hover { background: var(--cream-hover); }

.pain-num {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 900;
  color: var(--border);
  line-height: 1;
  margin-bottom: 14px;
  transition: color 0.3s;
}
.pain-title { font-weight: 600; font-size: 15px; color: var(--black); margin-bottom: 8px; }
.pain-desc { font-size: 13px; color: var(--gray); line-height: 1.65; font-weight: 300; }

/* ── HOW IT WORKS ── */
.how-section {
  background: var(--green-dark);
  color: var(--white);
  padding: var(--section-padding);
}
.how-inner { max-width: var(--max-width); margin: 0 auto; }
.how-section .section-label { color: var(--green-mid); opacity: 0.7; }
.how-section .section-title { color: var(--white); }
.how-section .section-title em { color: var(--green-mid); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 52px;
  background: rgba(255, 255, 255, 0.07);
}
.step-card {
  background: var(--green-dark);
  padding: 36px 30px;
  transition: background 0.3s;
}
.step-arrow {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--green-mid);
  opacity: 0.6;
  letter-spacing: 2px;
  margin-bottom: 14px;
  display: block;
}
.step-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.2;
}
.step-desc { font-size: 13px; color: rgba(255, 255, 255, 0.52); line-height: 1.65; font-weight: 300; }
.step-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--green-mid);
  border: 1px solid rgba(183, 228, 199, 0.25);
  padding: 3px 8px;
}

/* ── DIFFERENTIATOR ── */
.diff-section {
  padding: var(--section-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}
.diff-quote {
  border-left: 4px solid var(--green);
  padding: 18px 24px;
  margin: 44px 0;
}
.diff-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 2.8vw, 24px);
  color: var(--black);
  line-height: 1.4;
}

.compare-table { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 13px; }
.compare-table th {
  text-align: left;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gray-light);
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}
.compare-table th:not(:first-child) { text-align: center; }
.compare-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--gray);
  font-weight: 300;
}
.compare-table td:first-child { font-weight: 500; color: var(--black); font-size: 12.5px; }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table tr:hover td { background: var(--cream-hover); }
.chk { color: var(--green); font-size: 15px; }
.crs { color: var(--border); font-size: 15px; }
/* Higher specificity (class + element) overrides the generic td rule without !important. */
.compare-table td.gramm-col { color: var(--green); font-weight: 600; }

/* ── QUOTES ── */
.quotes-section {
  background: var(--cream-alt);
  padding: 80px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.quotes-inner { max-width: var(--max-width); margin: 0 auto; }
.quotes-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 44px;
  display: block;
}
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 26px 22px;
  transition: border-color 0.2s;
}
.quote-card:hover { border-color: var(--green); }
.quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--black);
  margin-bottom: 14px;
}
.quote-source {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--gray-light);
}

/* ── FINAL CTA ── */
.cta-section {
  padding: 120px 24px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.cta-section .section-label { text-align: center; }
.cta-logo {margin-bottom: 20px; display: flex; justify-content: center; }
.cta-logo svg { width: 56px; height: 56px; }
.cta-logo img { display: block; }
.cta-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.92;
  letter-spacing: -2px;
  color: var(--green);
  margin-bottom: 14px;
}
.cta-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gray);
  margin-bottom: 44px;
  line-height: 1.5;
}
.cta-mc-wrap { max-width: 420px; margin: 0 auto; }

/* ── INTERVIEW SECTION ── */
.interview-section {
  background: var(--cream-alt);
  border-top: 1px solid var(--border);
  padding: var(--section-padding);
}

/* On the standalone interview page the section is the only content block,
   so extra top padding is needed to clear the fixed nav bar.
   clamp() scales between 100px (small screens) and 160px (large screens),
   using 14vw as the preferred value — at ~1000px viewport width that yields
   140px, which comfortably clears the nav with breathing room. */
.interview-standalone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.interview-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.interview-body {
  font-size: 16px;
  line-height: 1.78;
  color: var(--gray);
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto 36px;
}
.interview-form-wrap {
  max-width: 520px;
  margin: 0 auto;
}

/* ── STATUS PAGE ── */
/* Shared layout for simple full-page messages: /confirmed and 404.
   Centred, vertically padded to clear the fixed nav. */
.status-page {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 140px 24px 80px;
}
.status-logo {
  margin-bottom: 28px;
  opacity: 0.85;
}
.status-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 0.92;
  letter-spacing: -2px;
  color: var(--green);
  margin-bottom: 20px;
}
.status-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gray);
  line-height: 1.55;
  margin-bottom: 36px;
}

/* ── FOOTER ── */
footer {
  position: relative;
  padding: 28px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
}
.footer-left { display: flex; align-items: center; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-logo-text {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 16px;
  color: var(--green);
}
.footer-links {
  display: flex;
  gap: 24px;
  padding-top: 2px;
}
.footer-links a {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--gray-light);
  letter-spacing: 0.5px;
  text-decoration: underline;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--gray);
}
.footer-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gray-light);
  letter-spacing: 1px;
}
.footer-socials {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-socials a {
  display: flex;
  align-items: center;
  filter: brightness(0) opacity(0.35);
  transition: filter 0.2s;
  transform: translateZ(0);
}
.footer-socials a:hover {
  filter: brightness(0) opacity(0.65);
}
.footer-socials a img {
  display: block;
  width: 18px;
  height: 18px;
}

/* ── LEGAL PAGES ── */
.legal-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 140px 24px 100px;
}
.legal-page .section-label { margin-bottom: 12px; }
.legal-page h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--green);
  margin-bottom: 48px;
}
.legal-block {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.legal-block:last-child { border-bottom: none; }
.legal-block h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 14px;
}
.legal-block p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
  font-weight: 300;
  margin-bottom: 12px;
}
.legal-block p:last-child { margin-bottom: 0; }
.legal-block a {
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid var(--green-light);
  transition: border-color 0.2s;
}
.legal-block a:hover { border-color: var(--green); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  nav { padding: 14px 20px; }
  .pain-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .quotes-grid { grid-template-columns: 1fr; }
  .social-proof { gap: 20px; padding: 16px 20px; flex-wrap: wrap; }
  footer { flex-direction: column; gap: 14px; text-align: center; }
  .footer-left { flex-direction: column; gap: 12px; align-items: center; }
  .footer-socials { position: static; transform: none; justify-content: center; gap: 20px; }

  /* Stack form fields vertically on small screens. */
  .form-row { flex-direction: column; }
  .subscribe-form input[type="email"] {
    border-right: 1.5px solid var(--border);
    border-bottom: none;
  }
}

/* ── UNSUBSCRIBE PAGE ── */
.unsubscribe-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 140px 24px 80px;
}
.unsubscribe-page .section-label { display: block; margin-bottom: 12px; }
.unsubscribe-page h1 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 56px);
  letter-spacing: -2px;
  line-height: 1;
  color: var(--black);
  margin-bottom: 16px;
}
.unsubscribe-intro {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 36px;
}
.unsubscribe-form { display: flex; flex-direction: column; gap: 24px; }
.unsubscribe-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 6px;
}
.unsubscribe-field input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--black);
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.unsubscribe-field input[type="email"]:focus { border-color: var(--green); }
.unsubscribe-field input[type="email"]::placeholder { color: var(--gray-light); }
.unsubscribe-lists-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 10px;
}
.list-options { display: flex; flex-direction: column; gap: 10px; min-height: 24px; }
.list-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--black);
  cursor: pointer;
}
.list-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}
.unsubscribe-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-ghost {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost:hover { color: var(--green-dark); }

/* On success, hide all form controls and show only the status message. */
.unsubscribe-form[data-state="success"] .unsubscribe-field,
.unsubscribe-form[data-state="success"] .unsubscribe-lists,
.unsubscribe-form[data-state="success"] .unsubscribe-actions { display: none; }