/* ============================================================
   The 1-Hour AI Workday, sales page, design direction A
   Gumroad-flavored: warm off-white ground, hard black borders +
   offset shadows on every card/button, flat color blocks (no
   gradients, no soft shadows). Newsreader display / Plus Jakarta
   Sans body / IBM Plex Mono for the utility labels borrowed
   straight off the guide's own pages.
   ============================================================ */

:root {
  --bg: #fcfaf6;
  --paper: #fffef9;
  --ink: #111111;
  --ink-soft: rgba(17, 17, 17, 0.64);
  --ink-faint: rgba(17, 17, 17, 0.42);
  --green: #065f46;
  --green-deep: #0b3b2e;
  --green-flat: #123f34;
  --green-tint: rgba(6, 95, 70, 0.08);
  --amber: #f5b400;
  --amber-deep: #8a5f00;
  --amber-tint: rgba(245, 180, 0, 0.16);
  --border: rgba(17, 17, 17, 0.14);
  --border-soft: rgba(17, 17, 17, 0.08);
  --border-hard: #111111;
  --cream: #f6efe1;
  --shadow-hard: 4px 4px 0 var(--border-hard);
  --shadow-hard-hover: 6px 6px 0 var(--border-hard);
  --shadow-hard-active: 0 0 0 var(--border-hard);
  --radius-lg: 12px;
  --radius-md: 12px;
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-pad: clamp(64px, 9vw, 116px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: "Newsreader", Georgia, serif;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

/* focus */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   Moving grid background, fixed behind all content. Decorative,
   deliberately faint, but meant to actually read as present: the
   flat proof/offer color bands are semi-transparent so it drifts
   through all three sections, not just the plain hero/rollout
   areas. Cards themselves stay solid so legibility is unaffected.
   ============================================================ */
.bg-grid {
  position: fixed;
  /* one grid period larger than the viewport on every side, so the
     translate animation below never exposes an edge: the moving
     surface is transform-only (compositor-friendly), the visible
     effect is identical to animating background-position */
  top: -40px;
  left: -40px;
  right: -40px;
  bottom: -40px;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  background-image:
    repeating-linear-gradient(0deg, rgba(17, 17, 17, 0.12) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.12) 0 1px, transparent 1px 40px);
  background-size: 40px 40px;
  animation: bg-grid-drift 6s linear infinite;
}

@keyframes bg-grid-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(40px, 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-grid {
    animation: none;
  }
}

/* NOTE: .sticky-cta is deliberately NOT included in this selector.
   It was here before and, because "body > .sticky-cta" (0,1,1) is
   MORE specific than the plain ".sticky-cta { position: fixed }"
   rule (0,1,0) declared later in this file, it silently overrode
   fixed positioning with position:relative + z-index:2, regardless
   of source order. That pushed the bar into normal document flow
   at the very bottom of the page (after the footer) instead of
   pinning it to the viewport, which is why it was invisible to a
   real user without scrolling all the way down. Root cause, fixed
   by scoping this rule to section/footer only. */
body > section,
body > footer {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.5;
}

.eyebrow .ticks {
  align-self: center;
  flex-shrink: 0;
}

.eyebrow--on-dark {
  color: var(--amber);
}

/* small vertical amber ticks, echoing the barcode mark on the guide's
   own cover, the one recurring motif borrowed from the product itself */
.ticks {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.ticks span {
  display: block;
  width: 2px;
  background: var(--amber);
  border-radius: 1px;
}
.ticks span:nth-child(1) { height: 5px; opacity: 0.5; }
.ticks span:nth-child(2) { height: 9px; opacity: 0.7; }
.ticks span:nth-child(3) { height: 12px; }
.ticks span:nth-child(4) { height: 7px; opacity: 0.6; }
.ticks span:nth-child(5) { height: 11px; opacity: 0.85; }

.btn {
  --btn-bg: var(--amber);
  --btn-fg: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-hard);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: var(--shadow-hard);
  text-align: center;
}
.btn:hover {
  background: #ffca33;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard-hover);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-hard-active);
}

.btn--secondary {
  --btn-bg: #ffffff;
  --btn-fg: #111111;
}
.btn--secondary:hover {
  background: #f5f5f5;
}

/* every long CTA label ships a shorter mobile alternative so the
   button never wraps to two lines on a narrow phone */
.btn-label-short {
  display: none;
}
@media (max-width: 479px) {
  .btn-label-full {
    display: none;
  }
  .btn-label-short {
    display: inline;
  }
}

.micro {
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ============================================================
   Sections shell
   ============================================================ */
section {
  position: relative;
}

.section-inner {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* ============================================================
   Scroll reveal: 12px rise + fade, spring-like ease, staggered
   per card via inline transition-delay set in script.js. Always
   visible/static by default; the hidden pre-reveal state only
   exists for users who have not asked for reduced motion.
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: transparent;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 8vw, 64px);
  align-items: center;
}

.hero-copy {
  max-width: 640px;
}

.hero-copy .eyebrow {
  margin-bottom: 1.4rem;
}

.hero-copy h1 {
  font-size: clamp(2.15rem, 4.1vw + 1rem, 3.55rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
}

/* before/after audit bars, drawn to scale against the same
   18.5hr track so the drop reads at a glance */
.hero-audit {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 420px;
  margin: 1.1rem 0 1.3rem;
}
.hero-audit-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hero-audit-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.hero-audit-bar {
  height: 16px;
  border: 2px solid var(--border-hard);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.hero-audit-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--fill));
  background: #c7c7c7;
}
.hero-audit-bar--after .hero-audit-fill {
  background: var(--amber);
}
.hero-audit-caption {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-audit-fill {
    transform: scaleX(0);
    transition: transform 700ms var(--ease);
  }
  .hero-audit.is-visible .hero-audit-fill {
    transform: scaleX(var(--fill));
  }
}

