/* Become - the homepage (Pages/Index.cshtml): Stevie's restyle of 25 Oct 2026, built to
 * docs/design/homepage-stevie-2026-10-25/become-homepage-restyle.dc.html (direction a).
 *
 * The design's inline styles are carried over here as classes, value for value, scoped under #lp.
 * #lp is a size container named lp, exactly as the design's root is, so its cqw sizes resolve
 * against the page width and its 760px phone switch (and the Planner demo's 900px one) are
 * container queries: the page is laid out correctly at phone width before any script has run.
 * The 760 is the same number page-launch.js reads for the menu.
 *
 * Nothing here fetches anything from another host. The typefaces are self-hosted - see
 * fonts-become.css - and there is no third-party script on the page. */

:root {
  --lp-bg: #100D0A;
  --lp-card: #17130F;
  --lp-line: #2E2620;
  --lp-line-strong: #3A2E24;
  --lp-gold: #C7A27C;
  --lp-text: #EFE7DA;
  --lp-muted: #B8A690;
}

html,
body {
  margin: 0;
  background: #100D0A;
}

#lp {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  container-type: inline-size;
  container-name: lp;
  position: relative;
  overflow-x: clip;
  background: #100D0A;
  color: #EFE7DA;
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

/* The design is drawn content-box (it sets no box-sizing; only its buttons say border-box, and
   they do below). The site's base stylesheet makes everything border-box, so the page puts the
   design's box model back. */
#lp,
#lp *,
#lp *::before,
#lp *::after {
  box-sizing: content-box;
}

/* As in the design's browser: a button is border-box by the user-agent stylesheet. */
#lp button {
  box-sizing: border-box;
}

#lp a {
  color: #C7A27C;
  text-decoration: none;
}

#lp a:hover {
  color: #E8C9A0;
}

#lp a:focus-visible,
#lp button:focus-visible,
#lp summary:focus-visible {
  outline: 2px solid #C7A27C;
  outline-offset: 3px;
}

#lp h1,
#lp h2,
#lp h3,
#lp p,
#lp ol,
#lp ul,
#lp figure,
#lp blockquote {
  margin: 0;
}

#lp h1,
#lp h2,
#lp h3 {
  color: inherit;
}

#lp em {
  font-style: italic;
  font-weight: 500;
  color: #C7A27C;
}

#lp .lp-gold { color: #C7A27C; }
#lp .lp-ink { color: #EFE7DA; }

/* ── Header ───────────────────────────────────────────────────────────────────────────────────── */

#lp .lp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(16, 13, 10, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #2E2620;
}

#lp .lp-header-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#lp .lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #EFE7DA;
  flex-shrink: 0;
}

#lp .lp-logo img {
  display: block;
  width: 30px;
  height: 30px;
}

#lp .lp-logo span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
}

#lp .lp-logo i {
  font-style: normal;
  color: #C7A27C;
}

#lp .lp-nav {
  display: flex;
  align-items: center;
  gap: 0 22px;
  margin-left: auto;
  font-size: 14px;
}

#lp .lp-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #B8A690;
  white-space: nowrap;
}

#lp .lp-nav a:hover { color: #E8C9A0; }

#lp .lp-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  background: #C7A27C;
  color: #1A140F;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

#lp .lp-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #EFE7DA;
  background: transparent;
  border: 1px solid #3A2E24;
  border-radius: 999px;
  cursor: pointer;
}

#lp .lp-mnav {
  display: flex;
  flex-direction: column;
  padding: 6px 24px 16px;
  border-top: 1px solid #2E2620;
  font-size: 17px;
}

#lp .lp-mnav[hidden] { display: none; }

#lp .lp-mnav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #EFE7DA;
  border-bottom: 1px solid #2E2620;
}

#lp .lp-mnav button {
  box-sizing: border-box;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font: inherit;
  background: #C7A27C;
  color: #1A140F;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

@container lp (max-width: 759.98px) {
  #lp .lp-nav { display: none; }
  #lp .lp-pill { margin-left: auto; }
  #lp .lp-menu-btn { display: inline-flex; }
}

@container lp (max-width: 399.98px) {
  #lp .lp-pill { display: none; }
}

@container lp (min-width: 760px) {
  #lp .lp-mnav { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────── */

#lp .lp-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 320ms var(--ease);
}

