/* The public site: rowingcatch.com.
   Marketing-only. The support pages (consent, reset) load style.css alone and
   stay lean — a parent on a bad connection opening an approval link should not
   download a marketing page's worth of CSS.

   🔑 The brief, in one line: quiet and precise. Lots of white, small type, the
   waterline as the only flourish, and colour reserved for accent. The
   photographs carry the energy so the layout doesn't have to — which is also
   why nothing here is a grid of identical rounded cards. */

body {
  background: var(--paper);
  /* 🔴 The full-bleed photographs are `width: 100vw`, and on a desktop browser
     with a classic scrollbar `100vw` INCLUDES the scrollbar's width — so every
     plate overflowed the viewport by ~15px, the page gained a horizontal
     scrollbar, and text sat shifted against a canvas wider than the window.
     `clip` rather than `hidden`: `hidden` makes the element a scroll container,
     which silently kills `position: sticky` on the nav. */
  overflow-x: clip;
}

/* ── Chrome ───────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: 980px; margin: 0 auto; padding: 13px 22px;
  display: flex; align-items: center; gap: 22px;
}
.nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.nav a:hover { color: var(--ink); }
.nav .spacer { flex: 1; }
.nav .cta { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 680px) { .nav .hide-sm { display: none; } }

/* The real mark, not an approximation of it. `catch-mark.png` is the dark-ink
   variant, which is the one that belongs on a light ground. */
.lockup { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.lockup img { width: 26px; height: auto; display: block; }
.lockup .word {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.035em;
  color: var(--accent-ink);
}

.page { max-width: 980px; margin: 0 auto; padding: 0 22px; }
.foot { border-top: 1px solid var(--rule); padding: 30px 0 70px; color: var(--ink-faint); font-size: .86rem; }
.foot a { color: var(--ink-faint); }

/* ── Rhythm ───────────────────────────────────────────────────────────────── */

.band { padding: 84px 0; }
.band + .band { border-top: 1px solid var(--rule); }
.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px;
}
h2.section {
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15;
  letter-spacing: -.024em; margin: 0 0 14px; max-width: 26ch; text-wrap: balance;
}
.measure { max-width: 60ch; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding: 84px 0 60px; }
.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 3.6rem); line-height: 1.02;
  letter-spacing: -.035em; margin: 0 0 20px; text-wrap: balance;
}
.hero .sub { font-size: clamp(1.02rem, 2.2vw, 1.16rem); max-width: 44ch; color: var(--ink-soft); }
.rule { width: 46px; height: 3px; border-radius: 3px; background: var(--accent); margin: 0 0 24px; }
.status { font-size: .82rem; color: var(--ink-faint); margin: 0 0 18px; letter-spacing: .01em; }


/* ── The feature list ─────────────────────────────────────────────────────── */
/* Hairline rules, not twelve identical cards. A card grid gives every item the
   same visual weight and turns a real product into a checklist. */
.list { margin: 26px 0 0; border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: 4px 28px; padding: 18px 0;
  border-bottom: 1px solid var(--rule); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .row { grid-template-columns: 232px 1fr; gap: 32px; align-items: baseline; } }
.row h3 { font-size: .98rem; margin: 0; letter-spacing: -.006em; }
.row p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* Roadmap rows carry a small state word rather than a coloured pill. Colour
   means state in this product; a row of tinted chips would spend it on decoration. */
.row .when {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.row .when.testing { color: var(--accent-ink); }

/* 🔴 This was the "weird format" in the screenshot, and the cause is a classic.
   `li { display: flex }` makes EVERY child a flex item — so `<strong>Depth before
   breadth.</strong>` became one column and the sentence after it became another,
   producing a ragged two-column paragraph with the lead-in wrapping three words
   deep. It reads as broken because it is.

   The marker is positioned absolutely instead, leaving the list item as ordinary
   flowing text. */
ul.plain { list-style: none; padding: 0; margin: 20px 0 0; max-width: 62ch; }
ul.plain li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  color: var(--ink-soft);
}
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 14px; height: 2px; background: var(--accent); border-radius: 2px;
}
ul.plain strong { color: var(--ink); }