.hero-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 54ch;
}

.hero-value-line {
  margin-top: 0.5rem;
  max-width: 48ch;
}

.hero-copy .sub {
  font-size: clamp(1.02rem, 0.6vw + 0.9rem, 1.15rem);
  color: var(--ink-soft);
  line-height: 1.65;
}

.hero-cta-row {
  margin-top: 2.3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  max-width: 100%;
}

.hero-cta-row .btn {
  max-width: 100%;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

/* the hero book sits inside a bordered, hard-shadowed card,
   Gumroad-style: flat surface, no soft glow */
.book-frame {
  background: var(--paper);
  border: 2px solid var(--border-hard);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: clamp(20px, 3vw, 36px);
  width: 100%;
  max-width: 420px;
}

/* ---- the 3D book ---- */
.book-stage {
  perspective: 1500px;
  width: 100%;
  max-width: 380px;
  padding: 30px 10px 50px;
}

.book {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(3deg) rotateZ(0.5deg);
}

.book-page-peek {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  background: #eeeade;
  border: 2px solid var(--border-hard);
  transform: translate3d(22px, 16px, -60px) rotateY(-6deg);
}
.book-page-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.92;
}

.book-cover {
  position: absolute;
  inset: 0;
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  border: 2px solid var(--border-hard);
  transform: translateZ(0);
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  background: var(--green-deep);
  transform: rotateY(90deg) translateZ(-13px) translateX(13px);
  transform-origin: left center;
  border-radius: 4px 0 0 4px;
}

.book-edge {
  position: absolute;
  right: -6px;
  top: 3%;
  bottom: 3%;
  width: 6px;
  background: repeating-linear-gradient(
    to bottom,
    #ece6d6 0,
    #ece6d6 2px,
    #d8d0ba 2px,
    #d8d0ba 3px
  );
  transform: rotateY(-90deg) translateZ(3px);
  transform-origin: right center;
  border-radius: 0 3px 3px 0;
}

/* scroll-linked rotation on the hero book only: -28deg to -14deg
   plus a 12px rise over the first 400px of scroll. Native CSS
   scroll-timeline where supported, JS rAF fallback otherwise.
   Both paths are skipped entirely under reduced motion, in which
   case the book keeps the static base transform set above. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-book .book {
      animation: hero-book-scroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 400px;
    }
  }
}

@keyframes hero-book-scroll {
  from {
    transform: rotateY(-28deg) rotateX(3deg) rotateZ(0.5deg) translateY(0);
  }
  to {
    transform: rotateY(-14deg) rotateX(3deg) rotateZ(0.5deg) translateY(-12px);
  }
}

/* ============================================================
   TESTIMONIALS / PROOF
   ============================================================ */
.proof {
  /* 88% opaque so the moving grid drifts faintly through this
     band too, not only the plain hero/rollout areas */
  background: rgba(246, 239, 225, 0.88);
  border-top: 2px solid var(--border-hard);
  border-bottom: 2px solid var(--border-hard);
}

