/* Prosper Coach Academy funnel. One stylesheet for every page.
   DESIGN.md is the authority: change a token there first, then here.
   World: soft, light, editorial. Off-white ground, large Bodoni headlines
   with one italic accent phrase, full-width color bands between sections,
   warm natural-light photos. Taken from the client's own slide deck. */

/* ---------- faces (self-hosted, see assets/fonts/LICENSE.txt) ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodonimoda-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodonimoda-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* deck colors, sampled from the slides */
  --blush: #e4ad95;
  --blue: #859dad;
  --charcoal: #4e4d4b;
  --sage: #92a28c;
  --sage-deep: #5f7259; /* the join button on the pre-workshop page; white on it 5.2:1 */
  --bg: #f5f4f2;
  --card: #fffcf8;
  --blush-tint: #f5e9e2;
  --blue-tint: #e3e8ed;
  --grey-tint: #e4e4e3;

  /* deepened for text, so headlines and links can be read (DESIGN.md) */
  --blush-deep: #c37858; /* 3.1:1 on the ground: display text only */
  --blush-text: #a45b3b; /* 4.6:1: small text and links */
  --blue-deep: #738ea1;  /* 3.1:1: display text only */
  --blue-text: #587283;  /* 4.6:1: small text and links */
  --blue-band: #7691a3;  /* band fill that carries white display text at 3.3:1 */

  --ink: #3b3a38;
  --ink-soft: #6d6a66;
  --hairline: rgba(78, 77, 75, 0.16);
  --error: #a8322a;

  /* THE HEADLINE SWITCH. One line decides every headline's color.
     Ruled 2026-09-30: Option A, var(--blush-deep). The deck's exact value,
     var(--blush), is too faint for text and stays for fills only. */
  --headline: var(--blush-deep);

  --radius-card: 18px;
  --radius-pill: 999px;
  --gutter: 1.25rem;
  --measure: 40rem;
  --wide: 68rem;
  --section-pad: clamp(3rem, 9vw, 5.5rem);

  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Lato", "Avenir Next", "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Bodoni Moda carries an optical-size axis; left on auto, a phone-sized
     headline gets the poster cut, whose hairlines vanish on Android and
     low-density screens (Mac's screenshot, 2026-10-21). Pinned to the text
     cut (opsz 11) everywhere, headlines included: same face, sturdier
     strokes. Inherits, so this one line covers every display use. The
     files themselves are the 500 weight since the same day (Mason's
     pick from 400/500/600 side by side); CSS still says 400 because
     each file is one weight and that is the name it is served under. */
  font-optical-sizing: none;
}
main {
  flex: 1;
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: var(--blue-text);
}
::selection {
  background: var(--blush);
  color: var(--ink);
}
:focus-visible {
  outline: 2.5px solid var(--blue-text);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- type ---------- */
h1,
h2,
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--headline);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 8.5vw, 4rem);
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.85rem, 6vw, 2.75rem);
  line-height: 1.12;
}
h1 em,
h2 em,
.display em {
  font-style: italic;
}
h2.blue {
  color: var(--blue-deep);
}
h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
}
.lead {
  font-size: clamp(1.1rem, 3.4vw, 1.3rem);
  line-height: 1.5;
}
.label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.small,
.fine-print {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---------- layout ---------- */
.masthead {
  padding: 1.25rem var(--gutter) 0;
  text-align: center;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark em {
  font-style: italic;
}
.section {
  padding: var(--section-pad) var(--gutter);
}
.section-inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.section-inner.wide {
  max-width: var(--wide);
}
.center {
  text-align: center;
  align-items: center;
}

/* hero: words first, photo second; side by side from tablet up */
.hero {
  padding: clamp(2rem, 7vw, 4rem) var(--gutter) var(--section-pad);
}
.hero-inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
@media (min-width: 52rem) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
  }
}

/* ---------- signature: the band ----------
   The deck's divider slides: a full-width field of color, one display line,
   a hairline rule above and below. */
.band {
  padding: clamp(3.25rem, 10vw, 6rem) var(--gutter);
  text-align: center;
  color: #ffffff;
  background: var(--blue-band);
}
.band.blush {
  background: var(--blush);
  color: var(--ink);
}
.band-inner {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem) 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.band h2,
.band .display {
  color: inherit;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.08;
}
.band p {
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(59, 58, 56, 0.55);
}
.btn:active {
  transform: none;
  box-shadow: none;
}
.btn.dark {
  background: var(--charcoal);
  color: #ffffff;
}
.btn.quiet {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn.block {
  width: 100%;
}
.btn.big {
  min-height: 3.75rem;
  font-size: 1.2rem;
}
.text-link {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ---------- next-session chip ---------- */
.session {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-card);
  background: var(--blue-tint);
  align-self: flex-start;
}
.center .session {
  align-self: center;
}
.session strong {
  font-size: 1.1rem;
}
.when {
  font-size: 1.15rem;
}

/* ---------- form ---------- */
.form-card {
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -30px rgba(59, 58, 56, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field label {
  font-weight: 700;
  font-size: 0.9rem;
}
.field input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid rgba(78, 77, 75, 0.35);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px: stops iOS zooming the page on focus */
}
.field input::placeholder {
  color: #8f8c87;
}
.field input:focus-visible {
  outline: 2.5px solid var(--blue-text);
  outline-offset: 1px;
  border-color: var(--blue-text);
}
.field .hint {
  display: none;
  font-size: 0.875rem;
  color: var(--error);
}
.field.is-invalid input {
  border-color: var(--error);
}
.field.is-invalid .hint {
  display: block;
}
.form-error {
  display: none;
  font-size: 0.9rem;
  color: var(--error);
}
.form-error.is-shown {
  display: block;
}

/* ---------- lists and cards ---------- */
/* The dashed "read this" box: the seat-saved note and the "NOT because"
   lines on /offer, the payment-declined note on /join. */
.dashed-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.2rem 1.1rem;
  border: 2.5px dashed var(--blush-deep);
  border-radius: var(--radius-card);
  background: var(--blush-tint);
  text-align: center;
}
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.32em;
  width: 0.5rem;
  height: 0.95rem;
  border: solid var(--blue-text);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}

