/* =========================================================================
   WITHE PUBLIC SITE — withe.uk
   The landing page only. Design tokens and the shared w- components come
   from shared/style.css (copied from src/ by tools/sync-shared.mjs); this
   file adds the s- classes that exist only on the marketing page.
   ========================================================================= */

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* w-btn is written for <button>; the landing page uses it on links, which the
   help site handles the same way (.h-top-app in help.css). */
a.w-btn, a.w-btn:hover { text-decoration: none; }

/* THE APP STOPS THE DOCUMENT SCROLLING BELOW 880px.
   style.css sets `html, body { height: 100%; overflow: hidden }` there because
   the app scrolls an inner .w-stage instead — that keeps iOS from moving the
   layout viewport under its fixed dock. This page has no inner scroller, so
   without this it simply cannot be scrolled on a phone. help.css carries the
   same override; any new page under www/ needs it too. */
@media (max-width: 880px) {
  html, body { height: auto; overflow: visible; }
}

.s-inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

/* ---------- top bar ---------- */
.s-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--frost-canvas);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  border-bottom: 1px solid var(--hairline);
}

.s-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.s-brand img { display: block; flex-shrink: 0; }

.s-top-nav {
  display: flex;
  gap: var(--sp-5);
  margin-left: auto;
}
.s-top-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
}
.s-top-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- hero ---------- */
.s-hero {
  padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 7vw, 80px);
  text-align: center;
}
.s-hero .w-page-eyebrow { justify-content: center; }

.s-h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.s-lede {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.s-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin: var(--sp-6) 0 var(--sp-4);
}

/* The one thing we want a visiting club to do. w-btn is a 38px toolbar
   button, so the height has to be unset before it can grow. */
.s-cta-big {
  height: auto;
  min-height: 56px;
  padding: 16px 34px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--r-control);
  box-shadow: var(--shadow-lift);
  white-space: normal;
  text-align: center;
}
@media (max-width: 420px) {
  /* Full width on a phone rather than wrapping to two ragged lines. */
  .s-cta-big { width: 100%; padding: 16px 20px; font-size: 1rem; }
}

.s-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ---------- bands ---------- */
.s-band {
  padding: clamp(40px, 7vw, 80px) 0;
  /* Jumping to #what / #pricing must not tuck the heading under the sticky bar. */
  scroll-margin-top: 64px;
}
.s-band.is-quiet {
  background: var(--surface-sunk);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.s-band .w-heading { margin-bottom: var(--sp-6); }

.s-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

/* ---------- feature grid ---------- */
.s-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.s-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-micro);
}
.s-card h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.s-card p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---------- pricing ---------- */
.s-wide { max-width: 60ch; margin-top: calc(var(--sp-6) * -1); margin-bottom: var(--sp-6); }

.s-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-4);
  /* Sized to their own content: Racing carries two lists and is far longer
     than the other two, so stretching would leave them half empty. */
  align-items: start;
}

.s-tier {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-micro);
}
/* The complete offer: lifted and outlined, not recoloured. */
.s-tier.is-feature {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}
/* Not on sale yet, so it reads quieter than the two you can buy. */
.s-tier.is-soon { background: transparent; border-style: dashed; box-shadow: none; }

