/* ==========================================================================
   Martha — landing page (index.html only)
   Mobile-first. Wider layouts are additive, never load-bearing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zones

   The page travels night → morning. A zone owns its own palette (tokens.css)
   and its own light. Everything inside is already written in var(--c-*), so
   a section changes character by changing class, not by changing components.
   -------------------------------------------------------------------------- */

.zone--night {
  position: relative;
  isolation: isolate;
  background: var(--c-bg);
  color: var(--c-text);
}

/* One warm lamp high on the right, a lavender haze low on the left —
   the light of a room lit by a single bulb, not a gradient wallpaper. */
.zone--night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56ch 42ch at 84% 4%,  var(--c-amber-glow),   transparent 64%),
    radial-gradient(62ch 48ch at 4% 92%,  var(--c-lavender-dim), transparent 68%);
}

/* --------------------------------------------------------------------------
   Header

   At rest it floats over the night hero and borrows the night palette; once
   it sticks it becomes a cream glass bar and landing.js hands it .zone--day.
   Without JS it never sticks, so it can never end up light-on-light.
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  /* The header sits in flow *above* the hero rather than over it, so at rest
     it is its own strip of night — exactly the colour the hero gradient
     starts on, or the page opens with a seam across the top. */
  background: var(--brand-night-deep);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-head.is-stuck {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-line);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

@media (scripting: none) {
  .site-head { position: static; }
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.85rem;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  margin-right: auto;
}

.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-text);
}

/* Who the guide is for, not what Martha is. The disclosure that used to live
   here now sits in About Martha and the footer, where there is room to say it
   warmly instead of in four cold words above the fold. */
.wordmark__role {
  display: none;
  font-size: var(--text-xs);
  color: var(--c-text-mute);
  letter-spacing: 0.01em;
}

@media (min-width: 34rem) {
  .wordmark__role { display: inline; }
}

.site-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  font-size: var(--text-sm);
  color: var(--c-text-mute);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--c-text); }

.site-head .btn { padding: 0.6rem 1.05rem; font-size: var(--text-sm); }

/* Not a second buy button. The one purchase decision lives further down the
   page, where there is enough context to make it. */
.site-head__link {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--c-text-dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklab, var(--c-amber) 45%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-head__link:hover { color: var(--c-amber); border-bottom-color: var(--c-amber); }

@media (min-width: 52rem) {
  .site-nav { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero — the last night hour, dissolving into morning at its own bottom edge

   The gradient ends on --brand-cream rather than on the day background token
   so the seam with the next section is one colour from one source. The bottom
   padding is deliberately generous: that dissolve has to stay empty, or the
   reassurance line ends up sitting on cream in night-palette text.
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 1.6rem + 7vw, 6.5rem) clamp(6.5rem, 4rem + 11vw, 12rem);
  background: linear-gradient(
    180deg,
    var(--brand-night-deep),
    var(--brand-night) 30%,
    var(--brand-night) 78%,
    var(--brand-cream) 100%
  );
}

/* The lamp fades out before the dissolve does, so the warm light never
   smears across the boundary into the cream section. */
.hero::before {
  inset: 0 0 24% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent);
  mask-image: linear-gradient(180deg, #000 66%, transparent);
}

/* Rain on a window, three rooms away. Atmosphere, not illustration —
   if you notice it as a picture, it is turned up too high. */
.hero__window {
  position: absolute;
  top: -4%;
  right: -14%;
  width: min(46rem, 108%);
  z-index: -1;
  opacity: 0.14;
  filter: blur(0.6px);
  pointer-events: none;
  color: var(--c-amber-soft);
}

@media (min-width: 60rem) {
  .hero__window { right: -6%; width: 40rem; opacity: 0.16; }
}

.hero__grid {
  display: grid;
  gap: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
}

.hero__title {
  margin-top: 1.4rem;
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
}

/* One warm word, so the headline has a focal point instead of even weight. */
.hero__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--c-amber);
}

.hero__lead {
  max-width: 34rem;
  margin-top: 1.6rem;
  font-size: var(--text-lead);
  line-height: 1.58;
  color: var(--c-text-dim);
}

/* The promise the whole product rests on, so it steps forward out of the
   paragraph rather than sitting level with it. */
.hero__lead strong {
  color: var(--c-text);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.2rem;
}

.hero__actions .btn--primary { flex: 1 1 15rem; }