/* "What's inside": a colored tag and its description, one row each */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pillar {
  display: grid;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--grey-tint);
}
.pillar-tag {
  padding: 0.7rem 1.1rem;
  background: var(--charcoal);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
}
.pillar p {
  padding: 0.9rem 1.1rem 1rem;
}
.pillar.blue {
  background: var(--blue-tint);
}
.pillar.blue .pillar-tag {
  background: var(--blue-band);
}
.pillar.blush {
  background: var(--blush-tint);
}
.pillar.blush .pillar-tag {
  background: var(--blush);
  color: var(--ink);
}
@media (min-width: 36rem) {
  .pillar {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: stretch;
  }
  .pillar-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-card);
    text-align: center;
  }
  .pillar p {
    padding: 1.1rem 1.4rem;
  }
}

/* then vs now: a founder's story beside her portrait */
.story {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.story-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.story-copy h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.15;
  color: var(--headline);
}
.story-copy h3 em {
  font-style: italic;
}
.story-copy .label {
  font-style: italic;
  letter-spacing: 0.08em;
}
.story-copy ul {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 1.1rem;
  list-style: disc;
}
@media (min-width: 44rem) {
  .story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 3rem;
  }
  .story.flip {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }
  .story.flip .story-copy {
    order: 2;
  }
}

/* ---------- the checkout box (/offer, /join) and the order (/welcome) ---------- */
.byline {
  font-style: italic;
  color: var(--ink-soft);
}
.checkout {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}
/* Commas's checkout lives in an iframe its script adds, sized to this box
   (containerOptions 100%): the script gives it no height of its own. The
   box is as tall as the form measured live on 2026-10-20 (card, address
   by search, no coupon row), a little more on a phone where the fields
   stack; a longer form scrolls inside it. */
.checkout-frame {
  height: 1480px;
}
@media (min-width: 40rem) {
  .checkout-frame {
    height: 1220px;
  }
}
.checkout-frame iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: var(--radius-card);
}
.pay-error {
  max-width: 34rem;
  margin: 0.75rem auto 0;
}
.skip a {
  color: var(--ink-soft);
}
/* /welcome: the order, a small cover beside two lines */
.order {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
.order-cover img {
  box-shadow: 0 6px 18px rgba(59, 58, 56, 0.18);
}

/* testimonial */
.quote {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline);
}
.quote p {
  font-style: italic;
}
.quote cite {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--blue-deep);
}

/* FAQ: native details, no script */
.faq details {
  border-top: 1px solid var(--hairline);
}
.faq details:last-of-type {
  border-bottom: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--blush-text);
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details p {
  padding: 0 0 1.15rem;
}

/* photos: square corners, the way the deck frames them */
.photo img {
  width: 100%;
  background: var(--grey-tint);
}
.photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---------- landing page ---------- */
/* Phone: words, then the form, then the photo. From tablet width the form
   sits beside the words and stays in view while the hero scrolls. */
.hero-inner {
  grid-template-areas:
    "copy"
    "form"
    "photo";
}
.hero-copy {
  grid-area: copy;
}
.hero-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  scroll-margin-top: 1rem;
}
.hero-photo {
  grid-area: photo;
}
@media (min-width: 52rem) {
  .hero-inner {
    grid-template-areas:
      "copy form"
      "photo form";
    align-items: start;
  }
  .hero-form {
    position: sticky;
    top: 1.25rem;
  }
}
.form-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
}
.form-micro {
  font-size: 0.9rem;
  text-align: center;
  color: var(--ink-soft);
}
.form-card .fine-print {
  font-size: 0.78rem;
  line-height: 1.5;
}
.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.section.tint {
  background: var(--blush-tint);
}
.section.tight {
  padding-top: 0;
}

/* the doubts, in her own voice */
.doubts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.doubts li {
  padding: 0.55rem 0 0.55rem 1rem;
  border-left: 3px solid var(--blush);
  font-style: italic;
}

/* how coaching works: numbered in the display face */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.2rem 0 1.2rem 3.4rem;
  border-top: 1px solid var(--hairline);
}
.steps li:last-child {
  border-bottom: 1px solid var(--hairline);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0.2rem;
  top: 1rem;
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--headline);
}
.steps h3 {
  margin-bottom: 0.3rem;
}