.proof-head {
  max-width: 640px;
  margin: 0 auto 2.6rem;
  text-align: center;
}

.proof-head .eyebrow {
  justify-content: center;
  margin-bottom: 1.1rem;
}

.proof-head h2 {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem);
  margin-bottom: 0.7rem;
}

.proof-head .intro {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.proof-disclosure {
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-style: italic;
}

.proof-cta {
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  text-align: center;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.vcard {
  background: var(--paper);
  border: 2px solid var(--border-hard);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-hard);
  /* so a card scrolled into view (e.g. by a browser's own
     scroll-into-view behavior) never ends up hidden under the
     fixed mobile sticky CTA */
  scroll-margin-bottom: calc(var(--sticky-h, 80px) + 12px);
}

.vcard-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.85rem 0.7rem;
}

.vcard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
}

.vcard-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.vcard-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--green-deep);
  overflow: hidden;
}

.vcard-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vcard-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.vcard-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vcard-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--border-hard);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.vcard-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--green-deep);
  z-index: 1;
}
.vcard-play:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.vcard-foot {
  padding: 0.85rem 0.95rem 1rem;
}

.vcard-quote {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--ink);
}

/* ============================================================
   HOW IT WORKS / ROLLOUT
   ============================================================ */
.rollout {
  background: transparent;
}

.rollout-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.rollout-head .eyebrow {
  justify-content: center;
  margin-bottom: 1.1rem;
}

.rollout-head h2 {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem);
  margin-bottom: 0.9rem;
}

.rollout-head .intro {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* cumulative progress meter, aligned to the four week cards below:
   each segment's own fill grows (25%, 58%, 83%, 100% of the 12hr
   total) reading left to right as an ascending staircase */
.progress-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.progress-label {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}
.progress-track {
  height: 8px;
  border: 2px solid var(--border-hard);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--fill));
  background: var(--amber);
}

@media (prefers-reduced-motion: no-preference) {
  .progress-fill {
    transform: scaleX(0);
    transition: transform 700ms var(--ease);
  }
  .progress-meter.is-visible .progress-fill {
    transform: scaleX(var(--fill));
  }
}

.rollout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}

.rollout-closing-line {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--section-pad);
}

.week-card {
  background: var(--paper);
  border: 2px solid var(--border-hard);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: 1.6rem 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.week-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--amber);
}

.week-card h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: var(--green-deep);
}

.week-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  flex-grow: 1;
}

.week-save {
  align-self: flex-start;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--amber-deep);
  background: var(--amber-tint);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
}

/* closing offer panel, the conversion point of the page */
.closing {
  /* 88% opaque, same reasoning as .proof above */
  background: rgba(11, 59, 46, 0.88);
  color: var(--cream);
  border: 2px solid var(--border-hard);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr minmax(240px, 400px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.closing-body {
  min-width: 0;
}

.closing-body h2 {
  color: #fff;
  font-size: clamp(1.55rem, 1.3vw + 1rem, 1.875rem);
  margin-bottom: 1.5rem;
  max-width: 34ch;
  white-space: normal;
}

.closing-cta-row,
.closing-cta-row .btn,
.inside-list,
.inside-list li {
  min-width: 0;
}

.closing-body .price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-bottom: 1.6rem;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.closing-body .price {
  font-family: "Newsreader", serif;
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
}

.price-tags {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.price-tag-launch {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber);
}

.price-tag-regular {
  font-size: 0.8rem;
  color: rgba(246, 239, 225, 0.7);
}

.value-chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--border-hard);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}

.inside-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.6rem;
  margin-bottom: 2.2rem;
}

.inside-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.93rem;
  color: rgba(246, 239, 225, 0.9);
  line-height: 1.5;
}
.inside-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -0.05em;
  width: 1.05rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--amber);
}

.closing-objection {
  font-size: 0.88rem;
  color: rgba(246, 239, 225, 0.78);
  max-width: 44ch;
  margin-bottom: 1.7rem;
}

.closing-cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.btn--closing {
  height: 56px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0 2.4rem;
  line-height: 1;
}

/* gentle 1.02 scale reveal, played once when the offer panel
   scrolls into view (class added by script.js) */
@media (prefers-reduced-motion: no-preference) {
  .btn--closing.cta-reveal {
    animation: cta-reveal 700ms var(--ease) both;
  }
}

