@charset "UTF-8";

/* ==========================================================================
   Brand To Lead: Book Funnel
   Palette + type inherited from alfredobarulli.com
   ========================================================================== */

:root {
  /* Warm-black ramp. Surfaces this close to black can't separate by fill
     alone (coal vs ink is 1.1:1), so every edge is a solid token with a
     measured contrast instead of a translucent white wash:
       --line       dividers and panel outlines      1.8:1 on ink
       --edge       form controls, chips, steps      3.2:1+ (WCAG non-text)
       --gold-line  featured objects: offer, press   3.5:1 on ink         */
  --ink: #000000;          /* page background */
  --coal: #15120e;         /* raised surface: panels, offer box, press band */
  --field: #0b0a08;        /* recessed surface: inputs */
  --gold: #ba8e38;         /* primary gold, 7:1 on ink */
  --gold-bright: #e7af3e;  /* CTA / highlight gold */
  --gold-deep: #8f7239;    /* button base shadow */
  --paper: #f1f4f4;        /* primary text */
  --mist: #c8c1b5;         /* secondary text, warmed to the blacks, 10:1+ */
  --faint: #8f8678;        /* placeholders, 5.5:1 on field */
  --line: #3f372c;
  --edge: #6f6453;
  --gold-line: #7d5f27;
  --display: "Playfair Display", Georgia, serif;
  --body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* component display rules (e.g. .summary-rows li { display: flex }) must not
   override the hidden attribute the scripts toggle */
[hidden] { display: none !important; }

a { color: var(--gold-bright); }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 780px; }

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */

/* Type scale: 13 / 15 / 17 / 20 / 26 / 44 / 66.
   Gold is reserved for the hero's "invisible" word, the buttons and prices;
   headings stay in paper so the hero moment keeps its weight. */

.eyebrow {
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.2;
  color: var(--paper);
  margin-bottom: 24px;
  text-wrap: balance;
}

.lede { font-size: 18px; color: var(--mist); max-width: 640px; }

/* --------------------------------------------------------------------------
   Buttons: 3D raised style from alfredobarulli.com
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: none;
  border-bottom: 5px solid var(--gold-deep);
  border-radius: 8px;
  padding: 19px 38px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(186, 142, 56, 0.35);
  filter: brightness(1.05);
}

.btn:active { transform: translateY(1px); border-bottom-width: 3px; }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  font-weight: 600;
}

.btn--ghost:hover { box-shadow: none; border-color: var(--gold); color: var(--gold-bright); }

.btn-note {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mist);
}

.btn-note .stars { color: var(--gold-bright); font-size: 17px; letter-spacing: 2px; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* the bar is a title page, not a nav: the book, a dash, and the one claim
   worth carrying down the page, centred as a single line */
.topbar-inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  padding: 14px 0;
}

.topbar-name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.2px;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}

.topbar-name span { color: var(--gold-bright); }

/* the dash is set in the display face so it sits on the title's weight, not
   the claim's; a mark, so gold rather than gold-bright */
.topbar-dash {
  font-family: var(--display);
  font-size: 20px;
  color: var(--gold);
}

.topbar-badge {
  font-size: 20px;
  font-weight: 500;
  color: var(--mist);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hero: the "invisible → seen" signature
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}

/* spotlight that brightens as the headline resolves */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 130%;
  background:
    radial-gradient(ellipse 60% 55% at 30% 30%, rgba(186, 142, 56, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 45% at 85% 75%, rgba(186, 142, 56, 0.07) 0%, transparent 60%);
  /* fade out before the hero's bottom edge so the glow never gets cut off
     in a hard line against the press strip (hero bottom = 92% of this box) */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 86%);
  opacity: 0;
  animation: spotlight 2.2s ease 0.4s forwards;
  pointer-events: none;
}

@keyframes spotlight { to { opacity: 1; } }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.14;
  margin-bottom: 28px;
  text-wrap: balance;
}

/* ghost word: starts as blurred outline, resolves into solid gold */
.word-invisible {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 244, 244, 0.45);
  filter: blur(3px);
  animation: come-into-focus 1.6s ease 0.9s forwards;
}

@keyframes come-into-focus {
  60% { -webkit-text-stroke-color: rgba(231, 175, 62, 0.6); }
  100% {
    color: var(--gold-bright);
    -webkit-text-stroke: 1px transparent;
    filter: blur(0);
  }
}

.hero-sub {
  font-size: 18px;
  color: var(--mist);
  max-width: 560px;
  margin-bottom: 38px;
}

