/* The Million Dollar Webinar Workshop — Letter v2
 * Long-form sales-letter version. Stripped-back layout: countdown strip,
 * title + inline form, continuous copy, bonus accordion, close.
 * Keeps Tracy Harris tokens (Editors Note serif, Poppins, sage rule, aztek/oatmeal).
 * No grid heroes, no big stat cards. Just type, rule, body.
 */

body.letter { background: var(--p-oatmeal); }

.letter-wrap {
  max-width: 740px; margin: 0 auto; padding: 0 28px;
}

/* ---------- Countdown strip ---------- */
.letter-countdown {
  background: var(--p-aztek); color: var(--p-oatmeal);
  padding: 18px 24px;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(246,244,241,0.14);
}
.letter-countdown__label {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(246,244,241,0.7);
}
.letter-countdown__clock {
  display: flex; gap: 28px; align-items: flex-end;
}
.letter-countdown__unit { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.letter-countdown__num {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: 30px; line-height: 1; letter-spacing: -0.02em;
  color: var(--p-oatmeal);
  font-variant-numeric: tabular-nums;
}
.letter-countdown__unit-label {
  font-family: var(--f-sans); font-size: 9px; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--p-sage);
}
@media (max-width: 560px) {
  .letter-countdown { gap: 14px; padding: 14px; }
  .letter-countdown__clock { gap: 16px; }
  .letter-countdown__num { font-size: 24px; }
}

/* ---------- Top brand strip (very minimal) ---------- */
/* Mobile-only Tracy brandmark above the countdown */
.letter-topmark { display: none; }
@media (max-width: 720px) {
  .letter-topmark {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--p-aztek);
    padding: 14px 16px 0;
  }
  .letter-topmark img {
    height: 22px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  /* Hide the dark logo below countdown on mobile, the white logo above covers it */
  .letter-brand { display: none; }
}

.letter-brand {
  padding: 28px 28px 0;
  display: flex; justify-content: center;
}
.letter-brand img { height: 22px; opacity: 0.9; }

/* Hide the dark logo below countdown on mobile, the white logo above covers it */
@media (max-width: 720px) {
  .letter-brand { display: none; }
}

/* ---------- Hero block ---------- */
/* Tracy is anchored to the FORM's right edge: left: calc(50% + 260px).
 * The form is centered with max-width 480px (half = 240px), so her left edge
 * sits 20px clear of the form's right edge regardless of viewport width.
 * Form has z-index 3 so its solid white card cleanly covers her body where
 * they overlap. Title is capped to 520px max-width so it never crosses into
 * her column either.
 */
.letter-hero {
  padding: 40px 0 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 721px) {
  .letter-hero { min-height: 560px; }
}
.letter-hero > .letter-wrap { position: relative; z-index: 2; }
.letter-hero__portrait {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% + 280px);
  width: 280px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.letter-hero__portrait img {
  width: 100%; height: auto; display: block;
}
.letter-hero .letter-form { position: relative; z-index: 3; }

/* Cap title so it never extends into Tracy's column on wide viewports.
 * The base .letter-hero__title rule (later in this file) sets the font scale
 * and balance; this just bounds the visual width. */
.letter-hero .letter-hero__title { max-width: 740px; margin-left: auto; margin-right: auto; }
.letter-hero__title br.dt-only { display: inline; }
.letter-hero__kicker br.mb-only { display: none; }
.letter-hero__kicker .kicker-sep { display: inline; }

/* Mobile (<720px): text becomes left-aligned in a ~60% column.
 * Tracy fills the right of the viewport, allowed to bleed off the right edge.
 * Selectors use .letter-hero ancestor to outrank the base max-width rules
 * defined later in this file. */