/* These three lines carry the whole "no catch" promise, and as bare muted
   text they dissolved into the background. As outlined chips they read as
   facts about the offer rather than as fine print. */
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
  padding: 0;
}

.hero__reassure li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--c-text-mute) 42%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--text-sm);
  color: var(--c-text-dim);
  list-style: none;
}

.hero__reassure li::before {
  content: "";
  flex: 0 0 auto;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--c-amber);
}

/* The phone: a small piece of the product, floating in the dark. */
.hero__device {
  position: relative;
  justify-self: center;
  width: min(100%, 20rem);
}

/* The glow spreads through the gradient, not through negative inline insets —
   otherwise it pushes the page 40-odd pixels wide on a 375px phone. */
.hero__device::before {
  content: "";
  position: absolute;
  inset: -10% 0 -6%;
  border-radius: 50%;
  background: radial-gradient(128% 104% at 50% 46%, var(--c-amber-glow), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

.device {
  position: relative;
  padding: 0.55rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
}

.device__screen {
  padding: 1.5rem 1.25rem 1.6rem;
  border-radius: calc(var(--r-xl) - 8px);
  background: linear-gradient(var(--c-bg-deep), var(--c-bg));
  border: 1px solid var(--c-line-soft);
}

.device__time {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-mute);
  margin-bottom: 1.6rem;
}

.device__kicker {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-amber);
}

.device__title {
  margin-top: 0.6rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-text);
}

.device__lines {
  margin-top: 1.15rem;
  display: grid;
  gap: 0.5rem;
}

.device__lines span {
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--c-line);
}
.device__lines span:nth-child(1) { width: 100%; }
.device__lines span:nth-child(2) { width: 92%; }
.device__lines span:nth-child(3) { width: 70%; }

.device__step {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-text-dim);
}

.device__step b {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--c-amber) 34%, transparent);
  color: var(--c-amber);
  font-size: 0.7rem;
  font-weight: 600;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
  .hero__device { width: 100%; max-width: 22rem; justify-self: end; }
}

/* --------------------------------------------------------------------------
   Illustrations

   Hand-drawn, warm, and deliberately not photography — stock photos of
   serene mothers are exactly the thing this page is trying not to be.
   Every one of them is an illustration of *a* parent, never a portrait of
   Martha, and the captions say so.
   -------------------------------------------------------------------------- */

.figure { margin: 0; }

.figure__img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.figure__cap {
  margin-top: 0.85rem;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--c-text-mute);
}

/* --------------------------------------------------------------------------
   About Martha — who is talking, and the honest part about her

   Placed immediately after the hero because the header no longer carries the
   disclosure. Here there is room to say it warmly instead of coldly.
   -------------------------------------------------------------------------- */

.about__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  margin-top: 2.5rem;
  align-items: start;
}

.about__mark {
  width: 3.25rem;
  height: 3.25rem;
  color: var(--c-amber);
}

.about__title {
  margin-top: 1.15rem;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 400;
}

.about__body { margin-top: 1.2rem; max-width: 34rem; }
.about__body > * + * { margin-top: 1rem; }
.about__body p { color: var(--c-text-dim); }

/* Martha's greeting — the first thing she says, and the first thing you read
   after the headline. It gets the warm card because it is the reason to
   trust the twelve lessons behind it. */
.about__story {
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.35rem);
  border: 1px solid color-mix(in oklab, var(--c-amber) 24%, transparent);
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--c-peach) 42%, transparent), transparent 58%),
    var(--c-surface);
}

.about__story .figure { margin-block: 1.4rem; }
.about__story .figure__img { border-radius: var(--r-md); }

.about__story-text { margin-top: 1.35rem; }
.about__story-text > * + * { margin-top: 0.95rem; }

.about__story-text p {
  font-size: 1.0125rem;
  line-height: 1.68;
  color: var(--c-text-dim);
}

/* The line the whole story lands on. */
.about__story-text p:last-child {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--c-text);
}

.about__aside { align-self: start; }

@media (min-width: 58rem) {
  .about__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .about__aside { position: sticky; top: 6.5rem; }
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.sec-head { max-width: 42rem; }
.sec-head__title { margin-top: 1.1rem; font-size: var(--text-h2); font-weight: 400; }
.sec-head__text { margin-top: 1.1rem; }

/* For a header carrying a full sentence as its title rather than a phrase. */
.sec-head--wide { max-width: 50rem; }

/* --------------------------------------------------------------------------
   "Why short is the point" — deliberately uneven bento
   -------------------------------------------------------------------------- */

/* The sentence the whole product is an answer to. It grammatically continues
   the paragraph above, but read as the tail of that paragraph it disappears —
   so it is set apart and given display type. */
.why__punch {
  margin-top: 0.9rem;
  max-width: 40rem;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.36;
  color: var(--c-text);
}

.why__grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
}

