:root {
  --teal: #0B5558;
  --teal-deep: #0B5558;
  --teal-ink: #083F42;
  --teal-mid: #0E6A6E;
  --teal-soft: #E7F2F1;
  --gold: #C9A24A;
  --gold-light: #E8C882;
  --gold-pale: #FAF4E4;
  --cream: #F7F3EC;
  --warm-white: #FFFcf7;
  --ink: #1E3334;
  --ink-soft: #3A4F50;
  --muted: #5C6E6E;
  --line: #E4E0D8;
  --line-warm: #E6DAC8;
  --radius: 10px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Lato", -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 18px 40px rgba(8, 63, 66, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, [role="button"] { cursor: pointer; font-family: inherit; }
h1, h2, h3, h4, blockquote {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.18;
  color: var(--teal-ink);
}
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.wrap-n { width: min(800px, calc(100% - 40px)); margin: 0 auto; }
.wrap-wide { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 80px 0; }
.eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 16px;
}
.center-title { text-align: center; font-size: clamp(30px, 4vw, 48px); margin-bottom: 12px; }
.center-sub { text-align: center; max-width: 680px; margin: 0 auto 40px; color: var(--ink-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
/* light gold at rest, darker on hover - teal ink so it stays readable on the
   pale gold */
.btn-gold { background: var(--gold-light); color: var(--teal-ink); }
.btn-gold:hover { background: var(--gold); color: var(--teal-ink); }
.btn-teal { background: var(--teal-deep); color: #fff; }
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
}

.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.topbar-row {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
}
.topbar-press {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-right: auto;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A9A9A;
  font-weight: 700;
}
.login-btn {
  background: var(--teal-deep);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 3px;
}

.hero {
  background: var(--teal-deep);
  color: #f7f3ec;
  padding: 56px 0 64px;
  text-align: center;
}
.hero h1 {
  color: #f7f3ec;
  font-size: clamp(36px, 5.6vw, 64px);
  font-weight: 400;
  margin: 0 0 18px;
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  color: #f7f3ec;
  margin-bottom: 28px;
}
.hero-lead {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 18px;
  color: rgba(247,243,236,.92);
}
.hero-video {
  max-width: 760px; margin: 0 auto 28px;
  border: 2px solid var(--gold); border-radius: 6px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.hero-video video,
.hero-video iframe,
.video-frame video,
.video-frame iframe,
.video-shell video,
.video-shell iframe {
  width: 100%;
  border-radius: 4px;
  background: #062e30;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border: 0;
}
.hero-video .pending,
.video-shell .pending {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d7e6e4;
  text-align: center;
  padding: 24px;
  background: #062e30;
  border-radius: 4px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiet-cta { margin-top: 18px; font-size: 14px; color: rgba(247,243,236,.8); }
.quiet-cta a { color: var(--gold-light); text-decoration: underline; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 48px 0 8px;
  position: relative;
  z-index: 2;
}
.stat-card {
  background: var(--teal-deep);
  color: #fff;
  text-align: center;
  padding: 28px 16px;
  border-radius: 4px;
}
.stat-card b {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1;
}
.stat-card span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.86); }

.right-place { background: var(--warm-white); }
.struggle {
  background: #E4EEE6;
  border-radius: 8px;
  padding: 8px 28px;
  margin-top: 28px;
}
.struggle li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid #d7e0de;
  color: var(--ink-soft);
}
.struggle li:last-child { border: 0; }
.you-are {
  text-align: center;
  margin-top: 28px;
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--teal-ink);
}

.honest { background: #dceaea; }
.pullquote {
  max-width: 640px;
  margin: 36px auto 0;
  background: #E4EEE6;
  border-radius: 6px;
  padding: 28px 32px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--teal-ink);
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.fit { background: var(--cream); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.fit-col {
  padding: 32px 36px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.fit-col.no { background: #C9DEDC; }
.fit-col.yes { background: #E4EEE6; }
.fit-col h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--teal-ink);
}
.fit-col li { list-style: none; padding: 8px 0; color: var(--ink-soft); font-size: 16px; }

.t-orig { background: var(--teal-soft); }
.t-orig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.t-orig-card {
  background: #E4EEE6;
  padding: 28px 24px;
  min-height: 100%;
  border-radius: 8px;
}
.t-orig-card.teal { background: var(--teal-deep); }
.t-orig-card.teal .who,
.t-orig-card.teal .role,
.t-orig-card.teal p { color: #f7f3ec; }
.t-orig-card.teal .role { border-color: rgba(255,255,255,.2); }
.t-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.t-head img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}
.t-orig-card .who {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--teal-ink);
  margin-bottom: 2px;
  font-size: 16px;
}
.t-orig-card .role {
  font-style: italic;
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(11,85,88,.15);
  margin-bottom: 18px;
}
.t-orig-card p { font-size: 16px; color: var(--ink-soft); line-height: 1.65; }

.quote-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 28px;
}
.quote-card {
  background: #E4EEE6;
  border-radius: 10px;
  padding: 32px 28px;
}
.quote-card.dark { background: var(--teal-deep); }
.quote-card.dark p,
.quote-card.dark cite { color: #f7f3ec; }
.quote-card p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  color: var(--teal-ink);
  margin-bottom: 20px;
}
.quote-card cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--teal-ink);
}
.quote-card cite span { display: block; font-weight: 400; font-style: italic; font-size: 13px; color: var(--muted); }
.quote-card.dark cite span { color: rgba(247,243,236,.75); }
.quote-card cite img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold);
}