.hosts {
  gap: clamp(2.5rem, 7vw, 4rem);
}
.hosts-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
}

/* ---------- confirmation pages ---------- */
.confirm {
  padding-top: clamp(2rem, 7vw, 4rem);
}
.confirm .section-inner {
  gap: 1.1rem;
}
.calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.signoff {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.2;
  color: var(--blue-deep);
}
.signoff span {
  display: block;
  font-size: 0.6em;
}
.narrow-photo {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

/* ---------- phone field (intl-tel-input, restyled to match .field input) ----------
   The library's own stylesheet is added by assets/phone-field.js BEFORE this
   file, so these rules win on source order. No flag images are used. */
:root {
  --iti-border-color: rgba(78, 77, 75, 0.35);
  --iti-border-width: 1.5px;
  --iti-hover-color: var(--blue-tint);
  --iti-country-selector-bg: #ffffff;
  --iti-icon-color: var(--ink-soft);
}
.iti {
  width: 100%;
}
.iti__country-container .iti__selected-country {
  border-radius: 12px 0 0 12px;
}
.iti__selected-dial-code {
  color: var(--ink);
}
.iti__dropdown-content {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 22px 44px -24px rgba(59, 58, 56, 0.55);
  color: var(--ink);
  overflow: hidden;
}
.iti__country-list {
  background: var(--card);
  color: var(--ink);
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--blue-tint);
}
.iti__dial-code {
  color: var(--ink-soft);
}
.field .iti__search-input,
.iti__search-input {
  min-height: 2.9rem;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.field .iti__search-input:focus-visible {
  outline-offset: -2px;
}

/* ---------- review mode: the checkout box before its script fills it ---------- */
.slot {
  margin-top: 0.75rem;
  padding: 1.5rem 1.25rem;
  border: 1.5px dashed var(--blue);
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- footer ---------- */
.footer {
  padding: 1.75rem var(--gutter) 2.25rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer a {
  color: inherit;
}
.footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/* ---------- homepage (coachesprosper.com/) ----------
   The landing page's hero puts the form beside the words; the homepage has
   no form, so its hero is words beside the photo, and its six ways of
   working are a card grid. Everything else reuses the components above. */
.home-hero .hero-inner {
  grid-template-areas:
    "copy"
    "photo";
}
.home-hero .hero-copy {
  grid-area: copy;
}
.home-hero .hero-photo {
  grid-area: photo;
}
@media (min-width: 52rem) {
  .home-hero .hero-inner {
    grid-template-areas: "copy photo";
    align-items: center;
  }
}
.values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.values li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--grey-tint);
}
.values h3 {
  font-size: 1.15rem;
}
.values li:nth-child(3n + 1) {
  background: var(--blush-tint);
  border-color: transparent;
}
.values li:nth-child(3n + 2) {
  background: var(--blue-tint);
  border-color: transparent;
}
@media (min-width: 40rem) {
  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.founders {
  display: grid;
  gap: 1.5rem;
}
.founders figure {
  margin: 0;
}
@media (min-width: 44rem) {
  .founders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ---------- the waiting-list popup (home.html) ---------- */
.modal {
  width: min(92vw, 26rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
}
.modal::backdrop {
  background: rgba(43, 37, 32, 0.55);
}
.modal .form-card {
  margin: 0;
}
.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover,
.modal-close:focus-visible {
  background: var(--grey-tint);
  color: var(--ink);
}
.modal [hidden] {
  display: none;
}

/* ---------- the SMS consent box on the form (SOP row 5) ---------- */
.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consent input {
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--blush);
}
.consent a {
  color: inherit;
}


/* ---------- legal pages (/privacy, /terms, /disclaimer and the rest) ----------
   Long reading text, so one narrow column, plain hierarchy, no color bands.
   The words come from docs/legal-pages.md's sources; only the look is here. */
.legal {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 4rem;
}
.legal-doc,
.legal section {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.legal-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.legal-head h1 {
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.12;
}
.legal-updated {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.legal h2 {
  margin-top: 1.4rem;
  font-size: clamp(1.4rem, 4.6vw, 1.75rem);
  line-height: 1.25;
  color: var(--ink);
  scroll-margin-top: 1rem;
}
.legal section > h2:first-child {
  margin-top: 1.6rem;
}
.legal h3 {
  margin-top: 0.4rem;
  font-size: 1.05rem;
}
.legal ul,
.legal ol {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.35rem;
}
.legal ul {
  list-style: disc;
}
.legal ol {
  list-style: decimal;
}
.legal li::marker {
  color: var(--ink-soft);
}
.legal-lead {
  font-weight: 700;
}
.legal-caps {
  font-size: 0.95rem;
}
.legal-address {
  padding: 1rem 1.15rem;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.legal-toc,
.optout-card {
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.legal-toc ol {
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.legal-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.45;
}
.legal-table th,
.legal-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.legal-table thead th {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.legal-table tbody tr:last-child > * {
  border-bottom: 0;
}
.legal-more {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.legal .legal-more ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 0.6rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}
.legal-more a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* the opt-out box on /do-not-sell-or-share */
.optout-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0.5rem 0;
}
.optout-card h2 {
  margin: 0;
  font-size: 1.4rem;
}
.optout-card.is-out {
  background: var(--blue-tint);
}
.optout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-text);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: underline;
  cursor: pointer;
}
.optout-actions [hidden],
.request-form [hidden],
[data-request-done][hidden] {
  display: none;
}

/* the form on /privacy-rights-request */
.request-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -30px rgba(59, 58, 56, 0.45);
}
.request-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.request-form legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.9rem;
}
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}
.choice input {
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--blush-deep);
}
.request-form .choices .hint {
  display: none;
  font-size: 0.875rem;
  color: var(--error);
}
.request-form .choices.is-invalid .hint {
  display: block;
}
.field textarea {
  width: 100%;
  min-height: 7rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid rgba(78, 77, 75, 0.35);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  resize: vertical;
}
.field textarea:focus-visible {
  outline: 2.5px solid var(--blue-text);
  outline-offset: 1px;
  border-color: var(--blue-text);
}
.field-row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 36rem) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}
.request-form .btn {
  align-self: flex-start;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.request-done {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--blue-tint);
}
.request-done h2 {
  margin: 0;
}