.hero-sub strong { color: var(--paper); font-weight: 600; }

/* the book: a flat cover image built out into a volume */

/* the shadow lives on the wrapper, not the book, because a filter on an
   element with preserve-3d flattens its children back into one plane */
.hero-book {
  position: relative;
  text-align: center;
  filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.75));
}

/* turned a few degrees so the fore edge shows: the cover alone reads as a
   mockup, the page block is what makes it a book */
.book3d {
  position: relative;
  width: min(300px, 76%);
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: perspective(1800px) rotateY(-19deg);
}

.book3d img {
  width: 100%;
  border-radius: 2px 4px 4px 2px;
  /* the cover is near-black too: a hairline ring gives it an edge on the page */
  box-shadow: 0 0 0 1px var(--line);
}

/* the gutter shadow the spine casts across the front cover */
.book3d::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.16) 0,
    rgba(0, 0, 0, 0.45) 22%,
    rgba(0, 0, 0, 0.16) 60%,
    transparent 100%
  );
  pointer-events: none;
}

/* the fore edge: stood up at 90 degrees off the cover's right edge, so it
   recedes as the cover turns */
.book3d-pages {
  position: absolute;
  top: 1%;
  left: 100%;
  height: 98%;
  width: 26px;
  transform-origin: left center;
  transform: rotateY(90deg);
  border-radius: 0 2px 2px 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 30%),
    repeating-linear-gradient(90deg, #cfc7b6 0 1px, #efe9dd 1px 3px);
}

/* --------------------------------------------------------------------------
   Press strip
   -------------------------------------------------------------------------- */

/* its own band: a lifted warm-black surface with gold hairline edges, so the
   strip reads as a deliberate object rather than a faint seam in the black */
.press {
  background: var(--coal);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  padding: 36px 0 38px;
}

.press-label {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 22px;
}

.press-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 48px;
  row-gap: 22px;
  list-style: none;
}

/* logos are white silhouettes (assets/press). Per logo in the markup:
   --h sets the height so wordmarks and stacked marks read at the same size;
   --y nudges logos with a subline or descender down, so every main mark
   (not the image box) sits on the row's centre line */
.press-logos li { display: flex; }

.press-logos img {
  height: var(--h);
  width: auto;
  translate: 0 var(--y, 0px);
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 96px 0; }

.section--line { border-top: 1px solid var(--line); }

/* problem section */

/* a pull quote from the book, set as a quotation, no rail, no highlight */
.problem-story {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 26px);
  line-height: 1.55;
  color: var(--paper);
  margin: 44px 0;
  max-width: 34ch;
}

.problem-story cite {
  display: block;
  margin-top: 12px;
  font-family: var(--body);
  font-style: normal;
  font-size: 13px;
  color: var(--mist);
}

.pain-list { list-style: none; max-width: 720px; margin-top: 34px; border-bottom: 1px solid var(--line); }

.pain-list li {
  color: var(--mist);
  font-size: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.pain-list strong { color: var(--paper); font-weight: 600; }

/* chapters / what's inside, set like a book's table of contents */

.chapters { margin-top: 54px; border-bottom: 1px solid var(--line); }

.chapter-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 300px) minmax(0, 1fr);
  column-gap: 34px;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 30px 0;
}

.chapter-card .ch {
  grid-column: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.chapter-card h3 {
  grid-column: 2;
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
}

.chapter-card p { grid-column: 3; font-size: 15px; color: var(--mist); }

/* two paths: one spread, split by a hairline */

.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 50px; }

.path { padding: 8px 48px 8px 0; }

.path--b { border-left: 1px solid var(--line); padding: 8px 0 8px 48px; }

.path h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 12px;
}

.path p { color: var(--mist); font-size: 15.5px; }

/* closes the two-path section: the thesis of the book in one line, set larger
   than the cards above it so the section lands on it rather than on them */
.paths-close {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.5;
  max-width: 34ch;
  margin-top: 50px;
  padding-top: 34px;
  border-top: 1px solid var(--gold-line);
}

/* author */

.author-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

/* the source photo is square, which renders his face small in a portrait
   column. Cropping to 3:4 trims the window and cabinet at the sides and keeps
   the full standing figure, so the face gains size without losing the frame,
   and the photo runs deep enough to sit against the credentials list rather
   than float above it. Same hairline ring as the book cover: the photo is
   dark at its edges too. */
.author-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line), 0 24px 50px rgba(0, 0, 0, 0.6);
}