.why-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color var(--dur) var(--ease);
}
.why-card:hover { border-color: color-mix(in oklab, var(--c-amber) 40%, var(--c-line-soft)); }

.why-card__num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--c-amber);
}

.why-card__title { font-size: var(--text-h3); font-weight: 500; }
.why-card__text { color: var(--c-text-mute); font-size: 0.975rem; }

/* The wide card carries the one honest admission on the page, so it gets the
   nursery illustration — the room the lessons were cut down for. */
.why-card--wide {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  align-items: center;
}

.why-card--wide > div > * + * { margin-top: 0.7rem; }

.why-figure { justify-self: center; width: min(100%, 20rem); }
.why-figure .figure__img { border-radius: var(--r-md); }

@media (min-width: 46rem) {
  .why-card--wide { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
  .why-figure { width: 100%; }
}

.why-card--wide .why-card__title {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
  font-weight: 400;
}

.why-card--wide .why-card__text {
  max-width: 40rem;
  font-size: var(--text-base);
  color: var(--c-text-dim);
}

@media (min-width: 46rem) {
  .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
}

/* --------------------------------------------------------------------------
   "What's inside" — the twelve
   -------------------------------------------------------------------------- */

/* A suggested order, not a schedule — the lessons behind it are all unlocked.
   It sits above the index of twelve so the answer to "where do I even start"
   arrives before the list that provokes the question. */
.start-here {
  margin-top: 2.75rem;
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  border: 1px solid color-mix(in oklab, var(--c-amber) 26%, transparent);
  border-radius: var(--r-lg);
  background:
    radial-gradient(112% 92% at 6% 0%, color-mix(in oklab, var(--c-peach) 40%, transparent), transparent 62%),
    var(--c-surface);
  box-shadow: var(--shadow-soft);
}

.start-here__title {
  margin-top: 0.9rem;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 400;
}

.start-here__text {
  margin-top: 0.8rem;
  max-width: 42rem;
  font-size: 0.985rem;
  line-height: 1.6;
  color: var(--c-text-dim);
}

.start-here__list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: 0.6rem;
}

.start-here__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.85rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.start-here__list a:hover {
  border-color: color-mix(in oklab, var(--c-amber) 45%, transparent);
  background: color-mix(in oklab, var(--c-amber) 6%, var(--c-surface));
}

.start-here__num {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-amber);
}

.start-here__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--c-text);
}

.start-here__why {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--c-text-mute);
}

@media (min-width: 46rem) {
  .start-here__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.inside__layout {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  margin-top: 2.75rem;
}

.lesson-index { list-style: none; padding: 0; margin: 0; }

.lesson-index li { border-top: 1px solid var(--c-line-soft); }
.lesson-index li:last-child { border-bottom: 1px solid var(--c-line-soft); }

.lesson-index__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding-block: 0.95rem;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.lesson-index__row:hover { background: color-mix(in oklab, var(--c-amber) 6%, transparent); }
.lesson-index__row:hover .lesson-index__title { color: var(--c-text); }
.lesson-index__row:hover .lesson-index__num { color: var(--c-amber); }

.lesson-index__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-mute);
  padding-left: 0.35rem;
  transition: color var(--dur) var(--ease);
}

.lesson-index__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text-dim);
  transition: color var(--dur) var(--ease);
}

.lesson-index__meta {
  font-size: var(--text-xs);
  color: var(--c-text-mute);
  padding-right: 0.35rem;
  white-space: nowrap;
}

.inside__aside { display: grid; gap: 1.15rem; align-self: start; }

.audio-card { align-self: start; }

/* Lesson 8 has a picture because it is the lesson people skip: handing the
   baby over is a technique too, not an admission of defeat. */
.turns-figure {
  padding: 0.55rem 0.55rem 0.15rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-soft);
}

.turns-figure .figure__img { border-radius: calc(var(--r-lg) - 6px); box-shadow: none; }
.turns-figure .figure__cap { padding: 0 0.7rem 0.9rem; margin-top: 0.7rem; }

.audio-card__wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2.6rem;
  margin-top: 1.2rem;
}