/* ---------- bridge page (/offer), v5 ----------
   The format of the page Mason pointed to (copy/offer.md): a colored top
   bar, a progress bar and a dashed "read this" box, one centered reading
   column with short story paragraphs, a full-width band holding a card,
   cards with marker-highlighted titles. Our colors and faces throughout. */
.brandbar {
  padding: 0.85rem var(--gutter);
  text-align: center;
  background: var(--blush-deep);
}
.brandbar .wordmark {
  color: #ffffff;
}
.bridge {
  --read: 38rem;
}
.bridge-top,
.bridge-story,
.bridge-section {
  padding: clamp(1.75rem, 6vw, 3.5rem) var(--gutter);
}
.bridge-inner {
  max-width: var(--read);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.bridge-top .bridge-inner {
  text-align: center;
  align-items: stretch;
}
.bridge h1 {
  color: var(--ink);
  font-size: clamp(2.1rem, 8.5vw, 3.4rem);
  line-height: 1.08;
}
.bridge h1 em {
  display: block;
}
.bridge h2 {
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  line-height: 1.12;
}
.bridge h3 {
  font-size: 1.2rem;
}
.bridge .accent {
  color: var(--headline);
}
/* small text needs the deeper shade to be read (DESIGN.md) */
.story-text .accent {
  color: var(--blush-text);
}
.progress {
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--blush-tint);
  overflow: hidden;
}
.progress-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 67%;
  height: 100%;
  padding: 0 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--blush-deep);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.notice-title {
  font-family: var(--display);
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1.05;
  color: var(--headline);
}
.price-line {
  font-size: clamp(1.15rem, 4vw, 1.35rem);
  font-weight: 700;
}
.was {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-weight: 400;
  margin-right: 0.15rem;
}
.hero-skip {
  margin: 0.35rem 0 0.9rem;
  text-align: center;
  font-size: 0.95rem;
}
.hl {
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  background: var(--blush-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--blush);
}
.btn.ringed {
  margin: 0.35rem 0;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--blush-deep);
}
.btn.ringed:hover {
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--blush-deep), 0 12px 24px -14px rgba(59, 58, 56, 0.55);
}
.authors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.authors-faces {
  display: flex;
}
.authors-faces img {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.authors-faces img + img {
  margin-left: -0.7rem;
}
.curl {
  width: 2.5rem;
  margin: 0 auto -0.5rem;
  color: var(--blush-deep);
}
.story-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.1rem;
}
.countdown {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-weight: 700;
}
.countdown li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.countdown li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 2.5px solid var(--blush-deep);
  border-radius: 50%;
  background: linear-gradient(var(--blush-deep), var(--blush-deep)) 50% 25% / 2px 38% no-repeat,
    linear-gradient(var(--blush-deep), var(--blush-deep)) 70% 52% / 35% 2px no-repeat;
}
.callout-quote {
  padding: 1.35rem 1.25rem;
  border-top: 3px solid var(--blush);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 14px 30px -20px rgba(59, 58, 56, 0.55);
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}
.callout-quote em {
  color: var(--headline);
}
.thoughts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--blush);
  font-style: italic;
  font-size: 1.1rem;
}
.frame-band {
  padding: clamp(1.25rem, 5vw, 2.5rem) clamp(0.85rem, 4vw, 2rem);
  background: var(--blush-deep);
}
.frame-card {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.15rem, 4vw, 2.25rem);
  border-radius: var(--radius-card);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.frame-card h2 {
  color: var(--ink);
  text-align: center;
}
.not-box {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blush-text);
}
.not-x {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--blush-deep);
}
.not-x::before,
.not-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 2.5px;
  border-radius: 2px;
  background: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.not-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.marker {
  padding: 0 0.15em;
  background: linear-gradient(transparent 58%, var(--blush-tint) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.product-card,
.shows li,
.tool-cards li,
.checkout-section .bridge-inner {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 18px 36px -28px rgba(59, 58, 56, 0.5);
}
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}
.product-cover {
  width: 52vw;
  max-width: 14rem;
}
.product-cover img {
  box-shadow: 0 12px 28px rgba(59, 58, 56, 0.22);
}
.bridge .product-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1.1;
  color: var(--headline);
}
.product-tagline {
  font-weight: 700;
}
.shows,
.tool-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shows li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.25rem 1.15rem;
  text-align: center;
}
.shows strong {
  font-size: 1.2rem;
  line-height: 1.35;
}
.shows li > span:last-child {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.badge-check {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--blush-deep);
}
.badge-check::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.33rem;
  width: 0.38rem;
  height: 0.72rem;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}