@media (max-width: 720px) {
  .letter-hero__title br.dt-only { display: none; }
  .letter-hero { padding: 28px 0 36px; }

  .letter-hero .letter-hero__title,
  .letter-hero .letter-hero__sub,
  .letter-hero .letter-hero__hook {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  /* Eyebrow + kicker get FULL WIDTH at the top of the hero so they read
   * cleanly above the Tracy-portrait split below. */
  .letter-hero .letter-hero__eyebrow {
    text-align: center; max-width: 100%; font-size: 15px;
    margin: 0 auto 16px; padding: 0 4vw;
  }
  .letter-hero .letter-hero__kicker {
    text-align: center; max-width: 100%; font-size: 10.5px;
    letter-spacing: 0.18em; margin: 0 auto 22px;
  }
  .letter-hero__kicker .kicker-sep { display: none; }
  .letter-hero__kicker br.mb-only { display: inline; }
  .letter-hero__kicker .kicker-line { white-space: nowrap; }
  .letter-hero .letter-hero__title {
    font-size: clamp(34px, 9vw, 56px);
    line-height: 1.02; letter-spacing: -0.022em;
    max-width: 64%;
  }
  .letter-hero .letter-hero__sub {
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.32;
    max-width: 60%;
  }
  .letter-hero .letter-hero__hook {
    font-size: 15.5px; line-height: 1.45;
    max-width: 60%;
  }

  /* Tracy starts BELOW the eyebrow + kicker — aligned with the title row
   * so the page reads: full-width eyebrow, full-width kicker, then split
   * column (text left, Tracy right) starting at the title.
   * Wider here than the earlier draft so she fills the right column properly
   * instead of looking shrunken. */
  .letter-hero__portrait {
    left: auto;
    right: -8vw;
    top: 130px;
    bottom: auto;
    width: 60vw;
    overflow: visible;
  }
  .letter-hero__portrait img { margin-top: 0; }

  /* Form returns to full-width below the text+portrait block */
  .letter-hero .letter-form { width: 100%; max-width: 100%; margin-top: 32px; }
  .letter-hero__credentials { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .letter-hero__portrait {
    width: 64vw;
    right: -12vw;
    top: 124px;
  }
  .letter-hero .letter-hero__title,
  .letter-hero .letter-hero__sub,
  .letter-hero .letter-hero__hook { max-width: 56%; }
  .letter-hero .letter-hero__hook { line-height: 1.4; font-size: 15px; }
  .letter-hero .letter-hero__eyebrow { font-size: 14px; max-width: 100%; padding: 0 5vw; }
}

.letter-hero__credentials {
  margin: 32px 0 0;
  display: flex; gap: 24px 36px; flex-wrap: wrap;
  justify-content: center;
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: 16px; color: var(--p-charcoal); letter-spacing: -0.005em;
}
.letter-hero__credentials em {
  font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek);
  margin-right: 6px;
}

.letter-hero__eyebrow {
  font-family: var(--f-sans); font-style: normal;
  font-weight: var(--w-regular);
  font-size: clamp(14px, 1.4vw, 16px); line-height: 1.45;
  color: var(--p-charcoal); margin: 0 auto 14px; max-width: 46ch;
  text-align: center;
  letter-spacing: 0.01em;
}
.letter-hero__eyebrow em {
  font-family: var(--f-sans); font-style: italic;
  color: var(--p-aztek); font-weight: var(--w-medium);
}
.letter-hero__kicker {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--p-sage); margin: 0 0 18px;
}
.letter-hero__title .tm {
  font-family: var(--f-sans); font-style: normal;
  font-size: 0.22em; vertical-align: 1.2em;
  color: var(--p-sage); font-weight: var(--w-medium);
  margin-left: 0.08em; letter-spacing: 0;
  line-height: 1;
}
.letter-invest__price .ccy {
  font-size: 0.42em; vertical-align: 0.45em;
  font-weight: var(--w-regular); color: var(--p-mute);
  margin-right: 0.05em; letter-spacing: 0.04em;
  font-family: var(--f-sans);
}
.letter-hero__title {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(48px, 7.5vw, 84px);
  line-height: 0.96; letter-spacing: -0.028em;
  color: var(--p-charcoal); margin: 0 0 14px;
  text-wrap: balance;
}
.letter-hero__title em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.letter-hero__sub {
  font-family: var(--f-serif-display); font-style: italic; font-weight: var(--w-regular);
  font-size: clamp(20px, 2.5vw, 26px); line-height: 1.3;
  color: var(--p-aztek); margin: 0 auto 26px; max-width: 30ch;
}
.letter-hero__hook {
  font-family: var(--f-sans); font-size: 17px; line-height: 1.65;
  color: var(--p-ink); margin: 0 auto 36px; max-width: 56ch;
}
.letter-hero__hook em { font-style: italic; color: var(--p-aztek); }