.s-tier-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.s-tier-price {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.s-amt {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.s-tier.is-soon .s-amt { font-size: 1.15rem; color: var(--ink-muted); }

.s-tier-alt {
  margin: var(--sp-1) 0 var(--sp-4);
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-weight: 500;
}

.s-tier-line {
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

/* Second group inside a tier card ("Host your regattas like pros"). */
.s-tier-sub {
  margin: var(--sp-4) 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.s-tier-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
}
.s-tier-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.s-tier-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.48em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.s-tier.is-soon .s-tier-list li::before {
  border-color: var(--ink-faint);
}

.s-tier-foot {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}
.s-tier-foot b { color: var(--ink); }

/* ---------- split band ---------- */
.s-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.s-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lift);
}
.s-panel .s-body { margin: 0 0 var(--sp-4); }

@media (max-width: 760px) {
  .s-split { grid-template-columns: 1fr; gap: var(--sp-5); }
  .s-top-nav { gap: var(--sp-4); }
}
@media (max-width: 520px) {
  .s-top-nav a[href="#what"] { display: none; }
}

/* ---------- footer ---------- */
.s-foot {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--hairline);
}
.s-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.s-brand.is-foot { font-size: 0.95rem; }
.a-hero {
  /* The phone mock-ups are rotated and absolutely positioned, so they overhang
     .a-devices, which does not clip — the page scrolled sideways on a phone
     (scrollWidth 389 against a 375 viewport). Clip at the section: nothing
     visible is cut, the phones sit well inside. `clip` rather than `hidden`
     so the section does not become a scroll container. */
  overflow-x: clip;
}
.s-foot-nav {
  display: flex;
  flex-wrap: wrap;   /* six links do not fit across a phone */
  gap: var(--sp-5);
  margin-left: auto;
}
.s-foot-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
}
.s-foot-nav a:hover { color: var(--ink); }
.s-foot-note {
  width: 100%;
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ===== HOME SCREEN ========================================================
   Device frames, the image/text chapters, the group-chat panel, the pricing
   stack and the reveal-on-scroll states. Everything below is used only by
   index.html; the classes above are shared with the rest of the site.
   ========================================================================= */

/* ---------- device frames ---------- */
/* A phone. The screenshots are 780x1688, so the frame is sized by width and
   the image sets the height. */
.o-phone {
  position: relative;
  width: 100%;
  max-width: 268px;
  padding: 9px;
  background: #16181D;
  border-radius: 34px;
  box-shadow: 0 26px 60px -22px rgba(15,23,42,0.5), 0 2px 6px rgba(15,23,42,0.2);
}
.o-phone img {
  display: block; width: 100%; height: auto;
  border-radius: 26px;
}
/* the speaker slot */
.o-phone::before {
  content: ""; position: absolute; z-index: 2;
  top: 15px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.16);
}

/* A browser window, for the wide screenshots. */
.o-win {
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--hairline-firm);
  box-shadow: 0 30px 70px -28px rgba(15,23,42,0.42);
}
.o-win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: #E9EDF2;
  border-bottom: 1px solid var(--hairline);
}
.o-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C6CED8; }
.o-win-bar span {
  margin-left: 10px; padding: 2px 10px; border-radius: var(--r-pill);
  background: #fff; color: var(--ink-faint);
  font-size: 0.68rem; font-weight: 600;
}
.o-win img { display: block; width: 100%; height: auto; }

/* A soft accent glow behind a device, so screenshots do not sit flat on the
   canvas. Purely decorative. */
.o-glow { position: relative; }
.o-glow::after {
  content: ""; position: absolute; inset: -6% -10%;
  z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11,114,206,0.18), transparent 72%);
  filter: blur(6px);
}

/* ---------- a run of alternating image / text chapters ---------- */
.o-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px) 0;
}
.o-chapter + .o-chapter { border-top: 1px solid var(--hairline); }
.o-chapter.is-flip .o-chapter-art { order: 2; }
.o-chapter-art { display: flex; justify-content: center; }
.o-chapter-num {
  display: inline-block; margin-bottom: var(--sp-3);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-strong);
}
.o-chapter h3 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;
  text-wrap: balance;
}
.o-chapter p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-muted); max-width: 42ch; }
.o-chapter ul {
  margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2);
}
.o-chapter li {
  position: relative; padding-left: 22px;
  font-size: 0.93rem; line-height: 1.5; color: var(--ink-muted);
}
.o-chapter li::before {
  content: ""; position: absolute; left: 2px; top: 0.46em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 800px) {
  .o-chapter { grid-template-columns: 1fr; gap: var(--sp-6); }
  .o-chapter.is-flip .o-chapter-art { order: 0; }
}

/* ---------- reassurance row under a CTA ---------- */
.o-assure {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: 0.85rem; font-weight: 600; color: var(--ink-muted);
}
.o-assure span { display: inline-flex; align-items: center; gap: 7px; }
.o-assure svg { flex-shrink: 0; color: var(--accent); }
.s-hero .o-assure { justify-content: center; }