.audio-card__wave i {
  flex: 1;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--c-amber), color-mix(in oklab, var(--c-amber) 30%, transparent));
  opacity: 0.75;
}

@media (min-width: 62rem) {
  .inside__layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .inside__aside { position: sticky; top: 6rem; }
}

/* --------------------------------------------------------------------------
   "Free & safe"
   -------------------------------------------------------------------------- */

/* Said before anything is asked for, and the reason the price sits far down
   the page. A statement with a lamp beside it, not another bordered card. */
.free-note {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem);
  padding-left: clamp(1.1rem, 0.6rem + 1.6vw, 1.9rem);
  border-left: 2px solid var(--c-amber);
}

.free-note__lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.08rem + 1.1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.24;
  color: var(--c-text);
}

.free-note__text {
  max-width: 40rem;
  margin-top: 0.85rem;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--c-text-dim);
}

.free__grid {
  display: grid;
  gap: 1rem;
  margin-top: 2.75rem;
}

.safety-card {
  border-color: color-mix(in oklab, var(--c-lavender) 34%, transparent);
  background:
    linear-gradient(140deg, var(--c-lavender-dim), transparent 62%),
    var(--c-surface);
}

.safety-card__title {
  margin-top: 1rem;
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.95rem);
  font-weight: 400;
}

.safety-card__text { margin-top: 0.9rem; color: var(--c-text-dim); }

.safety-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.6rem;
}

/* The two free lessons, listed by name so it is obvious this is real
   material and not a lead magnet with one paragraph in it. */
.safety-links { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0.7rem; }

.safety-links a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.safety-links a:hover {
  border-color: color-mix(in oklab, var(--c-lavender) 50%, transparent);
  background: color-mix(in oklab, var(--c-lavender) 7%, var(--c-surface));
}

.safety-links__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--c-lavender);
}

.safety-links__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text);
}

.safety-links__meta { font-size: var(--text-xs); color: var(--c-text-mute); white-space: nowrap; }

.free-figure { margin-top: 1rem; }

.tips { display: grid; gap: 1rem; }

.tip {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease);
}
.tip:hover { border-color: color-mix(in oklab, var(--c-amber) 38%, var(--c-line-soft)); }

.tip__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-amber);
}

.tip__title { margin-top: 0.65rem; font-size: 1.08rem; font-weight: 500; }
.tip__text { margin-top: 0.5rem; font-size: 0.95rem; color: var(--c-text-mute); }

@media (min-width: 58rem) {
  .free__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

/* --------------------------------------------------------------------------
   Lesson preview — the product, shown before the ask

   A full-width night band with soft edges. This lesson gets read at 3 a.m.,
   so it is shown the way it will actually be met. The band feathers into
   cream at both ends rather than butting against it, so the page reads as a
   night passing rather than as two stacked colour blocks.
   -------------------------------------------------------------------------- */

.preview {
  background: linear-gradient(
    180deg,
    var(--brand-cream),
    var(--brand-night) 8%,
    var(--brand-night) 92%,
    var(--brand-cream)
  );
}

.preview::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.preview__frame {
  position: relative;
  margin-top: 2.75rem;
  padding: clamp(1.5rem, 0.9rem + 3vw, 3.5rem) clamp(1.15rem, 0.6rem + 3vw, 3.5rem);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-lift);
}

.preview__frame::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
  opacity: 0.55;
}

.preview__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line-soft);
}

.preview__frame .lesson-audio { max-width: var(--measure); margin: 2.25rem auto 0; }

.preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-soft);
}

/* --------------------------------------------------------------------------
   Offer
   -------------------------------------------------------------------------- */

.offer__grid {
  display: grid;
  gap: 1.15rem;
  margin-top: 2.75rem;
  align-items: start;
}

.price-card {
  border-color: color-mix(in oklab, var(--c-amber) 26%, transparent);
  background:
    radial-gradient(120% 80% at 50% -20%, color-mix(in oklab, var(--c-amber) 12%, transparent), transparent 70%),
    var(--c-surface);
}

.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.price-card__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
}

.price-card__unit { font-size: var(--text-sm); color: var(--c-text-mute); }

.includes { list-style: none; padding: 0; margin-top: 1.75rem; }

.includes li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.75rem;
  padding-block: 0.7rem;
  font-size: 0.975rem;
  color: var(--c-text-dim);
}
.includes li + li { border-top: 1px solid var(--c-line-soft); }

.includes svg { width: 1.05rem; height: 1.05rem; color: var(--c-amber); margin-top: 0.25rem; }