/* ---------- Register form ---------- */
.letter-form {
  background: var(--p-white);
  border: 1px solid rgba(16,16,16,0.06);
  padding: 26px 28px 24px;
  text-align: left;
  max-width: 480px; margin: 0 auto;
}
.letter-form__title {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: 20px; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--p-charcoal); margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16,16,16,0.1);
}
.letter-form__title em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.letter-form__title-tag {
  margin-left: 6px;
  font-family: var(--f-sans); font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-sage);
  vertical-align: 2px;
}
.letter-form__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.letter-form__field { display: flex; flex-direction: column; gap: 5px; }
.letter-form__field--full { grid-column: 1 / -1; }
.letter-form__label {
  font-family: var(--f-sans); font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-mute);
}
.letter-form__input, .letter-form__select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: var(--f-sans); font-size: 16px; color: var(--p-charcoal);
  padding: 12px 12px;
  background: var(--p-oatmeal);
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(16,16,16,0.18);
  transition: border-color .15s, background .15s;
}
@media (min-width: 720px) {
  .letter-form__input, .letter-form__select { font-size: 14px; padding: 10px 12px; }
}
.letter-form__input:focus, .letter-form__select:focus {
  outline: none; background: var(--p-white);
  border-color: var(--p-sage);
}
.letter-form__select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231e3735' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.letter-form__consent {
  margin-top: 12px;
  font-family: var(--f-sans); font-size: 11px; line-height: 1.5; color: var(--p-mute);
}
.letter-form__consent a { color: var(--p-aztek); text-decoration: underline; text-underline-offset: 2px; }
.letter-form__submit {
  margin-top: 16px;
  width: 100%;
  font-family: var(--f-sans); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--p-aztek); color: var(--p-oatmeal);
  border: 0; padding: 16px 24px; cursor: pointer;
  transition: background .15s, transform .15s;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.letter-form__submit:hover { background: var(--p-sage); transform: translateY(-1px); }
.letter-form__submit svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .letter-form { padding: 22px 20px; }
  .letter-form__grid { grid-template-columns: 1fr; }
}

/* ---------- Letter body ---------- */
.letter-body { padding: 24px 0 16px; }
.letter-body + .letter-body { padding-top: 8px; }
.letter-body + .letter-body h2:first-child { margin-top: 16px; }
.letter-body p {
  font-family: var(--f-sans); font-size: 17px; line-height: 1.75;
  color: var(--p-ink); margin: 0 0 22px;
  text-wrap: pretty;
}
.letter-body p.letter-body__lede {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(26px, 4.2vw, 34px); line-height: 1.25; letter-spacing: -0.012em;
  color: var(--p-charcoal); margin: 0 0 28px;
}
.letter-body p.letter-body__lede strong { font-weight: var(--w-regular); }
.letter-body p strong { color: var(--p-charcoal); font-weight: var(--w-semibold); }
.letter-body p em { font-style: italic; color: var(--p-aztek); }

.letter-body h2 {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--p-charcoal); margin: 48px 0 22px;
  text-wrap: balance;
}
.letter-body h2 em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.letter-body h2::before {
  content: ""; display: block; width: 56px; height: 1px;
  background: var(--p-sage); margin: 0 0 22px;
}

.letter-body h3 {
  font-family: var(--f-sans); font-size: 13px; font-weight: var(--w-semibold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--p-aztek); margin: 32px 0 14px;
}

.letter-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 28px;
  border-left: 2px solid var(--p-sage);
  font-family: var(--f-serif-display); font-style: italic; font-weight: var(--w-regular);
  font-size: 22px; line-height: 1.45; letter-spacing: -0.008em;
  color: var(--p-aztek);
}

