/* THE COACHING ENTERPRISE — Hunters Strength & Fitness, Ipswich
   One accent (--accent) is reserved for: the chalk path, waypoint numbers, CTAs. */

:root {
  --charcoal: #161616;
  --bone: #f4efe6;
  --ink: #211d18;
  --ink-soft: #4c463d;
  --accent: #dc1e1e;        /* Hunters brand red */
  --accent-deep: #a81717;   /* darkened for large text on bone — 3:1+ */
  --card: #fffdf8;
  --line: #d8d0c1;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", "Gill Sans", "Trebuchet MS", sans-serif;
}

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

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

body {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
}

/* The offset sections and the camera transform push content past the viewport
   edge. `hidden` only stops that being *scrolled* on some engines — iOS Safari
   still lets a finger drag the page sideways. `clip` creates no scroll
   container at all, so the only thing that moves the view horizontally is the
   scroll-driven camera. Pinch-zoom panning is unaffected. */
html, body {
  overflow-x: hidden;   /* fallback for engines without `clip` */
  overflow-x: clip;
}

/* chalk-dust grain over everything, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

p, li { max-width: 62ch; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  color: var(--bone);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

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

/* ---------- buttons: the one action ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(220, 30, 30, 0.35); }
.btn:active { transform: translateY(0); }
.btn-primary {
  font-size: 1.35rem;
  padding: 1rem 2.2rem;
}
.btn-small {
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
}

/* ---------- header: logo + CTA, nothing to leak attention ---------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
}
/* the supplied lockup, white variant — the header sits over the dark hero */
.logo { line-height: 0; }
.logo img { display: block; height: 4.5rem; width: auto; }
/* the footer is charcoal, so it takes the white variant too */
.footer-logo { display: block; height: 6rem; width: auto; margin: 0 auto 1.4rem; }

/* ---------- hero: charcoal grading to bone ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 34vh;
  background: linear-gradient(180deg,
    var(--charcoal) 0%,
    var(--charcoal) 58%,
    #35302a 82%,
    var(--bone) 100%);
  color: var(--bone);
}
.hero-inner { max-width: 60rem; }
.eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.75);
  margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  margin-bottom: 1.4rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: rgba(244, 239, 230, 0.88);
  margin: 0 auto 2.2rem;
}
.trust-line {
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: rgba(244, 239, 230, 0.68);
}

/* ---------- the chalk path ---------- */
#chalk-path {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#stroke-main {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* soft under-glow on the same geometry — lifts the line off the page */
#stroke-dust {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.1;
}
#path-arrow {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 200ms ease;
}
#path-arrow.on { opacity: 0.95; }
#path-marker .marker-dot { fill: var(--accent); }
#path-marker .marker-halo { fill: var(--accent); opacity: 0.22; }

main { position: relative; }
/* everything except the svg sits above the path */
main > section > * { position: relative; z-index: 1; }

/* ---------- waypoint sections ---------- */
.wp {
  position: relative;
  padding: clamp(6rem, 12vh, 9rem) clamp(1.25rem, 5vw, 3rem);
  max-width: 72rem;
  /* the gap below each section is where the line makes its move */
  margin: 0 auto 6rem;
}
.wp h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 1.2rem;
}
.wp-content { width: min(46%, 34rem); }
.wp[data-side="right"] .wp-content { margin-left: auto; }
.wp[data-side="left"] .wp-content { margin-right: auto; }

/* numbered nodes sit ON the line; JS threads the path through their centres */
.node {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.node-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bone);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 6px var(--bone);
}
.node-num span {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--accent-deep);
}
.node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bone);
}
/* node x-positions — the weave. Content sits on the opposite side. */
.wp[data-side="right"] .node { left: 24%; top: clamp(6rem, 12vh, 9rem); }
.wp[data-side="left"]  .node { left: 76%; top: clamp(6rem, 12vh, 9rem); }
.coach .node-dot { left: 50%; top: 3.5rem; }
.finale .node-dot { left: 50%; top: 3rem; }