@keyframes cta-reveal {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  60% {
    transform: scale(1.02);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.closing .micro {
  color: rgba(246, 239, 225, 0.62);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.78rem;
  color: rgba(246, 239, 225, 0.7);
}
.trust-row span:not(:last-child)::after {
  content: "\00B7";
  margin-left: 0.6rem;
  color: rgba(246, 239, 225, 0.45);
}

.closing-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.book-disc {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--green-flat);
  border: 2px solid var(--border-hard);
  box-shadow: var(--shadow-hard);
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-stage--sm {
  max-width: 260px;
  padding: 14px 4px 22px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 1.6rem var(--gutter) 2.4rem;
  text-align: center;
}
.site-footer p {
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.site-footer a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   Sticky mobile CTA
   ============================================================ */
.sticky-cta {
  /* visible by CSS default; only ever hidden by the JS-added
     .is-hidden class below, never by IntersectionObserver timing,
     never by the reveal/opacity system (this block intentionally
     shares nothing with .reveal) */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  opacity: 1;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(252, 250, 246, 0.95);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--border-hard);
  transform: none;
  transition: transform 0.25s var(--ease);
}
.sticky-cta.is-hidden {
  transform: translateY(100%);
}
.sticky-cta-price-note {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.sticky-cta .btn {
  width: 100%;
  height: 52px;
  padding: 0 1rem;
  line-height: 1;
  white-space: nowrap;
}

/* the hide/show slide is a positional convenience, not a vestibular
   motion effect, but it still gets an instant (non-animated) toggle
   under reduced motion; the bar itself stays visible either way */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .sticky-cta {
    display: block;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 860px) {
  .hero .container {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .hero-visual {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  .rollout-grid,
  .progress-meter {
    grid-template-columns: repeat(2, 1fr);
  }
  .closing {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 20px;
  }
  .closing-visual {
    order: -1;
  }
  .book-disc {
    max-width: 46vw;
    margin: 0 auto;
  }
  .inside-list {
    grid-template-columns: 1fr;
  }
  .closing-cta-row .btn--closing {
    width: 100%;
  }
  .closing-body .price-row {
    gap: 0.6rem 0.8rem;
  }
  .price-main {
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .closing-body .price {
    font-size: 1.7rem;
  }
  .price-tag-launch {
    font-size: 0.75rem;
  }
  .price-tag-regular {
    font-size: 0.75rem;
  }
  .value-chip {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
  /* trust row: fixed 2-column grid guarantees at most 2 lines for
     3 short phrases, regardless of device width */
  .trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.6rem;
  }
  .trust-row span::after {
    content: none !important;
  }
}

/* ============================================================
   Mobile pass: hero, testimonials, weeks, offer panel below 768px
   ============================================================ */
@media (max-width: 767px) {
  .hero .section-inner {
    padding-top: 28px;
    padding-bottom: 24px;
  }
  .hero .container {
    gap: 20px;
  }
  .hero-copy h1 {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 0.8rem;
  }
  .hero-cta-row {
    margin-top: 1.4rem;
  }
  .hero-cta-row .btn {
    width: 100%;
  }

  .book-frame {
    max-width: 62vw;
    padding: clamp(12px, 4vw, 20px);
    margin: 0 auto;
  }
  .book-stage {
    max-width: 100%;
    padding: 16px 6px 22px;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  .hero-copy h1 {
    font-size: 38px;
  }
}

@media (max-width: 720px) {
  .proof-scroll {
    position: relative;
  }
  .proof-grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 0.85rem;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 0.4rem;
    -webkit-overflow-scrolling: touch;
  }
  .proof-grid .vcard {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }
  .proof-fade {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0.4rem;
    right: calc(var(--gutter) * -1);
    width: 56px;
    background: linear-gradient(to right, transparent, var(--cream));
    pointer-events: none;
  }
  .proof-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
  }
}

.proof-fade {
  display: none;
}
.proof-dots {
  display: none;
}
.proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.22);
  transition: background 200ms ease, transform 200ms ease;
}
.proof-dot.is-active {
  background: var(--ink);
  transform: scale(1.3);
}

@media (max-width: 479px) {
  .rollout-grid,
  .progress-meter {
    grid-template-columns: 1fr;
  }
  .week-card {
    padding: 16px;
  }
  .week-card p {
    font-size: 15px;
  }
  .progress-seg {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .progress-label {
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .progress-track {
    flex: 1 1 auto;
  }
}

/* keep book from ever forcing horizontal scroll on very small screens */
@media (max-width: 400px) {
  .book-stage {
    max-width: 100%;
  }
}