.cred-list { list-style: none; margin-top: 30px; border-bottom: 1px solid var(--line); }

.cred-list li { color: var(--mist); font-size: 16px; padding: 14px 0; border-top: 1px solid var(--line); }

.cred-list strong { display: block; color: var(--paper); font-weight: 600; }

/* the press band opens the author section edge to edge, so the section
   gives up its top padding and the band's own padding takes over */
.section--author { padding-top: 0; }

.section--author .press { margin-bottom: 80px; }

/* reviews */

.rating-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 44px;
}

.rating-line .big {
  font-family: var(--display);
  font-size: 44px;
  color: var(--paper);
  line-height: 1;
}

.rating-line .stars { color: var(--gold-bright); font-size: 20px; letter-spacing: 3px; }

.rating-line .count { color: var(--mist); font-size: 14px; }

/* the reviews follow the hero button directly as its proof, so they sit
   close under it instead of a full section gap away */
.hero + .section { padding-top: 24px; }

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }

.review {
  border-top: 1px solid var(--gold-line);
  padding-top: 26px;
}

.review .stars { color: var(--gold-bright); letter-spacing: 2px; font-size: 14px; }

.review blockquote {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.5;
  margin: 16px 0 18px;
  color: var(--paper);
}

.review cite { font-style: normal; font-size: 13px; color: var(--mist); }

/* offer / price stack, framed like a printed price card: flat, gold hairline */

.offer-box {
  background: var(--coal);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  padding: 56px 48px;
  text-align: center;
}

.offer-box .section-title { margin-bottom: 12px; }

.offer-price {
  font-family: var(--display);
  font-size: 74px;
  color: var(--gold-bright);
  line-height: 1;
  margin: 30px 0 8px;
}

.offer-price sup { font-size: 30px; }

.offer-compare { color: var(--mist); font-size: 14.5px; margin-bottom: 34px; }

.offer-includes {
  list-style: none;
  max-width: 460px;
  margin: 0 auto 40px;
  text-align: left;
  display: grid;
  gap: 13px;
}

.offer-includes li { display: flex; gap: 12px; color: var(--mist); font-size: 15.5px; }

/* the check is escaped, not typed: served without a charset the stylesheet can
   be decoded as Latin-1 and a literal ✓ comes out as mojibake */
.offer-includes li::before { content: "\2713"; color: var(--gold-bright); font-weight: 700; flex-shrink: 0; }

/* FAQ */

.faq { max-width: 780px; }

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}

.faq summary {
  font-family: var(--display);
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--gold);
  font-family: var(--body);
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.25s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p { color: var(--mist); font-size: 15.5px; padding-top: 14px; max-width: 660px; }

/* the handoff into the questions */

.deciding { text-align: center; }
.deciding .lede { margin: 0 auto 34px; }

/* closing line: the book on the left, the last word and the button on the right */

.closing {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: center;
}

/* the drop shadow sits on the wrapper: a filter on the rotated book itself
   would flatten its page block */
.closing-book { filter: drop-shadow(0 34px 46px rgba(0, 0, 0, 0.75)); }
.closing-book .book3d { width: 100%; }

.closing .section-title { margin-bottom: 30px; }

/* footer */

.footer {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  text-align: center;
  font-size: 13px;
  color: var(--mist);
}

.footer a { color: var(--mist); text-decoration: none; }
.footer a:hover { color: var(--gold-bright); }
.footer .footer-links { margin-bottom: 12px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Funnel pages (order / upsell / thank-you)
   -------------------------------------------------------------------------- */

.funnel-page { min-height: 100vh; display: flex; flex-direction: column; }

.funnel-main { flex: 1; padding: 64px 0 90px; }

/* checkout progress: a real sequence, so it's numbered */
.steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  list-style: none;
  margin: 34px 0 56px;
  font-size: 13px;
  font-weight: 500;
  counter-reset: checkout;
}

.steps li {
  counter-increment: checkout;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mist);
}

.steps li::before {
  content: counter(checkout);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.steps li.active { color: var(--paper); }
.steps li.active::before { border-color: var(--gold-bright); color: var(--gold-bright); }
.steps li.done::before { content: "\2713"; background: var(--gold); border-color: var(--gold); color: var(--ink); }

.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: start;
}

.panel {
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px;
}

.panel h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 26px;
}

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 8px;
}

.field input {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}

.field input:focus { outline: none; border-color: var(--gold); }

/* order bump: deliberately loud inside a quiet page */