.letter-body ul, .letter-body ol {
  margin: 0 0 22px; padding: 0; list-style: none;
}
.letter-body ul li, .letter-body ol li {
  font-family: var(--f-sans); font-size: 17px; line-height: 1.7;
  color: var(--p-ink);
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid rgba(16,16,16,0.08);
  position: relative;
}
.letter-body ul li:last-child, .letter-body ol li:last-child { border-bottom: 0; }
.letter-body ul li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 8px; height: 8px; background: var(--p-sage); border-radius: 50%;
}
.letter-body ol { counter-reset: letter-ol; }
.letter-body ol li { counter-increment: letter-ol; }
.letter-body ol li::before {
  content: counter(letter-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 12px;
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; color: var(--p-sage);
}
.letter-body li strong { color: var(--p-charcoal); font-weight: var(--w-semibold); }
.letter-body li em { font-style: italic; color: var(--p-aztek); }

.letter-portrait {
  margin: 56px 0;
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 28px; align-items: center;
}
@media (max-width: 600px) { .letter-portrait { grid-template-columns: 1fr; } }
.letter-portrait__img {
  aspect-ratio: 4/5; overflow: hidden; background: var(--p-cream);
}
.letter-portrait__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.letter-portrait__caption {
  font-family: var(--f-serif-display); font-style: italic; font-weight: var(--w-regular);
  font-size: 20px; line-height: 1.4; color: var(--p-aztek); margin: 0;
}
.letter-portrait__caption-meta {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(16,16,16,0.12);
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; font-style: normal;
  color: var(--p-mute);
}

/* ---------- Investment block ---------- */
.letter-invest {
  margin: 56px 0;
  text-align: center;
  padding: 40px 28px;
  border-top: 1px solid var(--p-sage);
  border-bottom: 1px solid var(--p-sage);
}
.letter-invest__label {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-mute);
  margin: 0 0 10px;
}
.letter-invest__price {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(56px, 8vw, 80px); line-height: 1; letter-spacing: -0.03em;
  color: var(--p-aztek); margin: 0 0 8px;
}
.letter-invest__price em { font-family: var(--f-serif-italic); font-style: italic; }
.letter-invest__currency {
  font-family: var(--f-sans); font-size: 13px; font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--p-mute);
  margin: 0 0 26px;
}
.letter-invest__cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-sans); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--p-aztek); color: var(--p-oatmeal);
  padding: 18px 32px; text-decoration: none;
  transition: background .15s;
}
.letter-invest__cta:hover { background: var(--p-sage); }
.letter-invest__cta svg { width: 14px; height: 14px; }

/* ---------- Bonuses accordion ---------- */
.letter-bonuses { margin: 64px 0; }
.letter-bonuses__kit {
  text-align: center;
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.018em;
  color: var(--p-charcoal); margin: 0 0 32px;
}
.letter-bonuses__kit em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }

.bonus-item {
  border-top: 1px solid rgba(16,16,16,0.12);
}
.bonus-item:last-child { border-bottom: 1px solid rgba(16,16,16,0.12); }
.bonus-item__head {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 100%; text-align: left;
  padding: 22px 0;
  display: grid; grid-template-columns: 56px 1fr 18px; align-items: center; gap: 20px;
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(18px, 2vw, 22px); line-height: 1.25; letter-spacing: -0.012em;
  color: var(--p-charcoal);
  transition: color .15s;
}
.bonus-item__head em { font-family: var(--f-serif-italic); font-style: italic; }
.bonus-item__head:hover { color: var(--p-aztek); }
.bonus-item__num {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; color: var(--p-sage);
}
.bonus-item__icon {
  position: relative; width: 16px; height: 16px;
}
.bonus-item__icon::before, .bonus-item__icon::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--p-aztek);
  transition: transform .25s ease, opacity .25s ease;
}
.bonus-item__icon::after { transform: rotate(90deg); }
.bonus-item[data-open="true"] .bonus-item__icon::after { transform: rotate(0deg); opacity: 0; }
.bonus-item__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.bonus-item__panel-inner {
  padding: 0 0 26px 76px;
  font-family: var(--f-sans); font-size: 15px; line-height: 1.7; color: var(--p-ink);
  max-width: 62ch;
}
@media (max-width: 540px) {
  .bonus-item__head { grid-template-columns: 44px 1fr 16px; gap: 14px; }
  .bonus-item__panel-inner { padding-left: 58px; }
}