.source-band {
  background: var(--blue-band);
}
.source-inner {
  max-width: 46rem;
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
}
.source-photo {
  width: 50vw;
  max-width: 14rem;
}
.source-photo img {
  border: 6px solid #ffffff;
}
.source-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 44rem) {
  .source-inner {
    grid-template-columns: 14rem minmax(0, 1fr);
    text-align: left;
  }
}
.tool-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.tool-cards h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2rem);
  line-height: 1.12;
  color: var(--headline);
}
/* A sheet of paper drawn in CSS, standing in for a page of the tool. */
.doc-mock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 10rem;
  padding: 1rem 0.9rem 1.1rem;
  background: #fffdf9;
  box-shadow: 6px 6px 0 -1px #f1ebe4, 6px 6px 0 0 var(--hairline), 0 10px 22px -12px rgba(59, 58, 56, 0.45);
  transform: rotate(-2deg);
}
.doc-kicker {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blush-text);
}
.doc-name {
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--ink);
}
.doc-lines {
  width: 100%;
  height: 2.6rem;
  margin-top: 0.3rem;
  background: repeating-linear-gradient(var(--grey-tint) 0 3px, transparent 3px 9px);
  opacity: 0.9;
}
.checkout-section .bridge-inner {
  padding: 1.75rem 1.25rem;
}

/* ---------- main offer checkout (/join), v4 ----------
   Checkout first, in the format of the page Mason pointed to
   (copy/join.md): the logo and "secure checkout" across the top, three
   steps, then the order card beside everything she gets. On a phone the
   order card comes first. */
.checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.1rem var(--gutter) 0.4rem;
}
.checkout-head .wordmark {
  font-size: clamp(0.85rem, 4.1vw, 1.35rem);
  white-space: nowrap;
}
/* On a phone the wordmark and the lock line share one row: tighter
   letter-spacing keeps "Secure checkout" from running off the edge
   (seen live at 375 px, 2026-10-17). */
@media (max-width: 30rem) {
  .checkout-head {
    gap: 0.6rem;
  }
  .checkout-head .secure-tag {
    min-width: 0;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }
}
.secure-tag {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.lock {
  position: relative;
  width: 0.7rem;
  height: 0.55rem;
  margin-top: 0.3rem;
  border-radius: 2px;
  background: var(--ink);
}
.lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.46rem;
  height: 0.42rem;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 0.3rem 0.3rem 0 0;
  transform: translateX(-50%);
}
.steps-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 40rem;
  margin: 0.75rem auto 1.5rem;
  padding: 0 var(--gutter);
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-soft);
}
.steps-bar li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.steps-bar li + li::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: calc(50% + 1.35rem);
  width: calc(100% - 2.7rem);
  height: 2px;
  background: var(--grey-tint);
}
.step-dot {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--grey-tint);
  color: #ffffff;
  font-weight: 700;
}
.steps-bar .is-current {
  color: var(--ink);
  font-weight: 700;
}
.steps-bar .is-current .step-dot {
  background: var(--blush-deep);
}
.checkout-page {
  padding: 0 var(--gutter) var(--section-pad);
}
.checkout-grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}
.order-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  scroll-margin-top: 1rem;
}
/* No overflow clipping here: Whop's checkout opens small frames of its
   own (address suggestions) that must not be cut off. */
.order-card {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), 0 22px 44px -30px rgba(59, 58, 56, 0.45);
}
.order-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--charcoal);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
}
.shield {
  width: 0.85rem;
  height: 1rem;
  border: 2px solid #ffffff;
  border-radius: 0.15rem 0.15rem 0.55rem 0.55rem;
}
.included {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--hairline);
}
.included li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.included li > span:first-child {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background: var(--grey-tint);
  font-weight: 700;
  font-size: 0.95rem;
}
.included-mark {
  font-weight: 700;
  font-size: 0.9rem;
  color: #4e6b47;
}
.order-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.35rem 1.15rem 0.5rem;
  text-align: center;
}
.order-name {
  font-weight: 700;
}
/* Whop's checkout draws its own product name and price at its top (seen
   live 2026-10-16), so ours steps aside once it is on screen, and shows
   only while it loads or when the fallback button stands in for it. */