.mc-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mc-card {
  border-radius: 10px;
  padding: 32px 24px;
  min-height: 220px;
}
.mc-card h3 { font-size: 26px; margin-bottom: 12px; }
.mc-card p { font-size: 16px; line-height: 1.6; }
.mc-card.dark { background: var(--teal-deep); }
.mc-card.dark h3, .mc-card.dark p { color: #f7f3ec; }
.mc-card.light { background: #C9DEDC; }
.mc-card.light h3 { color: var(--teal-ink); }
.mc-card.sage { background: #E4EEE6; }
.mc-card.sage h3 { color: var(--teal-ink); }

.kit-stack { text-align: center; max-width: 560px; margin: 0 auto; }
.kit-stack .btn { margin: 8px 0 28px; }
.kit-stack img { margin: 0 auto; border-radius: 8px; box-shadow: var(--shadow); max-width: 280px; }

.opt-form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(8,63,66,.08);
  padding: 28px 28px 22px;
  text-align: center;
  margin: 28px auto 0;
  max-width: 720px;
}
.opt-form-card h2 { font-size: 32px; margin-bottom: 6px; }
.opt-form-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: nowrap; justify-content: center; align-items: center; }
.opt-form-row input {
  flex: 1 1 140px;
  max-width: 200px;
  min-height: 44px;
  height: 44px;
  border: 1px solid #cfd8d8;
  background: #f6f8f8;
  padding: 8px 12px;
  font-size: 15px;
  font-family: var(--sans);
}
.opt-form-row button { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; font-size: 12px; }
.opt-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.expect-wrap { margin-top: 36px; }
.expect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.expect-card { background: #E4EEE6; padding: 24px 22px; border-radius: 8px; }
.expect-card:nth-child(2) { background: #C9DEDC; }
.expect-card:nth-child(3) { background: var(--teal-deep); }
.expect-card:nth-child(3) h3, .expect-card:nth-child(3) p { color: #f7f3ec; }
.expect-card:nth-child(4) { background: #E4EEE6; }
.expect-card h3 { font-size: 22px; margin-bottom: 8px; }
.expect-card p { color: var(--ink-soft); font-size: 16px; }

.philosophy { background: var(--warm-white); }
.philo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.philo-card {
  background: var(--teal-deep);
  color: #fff;
  padding: 28px 26px;
  border-radius: 4px;
}
.philo-card h3 { color: var(--gold-light); font-size: 20px; margin-bottom: 10px; }
.philo-card p, .philo-card li { color: #f3f7f6; font-size: 16px; }
.philo-card li { margin-left: 18px; margin-bottom: 6px; }
.bridge {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  margin: 28px 0 8px;
  color: var(--teal-ink);
}

.scale-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 32px;
}
/* The diagram above already carries the letters, the stage names and the week
   ranges. These cards exist only for the part a diagram cannot say: the change
   each module makes. Repeating S/C/A/L/E here was what made the section feel
   like the same information three times over. */
.scale-card {
  background: var(--teal-deep);
  color: #fff;
  padding: 24px 18px 26px;
  min-height: 236px;
}
.scale-card p { color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.55; }
.scale-card .mod {
  color: var(--gold-light); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(201,151,58,.35);
}

.finish {
  background: var(--teal-deep);
  color: #f7f3ec;
  text-align: center;
}
.finish h2, .finish p { color: #f7f3ec; }
.finish h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.finish .lede { max-width: 720px; margin: 0 auto 16px; font-style: italic; }
.finish-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
  text-align: left;
}
.finish-pair article {
  background: #083f42;
  padding: 24px;
  color: #fff;
}
.finish-pair strong { display: block; margin-top: 12px; color: var(--gold-light); font-size: 13px; letter-spacing: .06em; }

.curriculum { background: #eaf3f1; }
.curr-list { margin-top: 28px; }
.curr-item {
  background: #E4EEE6;
  padding: 22px 26px;
  margin-bottom: 10px;
}
.curr-item h3 { font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.curr-item p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.lies { background: linear-gradient(180deg, var(--gold-pale) 0%, var(--cream) 100%); }
.lie-list { display: grid; gap: 14px; }
.lie-card {
  background: #E4EEE6;
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 20px 22px;
}
.lie-card h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--teal-deep); margin-bottom: 6px; }
.lie-card p { font-size: 16px; color: var(--ink-soft); }
.system { background: var(--warm-white); }
.steps { display: grid; gap: 28px; }
.step { background: #C9DEDC; border-left: 4px solid var(--gold); padding: 22px 24px; border-radius: 0 8px 8px 0; }
.step h3 { font-size: 26px; margin-bottom: 8px; }
.step-num { color: var(--gold); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }

.get { background: var(--teal-deep); color: #f7f3ec; }
.get h2, .get h3, .get h4 { color: #f7f3ec; }
.get .center-sub { color: rgba(247,243,236,.82); }
.guides {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 36px 0 48px;
}
.guide { text-align: center; }
.guide img { width: 100%; border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 12px; background: var(--teal-ink); }
.guide h4 { font-family: var(--sans); font-size: 13px; color: var(--gold-light); margin-bottom: 4px; }
.guide p { font-size: 13px; color: rgba(247,243,236,.75); line-height: 1.45; }
.kit-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 28px;
  align-items: center;
  background: rgba(247,243,236,.06);
  border: 1px solid rgba(232,200,130,.25);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 36px;
}
.kit-row h3 { color: var(--gold-light); font-size: 22px; margin-bottom: 8px; }
.kit-row p { color: rgba(247,243,236,.85); font-size: 15px; }
.kit-row img { border-radius: 6px; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit {
  background: rgba(247,243,236,.06);
  border-top: 3px solid var(--gold-light);
  border-radius: 0 0 10px 10px;
  padding: 22px;
}
.benefit h4 { color: var(--gold-light); font-family: var(--sans); font-size: 15px; margin-bottom: 8px; }
.benefit p { font-size: 15px; color: rgba(247,243,236,.82); }

/* Sat between two teal sections and disappeared into them. It is now a
   gold-framed panel on cream so it reads as the turn in the argument. */
.secret { background: var(--cream); }
.secret .wrap-n { width: min(900px, calc(100% - 40px)); }
.secret-panel {
  background: var(--warm-white);
  border: 1px solid var(--line-warm);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 52px 44px 46px;
  text-align: center;
}
.secret-panel h2 { color: var(--teal-ink); font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.secret-lead {
  font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ink); margin: 0 auto 30px; max-width: 42ch;
}
.secret-chain {
  display: flex; justify-content: center; align-items: stretch;
  flex-wrap: wrap; gap: 14px; margin-bottom: 30px;
}
.secret-chain span {
  flex: 1 1 220px; max-width: 260px;
  background: var(--teal-soft); border-radius: 8px; padding: 18px 16px;
  font-family: var(--serif); font-size: 20px; color: var(--teal-ink); line-height: 1.3;
}
.secret .kicker {
  font-family: var(--sans); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text, #8A6318); font-weight: 700;
}

.cream-sec { background: var(--cream); }
.whom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.whom-col { background: var(--warm-white); border-radius: 12px; padding: 28px; }
.whom-col li { list-style: none; padding: 8px 0; }

.price-card {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line-warm);
  border-radius: 8px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: var(--shadow);
}
.price { font-family: var(--serif); font-size: 64px; color: var(--teal-ink); line-height: 1; }
.price-note { color: var(--muted); margin: 8px 0 22px; }
.price-card ul { text-align: left; margin: 0 auto 24px; max-width: 380px; }
.price-card li { list-style: none; padding: 7px 0 7px 22px; position: relative; font-size: 16px; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.pay-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.guarantees { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.g-card { background: var(--gold-pale); border-radius: 12px; padding: 22px; }

.about-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; }
.bio-photo {
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  border: 0;
  box-shadow: 0 0 0 3px var(--gold);
}
.bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
  background: var(--cream);
  display: block;
}
.cred { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.cred h4 { font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cred li { list-style: none; font-size: 14px; padding: 4px 0; color: var(--ink-soft); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--teal-ink);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq-a { display: none; padding: 0 0 18px; color: var(--ink-soft); font-size: 16px; }
.faq-item.open .faq-a { display: block; }

.final-cta {
  background: var(--teal-deep);
  color: #f7f3ec;
  text-align: center;
  padding: 88px 20px;
}
.final-cta h2 { color: #f7f3ec; font-size: clamp(32px, 5vw, 52px); margin: 12px 0 16px; }
.final-cta h2 em { color: var(--gold-light); font-style: italic; }
.final-note { margin-top: 18px; font-size: 14px; color: rgba(247,243,236,.75); }

.site-foot {
  background: var(--cream);
  color: #9aa3a3;
  text-align: center;
  padding: 28px 20px 40px;
  font-size: 13px;
}
.site-foot a { color: var(--teal); }
.foot-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }

.opt-hero { background: var(--cream); padding: 72px 20px 40px; text-align: left; }
.opt-hero h1 { font-size: clamp(36px, 5vw, 56px); margin: 10px 0 18px; }
.opt-hero h1 em { font-style: italic; }

.quote-banner {
  background: var(--teal-deep);
  color: #f7f3ec;
  text-align: center;
  padding: 64px 20px;
}
.quote-banner p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 40px);
  color: #f7f3ec;
  max-width: 860px;
  margin: 0 auto 18px;
}
.quote-banner span {
  display: block;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.ty-wrap { max-width: 640px; margin: 80px auto; text-align: center; padding: 0 20px; }
.ty-wrap h1 { font-size: 48px; margin-bottom: 12px; }
.ty-wrap p { font-size: 20px; margin-bottom: 28px; color: var(--ink-soft); }
.ty-wrap .btn { min-width: 260px; min-height: 56px; font-size: 15px; }

@media (max-width: 960px) {
  .stat-row, .t-orig-grid, .philo-grid, .finish-pair, .fit-grid, .expect-grid, .about-grid, .guarantees, .kit-row, .benefits-grid, .whom-grid, .cred, .quote-pair, .mc-benefits { grid-template-columns: 1fr; }
  .scale-row { grid-template-columns: 1fr 1fr; }
  .guides { grid-template-columns: repeat(2, 1fr); }
  .topbar-press { display: none; }
  .opt-form-row { flex-wrap: wrap; }
  .opt-form-row input { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .scale-row, .guides { grid-template-columns: 1fr; }
  /* stacked one per row, the equal-height minimum just leaves dead space */
  .scale-card { min-height: 0; }
  .section { padding: 56px 0; }
}

/* Book Launch Ready additions.
   .solo is a kit-row with no paired image — used until there is a real
   screenshot of the workspace to sit beside it. */
.kit-row.solo { grid-template-columns: 1fr; }
.kit-row p a { color: var(--gold-light); }
.value-tag {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  /* the price card is light, so this uses the on-light gold, not the on-dark one */
  background: rgba(201,151,58,.16); color: #8A6318;
}
.guarantee-terms { font-size: 13px; opacity: .8; margin-top: 10px; }

/* ---------- centred section heads ----------
   The gold-eyebrow sections were left-aligned while every other section on
   the page was centred. The head centres; the body copy stays left so it
   is still comfortable to read. */
.sec-head { text-align: center; margin-bottom: 34px; }
.sec-head .eyebrow { display: block; }
.sec-head h2 { margin-bottom: 14px; }
.sec-head .sec-lede { max-width: 62ch; margin: 0 auto; color: var(--ink-soft); }

/* ---------- scannable body copy ---------- */
.honest p { margin-bottom: 22px; }
.honest p strong { color: var(--teal-ink); }
.statement {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--teal-ink);
  text-align: center;
  line-height: 1.25;
  margin: 36px 0 !important;
  padding: 26px 20px;
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.statement span {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink-soft);
}
.halves-intro { font-weight: 700; color: var(--teal-ink); margin-bottom: 14px !important; }
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.half {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--warm-white); border: 1px solid var(--line-warm);
  border-radius: 10px; padding: 20px;
}
.half-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal-deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 17px; line-height: 1;
}
.half p { margin: 0 !important; font-size: 16px; line-height: 1.6; }

/* ---------- the three kit cards ---------- */
.kit-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.kit-card {
  display: flex; flex-direction: column;
  background: rgba(247,243,236,.06);
  border: 1px solid rgba(232,200,130,.25);
  border-radius: 12px;
  padding: 22px;
}
/* the three covers have slightly different proportions, so a fixed box with
   contain keeps the card headings on one line across all three */
.kit-card img { width: 100%; aspect-ratio: 1241 / 1755; object-fit: contain;
  background: var(--cream); border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 18px; }
.kit-card h3 { color: var(--gold-light); font-size: 21px; margin-bottom: 10px; }
.kit-card p { color: rgba(247,243,236,.85); font-size: 15px; margin-bottom: 12px; }
.kit-points { list-style: none; margin: 0 0 14px; padding: 0; }
.kit-points li {
  position: relative; padding-left: 20px; margin-bottom: 7px;
  font-size: 15px; color: rgba(247,243,236,.9); line-height: 1.5;
}
.kit-points li::before { content: "✓"; position: absolute; left: 0; color: var(--gold-light); }
.kit-card .kit-note { font-size: 14px; color: rgba(247,243,236,.7); }
/* Scoped away from buttons. Unscoped, this painted the gold button's label
   pale gold on a pale gold background and the text disappeared. */
.kit-card .kit-note a:not(.btn) { color: var(--gold-light); text-decoration: underline; }
.kit-card .kit-cta { margin-top: auto; margin-bottom: 8px; }
.kit-card .kit-cta a:not(.btn) { color: var(--gold-light); font-weight: 700; }
/* Belt and braces: a gold button inside a kit card keeps its dark label
   whatever else gets added to this file later. */
.kit-card .btn-gold { color: var(--teal-ink); }
.btn-sm { padding: 12px 20px; font-size: 13px; }

@media (max-width: 900px) {
  .kit-cards { grid-template-columns: 1fr; }
  .halves { grid-template-columns: 1fr; }
  .secret-panel { padding: 36px 22px 32px; }
}

/* The Truth section reads centred, at her request. The measure is kept
   narrow so centred lines still scan easily. */
.honest .wrap-n > p,
.honest .halves-intro { text-align: center; max-width: 68ch; margin-left: auto; margin-right: auto; }
.honest .pullquote { text-align: center; }
.honest .pullquote cite { text-align: center; }
.honest .half p { text-align: left; }

/* ---------- Everything You Get: one visual system ----------
   The five workbook captions were running loose on the teal and bleeding
   into the three cards underneath. Each workbook is now its own card, the
   thin gold line is applied by CSS so all eight images match exactly, and
   a gold rule separates the two groups. */
.guides { align-items: stretch; }
.guide {
  display: flex; flex-direction: column;
  background: rgba(247,243,236,.06);
  border: 1px solid rgba(232,200,130,.45);
  border-radius: 10px;
  padding: 14px 14px 18px;
  text-align: center;
}
.guide img {
  border: 1px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 14px;
}
.guide h4 { font-size: 14px; margin-bottom: 6px; }
.guide p { font-size: 13.5px; }

/* the same 1px gold line on the three cards below, so nothing is baked
   into an image file and every tile matches */
.kit-card img { border: 1px solid var(--gold); }

/* the break between the five workbooks and the three extras */
.kit-cards {
  margin-top: 12px;
  padding-top: 48px;
  border-top: 1px solid rgba(232,200,130,.45);
}

/* ---------- images added Sep 2026 ----------
   Every one of these shows something the reader receives. The page ran 615
   words before its first image, and every product shot sat below the fold. */

/* the workbook fan, directly under the hero stats */
.showcase-first { padding-top: 18px; padding-bottom: 10px; }
.showcase { margin: 0 auto; max-width: 940px; }
.showcase img { width: 100%; height: auto; display: block; }

/* the SCALE diagram above the five cards */
.scale-map { margin: 0 auto 40px; max-width: 1060px; }
.scale-map img { width: 100%; height: auto; display: block; border-radius: 10px; }

/* a look inside the course */
.inside-look { background: var(--warm-white); }
.inside-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 34px; align-items: start;
}
.inside-grid figure { margin: 0; }
/* All three screenshots are cropped to a square before upload, full width and
   starting at the teal bar, so each tile opens the same way and the captions
   line up. Anything trimmed is trimmed off the bottom. */
.inside-grid img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid rgba(11,85,88,.14); box-shadow: 0 10px 30px rgba(11,85,88,.12);
}
.inside-grid figcaption {
  margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center;
}

/* the certificate at the end of the finish section, squared up — a tilt read as
   a mistake rather than as an object lying on a desk */
.finish-cert { margin: 40px auto 0; max-width: 520px; text-align: center; }
.finish-cert img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.finish-cert figcaption {
  margin-top: 26px; font-size: 16px; color: rgba(247,243,236,.85); font-style: italic;
}

@media (max-width: 900px) {
  .inside-grid { grid-template-columns: 1fr; gap: 30px; max-width: 460px; margin-left: auto; margin-right: auto; }
  .finish-cert { max-width: 420px; }
}