/* ---------- Dont come if section ---------- */
.letter-dont {
  background: var(--p-cream);
  margin: 64px -28px 48px;
  padding: 48px 28px;
}
.letter-dont__title {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(28px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -0.018em;
  color: var(--p-charcoal); margin: 0 0 22px;
}
.letter-dont__title em { font-family: var(--f-serif-italic); font-style: italic; }
.letter-dont ul { padding: 0; margin: 0 0 28px; list-style: none; }
.letter-dont li {
  font-family: var(--f-sans); font-size: 16px; line-height: 1.6;
  color: var(--p-ink);
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid rgba(16,16,16,0.1);
  position: relative;
}
.letter-dont li:last-child { border-bottom: 0; }
.letter-dont li::before {
  content: ""; position: absolute; left: 0; top: 22px;
  width: 10px; height: 1px; background: var(--p-mute);
}
.letter-dont__close {
  font-family: var(--f-sans); font-size: 15px; line-height: 1.7; color: var(--p-ink);
  margin: 0;
}
.letter-dont__close strong { color: var(--p-aztek); font-weight: var(--w-semibold); }
@media (max-width: 540px) {
  .letter-dont { margin: 48px -22px 32px; padding: 36px 22px; }
}

/* ---------- Logistics block ---------- */
.letter-logistics {
  margin: 48px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid rgba(16,16,16,0.12);
}
@media (max-width: 540px) { .letter-logistics { grid-template-columns: 1fr; } }
.logistics-row {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(16,16,16,0.08);
  border-right: 1px solid rgba(16,16,16,0.08);
  display: flex; flex-direction: column; gap: 4px;
}
.logistics-row:nth-child(2n) { border-right: 0; }
.logistics-row:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 540px) {
  .logistics-row { border-right: 0; }
  .logistics-row:nth-last-child(-n+2) { border-bottom: 1px solid rgba(16,16,16,0.08); }
  .logistics-row:last-child { border-bottom: 0; }
}
.logistics-row__city {
  font-family: var(--f-sans); font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--p-sage);
}
.logistics-row__when {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: 18px; letter-spacing: -0.012em; color: var(--p-charcoal);
}
.logistics-row__when em { font-family: var(--f-serif-italic); font-style: italic; }

/* ---------- Sign off ---------- */
.letter-signoff { margin: 48px 0 24px; }
.letter-signoff__line {
  font-family: var(--f-sans); font-size: 17px; line-height: 1.7; color: var(--p-ink); margin: 0 0 18px;
}
.letter-signoff__sig {
  font-family: var(--f-script); font-size: 48px; color: var(--p-sage); margin: 0;
}

/* ---------- Meet your host ---------- */
.letter-host {
  position: relative;
  margin: 64px 0 0;
  padding: 0;
  overflow: visible;
}
.letter-host__stage {
  position: absolute;
  top: 48px; right: -100vw; bottom: 0; left: 38%;
  background: var(--p-cream);
  z-index: 0;
}
.letter-host__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: end;
}
.letter-host__copy {
  padding: 40px 0 56px;
  display: flex; flex-direction: column; gap: 16px;
}
.letter-host__eyebrow {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--p-sage); margin: 0;
}
.letter-host__name {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(34px, 4vw, 48px); line-height: 1.02; letter-spacing: -0.024em;
  color: var(--p-charcoal); margin: 0;
}
.letter-host__name em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.letter-host__rule { width: 56px; height: 1px; background: var(--p-sage); border: 0; margin: 8px 0 4px; }
.letter-host__bio {
  font-family: var(--f-sans); font-size: 15px; line-height: 1.7; color: var(--p-ink);
  margin: 0;
}
.letter-host__bio em { font-style: italic; color: var(--p-aztek); }
.letter-host__credentials {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 0;
}
.letter-host__credentials li {
  padding: 12px 0; border-top: 1px solid rgba(16,16,16,0.1);
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: 17px; line-height: 1.2; color: var(--p-charcoal); letter-spacing: -0.005em;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.letter-host__credentials li:last-child { border-bottom: 1px solid rgba(16,16,16,0.1); }
.letter-host__credentials li em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.letter-host__credentials li span {
  font-family: var(--f-sans); font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-mute);
}