#lp .lp-button:hover { transform: translateY(-2px); }

#lp .lp-btn-primary {
  background: #C7A27C;
  color: #1A140F;
  padding: 14px 28px;
  border: none;
}

#lp .lp-btn-primary:hover { color: #1A140F; }

#lp .lp-btn-solid { padding: 13px 26px; }

#lp .lp-btn-lg {
  min-height: 52px;
  font-size: 17px;
  padding: 15px 30px;
}

#lp .lp-btn-outline {
  border: 1px solid #8A6A42;
  color: #EFE7DA;
  background: transparent;
  padding: 13px 26px;
}

#lp .lp-btn-gold-outline {
  border: 1px solid #C7A27C;
  color: #EFE7DA;
  background: transparent;
  padding: 11px 24px;
}

#lp .lp-btn-gold-outline:hover { color: #EFE7DA; }

#lp .lp-btn-quiet {
  border: 1px solid #3A2E24;
  color: #EFE7DA;
  background: transparent;
  padding: 11px 24px;
}

#lp .lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* ── Shared type ──────────────────────────────────────────────────────────────────────────────── */

#lp .lp-wide {
  max-width: 1180px;
  margin: 0 auto;
}

#lp .lp-pad { padding: 0 24px; }

#lp .lp-eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #C7A27C;
}

#lp .lp-eyebrow-muted { color: #B8A690; }

#lp .lp-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(48px, 6.4cqw, 92px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  color: #EFE7DA;
  text-wrap: balance;
}

#lp .lp-h2-xl { font-size: clamp(48px, 6.8cqw, 96px); }

#lp .lp-lede {
  max-width: 700px;
  font-size: clamp(19px, 1.6cqw, 22px);
  line-height: 1.55;
  color: #EFE7DA;
  text-wrap: pretty;
}

#lp .lp-lede-soft { color: #D6C8B4; }

#lp .lp-quiet {
  color: #B8A690;
  text-wrap: pretty;
}

#lp .lp-strong {
  font-weight: 600;
  color: #EFE7DA;
}

#lp .lp-arrow {
  display: inline-block;
  transition: transform 320ms var(--ease);
}

/* ── 01 Hero ──────────────────────────────────────────────────────────────────────────────────── */

#lp .lp-herosec {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 72% 42%, #2A211A 0%, #100D0A 68%);
}

#lp .lp-hero-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 3cqw, 56px) 24px clamp(56px, 6cqw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4cqw, 64px);
  align-items: center;
}

#lp .lp-hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2cqw, 26px);
  min-width: 0;
  order: 1;
}

#lp .lp-herosec h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(72px, 11cqw, 152px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: #EFE7DA;
}

#lp .lp-hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 2.8cqw, 40px);
  line-height: 1.15;
  color: #C7A27C;
}

#lp .lp-hero-body {
  max-width: 560px;
  font-size: clamp(18px, 1.5cqw, 21px);
  line-height: 1.55;
  color: #EFE7DA;
  text-wrap: pretty;
}

#lp .lp-hero-img {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 5;
  justify-self: center;
  order: 2;
  -webkit-mask-image: radial-gradient(ellipse 80% 84% at 52% 42%, #000 50%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 80% 84% at 52% 42%, #000 50%, rgba(0, 0, 0, 0) 100%);
}

#lp .lp-hero-img img,
#lp .lp-stevie-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@container lp (max-width: 759.98px) {
  #lp .lp-hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #lp .lp-hero-text { order: 2; }

  #lp .lp-hero-img {
    order: 1;
    max-width: 340px;
  }
}

/* ── 02 Meet Stevie ───────────────────────────────────────────────────────────────────────────── */

#lp .lp-stevie {
  padding: clamp(72px, 8cqw, 120px) 24px;
  background: #17130F;
  color: #EFE7DA;
}

#lp .lp-stevie-in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6cqw, 96px);
}

#lp .lp-stevie-row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 80px;
  align-items: flex-start;
}

#lp .lp-stevie-photo {
  position: relative;
  flex: 1 1 320px;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
}

#lp .lp-stevie-text {
  flex: 2 1 440px;
  min-width: 0;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#lp .lp-stevie-text h2 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(46px, 5.4cqw, 74px);
  line-height: 0.96;
  letter-spacing: -0.01em;
}