/* ── Sketches ─────────────────────────────────────────────────────────────── */
.split { display: grid; gap: 30px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: 52px; } }
.sketch { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; background: var(--card); font-size: .9rem; }
.sketch .head { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 14px; }
.seat, .rank { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.seat:last-child, .rank:last-child { border-bottom: none; }
.seat .n, .rank .pos { color: var(--ink-faint); width: 48px; flex: none; font-variant-numeric: tabular-nums; }
.rank .pos { width: 18px; }
.seat .who, .rank .who { flex: 1; }
.seat .side, .rank .watch { color: var(--ink-faint); font-size: .82rem; }
.rank .pts { font-weight: 650; font-variant-numeric: tabular-nums; }
.flag { margin-top: 12px; background: var(--warn-wash); color: var(--warn); border-radius: 9px; padding: 10px 12px; font-size: .85rem; font-weight: 600; }

/* ── Waitlist ─────────────────────────────────────────────────────────────── */
.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 440px; margin-top: 24px; }
.signup input { flex: 1 1 210px; min-width: 0; }
.signup button { flex: 0 0 auto; width: auto; padding: 14px 22px; }
.signup-note { font-size: .84rem; color: var(--ink-faint); margin-top: 11px; max-width: 44ch; }

.letter { max-width: 60ch; }
.letter p { color: var(--ink-soft); }
.sig { font-weight: 650; color: var(--ink); }


/* ── A look inside ────────────────────────────────────────────────────────── */
/* Real screenshots of the running app, not mockups. Taken against the real
   database with the roster temporarily renamed, and put back afterwards —
   publishing a squad's actual names would be the same mistake the consent
   section warns about. */
.shots {
  display: grid; gap: 20px; margin-top: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .shots { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.shot { margin: 0; }
.shot .device { max-width: 268px; margin: 0 auto; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: 22px; border: 1px solid var(--rule);
  background: var(--card);
  box-shadow: 0 18px 40px -24px rgba(20, 23, 31, .35);
}
.shot figcaption { margin-top: 12px; font-size: .88rem; color: var(--ink-soft); }
.shot figcaption strong { color: var(--ink); font-weight: 650; display: block; }

/* ── Company ──────────────────────────────────────────────────────────────── */
.horizon { margin-top: 26px; border-top: 1px solid var(--rule); }
.horizon .step {
  display: grid; gap: 6px 32px; padding: 20px 0;
  border-bottom: 1px solid var(--rule); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .horizon .step { grid-template-columns: 232px 1fr; } }
.horizon .step .k {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.horizon .step h3 { font-size: 1rem; margin: 0 0 4px; }
.horizon .step p { margin: 0; font-size: .94rem; color: var(--ink-soft); }


/* ══ Taking the original site's structure ═══════════════════════════════════
   What the first rowingcatch.com got right, and this had thrown away: phone
   mockups floating beside the headline, one word of the headline in blue,
   a pill badge, the email field and its button as a single pill, and — doing
   most of the work — alternating light and black bands. */

/* ── Status line ──────────────────────────────────────────────────────────── */
/* Words, not a pill. The badge chrome was doing decoration rather than work. */
.badge {
  font-size: .86rem; font-weight: 550; letter-spacing: .01em;
  color: var(--ink-faint); margin: 0 0 22px; text-transform: none;
}

/* ── Hero, two columns ────────────────────────────────────────────────────── */
.hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 920px) {
  .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 30px; }
}
.hero h1 .alt { color: var(--accent); display: block; }

/* ── The email field and its button as one pill ───────────────────────────── */
.signup {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: 6px 6px 6px 8px;
  max-width: 460px; margin-top: 26px; flex-wrap: nowrap;
}
.signup input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  padding: 12px 12px; min-height: 44px;
}
.signup input:focus { outline: none; }
.signup button {
  flex: 0 0 auto; width: auto; border-radius: 999px;
  padding: 12px 20px; min-height: 44px; font-size: .95rem;
}
@media (max-width: 460px) {
  .signup { flex-wrap: wrap; border-radius: 20px; padding: 8px; }
  .signup input { flex: 1 1 100%; }
  .signup button { flex: 1 1 100%; }
}