.letter-host__media {
  position: relative;
  align-self: end;
  min-height: 480px;
}
.letter-host__media img {
  display: block;
  position: absolute; bottom: 0; right: 0;
  width: 100%; max-width: 420px;
  height: auto; max-height: 620px;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 24px 40px rgba(16,16,16,0.12));
}

@media (max-width: 720px) {
  .letter-host { margin-top: 40px; }
  .letter-host__stage {
    top: auto; bottom: 0; left: 0; right: -100vw;
    height: 60%;
  }
  .letter-host__inner {
    grid-template-columns: 1fr; gap: 0;
  }
  .letter-host__copy { padding: 32px 0 0; order: 2; }
  .letter-host__media {
    order: 1; min-height: 0; padding-top: 24px;
    display: flex; justify-content: center;
  }
  .letter-host__media img {
    position: static;
    max-width: 280px; max-height: 460px;
  }
}

/* ---------- Hero CTA button + meta (replaces inline form) ---------- */
.letter-hero__cta-row {
  margin: 36px 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.letter-hero__cta {
  font-family: var(--f-sans); font-size: 13px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--p-aztek); color: var(--p-oatmeal);
  border: 0; padding: 20px 32px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 14px 30px rgba(30,55,53,0.18);
}
.letter-hero__cta:hover { background: var(--p-sage); transform: translateY(-1px); }
.letter-hero__cta:active { transform: translateY(0); }
.letter-hero__cta svg { width: 16px; height: 16px; }
.letter-hero__cta-meta {
  font-family: var(--f-sans); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--p-mute); margin: 0;
}

@media (max-width: 720px) {
  .letter-hero__cta-row { margin-top: 28px; align-items: stretch; }
  .letter-hero__cta { width: 100%; justify-content: center; padding: 18px 24px; }
  .letter-hero__cta-meta { text-align: center; }
}


/* ---------- Register modal ---------- */
.lt-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.lt-modal[data-open="true"] { display: flex; }
.lt-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(16,16,16,0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lt-fade-in .25s ease;
}
.lt-modal__panel {
  position: relative; z-index: 1;
  background: var(--p-oatmeal);
  width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  padding: 44px 40px 36px;
  border: 1px solid rgba(16,16,16,0.06);
  animation: lt-modal-rise .3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lt-modal-rise {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.lt-modal__close {
  position: absolute; top: 14px; right: 14px;
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--p-mute); padding: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.lt-modal__close:hover { color: var(--p-charcoal); }
.lt-modal__close svg { width: 18px; height: 18px; }

.lt-modal__eyebrow {
  font-family: var(--f-sans); font-size: 11px; font-weight: var(--w-medium);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--p-sage); margin: 0 0 16px;
}
.lt-modal__title {
  font-family: var(--f-serif-display); font-weight: var(--w-regular);
  font-size: clamp(28px, 4vw, 36px); line-height: 1.05; letter-spacing: -0.018em;
  color: var(--p-charcoal); margin: 0 0 10px;
}
.lt-modal__title em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); }
.lt-modal__intro {
  font-family: var(--f-sans); font-size: 14px; line-height: 1.6;
  color: var(--p-ink); margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--p-sage);
}

/* Modal-flavoured form — no card chrome, sits directly on the panel background */
.letter-form--modal {
  background: transparent; border: 0; padding: 0; max-width: none; margin: 0;
}

/* Phone combo — fixed-width dial code select + flexible number input */
.letter-form__phone {
  display: grid; grid-template-columns: 116px 1fr; gap: 8px;
}
.letter-form__phone-code {
  padding-right: 28px;
  background-position: right 8px center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .lt-modal__panel { padding: 36px 24px 28px; }
  .letter-form__phone { grid-template-columns: 104px 1fr; }
}


/* ---------- Mini footer ---------- */
.letter-foot {
  padding: 36px 28px 48px;
  text-align: center;
  border-top: 1px solid rgba(16,16,16,0.08);
  margin-top: 24px;
}
.letter-foot p {
  font-family: var(--f-sans); font-size: 12px; color: var(--p-mute);
  margin: 0 0 12px;
}
.letter-foot ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
}
.letter-foot a { font-family: var(--f-sans); font-size: 12px; color: var(--p-mute); text-decoration: none; }
.letter-foot a:hover { color: var(--p-aztek); }


