/* The Vibrations That Sing, v45 (Oct 28, 2026): the website matched to the "Rob's art" flyers.
   White, Rob's own artwork, Fraunces + Nunito, a violet-to-blue gradient and a thin rainbow line.
   Fonts are hosted here (no Google Fonts, nothing loaded from other sites). */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-430.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-500.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-600.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-700.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-800.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --ink: #1f1a2e;
  --soft: #463f5c;
  --muted: #6a6382;
  --line: #e9e5f1;
  --tint: #f7f5fb;
  --tint-2: #f1edf8;
  --white: #ffffff;
  --violet: #6b2fb3;
  --blue: #2f5fd0;
  --grad: linear-gradient(90deg, #6b2fb3, #2f5fd0);
  --rainbow: linear-gradient(90deg, #e23b3b, #f08a24, #f2c22e, #3fae5a, #2f8fd0, #4b4fc4, #8a3fc0);
  --c-clock: #c2571a;
  --c-camera: #2f5fd0;
  --c-check: #23824f;
  --c-wave: #7b3fb5;
  --err: #a8323a;
  --err-bg: #fdecee;
  --radius: 22px;
  --shadow: 0 10px 40px rgba(31, 26, 46, 0.16);
  --shadow-sm: 0 2px 12px rgba(31, 26, 46, 0.08);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--violet); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid rgba(107, 47, 179, 0.45); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.06; color: var(--ink); margin: 0 0 0.6rem; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 8vw, 4.3rem); }
h2 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h3 { font-size: 1.45rem; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
.center { text-align: center; }
.visually-hidden, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: -9999px; }