.bump {
  border: 2px dashed var(--gold);
  border-radius: 4px;
  background: rgba(186, 142, 56, 0.08);
  padding: 24px;
  margin: 30px 0;
  display: flex;
  gap: 16px;
  cursor: pointer;
}

.bump input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  accent-color: var(--gold-bright);
  flex-shrink: 0;
  cursor: pointer;
}

.bump .bump-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 4px;
}

.bump .bump-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--gold-bright);
  margin-bottom: 10px;
}

.bump p { font-size: 14px; color: var(--mist); }

.bump .bump-lead { display: block; color: var(--paper); font-weight: 600; margin-bottom: 4px; }

.bump .bump-price { display: block; margin-top: 10px; color: var(--paper); font-weight: 600; }

/* order summary */

.summary-rows { list-style: none; margin-bottom: 22px; }

.summary-rows li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--mist);
}

.summary-rows li span:last-child { color: var(--paper); font-weight: 600; }

.summary-rows li.total {
  border-bottom: none;
  padding-top: 18px;
  font-size: 17px;
  color: var(--paper);
  font-weight: 600;
}

.summary-rows li.total span:last-child { color: var(--gold-bright); font-size: 22px; }

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--mist);
  margin-top: 18px;
}

/* upsell */

.upsell-hero { text-align: center; max-width: 760px; margin: 0 auto; }

.decline-link {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  color: var(--mist);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.decline-link:hover { color: var(--paper); }

/* thank-you */

.ty-check {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--gold-bright);
  color: var(--gold-bright);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 30px;
}

.next-steps { list-style: none; counter-reset: step; display: grid; gap: 0; margin: 44px 0; text-align: left; }

.next-steps li {
  counter-increment: step;
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.next-steps li::before {
  content: counter(step);
  font-family: var(--display);
  font-size: 26px;
  color: var(--gold);
  flex-shrink: 0;
  width: 1ch;
  line-height: 1.2;
}

.next-steps h3 { font-family: var(--display); font-weight: 400; font-size: 20px; margin-bottom: 6px; }

.next-steps p { font-size: 15px; color: var(--mist); }

.upsell-hero .next-steps { margin-top: 56px; }

/* the three things the plan is, counted. Same hairline-and-numeral language as
   .next-steps but a size up: that list is the process, this one is the offer */
.gets { list-style: none; counter-reset: get; margin: 44px 0 0; text-align: left; border-top: 1px solid var(--line); }

.gets li {
  counter-increment: get;
  display: flex;
  gap: 26px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.gets li::before {
  content: counter(get);
  font-family: var(--display);
  font-size: 34px;
  color: var(--gold);
  flex-shrink: 0;
  width: 1ch;
  line-height: 1.1;
}

.gets h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; margin-bottom: 8px; }

.gets p { font-size: 15.5px; color: var(--mist); }

.fineprint { font-size: 13.5px; color: var(--mist); max-width: 520px; margin: 0 auto; }

.ty-plan, .ty-access { margin-top: 44px; }

.ty-access-email { color: var(--gold-bright); text-underline-offset: 3px; }

.ty-access .form-error { margin: 18px 0 0; }

/* intake */

.intake-head { margin-bottom: 40px; }

.intake-group { border: 0; padding: 0; margin: 0 0 16px; }

.intake-group + .intake-group { border-top: 1px solid var(--line); padding-top: 28px; }

.intake-group legend {
  font-family: var(--display);
  font-size: 24px;
  color: var(--paper);
  padding: 0;
  margin-bottom: 20px;
}

.field textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 8px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.field textarea:focus { outline: none; border-color: var(--gold); }

.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }

.field .field-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  margin-bottom: 10px;
}

.field .optional { font-weight: 400; color: var(--mist); margin-left: 6px; }

.field-hint { font-size: 13px; color: var(--mist); margin-top: 6px; line-height: 1.5; }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.field .check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
  cursor: pointer;
}

.field .check:has(input:checked) { border-color: var(--gold); background: rgba(186, 142, 56, 0.08); }

.field .check input { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--gold-bright); flex-shrink: 0; }

.form-error { color: #f0a58a; font-size: 14.5px; margin-bottom: 16px; }

/* written interview: Alfredo's questions carry the page, set in the display
   face like an interview in print; the number keeps the reader's place */
.interview .question { margin-bottom: 30px; }

.interview .question > label {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--paper);
  margin-bottom: 12px;
  text-wrap: pretty;
}