/* ---------- Sticky save-my-seat bar ---------- */
.letter-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--p-aztek); color: var(--p-oatmeal);
  border-top: 1px solid rgba(246,244,241,0.18);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.letter-sticky[data-visible="true"] { transform: translateY(0); }
.letter-sticky__inner {
  max-width: 1080px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.letter-sticky__meta {
  font-family: var(--f-sans); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.letter-sticky__meta strong {
  font-family: var(--f-serif-display); font-style: italic; font-weight: var(--w-regular);
  font-size: 18px; text-transform: none; letter-spacing: -0.005em; color: var(--p-oatmeal);
}
.letter-sticky__meta span { color: rgba(246,244,241,0.55); }
.letter-sticky__cta {
  font-family: var(--f-sans); font-size: 12px; font-weight: var(--w-medium);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--p-aztek); background: var(--p-oatmeal);
  padding: 14px 26px; text-decoration: none;
  transition: background .2s, color .2s;
}
.letter-sticky__cta:hover { background: var(--p-white); }
@media (max-width: 640px) {
  /* Compact horizontal sticky bar: title-line left, CTA right, no wrap */
  .letter-sticky__inner {
    padding: 10px 14px; gap: 10px;
    flex-wrap: nowrap;
  }
  .letter-sticky__meta {
    font-size: 9px; gap: 6px;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap;
  }
  .letter-sticky__meta strong { font-size: 13px; line-height: 1.1; }
  .letter-sticky__meta span { font-size: 9px; }
  .letter-sticky__cta {
    padding: 10px 14px; font-size: 10px;
    flex: 0 0 auto;
    white-space: nowrap;
    letter-spacing: 0.18em;
  }
}

/* ============================================================
   BOLD VARIANT — "what we'll build" + bonuses standout treatment
   ============================================================ */

/* --- What you'll walk away with (editorial card grid) --- */
.letter-build {
  background: var(--p-oatmeal);
  color: var(--p-ink);
  padding: 72px 0 68px;
  margin: 24px 0 16px;
  border-top: 1px solid rgba(16, 16, 16, 0.06);
  border-bottom: 1px solid rgba(16, 16, 16, 0.06);
  position: relative;
  overflow: hidden;
}
.letter-build::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(30, 55, 53, 0.06), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(217, 191, 144, 0.10), transparent 55%);
  pointer-events: none;
}
.letter-build > .letter-wrap { position: relative; z-index: 1; max-width: 1080px; padding: 0 28px; }
.letter-build__eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-sage);
  margin: 0 0 16px;
  text-align: center;
}
.letter-build__title {
  font-family: var(--f-serif-display);
  font-weight: var(--w-regular);
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--p-charcoal);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 22px;
}
.letter-build__title em {
  font-family: var(--f-serif-italic);
  font-style: italic;
  color: var(--p-aztek);
}
.letter-build__intro {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--p-ink);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.letter-build__items {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.letter-build__card {
  background: var(--p-white);
  border: 1px solid rgba(16, 16, 16, 0.08);
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "side main"
    "outcome outcome";
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 0 rgba(16, 16, 16, 0.02);
  overflow: hidden;
}
.letter-build__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--p-aztek);
  z-index: 1;
}
.letter-build__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -16px rgba(16, 16, 16, 0.12);
}
.letter-build__card-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 24px 28px 36px;
  background: linear-gradient(180deg, rgba(30, 55, 53, 0.04), rgba(30, 55, 53, 0.01));
  border-right: 1px solid rgba(16, 16, 16, 0.06);
  align-items: flex-start;
}
.letter-build__card-main {
  grid-area: main;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
}
.letter-build__num {
  font-family: var(--f-serif-display);
  font-weight: var(--w-regular);
  font-size: 72px;
  line-height: 0.85;
  color: var(--p-aztek);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.letter-build__tag {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-aztek);
  padding: 6px 12px;
  border: 1px solid var(--p-aztek);
  border-radius: 2px;
}
.letter-build__h3 {
  font-family: var(--f-serif-display);
  font-weight: var(--w-regular);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--p-charcoal);
  margin: 0 0 12px;
}
.letter-build__h3 em {
  font-family: var(--f-serif-italic);
  font-style: italic;
  color: var(--p-aztek);
}
.letter-build__lede {
  font-family: var(--f-serif-italic);
  font-style: italic;
  font-size: 19px;
  line-height: 1.35;
  color: var(--p-aztek);
  margin: 0 0 14px;
}
.letter-build__card-main > p:not(.letter-build__lede) {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-ink);
  margin: 0;
}
.letter-build__outcome {
  grid-area: outcome;
  padding: 18px 32px;
  border-top: 1px solid rgba(16, 16, 16, 0.08);
  background: var(--p-oatmeal);
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--p-charcoal);
  font-weight: var(--w-medium);
  display: flex;
  gap: 12px;
  align-items: center;
}
.letter-build__outcome span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--p-aztek);
  color: var(--p-oatmeal);
  font-size: 12px;
  flex-shrink: 0;
}
.letter-build__outro {
  font-family: var(--f-serif-italic);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--p-aztek);
  text-align: center;
  max-width: 640px;
  margin: 36px auto 0;
}
@media (max-width: 720px) {
  .letter-build { padding: 56px 0 52px; margin: 16px 0 8px; }
  .letter-build > .letter-wrap { padding: 0 20px; }
  .letter-build__intro { margin-bottom: 32px; }
  .letter-build__card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "main"
      "outcome";
  }
  .letter-build__card-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(16, 16, 16, 0.06);
  }
  .letter-build__card-main { padding: 24px 24px 22px; }
  .letter-build__num { font-size: 52px; }
  .letter-build__h3 { font-size: 24px; }
  .letter-build__lede { font-size: 17px; }
  .letter-build__outcome { padding: 16px 24px; }
}