.order-card:has(.checkout-frame.is-ready) .order-product {
  display: none;
}
.price-amount {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.25rem, 12vw, 4.75rem);
  line-height: 1;
  color: var(--ink);
}
.gift-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.order-product .price-amount {
  margin: 0.35rem 0 0;
  font-size: clamp(2.9rem, 10vw, 3.6rem);
}
.order-card .checkout {
  max-width: none;
  padding: 0.75rem 1.15rem 1.25rem;
}
.order-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1.1rem 1rem 1.3rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.order-badges li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.round-badge {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--blush-deep);
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink);
}
.trust-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.info-col {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}
.info-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.info-head h1 {
  font-size: clamp(2.2rem, 7.5vw, 3.2rem);
}
.pill {
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--blue-tint);
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  color: var(--blue-text);
}
.info-photo {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}
.info-col h2 {
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  color: var(--ink);
}
.get-list li {
  font-size: 1.02rem;
}
.bonus-title {
  margin-top: 0.4rem;
  font-size: 1.3rem;
}
.gift-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.gift-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--blush-tint);
  font-weight: 700;
}
.declined-tag {
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.declined-box {
  margin-top: 0.4rem;
}
.declined-box h3 {
  font-size: 1.3rem;
}
.member-quote {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 0 1.2rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.member-quote p {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
}
.member-quote cite {
  font-style: normal;
  font-weight: 700;
  color: var(--blue-text);
}
.next-steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-left: 1.35rem;
  list-style: decimal;
}
.next-steps li::marker {
  font-weight: 700;
  color: var(--blush-text);
}
/* Not sticky: Whop's form is taller than a screen, and a sticky card
   would hold its Pay button out of reach. */
@media (min-width: 60rem) {
  .back-to-checkout {
    display: none;
  }
}
.back-to-checkout[hidden],
.trust-line[hidden] {
  display: none;
}

/* The cart deadline on /join (assets/cart-gate.js): a slim bar that sticks
   to the top while enrollment is open, and the closed notice that takes
   the checkout box's place once it is closed. White on charcoal, like the
   order card's header (DESIGN.md). The numbers stay hidden until the
   script has counted once, so nobody sees a row of zeros. */
.cart-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.5rem var(--gutter);
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  background: var(--charcoal);
  color: #ffffff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.cart-bar p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.75rem;
}
.cart-bar[hidden] {
  display: none;
}
.cart-count {
  visibility: hidden;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 400;
}
.cart-count.is-live {
  visibility: visible;
}
.cart-count b {
  font-size: 1.05rem;
}
/* The bar covers the top of the page, so a jump to the order card stops below it. */
.cart-bar:not([hidden]) ~ main .order-col {
  scroll-margin-top: 4.5rem;
}
.cart-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}
.cart-closed[hidden] {
  display: none;
}
.cart-closed-title {
  font-size: clamp(1.7rem, 6vw, 2.2rem);
}
.cart-closed .btn {
  margin-top: 0.5rem;
}


/* ---------- the pre-workshop page (lib/peek.js) ---------- */
.peek-when strong {
  display: block;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  line-height: 1.25;
  white-space: nowrap;
}
.peek-timer {
  margin: 1rem auto 0;
}
.peek-timer-label {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.timer-cards {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.timer-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.4rem;
  padding: 0.7rem 0.5rem 0.55rem;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--blue-tint);
}
.timer-cards b {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.timer-cards span {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.peek-live {
  display: block;
  font-size: 1.4rem;
  color: var(--sage-deep);
}
.btn.join {
  min-height: 4.5rem;
  padding: 1.1rem 2.4rem;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  background: var(--sage-deep);
  color: #fff;
  box-shadow: 0 6px 18px rgba(95, 114, 89, 0.35);
}
.btn.join:hover {
  background: #4f6149;
}
.btn.join.live {
  animation: join-pulse 1.4s ease-in-out infinite;
}
.join-note {
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 1.5rem;
}
@keyframes join-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(95, 114, 89, 0.35); }
  50% { transform: scale(1.04); box-shadow: 0 10px 28px rgba(95, 114, 89, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.join.live { animation: none; outline: 3px solid var(--blush-deep); outline-offset: 3px; }
}

/* ---------- /workshop: variant B of the landing page (2026-10-23) ----------
   The shape of impactclients.co/live-ai-masterclass-c2: one centered column,
   sans-serif headlines, a quoted promise, three fact chips, a session bar
   with the countdown, the form on the page beside the hosts' photo, one big
   button. Same tokens and the site's own Lato (bold) for the display. */
.ws-banner {
  background: var(--ink);
  color: #ffffff;
  text-align: center;
  padding: 0.55rem var(--gutter);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 700;
}
.ws-banner p { margin: 0; }
.ws-banner strong { color: var(--blush); }
.ws-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #e0443a;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.ws h1, .ws h2, .ws h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ws-hero {
  padding: clamp(1.75rem, 6vw, 3.25rem) var(--gutter) clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}
.ws-inner {
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.ws-hero h1 {
  color: var(--ink);
  font-size: clamp(1.75rem, 5.6vw, 3rem);
  line-height: 1.12;
  max-width: 48rem;
  text-wrap: balance;
}
.ws-hero h1 em { color: var(--blush-text); font-style: normal; }
.ws-sub {
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  max-width: 44rem;
  text-wrap: balance;
}
.ws-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
}
.ws-chips li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-left: 2.1rem;
  position: relative;
  line-height: 1.15;
}
.ws-chips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--blush-tint);
  box-shadow: inset 0 0 0 1.5px var(--blush);
}
.ws-chips li::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.42rem;
  width: 0.4rem;
  height: 0.75rem;
  border: solid var(--blush-text);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}