.next-line {
  margin-top: 1.6rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-soft);
}
.next-line.centred { text-align: center; margin-inline: auto; }

.pain-list { list-style: none; margin-bottom: 1.2rem; }
.pain-list li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
}
.pain-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}

.check-list { list-style: none; }
.check-list li {
  padding: 0.4rem 0 0.4rem 1.9rem;
  position: relative;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 14px;
  height: 9px;
  border-left: 3px solid var(--ink-soft);
  border-bottom: 3px solid var(--ink-soft);
  transform: rotate(-45deg);
}
.plain-promise {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border-left: 4px solid var(--charcoal);
  font-weight: 600;
}

.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 0.7rem 0 0.7rem 3rem;
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-deep);
}

/* ---------- phones (plan artefact + chat frames) ---------- */
.phone {
  width: min(300px, 78vw);
  aspect-ratio: 390 / 844;
  background: var(--charcoal);
  border-radius: 34px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(22, 22, 22, 0.28);
}
.phone-screen {
  height: 100%;
  border-radius: 24px;
  background: #211f1c;
  color: #efe9dd;
  padding: 1.5rem 1.1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.92rem;
}
.plan-phone { margin-top: 3rem; }
.app-head {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b9b1a2;
}
.app-head span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: #efe9dd;
}
.app-rows { list-style: none; }
.app-rows li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(239, 233, 221, 0.14);
}
.app-rows li strong { display: block; }
.app-rows li span { color: #b9b1a2; font-size: 0.85rem; }
.app-note {
  margin-top: auto;
  font-style: italic;
  font-size: 0.85rem;
  color: #b9b1a2;
  border-left: 3px solid var(--accent);
  padding-left: 0.7rem;
}

.chat-day {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9b1a2;
}
.bubble {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.from-client {
  align-self: flex-end;
  background: #3a362f;
  border-bottom-right-radius: 4px;
}
.from-coach {
  align-self: flex-start;
  background: #4a2415;
  border-bottom-left-radius: 4px;
}
.video-chip {
  display: block;
  margin-top: 0.45rem;
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #b9b1a2;
}

/* ---------- week strip ---------- */
.wp-week .wp-content { margin-bottom: 2.5rem; }
.week-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
}
.day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.7rem 1rem;
  min-height: 9.5rem;
}
.day-on { border-top: 4px solid var(--charcoal); }
.day-name {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.day-what { font-size: 0.88rem; color: var(--ink-soft); }
.phones {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: 3.2rem;
  flex-wrap: wrap;
}

/* ---------- proof ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.2rem 0 3rem;
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem 1rem;
}
.stat dd .count {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  color: var(--ink);
}
.stat dt { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.t-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.t-card blockquote { font-size: 1.02rem; }
.t-card figcaption { font-size: 0.92rem; color: var(--ink-soft); margin-top: auto; }
.t-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #e7e0d2, #e7e0d2 6px, #ded6c6 6px, #ded6c6 12px);
  border: 1px dashed #b5ab98;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d8371;
}
.proof-cta { text-align: center; margin-top: 3rem; }
.proof-cta .next-line { margin-top: 1.4rem; }

/* ---------- coach ---------- */
.coach {
  position: relative;
  padding: clamp(6rem, 12vh, 9rem) 0;
  margin-bottom: 6rem;
}
.coach-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.coach-photo {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(22, 22, 22, 0.85), rgba(22, 22, 22, 0.6)),
    repeating-linear-gradient(45deg, #2c2925, #2c2925 8px, #262320 8px, #262320 16px);
  border: 1px dashed #6f675a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #a89d89;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.coach h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.2rem; }
.coach-bio p { margin-bottom: 1rem; }
.quals {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.human-line { font-style: italic; }
.sig { font-weight: 600; }

/* ---------- offer ---------- */
.wp-offer .wp-content { width: auto; text-align: center; margin-bottom: 2.4rem; }
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 26rem));
  justify-content: center;
  gap: 1.4rem;
  align-items: start;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
}
.price-flagship {
  border: 3px solid var(--accent);
  box-shadow: 0 14px 40px rgba(22, 22, 22, 0.12);
}
.flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.8rem;
}
.price-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.price {
  font-family: var(--display);
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
.price span { font-family: var(--body); font-size: 1rem; color: var(--ink-soft); }
.risk-reversal {
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 2.2rem auto 0.4rem;
}
.scarcity {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 auto;
}
.wp-offer .next-line { margin-top: 2rem; }

/* ---------- faq ---------- */
.wp-faq .wp-content { margin-bottom: 2rem; }
.faq-list { max-width: 46rem; margin: 0 auto; }
.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.7rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 1rem 2.8rem 1rem 1.2rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-deep);
}
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
.wp-faq .next-line { margin-top: 2rem; }