/* --- Bonuses standout treatment --- */
.letter-bonuses {
  background: linear-gradient(180deg, var(--p-oatmeal) 0%, #efece6 100%);
  border-top: 1px solid rgba(16, 16, 16, 0.06);
  border-bottom: 1px solid rgba(16, 16, 16, 0.06);
  padding: 72px 0 64px;
  margin: 24px 0 56px;
  position: relative;
}
.letter-bonuses::before {
  content: "The Kit";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--p-aztek);
  color: var(--p-brass, #d9bf90);
  padding: 10px 24px;
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.letter-bonuses__eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--p-brass, #b88a3a);
  text-align: center;
  margin: 0 0 14px;
}
.letter-bonuses__kit {
  font-family: var(--f-serif-display);
  font-weight: var(--w-regular);
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--p-charcoal);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 14px;
  padding: 0 28px;
}
.letter-bonuses__kit em {
  font-family: var(--f-serif-italic);
  font-style: italic;
  color: var(--p-aztek);
}
.letter-bonuses__sub {
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--p-ink);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
  padding: 0 28px;
}
.letter-bonuses__sub em {
  font-family: var(--f-serif-italic);
  font-style: italic;
  color: var(--p-aztek);
}
.bonus-grid {
  list-style: none;
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bonus-card {
  background: var(--p-white);
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-left: 3px solid var(--p-brass, #d9bf90);
  padding: 28px 32px 26px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bonus-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(16, 16, 16, 0.12);
}
.bonus-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bonus-card__num {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-brass, #b88a3a);
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.bonus-card__tag {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: var(--w-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--p-sage);
}
.bonus-card__title {
  font-family: var(--f-serif-display);
  font-weight: var(--w-regular);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--p-charcoal);
  margin: 0 0 8px;
}
.bonus-card__title em {
  font-family: var(--f-serif-italic);
  font-style: italic;
  color: var(--p-aztek);
}
.bonus-card__lede {
  font-family: var(--f-serif-italic);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--p-aztek);
  margin: 0 0 10px;
}
.bonus-card__body {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-ink);
  margin: 0;
}
@media (max-width: 640px) {
  .letter-bonuses { padding: 56px 0 48px; margin: 16px 0 40px; }
  .letter-bonuses__sub { margin-bottom: 32px; }
  .bonus-card { padding: 22px 22px 20px; }
  .bonus-card__title { font-size: 21px; }
  .bonus-card__lede { font-size: 16px; }
}