#lp .lp-story {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.7cqw, 24px);
  line-height: 1.55;
  color: #D6C8B4;
  text-wrap: pretty;
}

#lp .lp-more > summary,
#lp .lp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #C7A27C;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

#lp .lp-more > summary::-webkit-details-marker { display: none; }

#lp .lp-more-label { border-bottom: 1px solid #C7A27C; }

#lp .lp-more[open] .lp-arrow,
#lp .lp-toggle[aria-expanded="true"] .lp-arrow {
  transform: rotate(180deg);
}

#lp .lp-more > .lp-story { margin-top: 24px; }

#lp .lp-stevie-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid #2E2620;
}

#lp .lp-ftf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  color: #C7A27C;
}

#lp .lp-ftf-post {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: #E8C9A0;
}

#lp .lp-quote {
  margin: 0 auto;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

#lp .lp-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.8cqw, 68px);
  line-height: 1.12;
  color: #C7A27C;
  text-wrap: balance;
}

#lp .lp-quote figcaption {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #B8A690;
}

/* ── 03 The Planner ───────────────────────────────────────────────────────────────────────────── */

#lp .lp-planner {
  padding: clamp(72px, 8cqw, 120px) 24px;
  background: #100D0A;
}

#lp .lp-stack-planner {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.5cqw, 64px);
}

#lp .lp-intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 900px;
}

#lp .lp-intro .lp-quiet { max-width: 700px; }

#lp .lp-sim {
  border-radius: 24px;
  overflow: hidden;
  background: #17130F;
  border: 1px solid #3A2E24;
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.9);
}

#lp .lp-sim-banner {
  padding: 12px 24px;
  background: #221B15;
  border-bottom: 1px dashed #8A6A42;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: #E8C9A0;
}

#lp .lp-sim-banner-k {
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#lp .lp-sim-body {
  padding: clamp(22px, 3cqw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3cqw, 48px);
  align-items: start;
}

@container lp (max-width: 899.98px) {
  #lp .lp-sim-body { grid-template-columns: minmax(0, 1fr); }
}

#lp .lp-sim-left {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

#lp .lp-sim-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

#lp .lp-sim-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#lp .lp-sim-h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: #EFE7DA;
}

#lp .lp-sim-summary {
  font-size: 14px;
  color: #B8A690;
}

#lp .lp-sim-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#lp .lp-sim-k {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #B8A690;
}

#lp .lp-sim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#lp .lp-sim-chip {
  font-size: 14px;
  line-height: 1.3;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid #3A2E24;
  color: #EFE7DA;
  background: transparent;
}

#lp .lp-sim-chip.is-first {
  border-color: #C7A27C;
  background: rgba(199, 162, 124, 0.14);
}

#lp .lp-sim-chip.is-parked {
  border-style: dashed;
  color: #B8A690;
}

#lp .lp-sim-radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

#lp .lp-sim-radios button {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid #3A2E24;
  background: transparent;
  color: #B8A690;
  transition: border-color 200ms ease, background 200ms ease;
}

#lp .lp-sim-radios button[aria-checked="true"] {
  border-color: #C7A27C;
  background: rgba(199, 162, 124, 0.14);
  color: #EFE7DA;
}

#lp .lp-sim-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

#lp .lp-sim-budget-v {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: #C7A27C;
}

#lp .lp-sim-note {
  font-size: 14px;
  line-height: 1.5;
  color: #B8A690;
}

#lp .lp-sim-order {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#lp .lp-sim-plan {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#lp .lp-sim-plan li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #2E2620;
  font-size: 16px;
  line-height: 1.45;
  transition: opacity 260ms ease var(--lp-delay, 0ms), transform 260ms ease var(--lp-delay, 0ms);
}

#lp .lp-sim-plan li.is-settling {
  opacity: 0.35;
  transform: translateY(4px);
}

#lp .lp-sim-mark {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  justify-content: center;
  color: #C7A27C;
}

#lp .lp-sim-text {
  flex: 1;
  color: #B8A690;
}

#lp .lp-sim-label {
  color: #EFE7DA;
  font-weight: 600;
}

#lp .lp-sim-plan li.is-now .lp-sim-text { color: #EFE7DA; }
#lp .lp-sim-plan li.is-now .lp-sim-label { color: #C7A27C; }

