/* ==========================================================================
   WHY SOME DREAMS COME TRUE — page styles
   Depends on tokens.css. Brand values live there, never here.
   ========================================================================== */

/* ---------- Layout primitives ---------- */
.section      { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-lg); }
.section--blue  { background: var(--blue); color: #fff; }
.section--blue h2, .section--blue h3 { color: #fff; }
.section--surface { background: var(--surface); }

.eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--gap-sm);
}
.section--blue .eyebrow { color: rgba(255,255,255,.72); }

.lead { font-size: var(--fs-lead); line-height: 1.6; }

.grid { display: grid; gap: var(--gap-md); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .split   { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--gap-lg); }
}

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm); padding-block: .85rem;
}
.site-head__brand {
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  text-decoration: none; color: var(--fg);
  display: flex; align-items: center; gap: .6rem;
}
.site-head__brand::before {
  content: ""; width: .85rem; height: .85rem; border-radius: 50%; background: var(--orange); flex: none;
}
.site-head__nav { display: flex; align-items: center; gap: var(--gap-md); }
.site-head__nav a {
  font-size: var(--fs-small); text-decoration: none; color: var(--fg-muted);
}
.site-head__nav a:hover { color: var(--fg); }
@media (max-width: 40rem) { .site-head__nav .hide-sm { display: none; } }

/* ---------- Hero: the cover, full bleed ---------- */
.hero { background: var(--blue); color: #fff; padding-block: clamp(4rem, 12vw, 8rem); }
.hero__grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
}
/* The lamp: a cord dropping into an orange bulb. Matches the cover.
   The cord runs the full height of the hero's top padding and on past it,
   so it reads as dropping from the top of the page behind the sticky header
   rather than starting in mid-air. */
.hero__mark {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--orange); margin-bottom: var(--gap-md);
  position: relative;
}
.hero__mark::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 2px; margin-left: -1px;
  height: calc(clamp(4rem, 12vw, 8rem) + 5rem);
  background: rgba(255,255,255,.45);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: .92; letter-spacing: -.025em;
  text-transform: uppercase; margin: 0;
}
.hero__title span { display: block; }
.hero__sub {
  margin-top: var(--gap-md);
  font-weight: 700; font-size: var(--fs-small);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.hero__blurb { margin-top: var(--gap-md); max-width: 46ch; color: rgba(255,255,255,.92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--gap-md); }
.hero__note { margin-top: var(--gap-sm); font-size: var(--fs-small); color: rgba(255,255,255,.66); }

/* The book object */
.bookcard {
  background: var(--blue-deep);
  border: 1px solid rgba(255,255,255,.16);
  aspect-ratio: 384 / 600;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
  max-width: 21rem; width: 100%; margin-inline: auto;
}
/* The lamp on the book object. The whole assembly is a column whose height is
   a share of the card, so the cord starts at the card's top edge and the bulb
   lands a third of the way down — the proportion the printed cover uses. */
.bookcard__mark {
  position: relative; align-self: flex-end;
  width: 2.25rem; height: 36%;
  margin-top: calc(clamp(1.5rem, 4vw, 2.5rem) * -1);
}
.bookcard__mark::before {          /* the cord */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 2.25rem;
  width: 2px; margin-left: -1px; background: rgba(255,255,255,.4);
}
.bookcard__mark::after {           /* the bulb */
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--orange);
}
.bookcard__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: .95; letter-spacing: -.02em;
}
.bookcard__title span { display: block; }
.bookcard__foot {
  font-size: .68rem; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* ---------- The five steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { background: var(--surface); padding: var(--gap-md) 1.25rem; }
.step__n {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  color: var(--border); display: block; margin-bottom: .5rem;
}
.step__name {
  font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase;
  font-size: var(--fs-small); margin-bottom: .5rem;
}
.step p { font-size: var(--fs-small); color: var(--fg-muted); margin: 0; }
.step--key { background: var(--blue-wash); }
.step--key .step__n { color: var(--brand); }
.step--key .step__name { color: var(--brand); }
.step__tag {
  color: var(--orange); font-weight: 700; font-size: 1.1em;
  line-height: 1; margin-left: .3rem; vertical-align: middle;
}

/* ---------- The arrow under the steps ----------
   A loosed arrow: fletching at the nock, head at the tip, drawn the same way
   as the archer plate in the book. Shaft, fletching and head are separate so
   the shaft can stretch while the two ends keep their proportions.

   Horizontal beneath the row on desktop. On narrow screens the steps stack,
   so the whole arrow turns into the gutter and spans the exact height of the
   stack — it tracks the boxes however tall they end up. */
.stepflow { position: relative; margin-top: var(--gap-lg); }
.stepflow__arrow { position: relative; height: 2rem; margin-top: .85rem; color: var(--orange); }
.stepflow__shaft {
  position: absolute; left: .15rem; right: .7rem; top: 50%;
  height: 2px; transform: translateY(-50%); background: currentColor;
}
.stepflow__fletch {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.55rem; overflow: visible;
  color: var(--brand);   /* blue against the orange shaft */
}
.stepflow__head {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1.1rem; height: .95rem; overflow: visible;
}
.stepflow__note {
  font-size: var(--fs-small); color: var(--fg-muted);
  margin: .35rem 0 0; text-align: right; max-width: none;
}

@media (max-width: 55.99rem) {
  .stepflow { padding-left: 2rem; }
  .stepflow__arrow {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2rem; height: auto; margin: 0;
  }
  .stepflow__shaft {
    left: 50%; right: auto; top: .15rem; bottom: .7rem;
    width: 2px; height: auto; transform: translateX(-50%);
  }
  .stepflow__fletch {
    left: 50%; top: 0; transform: translateX(-50%) rotate(90deg);
  }
  .stepflow__head {
    left: 50%; right: auto; top: auto; bottom: 0;
    transform: translateX(-50%) rotate(90deg);
  }
  .stepflow__note { padding-left: 2rem; text-align: left; }
}

/* ---------- Pull quote ---------- */
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.75rem);
  line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase;
  max-width: 22ch; margin: 0;
}
.pull cite { display: block; font: 400 var(--fs-small)/1.5 var(--font-body); font-style: normal;
  letter-spacing: var(--ls-caps); text-transform: uppercase; margin-top: var(--gap-md); opacity: .7; }