/* ---------- secondary (ghost) call to action ---------- */
.o-cta-ghost {
  height: auto; min-height: 56px; padding: 16px 26px;
  font-size: 1rem; font-weight: 700; border-radius: var(--r-control);
  background: transparent; border: 1px solid var(--hairline-firm);
  color: var(--ink);
}
.o-cta-ghost:hover { background: var(--surface); }

/* ---------- closing band ---------- */
.o-close {
  padding: clamp(44px, 7vw, 76px) 0;
  text-align: center;
  background: var(--primary);
  color: #fff;
}
.o-close h2 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: -0.02em;
  line-height: 1.15; text-wrap: balance;
}
.o-close p { margin: 0 auto var(--sp-6); max-width: 44ch; color: rgba(255,255,255,0.66); line-height: 1.6; }
.o-close .w-btn.is-primary {
  background: #fff; color: var(--primary);
  height: auto; min-height: 56px; padding: 16px 34px;
  font-size: 1.05rem; font-weight: 700; border-radius: var(--r-control);
}
.o-close .w-btn.is-primary:hover { background: #E8EDF3; }
.o-close .o-assure { justify-content: center; color: rgba(255,255,255,0.6); margin-top: var(--sp-5); }
.o-close .o-assure svg { color: rgba(255,255,255,0.75); }

/* ---------- A: product-led hero ---------- */
.a-hero { padding: clamp(36px, 6vw, 76px) 0 clamp(32px, 5vw, 60px); }
.a-hero-in {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 5vw, 56px); align-items: center;
}
.a-hero .s-h1 { margin-top: var(--sp-3); text-align: left; }
.a-hero .s-lede { margin: 0; max-width: 44ch; }
.a-hero .s-cta { justify-content: flex-start; margin: var(--sp-6) 0 var(--sp-5); }
.a-hero .w-page-eyebrow { justify-content: flex-start; }

/* two phones, the second tucked behind and to the left */
.a-devices { position: relative; display: flex; justify-content: center; padding: 12px 0; }
.a-devices .o-phone.is-back {
  position: absolute; left: 2%; top: 34px;
  max-width: 206px; transform: rotate(-7deg);
  opacity: 0.94; box-shadow: 0 18px 44px -20px rgba(15,23,42,0.45);
}
.a-devices .o-phone.is-front { transform: rotate(2.5deg); z-index: 2; }

/* the one club it is built with, given proper weight */
.a-credit {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) 0; border-top: 1px solid var(--hairline);
  font-size: 0.9rem; color: var(--ink-muted); font-weight: 600;
}
.a-credit b { color: var(--ink); }
.a-credit-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-strong);
  font-size: 0.78rem; font-weight: 700;
}

/* the two smaller features at the end of the chapter run */
.a-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
  padding-top: clamp(32px,5vw,56px); border-top: 1px solid var(--hairline);
}
.a-mini article { display: grid; grid-template-columns: 108px 1fr; gap: var(--sp-5); align-items: center; }
.a-mini .o-phone { max-width: 108px; padding: 6px; border-radius: 22px; }
.a-mini .o-phone img { border-radius: 17px; }
.a-mini .o-phone::before { top: 10px; width: 34px; height: 3px; }
.a-mini h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.a-mini p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-muted); }

@media (max-width: 880px) {
  .a-hero-in { grid-template-columns: 1fr; }
  .a-hero .s-h1, .a-hero .s-lede { text-align: center; margin-left: auto; margin-right: auto; }
  .a-hero .s-cta, .a-hero .w-page-eyebrow, .a-hero .o-assure { justify-content: center; }
  .a-devices .o-phone.is-back { display: none; }
  .a-mini { grid-template-columns: 1fr; }
}