#lp .lp-sim-moved {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #E8C9A0;
  border: 1px solid #4A3A2C;
  border-radius: 999px;
  padding: 3px 9px;
}

#lp .lp-sim-plan-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: #B8A690;
}

#lp .lp-sim-persp {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: #100D0A;
  border: 1px solid #2E2620;
}

#lp .lp-sim-thumb {
  flex-shrink: 0;
  width: 96px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #1C1814;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lp .lp-sim-persp-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#lp .lp-sim-persp-k {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #C7A27C;
}

#lp .lp-sim-persp-t {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: #EFE7DA;
}

#lp .lp-sim-persp-b {
  font-size: 14px;
  line-height: 1.45;
  color: #B8A690;
}

#lp .lp-sim-persp-m {
  font-size: 12px;
  color: #B8A690;
  margin-top: 2px;
}

#lp .lp-planner-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
  align-items: flex-start;
}

#lp .lp-differs {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#lp .lp-differs ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#lp .lp-differs li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.5;
  color: #D6C8B4;
}

#lp .lp-differs li > span:first-child {
  color: #C7A27C;
  flex-shrink: 0;
}

#lp .lp-planner-voice {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#lp .lp-planner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

#lp .lp-toggle { color: #B8A690; }

#lp .lp-toggle-label { border-bottom: 1px solid #3A2E24; }

#lp .lp-planner-more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #B8A690;
  text-wrap: pretty;
}

#lp .lp-planner-more[hidden] { display: none; }

#lp .lp-planner-more .lp-small { font-size: 15px; }

/* ── 04 Fitness & Nutrition ───────────────────────────────────────────────────────────────────── */

#lp .lp-fitness {
  padding: clamp(72px, 8cqw, 120px) 0;
  background: #0C0A08;
}

#lp .lp-fit-head {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 80px;
  align-items: flex-end;
}

#lp .lp-fit-head-l {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#lp .lp-fit-head-r {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#lp .lp-frame-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2cqw, 24px);
}

#lp .lp-frame {
  border-radius: 22px;
  overflow: hidden;
  background: #17130F;
  border: 1px solid #3A2E24;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95);
}

#lp .lp-frame-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: #1C1711;
  border-bottom: 1px solid #2E2620;
}

#lp .lp-dots {
  display: flex;
  gap: 6px;
}

#lp .lp-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3A2E24;
}

#lp .lp-frame-title {
  font-size: 13px;
  color: #B8A690;
  line-height: 1.4;
}

#lp .lp-fit-foot {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5cqw, 48px);
}

#lp .lp-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 32px;
}

#lp .lp-steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid #3A2E24;
}

#lp .lp-step-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: #C7A27C;
}

#lp .lp-step-t {
  font-size: 17px;
  line-height: 1.5;
  color: #D6C8B4;
  text-wrap: pretty;
}

#lp .lp-fit-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

#lp .lp-fit-cta p {
  flex: 1 1 320px;
  font-size: 15px;
  line-height: 1.55;
  color: #B8A690;
  text-wrap: pretty;
}

/* ── 05 Why Become ────────────────────────────────────────────────────────────────────────────── */

#lp .lp-why {
  padding: clamp(72px, 8cqw, 120px) 24px;
  background: #100D0A;
}

#lp .lp-stack-why {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5cqw, 72px);
}

#lp .lp-intro-why {
  gap: 20px;
  max-width: 960px;
}

#lp .lp-why-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#lp .lp-why-list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: 16px 40px;
  align-items: start;
  padding: clamp(28px, 3cqw, 40px) 0;
  border-top: 1px solid #2E2620;
}

@container lp (max-width: 759.98px) {
  #lp .lp-why-list li { grid-template-columns: minmax(0, 1fr); }
}

#lp .lp-why-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 4cqw, 56px);
  line-height: 0.9;
  color: #C7A27C;
}

#lp .lp-why-mid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#lp .lp-why-problem {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.2cqw, 30px);
  line-height: 1.25;
  color: #B8A690;
  text-wrap: pretty;
}

#lp .lp-why-amb {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 3cqw, 44px);
  line-height: 1.08;
  color: #EFE7DA;
  text-wrap: balance;
}

#lp .lp-why-amb > span:first-child {
  color: #C7A27C;
  flex-shrink: 0;
}