/* ---------- finale ---------- */
.finale {
  position: relative;
  text-align: center;
  padding: clamp(7rem, 14vh, 10rem) 1.25rem 9rem;
  max-width: 72rem;
  margin: 0 auto;
}
.finale h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.finale-sub { margin: 0 auto 2.4rem; color: var(--ink-soft); }
#consult-form {
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.field input:focus-visible,
.field select:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field.invalid input,
.field.invalid select { border-color: #b3261e; }
.field-error { color: #b3261e; font-size: 0.9rem; margin-top: 0.3rem; }
#consult-form .btn { margin: 1.4rem auto 0; }
/* generous inner margin so the chalk loop has room around the button */
#final-cta { position: relative; }
.form-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.4rem auto 0;
}
.form-success {
  max-width: 30rem;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--charcoal);
  border-radius: 10px;
  padding: 1.6rem;
  text-align: left;
}
.form-success p { margin-bottom: 0.5rem; }
.call-line { margin: 2.6rem auto 0; font-weight: 600; }
.call-line a { color: var(--accent-deep); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(244, 239, 230, 0.8);
  text-align: center;
  padding: 2.8rem 1.25rem;
  font-size: 0.95rem;
}
.site-footer p { margin: 0 auto 0.4rem; }
.site-footer .fine { font-size: 0.82rem; color: rgba(244, 239, 230, 0.55); }

/* ---------- floating CTA — jump to booking the moment they're sold ----------
   Desktop: a pill, bottom-right. Mobile: a full-width bar (see media query).
   Appears once the hero has scrolled away, hides once the form is on screen. */
.sticky-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.sticky-cta .btn {
  display: block;
  font-size: 1.05rem;
  padding: 0.8rem 1.55rem;
  box-shadow: 0 10px 28px rgba(22, 22, 22, 0.32);
}
body.show-sticky .sticky-cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ================= mobile: the line sweeps edge to edge ================
   Nodes alternate sides so the path pans left-right as you scroll, like
   moving across one big zoomed-out page. Running text gets a bone
   background so the sweeps live in the whitespace, not behind words. */