/* ── Device frames ────────────────────────────────────────────────────────── */
.device {
  background: #0A0B0D; border-radius: 42px; padding: 8px;
  box-shadow: 0 30px 60px -30px rgba(12,14,20,.55), 0 2px 6px rgba(12,14,20,.10);
}
.device img { display: block; width: 100%; height: auto; border-radius: 35px; }

/* Two phones, the back one angled — the arrangement the original used. */
/* ⚠️ The back phone has to be genuinely offset, not just behind. At the first
   attempt it sat almost exactly under the front one and read as a rendering
   glitch — a second phone peeking out at the bottom — rather than a stack. It
   needs to clear the front phone horizontally to look deliberate. */
.stack { position: relative; padding: 8px 0 8px 0; }
.stack .front { width: 66%; position: relative; z-index: 2; }
.stack .back {
  position: absolute; left: 33%; top: 5%; width: 60%;
  transform: rotate(5deg); z-index: 1;
}
@media (max-width: 919px) {
  .stack { max-width: 440px; margin: 0 auto; }
  .stack .front { width: 62%; }
  .stack .back { width: 56%; left: 36%; top: 4%; }
}

/* ── A dark band ──────────────────────────────────────────────────────────── */
/* 🔑 The band redefines the design tokens rather than overriding selectors one
   at a time. That earlier approach lost a specificity fight it was always going
   to lose — `ul.plain strong` is (0,1,2) and `.dark strong` is (0,1,1), so every
   bold lead-in inside a dark band kept the light theme's near-black ink and
   vanished. Chasing that selector-by-selector means finding each one by eye,
   which is exactly how two of them shipped invisible.
   Reassigning the variables fixes every rule that already reads them, including
   ones written later that nobody thought about. */
.dark {
  --paper:      #0B0D12;
  --card:       #14171E;
  --sunken:     #1A1E27;
  --ink:        #F2F4F8;
  --ink-soft:   #AEB6C6;
  --ink-faint:  #838C9F;
  --rule:       #272C37;
  --accent:     #7B9BFF;
  --accent-ink: #A7BDFF;
  --accent-wash:#19213B;

  background: var(--paper); color: var(--ink);
  width: 100vw; position: relative; left: 50%; margin-left: -50vw;
  padding: 86px 0;
}
.dark .inner { max-width: 980px; margin: 0 auto; padding: 0 22px; }
/* The one thing tokens can't carry: headings inherit `color` from body, which
   is set outside the band. */
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--ink); }
.dark .device { box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); background: #17191F; }

/* ══ Drawn app screens, not photographs of a phone ═══════════════════════════
   A screenshot carries a status bar, a home indicator, JPEG mush and whatever
   the simulator's clock said. Drawn screens stay crisp at any size, weigh
   nothing, and can show a moment worth showing rather than a moment that
   happened to exist. The old site did this and it is why its mockups looked
   like a product. Every screen below mirrors one the app actually renders. */