#lp .lp-why-rest {
  color: #B8A690;
  line-height: 1.6;
  text-wrap: pretty;
  align-self: end;
}

#lp .lp-why-close {
  max-width: 860px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6cqw, 34px);
  line-height: 1.3;
  color: #C7A27C;
  text-wrap: pretty;
}

/* ── 06 Become Health ─────────────────────────────────────────────────────────────────────────── */

#lp .lp-health {
  padding: clamp(80px, 9cqw, 136px) 24px;
  background: #1C1711;
  color: #EFE7DA;
}

#lp .lp-health-in {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

#lp .lp-health-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#lp .lp-health-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 4.8cqw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

#lp .lp-health-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(18px, 1.4cqw, 19px);
  line-height: 1.65;
  color: #D6C8B4;
  text-wrap: pretty;
}

#lp .lp-health-box {
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid #2E2620;
  color: #EFE7DA;
  font-weight: 600;
}

/* ── 07 Help shape Become ─────────────────────────────────────────────────────────────────────── */

#lp .lp-help {
  padding: clamp(80px, 9cqw, 136px) 24px;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, #2A211A 0%, #100D0A 70%);
}

#lp .lp-stack-help {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5cqw, 72px);
}

#lp .lp-help-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

#lp .lp-help-intro .lp-h2 { max-width: 960px; }

#lp .lp-help-intro .lp-lede,
#lp .lp-help-intro .lp-quiet { max-width: 720px; }

#lp .lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

#lp .lp-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  border-radius: 22px;
  background: #17130F;
  border: 1px solid #3A2E24;
}

#lp .lp-card-gold { border-color: #C7A27C; }

#lp .lp-card-k {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #C7A27C;
}

#lp .lp-tag {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 11px;
  font-weight: 600;
  border: 1px dashed #C7A27C;
  border-radius: 4px;
  padding: 2px 7px;
}

#lp .lp-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  color: #EFE7DA;
}

#lp .lp-card p {
  font-size: 16px;
  line-height: 1.55;
  color: #B8A690;
  text-wrap: pretty;
}

#lp .lp-card-btn {
  margin-top: auto;
  align-self: flex-start;
}

#lp .lp-card .lp-btn-primary { padding: 12px 24px; }

/* ── 08 Closing ───────────────────────────────────────────────────────────────────────────────── */

#lp .lp-closing {
  padding: clamp(96px, 11cqw, 168px) 24px;
  background: #17130F;
}

#lp .lp-closing-in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

#lp .lp-closing-big {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(72px, 12cqw, 176px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: #EFE7DA;
}

#lp .lp-closing-tag {
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.4cqw, 32px);
  line-height: 1.3;
  color: #C7A27C;
  text-wrap: balance;
}

#lp .lp-closing .lp-btn-lg { padding: 15px 32px; }

#lp .lp-sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}

#lp .lp-sig-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: #EFE7DA;
}

#lp .lp-sig-role {
  font-size: 15px;
  color: #B8A690;
}

/* ── Footer ───────────────────────────────────────────────────────────────────────────────────── */

#lp .lp-foot {
  background: #100D0A;
  border-top: 1px solid #2E2620;
  padding: 36px 24px 40px;
}

#lp .lp-footer-in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

#lp .lp-footer-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

#lp .lp-footer-mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: #EFE7DA;
}

#lp .lp-footer-domain {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #B8A690;
}

#lp .lp-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  font-size: 14px;
  color: #B8A690;
}

#lp .lp-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #B8A690;
}

/* ── Scroll reveal ────────────────────────────────────────────────────────────────────────────────
   The design's: 16px up and in, 400ms, staggered 80ms. Only once the module has said it is
   watching (.lp-reveal-on), so without JavaScript, or under prefers-reduced-motion, nothing is
   ever hidden. */

#lp.lp-reveal-on [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}

#lp.lp-reveal-on [data-reveal].is-in {
  transition: opacity 400ms var(--ease) var(--lp-delay, 0ms), transform 400ms var(--ease) var(--lp-delay, 0ms);
}

/* ── Clip player (Pages/Shared/_HomeClipPlayer.cshtml) ────────────────────────────────────────────
   Self-contained: one clip at a time in a 16:9 stage, uncropped, with a caption tab per clip.
   Swappable as a unit with the partial and the "clip player" section of page-launch.js. */

