/* =========================================================================
   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; }
.s-foot-nav {
  display: flex;
  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;
}