@media (max-width: 700px) {
  .btn-small { font-size: 0.85rem; padding: 0.5rem 0.8rem; white-space: nowrap; }
  .logo img { height: 3.4rem; }
  .footer-logo { height: 4.6rem; }

  .wp-content,
  .wp[data-side="right"] .wp-content,
  .wp[data-side="left"] .wp-content {
    width: auto;
    margin: 0;
    background: var(--bone);
  }
  .wp { padding: 8.5rem 1.25rem 4.5rem; margin-bottom: 8rem; }
  .coach { margin-bottom: 8rem; }
  /* sections genuinely sit left/right on a wider canvas; the JS camera
     pans the scene to centre whichever one the line has reached */
  .wp[data-side="right"] { transform: translateX(25vw); }
  .wp[data-side="left"] { transform: translateX(-25vw); }
  /* no camera without motion — keep sections on-screen */
  @media (prefers-reduced-motion: reduce) {
    .wp[data-side="right"], .wp[data-side="left"] { transform: none; }
  }
  .wp .node,
  .wp[data-side="right"] .node,
  .wp[data-side="left"] .node { left: 50%; top: 3.4rem; transform: translate(-50%, -50%) scale(0.82); }
  .coach .node-dot { left: 50%; top: 3rem; }
  .finale .node-dot { left: 50%; top: 3rem; }

  .week-strip { grid-template-columns: 1fr; }
  .day { min-height: 0; display: flex; gap: 1rem; align-items: baseline; }
  .day-on { border-top: 1px solid var(--line); border-left: 4px solid var(--charcoal); }
  .day-name { min-width: 3rem; margin: 0; }

  .stats, .testimonials, .price-cards { grid-template-columns: 1fr; }
  .risk-reversal, .scarcity, .next-line { background: var(--bone); }

  .coach { padding-top: 8.5rem; }
  .coach-split { grid-template-columns: 1fr; }
  .coach-photo { max-width: 20rem; }

  .coach-bio { background: var(--bone); }

  .finale { padding-top: 8.5rem; }
  .finale h2, .finale-sub, .call-line, .field label { background: var(--bone); }

  /* full-width bar on mobile — an easier thumb target than a corner pill */
  .sticky-cta {
    left: 0; right: 0; bottom: 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(22, 22, 22, 0.94);
    opacity: 1;
    transform: translateY(110%);
    pointer-events: auto;
  }
  .sticky-cta .btn { font-size: 1.2rem; padding: 0.9rem 1.55rem; text-align: center; box-shadow: none; }
  body.show-sticky .sticky-cta { transform: translateY(0); }
  .hero { padding-bottom: 40vh; }

  /* keep new blocks legible where the straight line runs behind them */
  .pkg-eyebrow, .pkg-title, .form-block legend, .field-hint,
  .badges li, .app-shots figcaption { background: var(--bone); }
}

/* ================= app showcase (placeholder screen recordings) ================= */
.app-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 2.6rem 0 0.5rem;
}
.app-shot { display: flex; flex-direction: column; gap: 0.6rem; }
.app-shot-frame {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(22, 22, 22, 0.9), rgba(22, 22, 22, 0.7)),
    repeating-linear-gradient(45deg, #2c2925, #2c2925 8px, #262320 8px, #262320 16px);
  border: 1px dashed #6f675a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89d89;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-shots figcaption { font-size: 0.92rem; color: var(--ink-soft); text-align: center; }

/* ================= package comparison ================= */
.pkg { margin-top: 3.5rem; }
.pkg-eyebrow {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.4rem;
}
.pkg-title { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 2rem; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.pkg-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.3rem;
  height: 100%;
}
.pkg-flagship { border: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(22, 22, 22, 0.12); }
.pkg-card h4 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.pkg-card h4 span { font-family: var(--body); font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); }
.pkg-tag { font-weight: 700; margin-bottom: 1rem; }
.pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.pkg-feats li { font-size: 0.95rem; padding-left: 1.5rem; position: relative; }
.pkg-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 8px;
  border-left: 3px solid var(--accent-deep);
  border-bottom: 3px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.pkg .flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.7rem;
}
.badges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
  text-align: center;
}
.badges li { display: flex; flex-direction: column; gap: 0.2rem; }
.badges strong {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--accent-deep);
}
.badges span { font-size: 0.9rem; color: var(--ink-soft); }