/* ---------- Contents list ---------- */
.parts { display: grid; gap: var(--gap-md); }
@media (min-width: 48rem) { .parts { grid-template-columns: repeat(2, 1fr); } }
.part { border-top: 2px solid var(--fg); padding-top: var(--gap-sm); }
.part__label {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--fg-muted);
}
.part h3 { margin: .35rem 0 .75rem; }
.part ol { margin: 0; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--fg-muted); }
.part li { margin-bottom: .3rem; }
.part li strong { color: var(--fg); font-weight: 700; }
.badge-part {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--ink);
  font-size: .62rem; font-weight: 700; font-family: var(--font-body);
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  margin-left: .4rem; vertical-align: middle;
}

/* ---------- Buy ---------- */
.buy {
  background: var(--surface); border: 1px solid var(--border);
  padding: clamp(1.75rem, 5vw, 3rem); max-width: 34rem;
}
.buy__price { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }
.buy__price small { font-size: var(--fs-small); font-family: var(--font-body);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-muted); }
.buy ul { list-style: none; padding: 0; margin: var(--gap-md) 0; font-size: var(--fs-small); }
.buy li { padding-left: 1.4rem; position: relative; margin-bottom: .55rem; }
.buy li::before { content: "—"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- Email capture ---------- */
.capture { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 30rem; margin-top: var(--gap-md); }
.capture input {
  flex: 1 1 14rem; padding: 1rem; font: inherit; font-size: var(--fs-small);
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  color: #fff; border-radius: var(--radius);
}
.capture input::placeholder { color: rgba(255,255,255,.55); }
.capture input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--border); padding: 1.1rem 0; max-width: var(--measure); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--orange); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: .85rem 0 0; color: var(--fg-muted); font-size: var(--fs-small); }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--border); padding-block: var(--gap-md); }
.site-foot__in { display: flex; flex-wrap: wrap; gap: var(--gap-sm); justify-content: space-between; }
.site-foot small { color: var(--fg-muted); font-size: var(--fs-small); }
.site-foot a { color: var(--fg-muted); text-decoration: none; font-size: var(--fs-small); }
.site-foot a:hover { color: var(--fg); }

/* ---------- Payment method tabs ---------- */
.paymethods {
  display: flex; gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin-top: var(--gap-md);
}
.paymethod {
  flex: 1; padding: .85rem 1rem; background: var(--bg); color: var(--fg-muted);
  font: inherit; font-size: var(--fs-small); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  border: 0; cursor: pointer;
}
.paymethod.is-active { background: var(--surface); color: var(--fg); box-shadow: inset 0 -2px 0 var(--orange); }
.mono-amount {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem; font-weight: 700; margin: 0; word-break: break-all;
}
.mono-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; margin: 0; padding: .75rem; background: var(--bg);
  border: 1px solid var(--border); word-break: break-all; user-select: all;
}