.ws-chips span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.ws-chips strong { font-size: 1.05rem; }
.ws-grid {
  width: min(100%, 40rem);
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
  text-align: left;
}
/* the six lines beside the hosts' square photo */
.ws-learn {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .ws-learn { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3rem; }
}
.ws-learn-copy { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ws-formcol { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.ws-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--card);
  border: 1.5px solid var(--blush);
  border-radius: 12px;
}
.ws-session-when { margin: 0; font-weight: 700; font-size: 1.05rem; display: flex; flex-direction: column; }
.ws-session-when .small { font-weight: 400; color: var(--ink-soft); }
.ws-timer .timer-cards { gap: 0.4rem; }
.ws-timer .timer-cards li { min-width: 3rem; padding: 0.35rem 0.4rem; }
.ws-timer .timer-cards b { font-size: 1.35rem; }
.ws-timer.live { font-weight: 700; color: var(--blush-text); }
.ws-form { text-align: left; }
.ws-form .form-card { box-shadow: none; }
.ws-btn {
  flex-direction: column;
  gap: 0.15rem;
  min-height: 4.25rem;
  background: var(--sage-deep);
  color: #ffffff;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
}
.ws-btn:hover { background: #4f604a; }
.ws-btn small { font-size: 0.82rem; font-weight: 400; opacity: 0.92; }
.ws-hurry { font-weight: 700; color: var(--blush-text); font-size: 0.95rem; text-align: center; margin: 0.6rem 0 0; }
.ws-photo { margin: 0; justify-self: center; width: min(100%, 22rem); }
.ws-photo img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-card); }
.ws-photo figcaption { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
.ws-list li { font-size: clamp(1.05rem, 3vw, 1.2rem); }
.ws-cta { margin-top: 1rem; }
.ws .btn.big { width: min(100%, 26rem); }

/* /workshop on a phone: the form above the fold, everything centered */
.ws-session { justify-content: center; text-align: center; }
.ws-session-when { align-items: center; }
@media (max-width: 40rem) {
  .ws-banner { font-size: 0.78rem; padding: 0.45rem var(--gutter); }
  .ws-hero { padding-top: 1.1rem; }
  .ws-inner { gap: 0.7rem; }
  .ws-hero h1 { font-size: 1.45rem; line-height: 1.15; }
  .ws-sub { font-size: 0.95rem; line-height: 1.35; }
  .ws-chips { gap: 0.4rem 0.9rem; }
  .ws-chips li { padding-left: 1.5rem; }
  .ws-chips li::before { width: 1.1rem; height: 1.1rem; top: 0.1rem; }
  .ws-chips li::after { left: 0.36rem; top: 0.28rem; width: 0.3rem; height: 0.55rem; border-width: 0 2px 2px 0; }
  .ws-chips span { font-size: 0.62rem; }
  .ws-chips strong { font-size: 0.9rem; }
  .ws-grid { gap: 0.7rem; margin-top: 0.2rem; }
  .ws-session { padding: 0.5rem 0.75rem; gap: 0.35rem 0.75rem; }
  .ws-session-when { font-size: 0.95rem; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
  .ws-session-when .small { display: inline; }
  .ws-timer .timer-cards li { min-width: 2.5rem; padding: 0.25rem 0.3rem; }
  .ws-timer .timer-cards b { font-size: 1.1rem; }
  .ws-timer .timer-cards span { font-size: 0.6rem; }
  .ws-form.form-card { padding: 0.9rem 0.9rem 1.1rem; }
}
@media (max-width: 40rem) {
  /* the button inside the first screen too: tighter fields, chips in one row, less air */
  .ws-hero { padding-top: 0.75rem; }
  .ws-inner { gap: 0.55rem; }
  .ws-chips { gap: 0.3rem 0.7rem; }
  .ws-chips span { display: none; }
  .ws-chips strong { font-size: 0.85rem; }
  .ws-chips li { padding-left: 1.3rem; }
  .ws-chips li::before { top: 0; }
  .ws-chips li::after { top: 0.2rem; }
  .ws-form.form-card { gap: 0.6rem; padding: 0.75rem 0.8rem 1rem; }
  .ws-form .field { gap: 0.2rem; }
  .ws-form .field input { min-height: 2.75rem; padding: 0.5rem 0.8rem; }
  .ws-form .field label { font-size: 0.82rem; }
  .ws-btn { min-height: 3.6rem; }
}

/* /workshop buttons: an edge and a shadow so the button reads as a button
   at a glance (Krug, billboard rule 4: make it obvious what is clickable). */
.ws .btn,
.ws .ws-btn {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 55%);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.22), 0 10px 22px -8px rgba(59, 58, 56, 0.45);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.ws .btn:hover,
.ws .ws-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.22), 0 14px 26px -8px rgba(59, 58, 56, 0.5);
}
.ws .btn:active,
.ws .ws-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.22), 0 6px 14px -8px rgba(59, 58, 56, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .ws .btn, .ws .ws-btn { transition: none; }
}

/* ---------- the replay page (lib/replay.js, assets/replay-player.js) ---------- */
.replay-player {
  margin: 1.25rem auto 0;
  max-width: 56rem;
}
.replay-player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--charcoal);
  border-radius: var(--radius-card);
}
.replay-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.replay-offer {
  margin: 1.5rem auto 0;
  max-width: 34rem;
}