/* ================= long intake form ================= */
.long-form { max-width: 34rem; }
.long-form .form-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card);
}
.long-form .form-block legend {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 0.4rem;
}
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  resize: vertical;
  min-height: 3.4rem;
}
.field textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field .opt { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.field-hint { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.35rem; }
.form-block .field-hint { margin: -0.3rem 0 0.2rem; }
.opts { display: flex; flex-direction: column; gap: 0.6rem; }
.opts-row { flex-direction: row; flex-wrap: wrap; }
.opt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  font-weight: 600;
  cursor: pointer;
}
.opt-pill:focus-within { border-color: var(--accent); }
.opt-pill:has(input:checked) { border-color: var(--accent); background: #fbe8de; }
.opt-pill input { accent-color: var(--accent-deep); width: 1.05rem; height: 1.05rem; }

/* collapse the new multi-column blocks on the narrow, panned layout
   (must come after their base rules to win the cascade) */
@media (max-width: 700px) {
  .pkg-grid, .badges, .app-shots { grid-template-columns: 1fr; }
  .long-form { max-width: none; }
  .pkg-card, .pkg-flagship { height: auto; }
}

/* ================= iPhone 16 Pro device frame — reusable chat mockup =========
   One component shared by every phone in .phones. Everything inside the screen
   is sized in cqw (1cqw = 1% of device width) so the whole device — chrome and
   chat type — scales from a single --phone-w with no media-query duplication. */
.phones .iphone { --phone-w: 320px; }

.iphone {
  --w: var(--phone-w, 340px);
  --screen: #1e1b18;
  --coach-bubble: #46251a;
  --client-bubble: #37332f;
  --chat-text: #f4efe7;
  --chat-muted: rgb(244 239 231 / 0.55);
  --chat-accent: var(--accent, #dc1e1e);
  width: min(var(--w), 100%);
  aspect-ratio: 706 / 1466;      /* real iPhone 16 Pro body ratio — reserves space, no CLS */
  position: relative;
  container-type: inline-size;   /* 1cqw = 1% of device width */
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 30px 45px rgb(28 20 12 / 0.26))
          drop-shadow(0 6px 14px rgb(28 20 12 / 0.16));
}

/* side buttons — before the rail in the DOM so their inner edge tucks under it */
.iphone__btn {
  position: absolute;
  width: 1cqw;
  border-radius: 0.5cqw;
  background: linear-gradient(180deg, #48484c, #232327);
}
.iphone__btn--act { left: -0.8cqw; top: 19%; height: 4.5%; }
.iphone__btn--vup { left: -0.9cqw; top: 26%; height: 8%; }
.iphone__btn--vdn { left: -0.9cqw; top: 35.5%; height: 8%; }
.iphone__btn--pwr { right: -0.9cqw; top: 29%; height: 12%; }

.iphone__rail {
  position: relative;
  height: 100%;
  border-radius: 17.5cqw;
  padding: 1.1cqw;
  background: linear-gradient(155deg, #4a4a4e 0%, #232327 30%, #2c2c30 55%, #515157 100%);
  box-shadow: inset 0 0 0 0.18cqw rgb(255 255 255 / 0.16);   /* machined edge highlight */
}
.iphone__bezel {
  height: 100%;
  border-radius: 16.4cqw;
  padding: 2.4cqw;
  background: #060606;
}
.iphone__screen {
  height: 100%;
  border-radius: 14cqw;
  background: var(--screen);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
}
.iphone__screen::after {                 /* glass sheen — barely there, matte site */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.04) 0%, transparent 26%);
  pointer-events: none;
  z-index: 5;
}
@supports (corner-shape: squircle) {     /* Apple's continuous corners where supported */
  .iphone__rail, .iphone__bezel, .iphone__screen { corner-shape: squircle; }
}

/* Dynamic Island + camera lens */
.iphone__island {
  position: absolute;
  top: 2.6cqw; left: 50%; translate: -50% 0;
  width: 29.5cqw; height: 8.8cqw;
  border-radius: 4.4cqw;
  background: #000;
  z-index: 6;
}
.iphone__island::after {
  content: "";
  position: absolute;
  width: 4.2cqw; height: 4.2cqw;
  right: 2.2cqw; top: 50%; translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3242 0 18%, #10131b 60%, #000 100%);
}

/* status bar */
.iphone__status {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3.4cqw 8cqw 0;
  color: rgb(255 253 248 / 0.92);
  pointer-events: none;
  z-index: 6;
}
.iphone__status .time { font-weight: 600; font-size: 4.2cqw; letter-spacing: 0.02em; }
.iphone__status .icons { display: flex; align-items: center; gap: 1.7cqw; }
.iphone__status svg { height: 3cqw; width: auto; fill: currentColor; display: block; }

/* home indicator */
.iphone__home {
  position: absolute;
  bottom: 2.2cqw; left: 50%; translate: -50% 0;
  width: 33cqw; height: 1.3cqw;
  border-radius: 1cqw;
  background: rgb(255 255 255 / 0.38);
  z-index: 6;
}

/* ---- in-app chrome: conversation ---- */
.chat-head {
  display: flex; align-items: center; gap: 3cqw;
  padding: 16cqw 5cqw 3.4cqw;            /* padding-top clears island + status bar */
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.chat-avatar {
  flex: none;
  width: 8cqw; height: 8cqw;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 3.4cqw; letter-spacing: 0.04em;
}
.chat-id { display: flex; flex-direction: column; gap: 0.4cqw; line-height: 1.05; }
.chat-id .name { font-size: 4cqw; font-weight: 600; color: var(--chat-text); }
.chat-id .sub {
  font-size: 2.9cqw; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chat-muted);
}

.chat-scroll {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2cqw;
  padding: 3.6cqw 4cqw;
  overflow: hidden;
}
/* current bubbles designed at 393px wide → px ÷ 3.93 = cqw */
.iphone .bubble {
  max-width: 82%;
  margin: 0;
  padding: 2.4cqw 3cqw;
  border-radius: 4.5cqw;
  font-size: 3.9cqw;
  line-height: 1.42;
  color: var(--chat-text);
}
.iphone .from-coach {
  align-self: flex-start;
  background: var(--coach-bubble);
  border-bottom-left-radius: 1.2cqw;
}
.iphone .from-client {
  align-self: flex-end;
  background: var(--client-bubble);
  border-bottom-right-radius: 1.2cqw;
}
.iphone .video-chip {
  display: flex; align-items: center; gap: 1.8cqw;
  margin-top: 1.8cqw;
  padding: 2cqw 2.6cqw;
  background: rgb(0 0 0 / 0.28);
  border-radius: 2.6cqw;
  font-size: 3.1cqw;
  color: rgb(244 239 231 / 0.72);
}
.iphone .video-chip svg { width: 2.8cqw; height: 2.8cqw; flex: none; fill: currentColor; }
.chat-receipt {
  align-self: flex-end;
  margin: -0.6cqw 1.4cqw 0 0;
  font-size: 2.9cqw;
  color: rgb(244 239 231 / 0.5);
}

/* input bar pinned above the home indicator */
.chat-input {
  margin-top: auto;
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.8cqw 4cqw 7.5cqw;
  color: var(--chat-muted);
}
.chat-input .ci-field {
  flex: 1 1 auto;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 6cqw;
  padding: 2.4cqw 3.6cqw;
  font-size: 3.5cqw;
  color: var(--chat-muted);
}
.chat-input svg { width: 5cqw; height: 5cqw; flex: none; fill: currentColor; }

/* two-up on desktop, stacked on mobile */
@media (max-width: 768px) {
  .phones .iphone { --phone-w: min(78vw, 340px); }
}

/* video-message thumbnail inside a chat bubble — <img> on page 1, <video> on page 2 */
.chat-media {
  position: relative;
  display: block;
  width: 44cqw;
  margin-top: 2.2cqw;
  aspect-ratio: 9 / 16;
  border-radius: 3.2cqw;
  overflow: hidden;
  background: #000;
}
.chat-media img,
.chat-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-media__play {
  position: absolute;
  top: 50%; left: 50%; translate: -50% -50%;
  width: 15cqw; height: 15cqw;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.42);
  display: flex; align-items: center; justify-content: center;
}
.chat-media__play svg { width: 6.5cqw; height: 6.5cqw; margin-left: 1cqw; fill: #fff; }
.chat-media.is-playing .chat-media__play { display: none; }
.chat-media__dur {
  position: absolute;
  right: 2cqw; bottom: 2cqw;
  padding: 0.7cqw 1.7cqw;
  border-radius: 1.8cqw;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 2.7cqw;
  letter-spacing: 0.02em;
}

/* ---- iMessage-style skin for the chat mockups (style imitation, mockup only) ---- */
.iphone {
  --coach-bubble: #3b3b3d;    /* incoming grey (iOS dark mode) */
  --client-bubble: #0a84ff;   /* outgoing blue */
  --imsg-mask: var(--screen); /* tail carve = screen background */
}
.iphone .bubble { position: relative; color: #fff; }
.iphone .from-coach { border-bottom-left-radius: 4.5cqw; }   /* fully round; the tail adds the point */
.iphone .from-client { border-bottom-right-radius: 4.5cqw; }

/* centred conversation header, iMessage style */
.chat-head {
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  text-align: center;
  padding: 14cqw 5cqw 3cqw;
}
.chat-avatar { width: 11cqw; height: 11cqw; font-size: 4.2cqw; }
.chat-id { align-items: center; gap: 0.6cqw; }
.chat-id .name { font-size: 3.8cqw; }
.chat-id .sub { font-size: 2.7cqw; letter-spacing: 0.14em; }

/* wider gutter so bubble tails aren't clipped by the scroll area's overflow */
.chat-scroll { padding-left: 7.5cqw; padding-right: 7.5cqw; }

/* bubble tails — border technique for a smooth curve; last of a same-sender run only */
.iphone .from-coach::before,
.iphone .from-client::before {
  content: ""; position: absolute; z-index: 0; bottom: 0;
  width: 0; height: 3.7cqw;
}
.iphone .from-coach::after,
.iphone .from-client::after {
  content: ""; position: absolute; z-index: 1; bottom: 0;
  width: 3.2cqw; height: 3.7cqw; background: var(--imsg-mask);
}
.iphone .from-coach::before { left: -1.5cqw; border-left: 3.4cqw solid var(--coach-bubble); border-bottom-right-radius: 2.9cqw 2.5cqw; }
.iphone .from-coach::after  { left: -3.3cqw; border-bottom-right-radius: 2.4cqw; }
.iphone .from-client::before { right: -1.5cqw; border-right: 3.4cqw solid var(--client-bubble); border-bottom-left-radius: 2.9cqw 2.5cqw; }
.iphone .from-client::after  { right: -3.3cqw; border-bottom-left-radius: 2.4cqw; }
.iphone .from-coach:has(+ .from-coach)::before,
.iphone .from-coach:has(+ .from-coach)::after,
.iphone .from-client:has(+ .from-client)::before,
.iphone .from-client:has(+ .from-client)::after { display: none; }

/* ---- iMessage accuracy pass — matches current iOS dark mode ---- */
.iphone {
  --screen: #000;             /* iOS dark background */
  --coach-bubble: #262629;    /* incoming grey */
  --client-bubble: #0a6cf0;   /* outgoing blue — tail + gradient base */
  --imsg-mask: #000;
}
.iphone__screen { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
.iphone .from-client { background: linear-gradient(180deg, #2a9dfb 0%, #0a6cf0 60%, #0a6cf0 100%); }
.iphone .from-coach { background: var(--coach-bubble); }

/* header: centred avatar + name, back-chevron & FaceTime in the corners */
.chat-head { position: relative; padding: 13cqw 5cqw 3cqw; gap: 1cqw; }
.chat-back, .chat-ft { position: absolute; top: 13.5cqw; display: flex; align-items: center; color: #3b9bff; }
.chat-back { left: 4cqw; gap: 1cqw; font-weight: 600; }
.chat-back svg { width: 3cqw; height: 5.2cqw; }
.chat-badge { font-style: normal; font-size: 3.4cqw; }
.chat-ft { right: 4cqw; }
.chat-ft svg { width: 7cqw; height: 5cqw; fill: currentColor; }
.chat-name { display: flex; align-items: center; gap: 0.8cqw; font-size: 3.7cqw; font-weight: 600; color: #fff; }
.chat-name .chev { color: rgb(235 235 245 / 0.3); font-size: 3.4cqw; font-weight: 400; }

/* timestamp separators in the message flow */
.chat-time {
  align-self: center; max-width: 92%;
  margin: 0.5cqw 0 1.6cqw; padding: 0;
  text-align: center; font-size: 2.9cqw; letter-spacing: 0;
  text-transform: none; color: rgb(235 235 245 / 0.45); font-weight: 400;
}

/* input: circled +, mic inside the pill */
.chat-input { gap: 2cqw; align-items: center; padding: 2.6cqw 3.5cqw 7.5cqw; }
.ci-plus {
  flex: none; width: 8.6cqw; height: 8.6cqw; border-radius: 50%;
  background: #2a2a2c; display: flex; align-items: center; justify-content: center; color: #d6d6da;
}
.ci-plus svg { width: 4.4cqw; height: 4.4cqw; }
.ci-field {
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  border: 1px solid rgb(255 255 255 / 0.2); border-radius: 6cqw;
  padding: 2cqw 2.4cqw 2cqw 3.6cqw; color: rgb(235 235 245 / 0.42);
}
.ci-mic { flex: none; width: 4.6cqw; height: 4.6cqw; fill: currentColor; }

/* photo/video as its own edge-to-edge iMessage bubble (not nested in a text bubble) */
.chat-media { margin-top: 0; border-radius: 4.6cqw; }
.chat-media--sent { align-self: flex-end; }
/* the text bubble just above the media loses its tail (same-sender group) */
.iphone .from-client:has(+ .chat-media)::before,
.iphone .from-client:has(+ .chat-media)::after { display: none; }

/* ---- real coach photo fills the 4:5 frame ---- */
.coach-photo { overflow: hidden; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-photo:has(img) { border: none; background: none; }

/* "your coach" line above the booking form */
.coach-chosen { text-align: center; margin: -0.6rem auto 2rem; color: var(--ink-soft); font-size: 1rem; }
.coach-chosen strong { color: var(--accent-deep); }

/* ======== coach selector — scroll left/right, pick a coach ======== */
.coach-picker { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.coach-picker-head { text-align: center; margin-bottom: 2rem; }
.coach-picker-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 0.8rem; }
.coach-picker-head p { margin: 0 auto; color: var(--ink-soft); }
.coach-track-wrap { position: relative; }
.coach-track {
  display: flex; gap: 1.2rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.6rem 0.4rem 1.6rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.coach-card {
  flex: 0 0 clamp(15.5rem, 70vw, 19rem);
  scroll-snap-align: center; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  overflow: hidden; cursor: pointer; padding: 0; font: inherit; color: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.coach-card:hover { transform: translateY(-3px); }
.coach-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.coach-card.is-selected { border-color: var(--accent); box-shadow: 0 12px 32px rgba(220, 30, 30, 0.18); }
.coach-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; display: block; }
.coach-card-body { padding: 1.1rem 1.2rem 1.4rem; }
.coach-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.coach-card-top strong { font-family: var(--display); font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.01em; }
.coach-card .pick {
  flex: none; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700; white-space: nowrap;
}
.coach-card .pick::after { content: "Select"; }
.coach-card.is-selected .pick::after { content: "Selected ✓"; }
.coach-card-role { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0.25rem 0 0.75rem; }
.coach-card-bio { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }
.coach-arrow {
  position: absolute; top: 34%; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%; border: none;
  background: var(--charcoal); color: var(--bone); font-size: 1.7rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(22, 22, 22, 0.28);
}
.coach-arrow:hover { background: #000; }
.coach-arrow--prev { left: -0.6rem; }
.coach-arrow--next { right: -0.6rem; }
@media (max-width: 700px) { .coach-arrow { display: none; } }