/* ---------- the group chat, borrowed from Option B ---------- */
.g-band { padding: clamp(36px, 6vw, 64px) 0; }
.g-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.g-label {
  margin: 0 0 var(--sp-4);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* THE TANGLE — chat bubbles over a faint spreadsheet grid, deliberately untidy. */
.g-mess {
  position: relative;
  height: 372px;
  border-radius: var(--r-card);
  background: var(--surface-sunk);
  border: 1px dashed var(--hairline-firm);
  overflow: hidden;
}
.g-mess::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.07) 1px, transparent 1px);
  background-size: 46px 30px;
  opacity: 0.9;
  transform: rotate(-4deg) scale(1.2);
}
.g-bub {
  position: absolute;
  max-width: 72%;
  padding: 9px 13px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px -4px rgba(15,23,42,0.22);
  font-size: 0.84rem; font-weight: 600; line-height: 1.35;
  color: var(--ink-muted);
}
.g-bub b { color: var(--ink); font-weight: 700; }
.g-bub:nth-child(1) { top: 4%;  left: 5%;  transform: rotate(-2.5deg); }
.g-bub:nth-child(2) { top: 20%; right: 5%; transform: rotate(2deg); }
.g-bub:nth-child(3) { top: 37%; left: 8%;  transform: rotate(1.5deg); }
.g-bub:nth-child(4) { top: 53%; right: 6%; transform: rotate(-2deg); }
.g-bub:nth-child(5) { top: 72%; left: 6%;  transform: rotate(1deg); }
.g-bub.is-bad { background: var(--bad-wash); color: var(--bad); font-weight: 700; }

.g-copy h2 { margin: 0 0 var(--sp-4); font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.g-copy p { margin: 0 0 var(--sp-4); font-size: 1rem; line-height: 1.65; color: var(--ink-muted); max-width: 44ch; }
.g-copy p:last-child { margin-bottom: 0; }
.g-hand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--accent-strong); text-decoration: none;
}
.g-hand:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .g-split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .g-mess { height: 336px; }
  .g-copy p { max-width: none; }
}

/* =========================================================================
   PRODUCT COLOUR CODE
   Blue now means exactly one thing on this page: Withe Racing. Everything
   that used to be blue for decoration is neutral, so the code reads without
   a key — by the time you reach the price you have already learnt the split.
   ========================================================================= */
.p-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.p-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.p-tag.is-club   { background: var(--tint-firm);   color: var(--ink); }
.p-tag.is-racing { background: var(--accent-wash); color: var(--accent-strong); }

/* the chapter eyebrow carries the tag, so the code is learnt while scrolling */
.o-chapter-num { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink-faint); }
.o-chapter.is-racing .o-chapter-num { color: var(--accent-strong); }
.o-chapter.is-club li::before   { border-color: var(--ink); }
.o-chapter.is-racing li::before { border-color: var(--accent); }
.a-mini h3 { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* everything else that was blue goes neutral */
.o-assure svg { color: var(--ink); }
.a-credit-tag { background: var(--tint-firm); color: var(--ink); }
.g-hand { color: var(--ink); }
.o-glow::after { background: radial-gradient(closest-side, rgba(15,23,42,0.10), transparent 72%); }

/* =========================================================================
   PRICING — a base and an add-on, not three choices
   Three equal columns said "pick one of these". Racing cannot be picked
   instead of Club, so it is drawn sitting on top of it instead.
   ========================================================================= */
#pricing { --p-indent: clamp(0px, 5vw, 64px); }

.p-card {
  background: var(--surface);
  border: 1px solid var(--hairline-firm);
  border-radius: var(--r-card);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: var(--shadow-micro);
}
.p-card.is-racing {
  margin-left: var(--p-indent);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

/* the joint: a stem dropping out of Club into Racing, with a + sitting on it */
.p-join { position: relative; height: 72px; margin-left: var(--p-indent); }
.p-join::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent); opacity: 0.55;
}
.p-join span {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
}

.p-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  align-items: flex-start; justify-content: space-between;
}
.p-head-l { flex: 1 1 320px; }
.p-need { margin-left: var(--sp-3); font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }
.p-job {
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: -0.025em; line-height: 1.1; font-weight: 700;
}
.p-what { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--ink-muted); max-width: 46ch; }
.p-price { flex: 0 0 auto; text-align: right; }
.p-price strong { display: block; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; }
.p-price span { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); }
.p-price em { display: block; margin-top: 6px; font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }
@media (max-width: 620px) {
  .p-price { text-align: left; }
  .p-need { display: block; margin: var(--sp-2) 0 0; }
}