.price-card .btn--primary { margin-top: 1.9rem; }

/* The refund promise, directly under the button it applies to. A guarantee
   printed anywhere else on the page is a guarantee nobody reads. */
.guarantee {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-soft);
}

.guarantee__title {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--c-text);
}

.guarantee__text {
  margin-top: 0.7rem;
  font-size: 0.925rem;
  line-height: 1.62;
  color: var(--c-text-mute);
}

.guarantee__text strong { color: var(--c-text-dim); font-weight: 600; }

.guarantee__contact {
  margin-top: 1.15rem;
  font-size: var(--text-sm);
  color: var(--c-text-dim);
}

/* The address a refund is actually asked for at. It is styled as a link
   because it is one — an address rendered as flat text gets retyped wrong. */
.guarantee__contact a {
  color: var(--c-amber);
  text-underline-offset: 3px;
}

.not-card { background: transparent; box-shadow: none; }

.not-list { list-style: none; padding: 0; margin-top: 1.2rem; display: grid; gap: 0.9rem; }

.not-list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--c-text-mute);
}

.not-list li::before {
  content: "—";
  color: var(--c-text-mute);
  line-height: 1.6;
}

@media (min-width: 58rem) {
  .offer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 48rem; margin-top: 2.5rem; }

.faq__item { border-bottom: 1px solid var(--c-line-soft); }
.faq__item:first-child { border-top: 1px solid var(--c-line-soft); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--c-text-dim);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-text); }
.faq__item[open] .faq__q { color: var(--c-text); }

.faq__sign {
  flex: 0 0 auto;
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--c-amber);
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a {
  padding-bottom: 1.6rem;
  max-width: 40rem;
  color: var(--c-text-mute);
  font-size: 0.985rem;
}
.faq__a > * + * { margin-top: 0.9rem; }
.faq__a a { color: var(--c-amber); text-underline-offset: 3px; }

.help-list {
  list-style: none;
  padding: 1.05rem 1.15rem;
  margin-top: 1.1rem;
  border: 1px solid color-mix(in oklab, var(--c-lavender) 30%, transparent);
  border-radius: var(--r-md);
  background: var(--c-lavender-dim);
  display: grid;
  gap: 0.6rem;
  font-size: 0.925rem;
}

.help-list b { color: var(--c-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */

/* The end of the journey the page has been making: morning, and the one
   lesson that is addressed to the parent rather than the baby. */
.closing {
  position: relative;
  background:
    radial-gradient(70ch 46ch at 50% 6%, color-mix(in oklab, var(--c-peach) 46%, transparent), transparent 68%),
    var(--c-bg);
}

.closing__lamp {
  width: 100%;
  max-width: 22rem;
  height: 1px;
  margin: 0 auto clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem);
  background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
  opacity: 0.5;
}

.closing__grid {
  display: grid;
  gap: clamp(1.85rem, 1.2rem + 3vw, 3rem);
  align-items: center;
}

/* The cape is soft, translucent, and nowhere near the baby's face — the
   point is "you got through this night", not "you can carry anything". */
.closing__figure { justify-self: center; width: min(100%, 19rem); }

.closing__figure .figure__img {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}

.closing__anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-amber);
}

.closing__line {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.35rem);
  font-weight: 300;
  line-height: 1.18;
}

.closing__title {
  margin-top: 2.25rem;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
  font-weight: 400;
  line-height: 1.2;
}

.closing__text { max-width: 34rem; margin-top: 1.1rem; }

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 50rem) {
  .closing__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .closing__figure { justify-self: start; width: 100%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Night again at the bottom — the composition closes where it opened, and
   the disclosure that left the header lands here with room to breathe. */
.site-foot {
  border-top: 0;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5rem) 4rem;
  background: linear-gradient(
    180deg,
    var(--brand-cream),
    var(--brand-night) 18%,
    var(--brand-night)
  );
}

.site-foot::before {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%);
  mask-image: linear-gradient(180deg, transparent, #000 26%);
}

.site-foot__grid { display: grid; gap: 2rem; }

.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  padding: 0;
}

.site-foot__links a {
  font-size: var(--text-sm);
  color: var(--c-text-mute);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.site-foot__links a:hover { color: var(--c-amber); }

.disclaimer {
  max-width: 40rem;
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--c-text-mute);
}
.disclaimer + .disclaimer { margin-top: 0.75rem; }

@media (min-width: 52rem) {
  .site-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; }
}