.screen {
  background: #000; border-radius: 34px; overflow: hidden;
  font-size: 11px; line-height: 1.35; color: #fff;
  display: flex; flex-direction: column;
  /* ⚠️ A real iPhone is about 9:19.5. Without this the screens took their height
     from their content and came out around 3:4 — the shape of a small tablet,
     which is what made the mockups look wrong. Content that overruns is clipped,
     the way a real screen clips it, and the tab bar stays pinned. */
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
}
.screen .bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px 4px; font-size: 10px; font-weight: 650; color: #fff;
}
.screen .bar .sig { letter-spacing: 2px; opacity: .85; }
.screen .body { padding: 6px 13px 12px; flex: 1; overflow: hidden; }
.screen h4 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; margin: 6px 0 1px; color: #fff; }
.screen .sub { color: #8A93A6; font-size: 11px; margin: 0 0 11px; }
.screen .card {
  background: #16181D; border-radius: 12px; padding: 10px 11px; margin-bottom: 8px;
}
.screen .k { color: #8A93A6; font-size: 9.5px; text-transform: uppercase; letter-spacing: .9px; font-weight: 700; }
.screen .big { font-size: 25px; font-weight: 800; letter-spacing: -1px; margin: 2px 0 0; }
.screen .accent { color: #5B85FF; }
.screen .chip {
  display: inline-block; background: #21242B; color: #A7AEBE;
  border-radius: 999px; padding: 3px 9px; font-size: 9.5px; margin-top: 6px;
}
.screen .flagline { color: #E9B45E; font-size: 10px; margin-top: 7px; }
.screen .rowline {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid #21242B;
}
.screen .rowline:last-child { border-bottom: none; }
.screen .rowline .pos { color: #8A93A6; width: 10px; }
.screen .rowline .nm { flex: 1; }
.screen .rowline .val { font-weight: 700; }
.screen .rowline .side { color: #8A93A6; font-size: 10px; }
.screen .avatar {
  width: 20px; height: 20px; border-radius: 50%; background: #1D2740;
  color: #7B9BFF; font-size: 8.5px; font-weight: 800;
  display: grid; place-items: center; flex: none;
}
.screen .tabs {
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 0 13px; border-top: 1px solid #1A1D23; color: #6C7488;
  font-size: 8.5px;
}
.screen .tabs .on { color: #5B85FF; }
.screen .tabs span { display: grid; justify-items: center; gap: 3px; }
.screen .tabs svg { width: 15px; height: 15px; }
.gauge { width: 46px; height: 46px; flex: none; }


/* ── Feature groups ───────────────────────────────────────────────────────── */
/* Not one long word dump: three groups with their own mark and heading, the way
   a coach's week actually divides — on the water, in the shed, around the squad. */
.group { margin-top: 44px; }
.group:first-of-type { margin-top: 26px; }
.group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.group-head h3 { font-size: 1.12rem; margin: 0; letter-spacing: -.015em; }
.group > p.note { margin: 2px 0 4px; color: var(--ink-faint); font-size: .9rem; }
.group .list { margin-top: 12px; }


/* Quick-action tiles inside a drawn screen. */
.screen .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.screen .tile {
  background: #16181D; border-radius: 11px; padding: 10px 4px;
  text-align: center; color: #C8CEDA; font-size: 9.5px;
}
.screen .tile b { display: block; color: #5B85FF; font-size: 13px; margin-bottom: 3px; font-weight: 700; }
.screen .notice {
  background: #16181D; border-radius: 12px; padding: 9px 11px; margin-bottom: 8px;
  display: flex; gap: 8px;
}
.screen .notice .bang {
  width: 13px; height: 13px; border-radius: 50%; background: #E9812B; color: #000;
  font-size: 9px; font-weight: 800; display: grid; place-items: center; flex: none; margin-top: 1px;
}
.screen .notice .txt b { display: block; font-size: 11px; }
.screen .notice .txt span { color: #8A93A6; font-size: 10px; }


/* ── Legal pages ──────────────────────────────────────────────────────────
   Long-form documents, read rarely and carefully. Narrow measure, generous
   leading, and headings that make the section numbering scannable — someone
   linked here from a consent email is usually looking for one clause. */
.legal { max-width: 42rem; padding-block: 2.5rem 4rem; }
.legal h1 { font-size: 1.9rem; line-height: 1.2; margin-bottom: .25rem; }
.legal h2 { font-size: 1.15rem; margin-top: 2.2rem; margin-bottom: .6rem; }
.legal h3 { font-size: 1rem; margin-top: 1.5rem; }
.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }
.legal hr { border: none; border-top: 1px solid var(--rule); margin: 2rem 0; }
.legal blockquote {
  margin: 1.2rem 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface-2, rgba(127,127,127,.08));
  border-radius: 4px;
}
.legal blockquote p { margin: 0; font-size: .95rem; }
.legal-back { margin-bottom: 1.5rem; font-size: .95rem; }
.legal-foot { font-size: .9rem; color: var(--muted, #666); }