/* ---------- the KPI dashboard (lib/dashboard.js, assets/dashboard.js) ---------- */
.dash { background: var(--bg); }
.dash-head, .dash-main, .dash-login {
  width: 100%;
  box-sizing: border-box;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
}
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding-block: 1.5rem 0.5rem;
}
.dash-head h1, .dash-login h1 { margin: 0; font-size: 1.8rem; }
.dash-login { max-width: 24rem; padding-block: 4rem; }
.dash-login form { display: grid; gap: 0.6rem; margin-top: 1rem; }
.dash-login input { font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); }
.dash-label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.dash-muted { color: var(--ink-soft); font-size: 0.9rem; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.dash-filters a { padding: 0.35rem 0.8rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.9rem; background: var(--card); }
.dash-filters a[aria-current="page"] { border-color: var(--ink); font-weight: 700; }
.dash-hero { display: grid; gap: 0.2rem; margin-bottom: 1rem; }
.dash-hero-num { font-family: "Lato", Arial, sans-serif; font-size: clamp(3rem, 9vw, 4rem); font-weight: 700; line-height: 1; color: var(--ink); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.dash-tile, .dash-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 0.9rem 1rem; }
.dash-tile { display: grid; gap: 0.25rem; }
.dash-tile strong { font-family: "Lato", Arial, sans-serif; font-size: 1.6rem; color: var(--ink); }
.dash-card { margin: 0 0 1rem; }
.dash-card h2, .dash-card figcaption { font-family: "Lato", Arial, sans-serif; font-size: 1rem; font-weight: 700; margin: 0 0 0.6rem; color: var(--ink); }
.dash-section { font-size: 1.3rem; margin: 2rem 0 0.8rem; }
.dash-card svg { display: block; width: 100%; height: auto; }
.dash-bar { fill: var(--blue-text); }
.dash-grid { stroke: var(--grey-tint); stroke-width: 1; }
.dash-tick { fill: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-cap { fill: var(--ink); font-size: 12px; font-weight: 700; }
.dash-hit { fill: transparent; cursor: default; outline: none; }
.dash-hit:hover, .dash-hit:focus-visible { fill: rgba(88, 114, 131, 0.08); }
.dash-tip { position: fixed; z-index: 10; display: grid; gap: 0.1rem; padding: 0.45rem 0.65rem; border-radius: 8px; background: var(--card); border: 1px solid var(--hairline); box-shadow: 0 6px 18px -8px rgba(59, 58, 56, 0.45); pointer-events: none; font-size: 0.85rem; }
.dash-tip strong { font-size: 1rem; color: var(--ink); }
.dash-tip span { color: var(--ink-soft); }
.dash-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.dash-funnel li { display: grid; grid-template-columns: 11rem 1fr 6.5rem; align-items: center; gap: 0.75rem; }
.dash-track { height: 16px; background: var(--blue-tint); border-radius: 4px; overflow: hidden; }
.dash-fill { display: block; height: 100%; background: var(--blue-text); border-radius: 0 4px 4px 0; }
.dash-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dash-scroll { overflow-x: auto; }
.dash-grid-table, .dash-table table { border-collapse: collapse; width: 100%; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.dash-grid-table th, .dash-grid-table td, .dash-table th, .dash-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--grey-tint); white-space: nowrap; }
.dash-table { margin-top: 0.5rem; }
.dash-table summary { cursor: pointer; color: var(--ink-soft); font-size: 0.85rem; }
.dash-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dash-status { display: inline-block; min-width: 2.6rem; text-align: center; font-size: 0.75rem; font-weight: 700; border-radius: 4px; padding: 0.1rem 0.3rem; }
.dash-status.ok { background: #e4efe1; color: #2f5a2a; }
.dash-status.bad { background: #f6dedb; color: var(--error); }
.dash-spend { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.dash-spend label { display: grid; gap: 0.25rem; font-size: 0.9rem; }
.dash-spend input { font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); }
.dash-foot { margin: 1.5rem 0 3rem; }
@media (max-width: 40rem) {
  /* the chart's text is in viewBox units and the chart shrinks to the phone: bigger units, same size on screen */
  .dash-tick { font-size: 22px; }
  .dash-cap { font-size: 24px; }
  .dash-funnel li { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .dash-funnel .dash-track { grid-column: 1 / -1; grid-row: 2; }
}

/* /join: the financing box under the checkout's trust line. */
.financing-box {
  margin-top: 1.25rem;
  padding: 1.1rem 1.1rem 0.9rem;
  border: 2px solid var(--blush-deep);
  border-radius: 14px;
  background: #fff8f3;
  text-align: center;
}
.financing-title {
  margin: 0 0 0.7rem;
  font-size: 1.3rem;
  font-weight: 800;
}
.financing-note { margin: 0.6rem 0 0; }

/* ---------- the bare payment page /pay (pay.html, 2026-11-02) ---------- */
/* One narrow column: the order card, the trust line, the Payva box. */
.pay-page {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  box-sizing: border-box;
}
.pay-page .pay-help {
  text-align: center;
  margin-top: 1rem;
}