.p-feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-5) 0 0; padding: var(--sp-5) 0 0;
  list-style: none; border-top: 1px solid var(--hairline);
}
.p-feats li { position: relative; padding-left: 22px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-muted); }
.p-feats li::before {
  content: ""; position: absolute; left: 2px; top: 0.46em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Racing does two different jobs. Show them as two, not as one long list. */
.p-halves {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.p-half { padding: var(--sp-5); border-radius: 12px; background: var(--accent-wash); }
.p-half-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.p-half-ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
}
.p-half-ico svg { width: 19px; height: 19px; }
.p-half h4 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.p-half h4 small {
  display: block; margin-bottom: 1px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-strong);
}
.p-half ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.p-half li { position: relative; padding-left: 20px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); }
.p-half li::before {
  content: ""; position: absolute; left: 2px; top: 0.46em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 720px) { .p-halves { grid-template-columns: 1fr; } }

.p-trial {
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-muted);
}
.p-trial b { color: var(--ink); }

/* not on sale yet, so it is a footnote rather than a third column */
.p-soon {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0 0 var(--p-indent);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--hairline-firm); border-radius: var(--r-card);
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-muted);
}
.p-soon b { color: var(--ink); }
.p-soon p { margin: 0; flex: 1 1 320px; }

/* ---------- Racing Pro: a third step on the same stem ---------- */
.p-tag.is-pro {
  background: transparent; color: var(--accent-strong);
  border: 1px dashed var(--accent); padding: 2px 10px 2px 8px;
}
.p-join.is-deep { margin-left: calc(var(--p-indent) * 2); }
.p-join.is-deep::before { opacity: 0.3; border-left: 2px dashed var(--accent); background: none; width: 0; }
.p-join.is-deep span { background: var(--surface); color: var(--accent-strong); border: 1px dashed var(--accent); }

.p-card.is-pro {
  margin-left: calc(var(--p-indent) * 2);
  border: 1px dashed var(--accent);
  box-shadow: var(--shadow-micro);
}
.p-pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
.p-pro-art .o-win { box-shadow: 0 20px 44px -22px rgba(15,23,42,0.35); }
.p-pro-cap { margin: var(--sp-3) 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); font-weight: 600; }
.p-card.is-pro .p-feats { grid-template-columns: 1fr; gap: var(--sp-2); }
.p-card.is-pro .p-feats li::before { border-color: var(--accent); }
.p-pro-price { margin: var(--sp-4) 0 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.p-pro-price a { color: var(--accent-strong); text-decoration: none; }
.p-pro-price a:hover { text-decoration: underline; }
@media (max-width: 800px) { .p-pro-grid { grid-template-columns: 1fr; } }

/* ---------- Regatta Hosting: its own offer, its own band ---------- */
.r-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 52px); align-items: stretch;
  padding: clamp(24px, 3.6vw, 40px);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}
.r-price { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.r-price strong { font-size: clamp(2.4rem, 6vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; }
.r-price span { font-size: 0.9rem; font-weight: 600; color: var(--ink-muted); }
.r-card .p-feats { grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-5); }
.r-card .p-feats li::before { border-color: var(--accent); }
.r-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.r-cta .s-cta-big { min-height: 52px; }
.r-note { margin: var(--sp-4) 0 0; font-size: 0.84rem; color: var(--ink-faint); font-weight: 600; }
.r-who {
  margin: var(--sp-4) 0 0; padding: var(--sp-4);
  background: var(--accent-wash); border-radius: 12px;
  font-size: 0.9rem; line-height: 1.6; color: var(--ink-muted);
}
.r-who b { color: var(--ink); }
.r-card > .o-win { display: flex; flex-direction: column; }
.r-card > .o-win img { flex: 1 1 auto; min-height: 240px; object-fit: cover; object-position: left top; }
@media (max-width: 860px) { .r-card { grid-template-columns: 1fr; } }

/* a badge that sits inline in a list item without shoving the line about */
.p-feats .w-badge, .p-half .w-badge { margin-left: 6px; vertical-align: 1px; }

/* ---------- discreet reveal on scroll ----------
   Only ever applied when the script runs, so with JS off or motion reduced
   the page is simply the page. */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
  html.js-anim .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}