/* ---------- small pieces ---------- */
.eyebrow { display: inline-block; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); margin-bottom: 0.7rem; }
.lead { font-size: clamp(1.06rem, 2.4vw, 1.2rem); color: var(--soft); max-width: 680px; text-wrap: pretty; }
.center .lead { margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.small { font-size: 0.92rem; }
.rainbow-line { height: 5px; background: var(--rainbow); border: 0; margin: 0; }
.wave-logo { width: 46px; height: 16px; flex: none; }
.brand-line { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cup { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.8rem 1.6rem; border-radius: 999px; border: 0;
  background: var(--ink); color: #fff; font: 800 1.08rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(31, 26, 46, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { color: #fff; background: #2c2442; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(31, 26, 46, 0.26); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }
.btn.block { display: flex; width: 100%; }
.btn.grad { background: var(--grad); box-shadow: 0 6px 20px rgba(75, 63, 196, 0.28); }
.btn.grad:hover { background: linear-gradient(90deg, #5f28a3, #2954c0); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn.sm { min-height: 40px; padding: 0.5rem 1.05rem; font-size: 0.95rem; box-shadow: none; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The drink offer, exactly like the flyer's pill */
.pill {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--grad); color: #fff; font-weight: 800; font-size: clamp(1.02rem, 3.3vw, 1.55rem); line-height: 1.2;
  text-decoration: none; text-align: center;
}
.pill:hover { color: #fff; }
.pill .cup { width: 1.3em; height: 1.3em; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; }
.logo:hover { color: var(--ink); }
.logo span { white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--soft); text-decoration: none; font-weight: 700; font-size: 0.97rem; white-space: nowrap; }
/* iPad-size screens (Oct 29): a little tighter, so "How it works" and the button stay on one line */
@media (min-width: 761px) and (max-width: 860px) { .top .wrap { gap: 0.8rem; } .nav { gap: 0.9rem; } .nav a { font-size: 0.9rem; } .logo span { letter-spacing: 0.15em; } }
.nav a:hover, .nav a[aria-current="page"] { color: var(--violet); }
.nav .btn { color: #fff; }
@media (max-width: 760px) {
  /* Phones: the name plus "About" and "Contact" (the three pages), all on one line. */
  .top .wrap { gap: 0.7rem; }
  .logo { gap: 8px; }
  .logo .wave-logo { width: 34px; height: 12px; }
  .logo span { font-size: 0.64rem; letter-spacing: 0.14em; }
  .nav .hide-phone { display: none; }
  .nav { gap: 0.85rem; }
  .nav a { font-size: 0.92rem; }
}
@media (max-width: 384px) { .logo .wave-logo { display: none; } }
@media (max-width: 335px) { .logo span { font-size: 0.6rem; letter-spacing: 0.08em; } .nav { gap: 0.6rem; } }

/* ---------- hero (the flyer, on screen) ---------- */
.hero { position: relative; }
.hero-art { height: clamp(330px, 58vw, 600px); overflow: hidden; background: #fbfaff; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
/* Rob's final art (Oct 28): the main page's art starts exactly on the sound wave's center line, so the top edge
   splits the line and the drips hang from it. On computers the art grows with the width, so the card (which
   overlaps its last 150px) always sits below the eyes: they end 34.1% of the width under the line. */
.hero .hero-art { height: calc(34.1vw + 175px); }
.hero .hero-art img { object-position: 50% 0%; }
.hero-card {
  position: relative; z-index: 2; max-width: 800px; margin: -150px auto 0; background: #fff;
  border-radius: 28px; box-shadow: var(--shadow); padding: 30px 38px 28px; text-align: center; overflow: hidden;
}
.hero-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow); }
.hero-card .eyebrow { margin: 0.55rem 0 0.35rem; }
.hero-card h1 { margin: 0.05rem 0 0.9rem; font-size: clamp(2.6rem, 8.2vw, 4.4rem); line-height: 1; }
.hero-card .lede { font-size: clamp(1rem, 2.3vw, 1.12rem); color: var(--soft); margin: 1rem auto 1.3rem; max-width: 600px; text-wrap: balance; }
/* v51 (Oct 30, Rob: "make sure that is prominant so people actually read it"): "Sound art + sound healing" right under
   the drink offer, in the flyer's order (the eyes, the free drink, sound art + sound healing, then the button). */
.hero-card .kicker { margin: 0.95rem auto 0; font-weight: 800; font-size: clamp(0.98rem, 2.6vw, 1.18rem); line-height: 1.35; letter-spacing: 0.13em; text-transform: uppercase; color: var(--violet); text-wrap: balance; }
.hero-card .kicker + .lede { margin-top: 0.6rem; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.hero-cta .btn { min-width: min(100%, 320px); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.4rem; text-align: left; margin: 1.5rem 0 0; padding: 1.2rem 0 0; border-top: 1.5px solid var(--line); list-style: none; }
.facts li { display: flex; gap: 0.6rem; align-items: flex-start; }
.facts b { display: block; font-weight: 800; font-size: 0.98rem; line-height: 1.25; }
.facts span { display: block; color: var(--soft); font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.facts .ic { margin-top: 2px; }
.br-phone { display: none; }
.trust-line { margin: 1.1rem 0 0; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.credit-line { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 760px) {
  .hero-art, .hero .hero-art { height: clamp(300px, 92vw, 470px); }
  .hero-art img { object-position: 50% 50%; }
  .hero .hero-art img { object-position: 50% 0%; }
  .hero-card { margin: -84px 12px 0; padding: 22px 18px 20px; border-radius: 22px; }
  .hero-card::before { height: 4px; }
  .facts { grid-template-columns: 1fr; gap: 0.7rem; }
  .hero-card .brand-line { display: none; }
  .hero-card .brand-line + br { display: none; }
  .hero-card .eyebrow { font-size: 0.72rem; letter-spacing: 0.11em; margin-top: 0.2rem; }
  .hero-card .kicker { font-size: 0.92rem; letter-spacing: 0.08em; margin-top: 0.85rem; }
  .br-phone { display: inline; }
  .gear li { border-radius: 14px; }
}

/* ---------- sections ---------- */
.section { padding: clamp(56px, 9vw, 96px) 0; }
.section.tint { background: var(--tint); }
.section-head { max-width: 720px; margin: 0 0 2.2rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* how it works: three steps (Oct 29: signing up is right above, so it isn't a step here) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px 20px; box-shadow: var(--shadow-sm); counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 1.05rem; margin-bottom: 0.8rem;
}
.steps h3 { font-family: var(--sans); font-weight: 800; font-size: 1.08rem; letter-spacing: 0; line-height: 1.3; margin: 0 0 0.35rem; }
.steps p { color: var(--soft); font-size: 0.97rem; margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* the sounds: example prompts */
.prompts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.prompts li { background: #fff; border-radius: 18px; padding: 20px 16px 18px; text-align: center; border: 1px solid var(--line); }
.prompts .ic { width: 34px; height: 34px; margin: 0 auto 0.6rem; color: var(--violet); stroke-width: 1.5; }
.prompts b { display: block; font-weight: 800; line-height: 1.3; }
.prompts span { display: block; color: var(--muted); font-size: 0.88rem; margin-top: 0.25rem; }
@media (max-width: 960px) { .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prompts li:last-child { grid-column: 1 / -1; } }

/* on camera: the three comfort levels */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.levels li { position: relative; background: #fff; border-radius: 20px; padding: 22px 20px 20px; border: 1.5px solid var(--line); }
.levels .ic { width: 30px; height: 30px; color: var(--blue); margin-bottom: 0.7rem; }
.levels b { display: block; font-weight: 800; font-size: 1.08rem; }
.levels span { display: block; color: var(--soft); font-size: 0.95rem; margin-top: 0.2rem; }
@media (max-width: 760px) { .levels { grid-template-columns: 1fr; } }
.gear { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; }
.gear li { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--tint-2); color: var(--soft); font-weight: 700; font-size: 0.9rem; padding: 0.4rem 0.85rem; border-radius: 999px; }
.gear .ic { width: 18px; height: 18px; color: var(--violet); }

/* sign up, right after the top card (Oct 29): on computers the heading and Rob beside the form; on phones the
   heading, then the form (still on screen after the Count Me In tap), then Rob right under the button. The four
   points that used to sit here repeated the top card, so they're gone. */
.apply-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-areas: "head form" "meet form"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 64px); align-items: start; }
.apply-head { grid-area: head; padding-top: 0.4rem; }
.apply-grid .form-card { grid-area: form; }
/* who they'll meet (v45 review: reassurance right by the form) */
.apply-meet { grid-area: meet; margin-top: 1.3rem; }
.meet-rob { display: flex; align-items: center; gap: 0.85rem; }
.meet-rob img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: var(--shadow-sm); }
.meet-rob b { display: block; color: var(--ink); }
.meet-rob span { display: block; color: var(--soft); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 860px) {
  .apply-grid { grid-template-columns: 1fr; grid-template-areas: "head" "form" "meet"; grid-template-rows: auto; }
  .apply-head { padding-top: 0; }
  .apply-grid .form-card { margin-top: 1rem; }
}

/* the big idea */
.art-frame { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); background: #fbfaff; }
.art-frame img { width: 100%; height: auto; }
.art-credit { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.honest { margin: 1.4rem 0 0; padding: 1.1rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.honest b { display: block; font-weight: 800; margin-bottom: 0.2rem; }
.honest p { margin: 0; color: var(--soft); }

/* quotes */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.quote { margin: 0; background: #fff; border-radius: 18px; padding: 20px; border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 0.6rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; }
.quote figcaption { color: var(--muted); font-weight: 700; font-size: 0.9rem; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0.2rem; font-weight: 800; font-size: 1.06rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint-2); color: var(--violet); font-size: 1.25rem; font-weight: 700; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0.2rem 1.2rem; color: var(--soft); }

/* final call */
.final { text-align: center; }
.final h2 { margin-bottom: 1.3rem; }
.share-line { margin: 1.1rem 0 0; font-size: 0.95rem; color: var(--muted); }
.share-btn { background: none; border: 0; padding: 0.3rem 0.4rem; color: var(--violet); font: 800 0.98rem var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.share-done { margin-left: 0.4rem; color: var(--c-check); font-weight: 700; }

/* ---------- forms ---------- */
.form-card { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: clamp(22px, 4vw, 38px); position: relative; overflow: hidden; }
.form-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rainbow); }
.form-card h2 { margin-top: 0.3rem; }
.intake { display: grid; gap: 1.15rem; }
.intake label, .intake .q > .q-label, .intake legend { display: block; font-weight: 800; font-size: 1rem; color: var(--ink); }
.intake fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.intake legend { padding: 0; margin-bottom: 0.55rem; }
.field-hint { display: block; font-weight: 600; font-size: 0.88rem; color: var(--muted); margin-top: 0.1rem; }
.intake input[type=text], .intake input[type=email], .intake input[type=tel], .intake input:not([type]), .intake textarea, .intake select {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.82rem 0.95rem; border-radius: 14px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 500 16px/1.4 var(--sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.intake textarea { resize: vertical; min-height: 92px; }
.intake input:focus, .intake textarea:focus, .intake select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(107, 47, 179, 0.14); }
.intake input::placeholder, .intake textarea::placeholder { color: #a39cb6; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }
.agree { display: flex !important; gap: 0.7rem; align-items: flex-start; font-weight: 700 !important; cursor: pointer; }
.agree input { width: 22px; height: 22px; margin: 0.1rem 0 0; flex: none; accent-color: var(--violet); }
.agree div { flex: 1; }
.form-small { font-size: 0.9rem; color: var(--muted); margin: 0; }
.form-small.center { text-align: center; }
.flash { padding: 0.85rem 1rem; border-radius: 14px; background: var(--err-bg); color: var(--err); font-weight: 700; border: 1px solid #f3c6cc; }
.flash.ok { background: #e9f7ef; color: #1d6b40; border-color: #bfe5cf; }
.send-status { margin: 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 0.92rem; }
.email-match { display: none; margin-top: 0.35rem; color: var(--err); font-weight: 700; font-size: 0.88rem; }
.need { border-radius: 16px; box-shadow: 0 0 0 3px rgba(168, 50, 58, 0.35); padding: 0.4rem; }

/* tap-to-pick choices (radio and checkbox chips) */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chips label {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.6rem 0.95rem; min-height: 46px;
  border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 0.97rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chips input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); flex: none; }
.chips label:hover { border-color: #cdbfe8; }
.chips label:has(input:checked) { border-color: var(--violet); background: #f4eefc; color: var(--violet); }
.choice-cards { display: grid; gap: 0.6rem; }
.choice-cards label {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px; border: 1.5px solid var(--line);
  background: #fff; cursor: pointer; font-weight: 800; transition: border-color 0.15s ease, background 0.15s ease;
}
.choice-cards input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--violet); flex: none; }
.choice-cards label span { display: block; font-weight: 600; color: var(--soft); font-size: 0.92rem; }
.choice-cards label:has(input:checked) { border-color: var(--violet); background: #f8f4fe; }
.other-box { margin-top: 0.5rem; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; }
.page-hero .hero-art { height: clamp(220px, 34vw, 360px); }
/* the About page's band is short: it shows the eyes (Rob's sound wave sits just above them) */
.page-hero .hero-art img { object-position: 50% 34%; }
.page-hero .hero-card { margin-top: -110px; max-width: 760px; }
@media (min-width: 761px) and (max-width: 1000px) { .page-hero .hero-art img { object-position: 50% 38%; } }
@media (min-width: 1441px) { .page-hero .hero-art { height: calc(17.3vw + 130px); } .page-hero .hero-art img { object-position: 50% 32.3%; } }
@media (max-width: 760px) { .page-hero .hero-card { margin-top: -70px; } .page-hero .hero-art img { object-position: 50% 32%; } }
.prose { max-width: 700px; margin: 0 auto; }
.prose p { font-size: 1.06rem; color: var(--soft); }
.prose h2 { margin-top: 2.6rem; }
.chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.4rem 0 0; }
.chapter { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 18px; box-shadow: var(--shadow-sm); }
.chapter .ic { width: 30px; height: 30px; color: var(--violet); margin-bottom: 0.6rem; }
.chapter h3 { font-family: var(--sans); font-weight: 800; font-size: 1.1rem; letter-spacing: 0; margin-bottom: 0.3rem; }
.chapter p { font-size: 0.99rem; margin: 0; color: var(--soft); }
.chapter .note { margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 700px) { .chapters { grid-template-columns: 1fr; } }
.pull { margin: 2rem 0; padding: 1.4rem 1.6rem; border-radius: 22px; background: var(--tint); font-family: var(--serif); font-size: clamp(1.35rem, 3.6vw, 1.8rem); line-height: 1.3; color: var(--ink); position: relative; }
.pull::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; border-radius: 0 4px 4px 0; background: var(--rainbow); }
.rob-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: var(--shadow-sm); }

/* thanks / step 2 */
.steps-bar { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.steps-bar li { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--tint-2); color: var(--muted); }
.steps-bar li.done { background: #e9f7ef; color: #1d6b40; }
.steps-bar li.now { background: var(--grad); color: #fff; }
.cal-card { text-align: center; }
.cal-card .btn { margin-top: 0.4rem; }
.note-box { padding: 0.95rem 1.15rem; background: var(--tint); border-radius: 16px; color: var(--soft); font-size: 0.95rem; }
.skip { display: block; text-align: center; margin-top: 0.4rem; color: var(--muted); font-weight: 700; }

/* ---------- footer ---------- */
.foot { background: var(--tint); padding: 40px 0 110px; margin-top: 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
.foot .brand-line { margin-bottom: 0.7rem; }
.foot nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.6rem 0 0.4rem; }
.foot a { color: var(--soft); font-weight: 700; text-decoration: none; }
.foot a:hover { color: var(--violet); }
@media (min-width: 761px) { .foot { padding-bottom: 44px; } }

/* ---------- phones: one "Count Me In" button stays in reach ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(31, 26, 46, 0.08); transform: translateY(110%); transition: transform 0.25s ease; }
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta .btn { width: 100%; flex-direction: column; gap: 0; min-height: 54px; padding: 0.5rem 1rem; }
.sticky-cta .btn span { display: inline-flex; align-items: center; gap: 0.5rem; }
.sticky-cta .btn small { font-weight: 700; font-size: 0.78rem; opacity: 0.85; }
@media (min-width: 761px) { .sticky-cta { display: none; } }

/* ---------- the release form ---------- */
.release { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; }
.release h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
.release .who { color: var(--muted); margin-bottom: 1.2rem; }
.release ol { padding-left: 1.2rem; }
.release li { margin: 0.85rem 0; }
.release li > span:first-child { font-weight: 800; }
.release .check { margin: 0.6rem 0 0.2rem 1.2rem; }
.release .plain { background: var(--tint); border-radius: 18px; padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.release .plain ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.release .plain li { margin: 0.3rem 0; }
.release .draft { background: #fff7e6; border: 1px solid #f1d9a6; border-radius: 14px; padding: 0.7rem 1rem; font-weight: 700; color: #7a5410; margin-bottom: 1rem; }
.sign { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.2rem; margin-top: 1.8rem; }
.sign .line { border-top: 1px solid var(--ink); padding-top: 0.35rem; margin-top: 2rem; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 640px) { .sign { grid-template-columns: 1fr; } }
@media print {
  .noprint, .top, .foot, .sticky-cta { display: none !important; }
  body { background: #fff; font-size: 10pt; line-height: 1.35; }
  .release { padding: 0; max-width: none; }
  .release h1 { font-size: 1.3rem; margin: 0 0 0.1rem; }
  .release .who { margin-bottom: 0.35rem; }
  .release ol { padding-left: 1rem; margin: 0.35rem 0 0; }
  .release li { margin: 0.25rem 0; }
  .release .check { margin: 0.15rem 0 0 1.2rem; }
  .sign { gap: 0 1.2rem; margin-top: 0.2rem; break-inside: avoid; page-break-inside: avoid; }
  .sign .line { margin-top: 2.1rem; padding-top: 0.15rem; font-size: 8pt; }
  @page { size: letter; margin: 0.45in; }
}

/* ---------- pages that keep the older markup (the after-session survey) ---------- */
main.thanks { max-width: 680px; margin: 0 auto; padding: 36px 20px 64px; }
main.thanks h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
main.thanks .lede { color: var(--soft); font-size: 1.08rem; }
.form-wrap { background: #fff; border-radius: 26px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 34px); margin-top: 1.4rem; }
.intake .q { display: grid; gap: 0.45rem; }
.intake .stack { display: grid; gap: 0.45rem; }
.intake .stack label { font-weight: 700; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 52px; padding: 0.8rem 1.6rem; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 800 1.08rem/1.2 var(--sans); cursor: pointer; text-decoration: none; }
.btn-primary:hover { color: #fff; background: #2c2442; }