#lp .lp-player-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0C0A08;
}

#lp .lp-player-clip {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0C0A08;
}

#lp .lp-player-clip[hidden] { display: none; }

#lp .lp-player-tabs {
  display: grid;
  grid-template-columns: repeat(var(--lp-tabs, 4), minmax(0, 1fr));
  gap: 1px;
  background: #2E2620;
  border-top: 1px solid #2E2620;
}

#lp .lp-player-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 22px 20px;
  font: inherit;
  text-align: left;
  background: #17130F;
  border: 0;
  color: #B8A690;
  cursor: pointer;
  transition: background 200ms ease;
}

#lp .lp-player-tab[aria-pressed="true"] {
  background: #1C1711;
  color: #EFE7DA;
}

#lp .lp-player-bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: #C7A27C;
}

#lp .lp-player-tab[aria-pressed="true"] .lp-player-bar { width: var(--lp-progress, 100%); }

#lp .lp-player-n {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: #8A6A42;
}

#lp .lp-player-tab[aria-pressed="true"] .lp-player-n { color: #C7A27C; }

#lp .lp-player-cap {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

#lp .lp-player-sub {
  font-size: 13px;
  line-height: 1.45;
  color: #B8A690;
}

@container lp (max-width: 759.98px) {
  #lp .lp-player-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #lp .lp-player-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #lp .lp-player-tab { padding: 14px 16px 16px; }
  #lp .lp-player-n { font-size: 24px; }
  #lp .lp-player-cap { font-size: 15px; }
}

#lp .lp-health-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 10px 0;
  padding: clamp(16px, 2.4cqw, 28px);
  border-radius: 22px;
  background: #100D0A;
  border: 1px solid #3A2E24;
}

#lp .lp-health-demo-k {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #C7A27C;
}

#lp .lp-health-demo .lp-frame { box-shadow: none; }

#lp .lp-health-demo-note {
  font-size: 13px;
  line-height: 1.5;
  color: #B8A690;
}

/* ── The panel's furniture ────────────────────────────────────────────────────────────────────── */

.lp-code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #17130F;
  border: 1px solid #3A2E24;
  color: #EFE7DA;
  font-size: 14px;
  word-break: break-all;
  user-select: all;
}

/* ── The topic chips ──────────────────────────────────────────────────────────────────────────── */

.lp-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lp-line-strong);
  background: transparent;
  color: var(--lp-muted);
}

.lp-chip[aria-pressed="true"] {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
  color: #1A140F;
  font-weight: 600;
}

/* ── The "Help shape Become" panel ──────────────────────────────────────────────────────────────
   Hidden by the attribute until it is opened, so a visitor with no JavaScript never sees a panel
   they cannot close. When it opens, the module removes the attribute and adds .lp-open on the next
   frame, which is what lets the slide have something to slide from. */

#lp-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(10, 8, 6, 0.62);
}

#lp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: Inter, system-ui, sans-serif;
  border-left: 1px solid var(--lp-line);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.9);
  transform: translateX(101%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* An author rule, so the attribute wins over the display:flex above rather than losing to it. */
#lp-panel[hidden] {
  display: none;
}

#lp-panel.lp-open {
  transform: translateX(0);
}

.lp-panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The page behind the panel does not scroll while it is open. Set by the module, removed on
   close - including when it closes because the visitor pressed Escape. */
body.lp-locked {
  overflow: hidden;
}

/* ── The little stacks ────────────────────────────────────────────────────────────────────────── */

.lp-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-note-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Everything the module hides with the attribute. The attribute needs naming here: on its own the
   agent's [hidden] rule loses to an author display:, so a hidden note form would still be laid
   out. Both sides are author rules, so the id wins. */
#lp-note[hidden],
#lp-sent[hidden] {
  display: none;
}

/* ── Shared behaviour ─────────────────────────────────────────────────────────────────────────── */

#lp-panel :focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 2px;
}

#lp-panel a {
  color: var(--lp-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#lp-panel ::placeholder {
  color: #6E6152;
}

@media (prefers-reduced-motion: reduce) {
  #lp-panel,
  #lp .lp-button,
  #lp .lp-arrow,
  #lp .lp-sim-plan li {
    transition: none;
  }
}