.interview .question > label .optional { font-family: var(--body); font-size: 14px; }

.interview .q-num {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}

.interview .question > .field-hint,
.interview .question > input,
.interview .question > textarea { margin-left: 34px; width: calc(100% - 34px); }

.interview-accuracy { font-size: 14px; color: var(--mist); margin: 8px 0 18px; }

@media (max-width: 480px) {
  .interview .question > label { grid-template-columns: 1fr; font-size: 19px; }
  .interview .q-num { padding: 0 0 2px; }
  .interview .question > .field-hint,
  .interview .question > input,
  .interview .question > textarea { margin-left: 0; width: 100%; }
}

.intake-done { text-align: center; padding-top: 24px; }

.intake-done:focus { outline: none; }

.field input[aria-invalid="true"] { border-color: #f0a58a; }

/* --------------------------------------------------------------------------
   Payment: Stripe's Payment Element, themed from these tokens in funnel.js
   (STRIPE_APPEARANCE). The bump above stays the loud thing on the page;
   payment is deliberately plain.
   -------------------------------------------------------------------------- */

.pay {
  border: none;
  border-top: 1px solid var(--line);
  padding: 28px 0 0;
  margin: 0 0 24px;
  min-width: 0;
}

.pay legend {
  float: left; /* keeps the legend inside the fieldset's flow, under the rule */
  width: 100%;
  font-family: var(--display);
  font-size: 22px;
  color: var(--paper);
  margin-bottom: 18px;
}

.pay-block { clear: both; }

.pay-terms { font-size: 13px; line-height: 1.55; color: var(--mist); margin-top: 16px; }

.pay-loading,
.pay-preview {
  clear: both;
  font-size: 14px;
  color: var(--mist);
  padding: 18px;
  border: 1px dashed var(--edge);
  border-radius: 8px;
}

.btn--pay { width: 100%; justify-content: center; font-variant-numeric: tabular-nums; }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: wait;
  filter: saturate(0.6) brightness(0.85);
  transform: none;
  box-shadow: none;
}

#order-form.is-busy .bump,
#order-form.is-busy .field { opacity: 0.6; pointer-events: none; }

.offer-error { margin: 18px auto 0; max-width: 460px; }
.offer-error a,
.ty-downloads a:not(.btn) { color: var(--gold-bright); }

.ty-downloads { margin-top: 36px; }

.ty-download-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .word-invisible {
    animation: none;
    color: var(--gold-bright);
    -webkit-text-stroke: 0;
    filter: none;
  }

  .hero::before { animation: none; opacity: 1; }

  .btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .hero-grid { gap: 44px; }
  .chapter-card { grid-template-columns: 90px minmax(0, 1fr); row-gap: 8px; }
  .chapter-card p { grid-column: 2; }
  .reviews { grid-template-columns: 1fr; gap: 34px; max-width: 620px; }
  .author-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 820px) {
  .section { padding: 68px 0; }

  .hero { padding: 40px 0 50px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-book { order: -1; }
  .book3d { width: min(180px, 50%); }

  .chapter-card { grid-template-columns: 1fr; }
  .chapter-card h3, .chapter-card p { grid-column: 1; }

  .paths { grid-template-columns: 1fr; }
  .path { padding: 0 0 34px; }
  .path--b { border-left: none; border-top: 1px solid var(--line); padding: 34px 0 0; }

  .author-grid { grid-template-columns: 1fr; }
  .author-photo img { max-width: 320px; }
  .section--author { padding-top: 0; }
  .section--author .press { margin-bottom: 56px; }

  .paths-close { max-width: none; margin-top: 34px; }

  .order-grid { grid-template-columns: 1fr; }
  .order-grid .panel--summary { order: -1; }

  .offer-box { padding: 44px 26px; }

  .closing { grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center; }
  .closing-book .book3d { width: min(200px, 55%); }

  .press-logos { column-gap: 32px; }
  .press-logos img { height: calc(var(--h) * 0.8); translate: 0 calc(var(--y, 0px) * 0.8); }
}

/* the whole bar line measures 607px, so it holds well past the tablet
   breakpoint; below this the claim and the title stop sharing a line and the
   bar keeps the title alone */
@media (max-width: 680px) {
  .topbar-dash,
  .topbar-badge { display: none; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .btn { width: 100%; justify-content: center; padding: 18px 20px; }
  .offer-price { font-size: 58px; }
  .checks { grid-template-columns: 1fr; }
  .panel { padding: 28px 20px; }
}