/* ==========================================================================
   KnownWaters — Public Website Hero
   Design tokens
   ========================================================================== */
:root {
  --kw-navy: #0B1F33;
  --kw-cyan: #0EA5C4;
  --kw-off-white: #F6F4EF;
  --kw-slate: #3A4B5C;
  --kw-amber: #E8A33D;

  --kw-white: #FFFFFF;
  --kw-border: #DDE3E7;
  --kw-muted: #6B7888;

  /* Secondary semantic tones, not in the core palette but needed for the
     "What worked / Watch out for / Useful to know" card sections. Amber
     text is darkened from --kw-amber for body-text contrast (the raw
     amber measures too low on white); green is a standard positive tone
     kept close in temperature to the rest of the palette. */
  --kw-amber-text: #8A5A0F;
  --kw-green: #1E7B3C;
  --kw-green-bg: #E6F4EA;
  --kw-amber-bg: #FBF0DE;
  --kw-cyan-bg: rgba(14, 165, 196, 0.10);
  --kw-error: #B3271E;

  --kw-font: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --kw-container-width: 1540px;
  --kw-container-pad: 40px;

  --kw-radius-sm: 8px;
  --kw-radius-md: 14px;
  --kw-radius-lg: 20px;

  --kw-shadow-card: 0 1px 2px rgba(11, 31, 51, 0.04), 0 12px 32px rgba(11, 31, 51, 0.10);
  --kw-shadow-card-lg: 0 4px 8px rgba(11, 31, 51, 0.05), 0 24px 48px rgba(11, 31, 51, 0.14);

  --kw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* Keeps anchor-link jumps (nav, footer, "Apply for a pilot" fallbacks)
   from landing a section's heading underneath the sticky header - the
   header is ~85px tall at every breakpoint, so one offset covers all of
   them; the extra 20px is just breathing room above the heading. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 105px; }
body {
  margin: 0;
  font-family: var(--kw-font);
  background: var(--kw-off-white);
  color: var(--kw-navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--kw-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: var(--kw-container-width);
  margin: 0 auto;
  padding: 0 var(--kw-container-pad);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--kw-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s var(--kw-ease), border-color 0.15s var(--kw-ease), color 0.15s var(--kw-ease), transform 0.15s var(--kw-ease);
}
.btn--primary {
  background: var(--kw-cyan);
  color: var(--kw-white);
}
.btn--primary:hover { background: #0C93AF; transform: translateY(-1px); }

.btn--secondary {
  background: var(--kw-white);
  color: var(--kw-navy);
  border-color: var(--kw-border);
}
.btn--secondary:hover { border-color: var(--kw-cyan); color: var(--kw-cyan); }

.btn--text {
  background: none;
  color: var(--kw-cyan);
  font-weight: 600;
  padding: 0;
}
.btn--text:hover { text-decoration: underline; }

/* Dark-surface secondary button - transparent with a light outline, for
   use against navy sections (--kw-secondary is white-on-navy already,
   so unsuitable there). */
.btn--outline {
  background: transparent;
  color: var(--kw-off-white);
  border-color: rgba(246, 244, 239, 0.32);
}
.btn--outline:hover { border-color: var(--kw-off-white); background: rgba(246, 244, 239, 0.06); }

/* Light-surface counterpart to .btn--outline above - navy border/text on
   an off-white surface (the modal's Cancel action), rather than the
   off-white-on-navy treatment .btn--outline is tuned for. */
.btn--outline-navy {
  background: transparent;
  color: var(--kw-navy);
  border-color: var(--kw-navy);
}
.btn--outline-navy:hover { background: rgba(11, 31, 51, 0.05); }

.btn--sm { padding: 10px 18px; font-size: 13.5px; }
.btn--lg { padding: 15px 26px; font-size: 15.5px; }
.btn--full { width: 100%; justify-content: center; }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 22px 0;
  background: var(--kw-off-white);
  border-bottom: 1px solid var(--kw-border);
}
.site-header__inner {
  max-width: var(--kw-container-width);
  margin: 0 auto;
  padding: 0 var(--kw-container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__logo { flex-shrink: 0; display: flex; align-items: center; }
.site-header__logo img { height: 24px; width: auto; }

.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-sm);
  background: var(--kw-white);
  cursor: pointer;
}
.site-nav__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--kw-navy);
  border-radius: 1px;
}

/* .site-nav wraps the link list plus the Login/Apply actions as two
   flex children, so both sit flush together on the far right -
   .site-header__inner's own space-between still does logo-left/
   nav-right, this just adds a second group inside the nav side. */
.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--kw-navy);
  padding: 6px 0;
}
.site-nav__link:hover { color: var(--kw-cyan); }

/* The full desktop nav (6 links + Login + Apply for a pilot) doesn't
   actually fit next to the logo below ~1024px - it was overflowing the
   viewport at common tablet widths like 768px because the hamburger
   toggle only activated at the mobile tier (≤680px), leaving the whole
   tablet range (681-900px) stuck with the cramped desktop nav. Moved to
   the site's standard ≤900px tablet breakpoint instead, matching every
   other component. */
@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; }
  .site-nav__toggle { display: flex; }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 18px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .site-nav__actions .btn { justify-content: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Bounded like every other section's .container (max-width +
   margin-inline:auto) rather than spanning the raw viewport - previously
   the grid had no width cap of its own, so at very large effective
   viewports (ultrawide monitors, browser zoomed out) the 1fr visual
   column kept growing indefinitely while the copy column stayed capped,
   breaking the composition. Extra space beyond the cap now just shows
   the page's own background on both sides instead. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 660px) 1fr;
  align-items: center;
  gap: 12px;
  min-height: 680px;
  padding-top: 8px;
  max-width: var(--kw-container-width);
  margin-inline: auto;
}

.hero__copy {
  /* Flat inset, not a 100vw-based calc - .hero's own max-width/
     margin-inline:auto now does the centering, so this just needs to
     match the page's standard container padding. */
  padding-left: var(--kw-container-pad);
  padding-right: 16px;
  padding-bottom: 60px;
}

.hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 22px;
}

.hero__title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--kw-navy);
  margin-bottom: 32px;
}

.hero__description {
  font-size: 21px;
  line-height: 1.6;
  color: var(--kw-slate);
  max-width: 480px;
  margin-bottom: 26px;
}

.hero__categories {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 12px;
  max-width: 480px;
  margin-bottom: 38px;
}
.hero__category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--kw-slate);
}
.hero__category-icon { color: var(--kw-cyan); flex-shrink: 0; width: 10px; height: 10px; opacity: 0.85; }
.hero__category-icon path { stroke-width: 2; }

.hero__categories-compact { display: none; }

.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 26px;
}

.hero__microcopy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kw-muted);
}
.hero__microcopy-icon { color: var(--kw-muted); flex-shrink: 0; }

/* ---- Hero visual: bleeds to the right viewport edge on purpose (not
   boxed in a card) so the map feels large/immersive rather than framed. ---- */
.hero__visual {
  position: relative;
  height: 100%;
  min-height: 680px;
  overflow: hidden;
}

/* .knowledge-map is just a positioning context for the knowledge-card
   (see further down) - the image/pins/connector/capture-card all live in
   .knowledge-map__frame instead, one level in. This split exists purely
   for the mobile layout: there, the knowledge-card drops out of absolute
   positioning and becomes a normal block below the map, so it can no
   longer share a height-constrained, overflow:hidden box with the pins -
   see "Responsive — mobile" for how each side of the split behaves there. */
.knowledge-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 680px;
}
/* No border-radius, border, or shadow here on purpose - a crisp rounded
   rectangle (even lightly rounded) still reads as a distinct panel sitting
   on the page. Instead, a mask fades the whole frame - image, pin overlay,
   and its own background-color alike, since mask-image affects everything
   an element paints - to fully transparent along the left edge and
   partway down the top edge and up the bottom edge, dissolving into the
   hero's own off-white background rather than being cut off by a hard
   edge. Right stays fully opaque (it already runs to the viewport edge).
   The top/bottom fades are combined into one vertical gradient (rather
   than a separate mask layer each) since they run along the same axis -
   keeps this to two mask layers total. -webkit-mask-image is a straight
   duplicate for Safari; mask-composite:intersect (which multiplies the
   two gradients so corners fade correctly where both overlap) doesn't
   have a WebKit equivalent worth chasing here, so old Safari just shows a
   very slightly less refined corner blend, not a functional break.
   The Incoming card and the structured knowledge card are NOT children of
   this element specifically so this fade can never touch them - see the
   HTML comment above .capture-card. */
.knowledge-map__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #DCEAEF;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.knowledge-map__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s var(--kw-ease), transform 0.9s var(--kw-ease);
}

.knowledge-map__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -100%) scale(0.6);
  opacity: 0;
  transition: opacity 0.35s var(--kw-ease), transform 0.35s var(--kw-ease);
  transition-delay: calc(0.5s + var(--delay) * 70ms);
}
.knowledge-map__pin--location { width: 30px; height: auto; filter: drop-shadow(0 3px 6px rgba(11, 31, 51, 0.25)); }
.knowledge-map__pin--knowledge { width: 26px; height: auto; filter: drop-shadow(0 3px 6px rgba(11, 31, 51, 0.25)); }

.knowledge-map__connector {
  position: absolute;
  left: 4%;
  top: 6%;
  width: 44%;
  height: 44%;
  opacity: 0;
  transition: opacity 0.5s var(--kw-ease);
  transition-delay: 0.75s;
}

/* ---- Incoming capture card ---- */
.capture-card {
  position: absolute;
  left: 3%;
  top: 26%;
  width: 236px;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  padding: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
  transition-delay: 0.55s;
}
.capture-card__heading {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-muted);
  margin-bottom: 10px;
}
.capture-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--kw-border);
}
.capture-card__item:first-of-type { border-top: none; padding-top: 0; }
.capture-card__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capture-card__icon--whatsapp { background: #25D366; }
.capture-card__icon--location { background: var(--kw-cyan-bg); color: var(--kw-cyan); }
.capture-card__icon--photo { overflow: hidden; }
.capture-card__icon--photo img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
.capture-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.capture-card__title { font-size: 12.5px; font-weight: 700; color: var(--kw-navy); }
.capture-card__text {
  font-size: 11.5px;
  color: var(--kw-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capture-card__time { flex-shrink: 0; font-size: 11px; color: var(--kw-muted); }

/* ---- Structured knowledge card ---- */
/* Smaller and more compact on purpose (per explicit review feedback: it
   was dominating the hero next to the map and should read as a secondary
   proof point) - narrower, a shorter photo area, and tighter internal
   spacing throughout, same content otherwise. */
.knowledge-card {
  position: absolute;
  right: 6%;
  bottom: 7%;
  width: 240px;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
  transition-delay: 0.95s;
}
.knowledge-card__media { position: relative; }
.knowledge-card__media img { width: 100%; height: 88px; object-fit: cover; }
.knowledge-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--kw-cyan);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
.knowledge-card__body { padding: 14px 15px 16px; }
.knowledge-card__category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--kw-cyan);
  margin-bottom: 6px;
}
.knowledge-card__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
  margin-bottom: 2px;
}
.knowledge-card__location { font-size: 11px; color: var(--kw-muted); margin-bottom: 10px; }

.knowledge-card__section { padding: 8px 0; border-top: 1px solid var(--kw-border); }
.knowledge-card__section:first-of-type { border-top: 1px solid var(--kw-border); }
.knowledge-card__section-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
}
.knowledge-card__section-text { font-size: 11.5px; line-height: 1.4; color: var(--kw-slate); }

.knowledge-card__section--positive .knowledge-card__section-label { color: var(--kw-green); }
.knowledge-card__section--warning .knowledge-card__section-label { color: var(--kw-amber-text); }
.knowledge-card__section--info .knowledge-card__section-label { color: var(--kw-cyan); }

.knowledge-card__updated {
  margin-top: 8px;
  font-size: 10px;
  color: var(--kw-muted);
}

/* ==========================================================================
   Entrance animation (respects prefers-reduced-motion — see below)
   ========================================================================== */
.is-loaded .knowledge-map__image { opacity: 1; transform: scale(1); }
.is-loaded .knowledge-map__pin { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.is-loaded .knowledge-map__connector { opacity: 1; }
.is-loaded .capture-card { opacity: 1; transform: translateY(0); }
.is-loaded .knowledge-card { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .knowledge-map__image,
  .knowledge-map__pin,
  .knowledge-map__connector,
  .capture-card,
  .knowledge-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Responsive — tablet (768–1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 480px) 1fr; gap: 16px; }
  .hero__title { font-size: 52px; }
  .hero__description { font-size: 18px; }
  .hero__copy { padding-bottom: 44px; }

  .capture-card { width: 200px; }
}

@media (max-width: 1024px) {
  .site-nav__list { gap: 20px; }
  .hero { grid-template-columns: 1fr; }
  .hero__copy {
    padding-left: var(--kw-container-pad);
    padding-right: var(--kw-container-pad);
    padding-bottom: 40px;
  }
  .hero__visual {
    min-height: 460px;
    padding-right: 0;
  }
  .knowledge-map { min-height: 460px; }
  /* Same reasoning as the mobile reset further down: once the hero
     stacks to a single column, the visual bleeds to BOTH viewport edges
     (no adjacent copy column on the left to dissolve into any more), so
     the fade mask stops making sense here too - back to a plain rounded
     panel for the whole single-column range. */
  .knowledge-map__frame {
    border-radius: var(--kw-radius-lg);
    mask-image: none;
    -webkit-mask-image: none;
  }
  .knowledge-map__pin--location { width: 24px; }
  .knowledge-map__pin--knowledge { width: 20px; }
  .capture-card { left: 5%; top: 8%; width: 190px; padding: 12px; }
  .knowledge-card { right: 5%; bottom: 6%; width: 210px; }
  .knowledge-card__media img { height: 78px; }
}

/* ==========================================================================
   Responsive — mobile (≤680px)
   Per spec: nav, eyebrow, headline, body, CTA, then the map visual — a
   single stacked column, one structured card only, no overlapping cards.
   ========================================================================== */
@media (max-width: 680px) {
  /* Header/nav toggle rules moved to the shared ≤900px breakpoint,
     alongside the base .site-header CSS - this block now only holds
     mobile-specific sizing below that. */

  .hero { min-height: 0; }
  .hero__copy { padding-top: 4px; padding-bottom: 28px; }
  .hero__eyebrow { margin-bottom: 16px; }
  .hero__title { font-size: 36px; margin-bottom: 20px; }
  .hero__description { font-size: 16.5px; max-width: none; margin-bottom: 22px; }
  .hero__categories { display: none; }
  .hero__categories-compact {
    display: block;
    font-size: 13.5px;
    color: var(--kw-slate);
    margin-bottom: 26px;
  }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 20px; }
  .hero__actions .btn--lg { justify-content: center; }
  .hero__actions .btn--text { justify-content: center; }

  /* Mobile hero visual: a proper fixed-height positioning context again
     (not height:auto) so both cards can sit as small overlays on the map,
     the same spatial composition as desktop/tablet just scaled down -
     rather than one full-width card stacked below a taller map. */
  .hero__visual { min-height: 0; height: 310px; }
  .knowledge-map { height: 100%; min-height: 0; }
  /* The edge-fade mask is a desktop hero effect (dissolving into the
     copy column beside it) - on mobile the map is a small, edge-to-edge
     stacked card with page margin on both sides, so fading only its left
     edge would read as lopsided/broken rather than atmospheric. Reset
     back to a plain rounded card here, unchanged from before this pass. */
  .knowledge-map__frame {
    height: 100%;
    border-radius: var(--kw-radius-md);
    mask-image: none;
    -webkit-mask-image: none;
  }
  .knowledge-map__pin--location { width: 18px; }
  .knowledge-map__pin--knowledge { width: 15px; }
  /* The dotted connector line was tuned for the desktop cards' exact
     positions - rather than risk it pointing at nothing once both cards
     move to their smaller mobile spots, it stays hidden here; the two
     cards sitting close together on the map already implies the link. */
  .knowledge-map__connector { display: none; }

  .capture-card {
    display: block;
    left: 4%;
    top: 6%;
    width: 148px;
    padding: 9px;
  }
  .capture-card__heading { font-size: 9px; margin-bottom: 6px; }
  .capture-card__item { padding: 6px 0; gap: 7px; }
  .capture-card__icon { width: 21px; height: 21px; }
  .capture-card__icon--photo img { width: 21px; height: 21px; }
  .capture-card__title { font-size: 10px; }
  .capture-card__text { font-size: 9px; }
  .capture-card__time { font-size: 8.5px; }

  .knowledge-card {
    right: 4%;
    bottom: 4%;
    width: 154px;
  }
  .knowledge-card__media img { height: 40px; }
  .knowledge-card__badge { top: 5px; right: 5px; font-size: 7.5px; padding: 2px 5px; }
  .knowledge-card__body { padding: 8px 9px 9px; }
  .knowledge-card__category { font-size: 8px; margin-bottom: 3px; }
  .knowledge-card__title { font-size: 11px; margin-bottom: 1px; }
  .knowledge-card__location { font-size: 8px; margin-bottom: 4px; }
  .knowledge-card__section { padding: 4px 0; }
  .knowledge-card__section-label { font-size: 8px; margin-bottom: 1px; }
  .knowledge-card__section-text { font-size: 8px; line-height: 1.25; }
  .knowledge-card__updated { font-size: 7px; margin-top: 4px; }
}

/* ==========================================================================
   Shared utility — hand-drawn-style underline
   A short cyan stroke tied to the underlined word's own width (not a full-
   width rule), via an inline SVG background rather than text-decoration.
   Used on "usable" and "scattered" below.
   ========================================================================== */
.kw-underline {
  position: relative;
  display: inline-block;
}
.kw-underline::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -6px;
  height: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2,9 C30,3 70,3 98,8' stroke='%230EA5C4' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ==========================================================================
   Problem section — "The reality onboard"
   Where useful crew knowledge currently lives before KnownWaters: real
   workflows (WhatsApp, an old shared doc, a saved map pin, a notes app,
   plain memory), each rendered to resemble its own medium rather than as
   identical feature cards. Accuracy note: none of the five examples are
   live integrations - KnownWaters does not pull from WhatsApp, Docs,
   Notes or Google Earth. They illustrate where the knowledge starts out,
   not where it ends up.
   ========================================================================== */
.problem {
  padding-top: 64px;
  padding-bottom: 30px;
  /* Very subtle tonal shift toward the bottom edge - the "visual handoff"
     into whatever section follows, without a hard divider line. */
  background: linear-gradient(to bottom, var(--kw-off-white) 0%, var(--kw-off-white) 60%, #F1EFE8 100%);
}

.problem__heading {
  display: grid;
  grid-template-columns: minmax(0, 660px) 1fr;
  column-gap: 60px;
}
.problem__eyebrow {
  grid-column: 1;
  grid-row: 1;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 20px;
}
.problem__title {
  grid-column: 1;
  grid-row: 2;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 22px;
}
.problem__subtitle {
  grid-column: 1;
  grid-row: 3;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
}
.problem__copy {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: start;
  /* Pushed down to line up with .problem__title's baseline, not the
     eyebrow above it - roughly the eyebrow's own line-height + margin. */
  padding-top: 37px;
  max-width: 420px;
}
.problem__copy p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--kw-slate);
  margin-bottom: 18px;
}
.problem__copy p:last-child { margin-bottom: 0; }

/* ---- Scattered knowledge fragments ---- */
.scattered {
  position: relative;
  margin-top: 60px;
  opacity: 0;
  transition: opacity 0.6s var(--kw-ease);
}
.scattered.is-visible { opacity: 1; }

.scattered__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fragment {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.scattered.is-visible .fragment { opacity: 1; transform: translateY(0); }
.scattered.is-visible .fragment:nth-child(1) { transition-delay: 0s; }
.scattered.is-visible .fragment:nth-child(2) { transition-delay: 0.08s; }
.scattered.is-visible .fragment:nth-child(3) { transition-delay: 0.16s; }
.scattered.is-visible .fragment:nth-child(4) { transition-delay: 0.24s; }
.scattered.is-visible .fragment:nth-child(5) { transition-delay: 0.32s; }

/* Staggered vertical rhythm - deliberately not one aligned row (see the
   editorial-stagger requirement in the section's review notes): WhatsApp
   sits highest, Earth close behind it, Memory sits mid-way between all
   five, then Docs and Notes trail lowest. */
.fragment--whatsapp { width: 274px; }
.fragment--docs { width: 286px; margin-top: 34px; }
.fragment--earth { width: 280px; margin-top: 10px; }
.fragment--notes { width: 232px; margin-top: 44px; }
.fragment--memory { width: 258px; margin-top: 22px; }

/* The label pill floats above and slightly overlaps its own card - a
   small layered detail that reads as "a tag stuck on a scrap", not a
   card header. */
.fragment__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kw-white);
  border-radius: 999px;
  padding: 6px 13px 6px 6px;
  box-shadow: var(--kw-shadow-card);
  font-size: 12px;
  font-weight: 700;
  color: var(--kw-navy);
  white-space: nowrap;
  position: relative;
  z-index: 2;
  margin-bottom: -16px;
  margin-left: 6px;
}
.fragment__tag-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.fragment__tag-icon--whatsapp { background: #25D366; }
.fragment__tag-icon--docs { background: #2A6FDB; }
.fragment__tag-icon--notes { background: #FCEFC0; }
.fragment__tag-icon--earth { background: transparent; }
.fragment__tag-icon--memory { background: var(--kw-off-white); border: 1px solid var(--kw-border); }

/* ---- 1. WhatsApp chat fragment ---- */
.chat-card {
  width: 100%;
  background: #F3F0E8;
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  padding: 20px 14px 14px;
}
.chat-card__bubble {
  max-width: 94%;
  border-radius: 10px;
  padding: 8px 10px 6px;
  margin-bottom: 8px;
}
.chat-card__bubble p { font-size: 11.5px; line-height: 1.4; color: var(--kw-navy); }
.chat-card__bubble--in { background: #DCF8C6; border-top-left-radius: 2px; }
.chat-card__bubble--out { background: var(--kw-white); border: 1px solid var(--kw-border); border-top-right-radius: 2px; margin-left: auto; }
.chat-card__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  font-size: 9.5px;
  color: var(--kw-muted);
}
.chat-card__voice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: 10px;
  padding: 7px 9px;
  margin-bottom: 8px;
}
.chat-card__play {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kw-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-card__waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 14px; }
.chat-card__waveform span { display: block; width: 2px; background: var(--kw-border); border-radius: 1px; }
.chat-card__voice-time { font-size: 9.5px; color: var(--kw-muted); flex-shrink: 0; }
.chat-card__avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--kw-cyan); flex-shrink: 0; }
.chat-card__photo { position: relative; border-radius: 8px; overflow: hidden; line-height: 0; }
.chat-card__photo img { width: 100%; height: 78px; object-fit: cover; }
.chat-card__photo-time {
  position: absolute;
  bottom: 5px;
  right: 6px;
  font-size: 9px;
  color: #fff;
  background: rgba(11, 31, 51, 0.5);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---- 2. Old Google Docs fragment ---- */
.doc-card {
  width: 100%;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  padding: 20px 16px 15px;
}
.doc-card__title { font-size: 13.5px; font-weight: 700; color: var(--kw-navy); margin-bottom: 9px; }
.doc-card__toolbar {
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: var(--kw-muted);
  padding-bottom: 8px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--kw-border);
}
.doc-card__list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.doc-card__list li {
  position: relative;
  padding-left: 13px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--kw-slate);
}
.doc-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kw-cyan);
}
.doc-card__meta { font-size: 10px; color: var(--kw-muted); padding-top: 10px; border-top: 1px solid var(--kw-border); }

/* ---- 3. Google Earth file fragment ---- */
/* A real cropped satellite tile (assets/earth-tavolara-satellite.png),
   not a live map render - it's a saved-pin screenshot, cropped to remove
   the source app's own UI chrome (logo/attribution/expand control) so it
   reads as a plain saved image rather than a live embed. See the section
   comment above .problem for the "not a live integration" note. */
.earth-card {
  width: 100%;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  overflow: hidden;
}
.earth-card__image { position: relative; height: 126px; }
.earth-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.earth-card__body { padding: 14px 16px 15px; }
.earth-card__title { font-size: 13.5px; font-weight: 700; color: var(--kw-navy); margin-bottom: 9px; }
.earth-card__list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.earth-card__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--kw-slate);
}
.earth-card__list li svg { flex-shrink: 0; }
.earth-card__meta { font-size: 10px; color: var(--kw-muted); padding-top: 9px; border-top: 1px solid var(--kw-border); }

/* ---- 4. Notes app fragment ---- */
/* Caveat (loaded alongside Geist in index.html) is used only here and in
   .memory-card - everywhere else on the site stays on Geist. */
.notes-card {
  width: 100%;
  background: #FCEFC0;
  border: 1px solid #EAD48A;
  border-radius: var(--kw-radius-sm);
  box-shadow: var(--kw-shadow-card);
  padding: 22px 18px 18px;
  position: relative;
  font-family: 'Caveat', cursive;
}
.notes-card p { font-size: 18px; line-height: 1.45; color: #4A3B12; }
.notes-card__star { position: absolute; bottom: 12px; right: 14px; }

/* ---- 5. Crew memory fragment ---- */
/* A torn-paper top edge (via clip-path) and a script font mark this out
   as the least "software" of the five - a loose remembered quote, not a
   captured record. */
.memory-card {
  width: 100%;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  box-shadow: var(--kw-shadow-card);
  padding: 28px 20px 18px;
  position: relative;
  clip-path: polygon(0% 6px, 4% 0, 8% 6px, 12% 0, 16% 6px, 20% 0, 24% 6px, 28% 0, 32% 6px, 36% 0, 40% 6px, 44% 0, 48% 6px, 52% 0, 56% 6px, 60% 0, 64% 6px, 68% 0, 72% 6px, 76% 0, 80% 6px, 84% 0, 88% 6px, 92% 0, 96% 6px, 100% 0, 100% 100%, 0 100%);
}
.memory-card__quote-mark {
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: 'Caveat', cursive;
  font-size: 40px;
  font-weight: 700;
  color: var(--kw-cyan);
  line-height: 1;
  opacity: 0.85;
}
.memory-card__text {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kw-navy);
}

/* ---- Connector lines: converge toward one point above the closing
   statement, imitating the same restrained arc treatment as the hero's
   own Incoming->knowledge connector. ---- */
.scattered__connectors {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 2px;
}
/* Simplified fallback for tablet/mobile - a single short vertical guide
   instead of five converging arcs (see the two breakpoints below). */
.scattered__guide {
  display: none;
  width: 1px;
  height: 44px;
  margin: 4px auto 0;
  border-left: 1.5px dashed rgba(58, 75, 92, 0.4);
}

/* ---- Closing statement ---- */
.problem__conclusion {
  text-align: center;
  max-width: 720px;
  margin: 14px auto 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.2s;
}
.problem__conclusion.is-visible { opacity: 1; transform: translateY(0); }
.problem__statement {
  max-width: 620px;
  margin: 0 auto 20px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
}
.problem__statement-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-slate);
  max-width: 620px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .scattered,
  .fragment,
  .problem__conclusion {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Problem section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .problem { padding-top: 48px; padding-bottom: 26px; }
  .problem__heading { grid-template-columns: 1fr; column-gap: 0; }
  .problem__title { font-size: 38px; }
  .problem__subtitle { font-size: 23px; margin-top: 18px; }
  .problem__copy { grid-column: 1; grid-row: auto; margin-top: 26px; max-width: 560px; padding-top: 0; }

  .scattered { margin-top: 48px; }
  .scattered__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 24px;
  }
  .scattered__row .fragment,
  .fragment--whatsapp, .fragment--docs, .fragment--earth, .fragment--notes, .fragment--memory {
    width: 100%;
    margin-top: 0;
  }
  .scattered__connectors { display: none; }
  .scattered__guide { display: block; }

  .problem__conclusion { margin-top: 10px; }
}

@media (max-width: 680px) {
  .problem { padding-top: 32px; padding-bottom: 22px; }
  .problem__heading { display: flex; flex-direction: column; }
  .problem__eyebrow { order: 1; }
  .problem__title { order: 2; font-size: 30px; }
  .problem__copy { order: 3; margin-top: 22px; max-width: none; }
  .problem__subtitle { order: 4; font-size: 20px; margin-top: 22px; }

  .scattered { margin-top: 28px; }
  .scattered__row { grid-template-columns: 1fr; gap: 20px; }
  .fragment { max-width: 360px; margin: 0 auto; }

  .problem__conclusion { margin-top: 16px; }
  .problem__statement { font-size: 24px; }
  .problem__statement-copy { font-size: 15.5px; }
}

/* ==========================================================================
   Flow section
   One-glance overview of the full Capture/Review/Organise/Retrieve
   workflow, sitting between the off-white Problem section and the
   detailed off-white sections that follow. Full-bleed flat navy on
   purpose - a deliberate block of contrast rather than a blended
   handoff, so it reads as its own "overview beat".
   ========================================================================== */
.flow {
  background: var(--kw-navy);
  padding: 60px 0 56px;
}

.flow__title {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 44px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.flow__title.is-visible { opacity: 1; transform: translateY(0); }
.flow__title-a { color: var(--kw-off-white); }
.flow__title-b { color: var(--kw-cyan); }

.flow__row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto;
}

.flow__card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--kw-off-white);
  border-radius: 16px;
  padding: 24px 18px 22px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(14, 165, 196, 0.10), 0 10px 30px rgba(14, 165, 196, 0.14), 0 4px 14px rgba(2, 8, 15, 0.28);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.flow__card.is-visible { opacity: 1; transform: translateY(0); }
.flow__row .flow__card:nth-of-type(2) { transition-delay: 0.1s; }
.flow__row .flow__card:nth-of-type(3) { transition-delay: 0.2s; }
.flow__row .flow__card:nth-of-type(4) { transition-delay: 0.3s; }

.flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
}
.flow__icon svg { width: 100%; height: 100%; }

.flow__card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--kw-navy);
  margin-bottom: 6px;
}
.flow__card-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kw-slate);
  max-width: 165px;
  margin: 0 auto;
}

.flow__arrow {
  flex: 0 0 auto;
  align-self: center;
  margin: -46px 6px 0;
  opacity: 0;
  transition: opacity 0.5s var(--kw-ease);
  transition-delay: 0.15s;
}
.flow__arrow.is-visible { opacity: 1; }

.flow__closing {
  text-align: center;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.35s;
}
.flow__closing.is-visible { opacity: 1; transform: translateY(0); }
.flow__closing-line1 {
  font-size: 15.5px;
  color: var(--kw-off-white);
  opacity: 0.82;
}
.flow__closing-line2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--kw-cyan);
  margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .flow__title,
  .flow__card,
  .flow__arrow,
  .flow__closing {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Flow section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .flow { padding: 48px 0 44px; }
  .flow__title { font-size: 26px; white-space: normal; margin-bottom: 36px; }

  .flow__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 560px; }
  .flow__arrow { display: none; }
  .flow__card-text { max-width: none; }
}

@media (max-width: 680px) {
  .flow { padding: 40px 0 36px; }
  .flow__title { font-size: 22px; margin-bottom: 28px; }

  /* A horizontally swipeable strip (native scroll-snap, no JS) rather
     than a shrunk-down grid - showing a peek of the next card is the
     signal that there's more to scroll to. */
  .flow__row {
    display: flex;
    justify-content: flex-start;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    max-width: none;
    margin: 0 -20px;
    padding: 4px 20px 10px;
    -webkit-overflow-scrolling: touch;
  }
  .flow__card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .flow__closing { margin-top: 28px; }
  .flow__closing-line1 { font-size: 14.5px; }
  .flow__closing-line2 { font-size: 16px; }
}

/* ==========================================================================
   Capture section
   Two real capture paths (mobile web, WhatsApp) that both feed the same
   pipeline. "On mobile" is used throughout rather than "in the app" -
   there is no native app, this is the mobile web capture flow. The
   WhatsApp card is a separate capture path, not a synced copy of the
   WhatsApp thread living inside the platform.
   ========================================================================== */
.capture {
  padding-top: 28px;
  padding-bottom: 20px;
  /* Picks up exactly where .problem's own gradient leaves off (#F1EFE8)
     and eases back to the standard off-white within the first slice of
     this section, rather than jumping straight back to --kw-off-white -
     that jump was the "separate coloured band" seam. Nothing below this
     section needs a handoff, so it stays flat off-white after that. */
  background: linear-gradient(to bottom, #F1EFE8 0%, var(--kw-off-white) 15%, var(--kw-off-white) 100%);
}

.capture__heading {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.capture__heading.is-visible { opacity: 1; transform: translateY(0); }

.capture__title {
  /* No max-width of its own - sized by .capture__heading - so the
     headline stays on one line at desktop widths where it comfortably
     fits, and only wraps once the section itself gets narrow. */
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
  white-space: nowrap;
}
.capture__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-slate);
  max-width: 640px;
  margin: 0 auto;
}

/* ---- The two main cards ---- */
/* Equal width AND equal height (align-items:stretch, the grid default) -
   both cards represent equally-weighted capture paths, so neither should
   read as the "main" one with the other as a footnote. */
.capture__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Thin cyan border + very soft cyan glow - deliberately much quieter
   than the first pass (that read as a bright outline): low-opacity
   stroke, a barely-there ambient glow, no hard edge. */
.capture-panel {
  background: var(--kw-white);
  border: 1px solid rgba(14, 165, 196, 0.14);
  border-radius: var(--kw-radius-lg);
  box-shadow: 0 0 0 1px rgba(14, 165, 196, 0.02), 0 20px 40px rgba(14, 165, 196, 0.045), 0 2px 8px rgba(11, 31, 51, 0.03);
  padding: 24px 26px 26px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.capture-panel.is-visible { opacity: 1; transform: translateY(0); }
.capture-panel--whatsapp { transition-delay: 0.12s; }

.capture-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.capture-panel__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.capture-panel__icon--brand { background: var(--kw-cyan-bg); }
.capture-panel__icon--brand svg { width: 20px; height: 20px; }
.capture-panel__icon--whatsapp { background: #25D366; }
.capture-panel__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-cyan);
}

.capture-panel__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
  margin-bottom: 6px;
}
.capture-panel__subtitle {
  font-size: 14px;
  color: var(--kw-slate);
  margin-bottom: 18px;
}

.capture-panel__benefits { display: flex; flex-direction: column; gap: 13px; }
.capture-panel__benefit { display: flex; align-items: flex-start; gap: 10px; }
.capture-panel__check { flex-shrink: 0; margin-top: 2px; }
.capture-panel__benefit-title { font-size: 13.5px; font-weight: 700; color: var(--kw-navy); margin-bottom: 1px; }
.capture-panel__benefit-text { font-size: 12.5px; line-height: 1.45; color: var(--kw-slate); }

/* ---- Card body: a fixed-width text column beside the phone visual,
   vertically centred against each other - both cards use the exact same
   proportions now (one phone each, equal weight), so this is shared
   rather than duplicated per card. ---- */
.capture-panel__body {
  display: flex;
  align-items: center;
  gap: 20px;
}
.capture-panel__content { flex: 0 0 262px; }
.capture-panel__visual {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Phone frame: plain CSS (no bezel image assets) - a dark rounded
   rect with a small notch pseudo-element. Each of the two screens
   (Add Knowledge / WhatsApp) uses its OWN screenshot's native aspect
   ratio rather than a shared "true phone" ratio - the source crops are
   browser-viewport captures, not identical device-screen shapes, so
   matching the frame to each image means object-fit is a no-op: the
   full screenshot shows, nothing stretched, nothing cropped. Both are
   sized to the same WIDTH so they read as equal visual weight even
   though their exact heights differ slightly. ---- */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 196px;
  background: var(--kw-navy);
  border-radius: 24px;
  padding: 7px;
  box-shadow: 0 15px 28px rgba(11, 31, 51, 0.17);
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 12px;
  background: var(--kw-navy);
  border-radius: 0 0 8px 8px;
  z-index: 2;
}
.phone-frame__screen {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 17px;
  overflow: hidden;
  background: var(--kw-off-white);
}
.phone-frame__screen img { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; }

/* Add Knowledge screen - 1206x2376 (status bar + app content + the
   site's own bottom nav, browser chrome cropped out). */
.phone-frame--capture-main .phone-frame__screen { aspect-ratio: 1206 / 2376; }
/* WhatsApp conversation - 1206x2622. */
.phone-frame--whatsapp .phone-frame__screen { aspect-ratio: 1206 / 2622; }

.capture-panel__annotation {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-family: 'Caveat', cursive;
  font-size: 21px;
  font-weight: 600;
  color: var(--kw-cyan);
}
.capture-panel__annotation-arrow { flex-shrink: 0; margin-bottom: 3px; }

/* ---- Google Earth import: a third, full-width capture path beneath the
   mobile/WhatsApp pair - a horizontal strip rather than a third card of
   the same shape, since it's a one-off action (bring existing pins in)
   rather than an ongoing capture habit like the other two. ---- */
.capture-import {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--kw-white);
  border: 1px solid rgba(14, 165, 196, 0.14);
  border-radius: var(--kw-radius-lg);
  box-shadow: 0 0 0 1px rgba(14, 165, 196, 0.02), 0 20px 40px rgba(14, 165, 196, 0.045), 0 2px 8px rgba(11, 31, 51, 0.03);
  padding: 26px 32px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.2s;
}
.capture-import.is-visible { opacity: 1; transform: translateY(0); }

.capture-import__intro { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.capture-import__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 8px;
}
.capture-import__title { font-size: 18px; font-weight: 700; color: var(--kw-navy); line-height: 1.3; margin-bottom: 6px; }
.capture-import__text { font-size: 14px; line-height: 1.5; color: var(--kw-slate); }

.capture-import__flow {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.capture-import__step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.capture-import__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--kw-radius-sm);
  border: 1px solid var(--kw-border);
  background: var(--kw-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.capture-import__step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kw-slate);
}
.capture-import__arrow { flex-shrink: 0; color: var(--kw-cyan); }

.capture-import__step--pin { justify-content: center; }
.capture-import__pin { width: 46px; height: auto; flex-shrink: 0; }

.capture-import__annotation {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Caveat', cursive;
  font-size: 21px;
  font-weight: 600;
  color: var(--kw-cyan);
  white-space: nowrap;
  line-height: 1.15;
}
.capture-import__annotation-arrow { flex-shrink: 0; }

/* ---- Flow connectors: a thin cyan line from the bottom of each card,
   converging toward the Review Queue text below - makes it explicit that
   BOTH capture paths (not just one) feed the same review step. Simplified
   to a single vertical guide once the cards stack to one column (see
   Responsive) since there's no second card to converge from any more. ---- */
.capture__flow {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.6s var(--kw-ease);
}
.capture__flow.is-visible { opacity: 1; }
.capture__flow-guide {
  display: none;
  width: 1px;
  height: 40px;
  margin: 10px auto 0;
  border-left: 1.5px dashed rgba(14, 165, 196, 0.4);
}

/* ---- Bottom transition: just a quiet downward cue into Review now - the
   Review section's own heading opens by explaining what happens to
   captured knowledge, so a repeated block of copy here was redundant
   with it (previously an icon + title + copy sat above the arrow). ---- */
.capture__transition {
  margin-top: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.2s;
}
.capture__transition.is-visible { opacity: 1; transform: translateY(0); }
.capture__transition-arrow { display: block; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .capture__heading,
  .capture-panel,
  .capture-import,
  .capture__flow,
  .capture__transition {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Capture section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .capture { padding-top: 24px; padding-bottom: 90px; }
  .capture__title { font-size: 34px; white-space: normal; }

  /* Cards stack to one per row here, so each one has the full container
     width to itself - the text-column/visual-column split inside each
     card stays side-by-side (see .capture-panel__body) since there's
     more room now, not less; only the two-card grid changes. */
  .capture__cards { grid-template-columns: 1fr; gap: 24px; }
  .capture-panel { padding: 28px 30px 30px; }

  .capture-import { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 30px 30px; }
  .capture-import__intro { flex-basis: auto; white-space: normal; }
  .capture-import__annotation { white-space: normal; }

  /* The two converging arcs only make sense side-by-side - once the
     cards stack to one column there's nothing left to converge from, so
     swap to a single straight-down guide instead (same pattern as the
     Problem section's .scattered__guide). */
  .capture__flow { display: none; }
  .capture__flow-guide { display: block; }
}

@media (max-width: 760px) {
  /* Text stacks above the phone rather than sitting beside it once a
     single card no longer has room for both side by side. */
  .capture-panel__body { flex-direction: column; }
  .capture-panel__content { flex-basis: auto; width: 100%; }
  .capture-panel__visual { width: 100%; margin-top: 20px; }
  .phone-frame { max-width: 220px; }
}

@media (max-width: 680px) {
  .capture { padding-top: 20px; padding-bottom: 64px; }
  .capture__heading { margin-bottom: 36px; }
  .capture__title { font-size: 28px; }
  .capture__intro { font-size: 15.5px; }

  .capture-panel { padding: 22px 20px 26px; }
  .capture-panel__title { font-size: 21px; }
  .capture-panel__benefits { margin-bottom: 6px; }

  .phone-frame { max-width: 190px; }

  .capture-import { padding: 22px 20px 26px; gap: 22px; }
  .capture-import__flow { flex-wrap: wrap; row-gap: 16px; }
  .capture-import__annotation { font-size: 19px; }

  .capture__flow-guide { height: 32px; }
  .capture__transition { margin-top: 4px; }
  .capture__transition-title { font-size: 18px; }
  .capture__transition-copy { font-size: 15px; }
}

/* ==========================================================================
   Review section
   What happens after crew capture: nothing becomes trusted vessel
   knowledge until the bridge team has checked it. The real Review Queue
   screenshot is the visual hero; four editorial callouts (not cards) sit
   either side of it on desktop, collapsing to a 2x2 grid then a single
   stacked column as the viewport narrows.
   ========================================================================== */
.review {
  padding-top: 4px;
  padding-bottom: 24px;
  background: var(--kw-off-white);
}

.review__heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.review__heading.is-visible { opacity: 1; transform: translateY(0); }

.review__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 16px;
}
.review__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
}
/* At narrow widths "trusted yacht knowledge" wraps mid-phrase, leaving the
   underline (sized to the widest wrapped line) misaligned with whichever
   word actually ends up on the last line - swap to underlining just
   "trusted" instead (see spec: an explicit fallback), rather than the
   full phrase, once that wrap becomes a real risk. */
.review__title-compact { display: none; }
.review__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-slate);
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Diagram: fixed-width side columns + a fluid centre column for the
   screenshot, so the screenshot naturally claims whatever space is left
   (roughly 65-70% at the container's usual widths) without ever forcing
   the annotations to overlap it. ---- */
.review__diagram {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 26px;
}

.review__diagram-col {
  /* 220px + the 26px gap below reproduces the exact same 492px (2 x
     (column + gap)) the screenshot's own flex-basis was computed against
     before the gap shrank from 36px to 26px - so moving the columns'
     near edges 10px closer doesn't change the screenshot's own fluid
     width at all, only how close the callouts sit to it. */
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 0;
}

.review__screenshot-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1000px;
  display: flex;
  align-items: center;
}

.review__screenshot {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card-lg);
  overflow: hidden;
  background: var(--kw-white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--kw-ease), transform 0.7s var(--kw-ease);
  transition-delay: 0.1s;
}
.review__screenshot.is-visible { opacity: 1; transform: translateY(0); }
.review__screenshot img { width: 100%; height: auto; display: block; }

.review__annotation {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.review__annotation.is-visible { opacity: 1; transform: translateY(0); }
.review__diagram-col--left .review__annotation:nth-child(2) { transition-delay: 0.08s; }
.review__diagram-col--right .review__annotation:nth-child(1) { transition-delay: 0.16s; }
.review__diagram-col--right .review__annotation:nth-child(2) { transition-delay: 0.24s; }

.review__annotation-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kw-cyan-bg);
  margin-bottom: 12px;
}
.review__annotation-icon svg { width: 19px; height: 19px; }
.review__annotation-icon--amber { background: var(--kw-amber-bg); }
.review__annotation-icon--positive { background: var(--kw-green-bg); }

.review__annotation-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--kw-navy);
  margin-bottom: 5px;
}
.review__annotation-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kw-slate);
}

.review__closing {
  margin-top: 40px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.3s;
}
.review__closing.is-visible { opacity: 1; transform: translateY(0); }
.review__closing-statement {
  max-width: 480px;
  margin: 0 auto;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--kw-navy);
}
.review__closing-arrow { display: block; margin: 26px auto 0; }

@media (prefers-reduced-motion: reduce) {
  .review__heading,
  .review__screenshot,
  .review__annotation,
  .review__closing {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Review section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .review { padding-top: 16px; padding-bottom: 84px; }
  .review__title { font-size: 34px; }
  .review__heading { margin-bottom: 44px; }

  .review__diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .review__diagram-col { display: contents; }
  .review__diagram-col .review__annotation { padding: 0; }
  .review__screenshot-wrap { grid-column: 1 / -1; order: -1; max-width: none; margin-bottom: 32px; }
  .review__connectors { display: none; }

  .review__closing { margin-top: 48px; }
}

@media (max-width: 680px) {
  .review { padding-top: 12px; padding-bottom: 60px; }
  .review__title { font-size: 27px; }
  .review__title-full { display: none; }
  .review__title-compact { display: inline; }
  .review__intro { font-size: 15.5px; }

  .review__diagram { grid-template-columns: 1fr; gap: 28px; }

  .review__closing-statement { font-size: 19px; max-width: 320px; }
}

/* ==========================================================================
   Organise section
   What happens to trusted knowledge after Review: KnownWaters structures
   it on the Knowledge Map by place, category and context so the whole
   crew can find it again. The real Knowledge Map screenshot is the
   visual hero; four equal, icon-free callout cards beneath it sell the
   map as an operational tool rather than a static image.
   ========================================================================== */
.organise {
  padding-top: 8px;
  padding-bottom: 64px;
  background: var(--kw-off-white);
}

.organise__heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.organise__heading.is-visible { opacity: 1; transform: translateY(0); }

.organise__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 16px;
}
.organise__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
}
.organise__title-accent { color: var(--kw-cyan); }
.organise__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-slate);
  max-width: 680px;
  margin: 0 auto;
}

.organise__screenshot {
  max-width: 82%;
  margin: 0 auto;
  display: block;
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card-lg);
  overflow: hidden;
  background: var(--kw-white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--kw-ease), transform 0.7s var(--kw-ease);
  transition-delay: 0.1s;
}
.organise__screenshot.is-visible { opacity: 1; transform: translateY(0); }
.organise__screenshot img { width: 100%; height: auto; display: block; }

.organise__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.organise-card {
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  padding: 30px 22px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.organise-card.is-visible { opacity: 1; transform: translateY(0); }
.organise__cards .organise-card:nth-child(2) { transition-delay: 0.08s; }
.organise__cards .organise-card:nth-child(3) { transition-delay: 0.16s; }
.organise__cards .organise-card:nth-child(4) { transition-delay: 0.24s; }

.organise-card__title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--kw-navy);
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 14px;
}
/* Small cyan rule beneath each card title, not the hand-drawn word
   underline used inline elsewhere - this sits under a whole (short)
   title as a divider, not tied to a single word's width. */
.organise-card__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--kw-cyan);
}
.organise-card__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kw-slate);
}

.organise__arrow {
  display: block;
  margin: 40px auto 0;
  opacity: 0;
  transition: opacity 0.5s var(--kw-ease);
  transition-delay: 0.3s;
}
.organise__arrow.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .organise__heading,
  .organise__screenshot,
  .organise-card,
  .organise__arrow {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Organise section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .organise { padding-top: 44px; padding-bottom: 56px; }
  .organise__title { font-size: 32px; }
  .organise__heading { margin-bottom: 32px; }
  .organise__screenshot { max-width: 100%; }

  .organise__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .organise { padding-top: 32px; padding-bottom: 44px; }
  .organise__title { font-size: 25px; }
  .organise__intro { font-size: 15.5px; }
  .organise__heading { margin-bottom: 24px; }

  .organise__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .organise-card { padding: 24px 20px; }

  .organise__arrow { margin-top: 28px; }
}

/* ==========================================================================
   Grow section
   The final beat of the product story: approved knowledge doesn't just
   get organised once, it accumulates season after season. Three stages
   (Year 1 / Year 2 / Year 3+) share one grid so each stage's dot lines
   up with its own pins and copy without any manual pixel math - the
   real Knowledge pin SVG is reused at a small size, never redrawn.
   ========================================================================== */
.grow {
  padding-top: 64px;
  padding-bottom: 96px;
  background: var(--kw-off-white);
}

.grow__heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 72px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.grow__heading.is-visible { opacity: 1; transform: translateY(0); }

.grow__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 16px;
}
.grow__title {
  /* No max-width of its own - matches the .capture__title pattern - so
     it stays on one line at desktop widths where it comfortably fits,
     only wrapping once the section itself gets narrow (see Responsive). */
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
  white-space: nowrap;
}
.grow__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-slate);
  max-width: 540px;
  margin: 0 auto;
}

/* ---- Timeline: a shared 3-column grid. Year label / pins / line+dots /
   copy each get their own row, so every stage's dot sits on the same
   line regardless of how many pins that stage has - shorter pin groups
   (Year 1) sit flush against the line via align-self:end, growing
   upward rather than down, so the line's row never has to move. ---- */
.grow__timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.grow__timeline.is-visible { opacity: 1; transform: translateY(0); }

.grow__stage-year {
  grid-row: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--kw-navy);
  margin-bottom: 20px;
}
.grow__stage-year--1 { grid-column: 1; }
.grow__stage-year--2 { grid-column: 2; }
.grow__stage-year--3 { grid-column: 3; }

.grow__pins {
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-end;
  gap: 8px;
  min-height: 66px;
  padding-bottom: 22px;
}
.grow__pins--1 { grid-column: 1; --stage-delay: 0s; }
.grow__pins--2 { grid-column: 2; max-width: 168px; margin: 0 auto; --stage-delay: 0.15s; }
/* Year 3+ swaps flex-wrap for an explicit 5-column grid - a fixed
   3-rows-by-5 structure that reads as "a substantial body of knowledge"
   rather than whatever happens to wrap at the container's width. */
.grow__pins--3 {
  grid-column: 3;
  display: grid;
  grid-template-columns: repeat(5, 15px);
  justify-content: center;
  align-content: end;
  gap: 7px;
  --stage-delay: 0.3s;
}

.grow__pin {
  width: 15px;
  height: auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.grow__timeline.is-visible .grow__pin {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--stage-delay, 0s) + var(--delay, 0) * 35ms);
}

.grow__line {
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: center;
  height: 1px;
  background: var(--kw-cyan);
  margin-bottom: 22px;
}
.grow__dot {
  grid-row: 3;
  align-self: center;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kw-cyan);
  margin-bottom: 22px;
}
.grow__dot--1 { grid-column: 1; }
.grow__dot--2 { grid-column: 2; }
.grow__dot--3 { grid-column: 3; }

.grow__stage-copy {
  grid-row: 4;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--kw-slate);
  max-width: 190px;
  margin: 0 auto;
}
.grow__stage-copy--1 { grid-column: 1; }
.grow__stage-copy--2 { grid-column: 2; }
.grow__stage-copy--3 { grid-column: 3; }

.grow__closing {
  text-align: center;
  margin-top: 80px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.2s;
}
.grow__closing.is-visible { opacity: 1; transform: translateY(0); }
.grow__closing-statement {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  color: var(--kw-navy);
  max-width: 560px;
  margin: 0 auto 20px;
  padding-bottom: 20px;
}
.grow__closing-statement::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  border-radius: 1px;
  background: var(--kw-cyan);
}
.grow__closing-copy {
  font-size: 16px;
  line-height: 1.6;
  color: var(--kw-slate);
  max-width: 520px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .grow__heading,
  .grow__timeline,
  .grow__pin,
  .grow__closing {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Grow section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .grow { padding-top: 52px; padding-bottom: 80px; }
  .grow__title { font-size: 32px; white-space: normal; }
  .grow__heading { margin-bottom: 56px; }

  .grow__timeline { column-gap: 20px; max-width: 700px; }
  .grow__pin { width: 13px; }
  .grow__pins--2 { max-width: 140px; }
  .grow__pins--3 { max-width: 128px; }
  .grow__stage-copy { font-size: 14px; max-width: 160px; }

  .grow__closing { margin-top: 64px; }
}

@media (max-width: 680px) {
  .grow { padding-top: 40px; padding-bottom: 64px; }
  .grow__title { font-size: 25px; }
  .grow__intro { font-size: 15.5px; }
  .grow__heading { margin-bottom: 48px; }

  /* Horizontal 3-column progression doesn't fit at this width - become a
     single column with one continuous vertical cyan rule instead, each
     stage keeping its own ordered pin grid rather than scattering. */
  .grow__timeline {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    max-width: 280px;
    position: relative;
    padding-left: 28px;
  }
  .grow__timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--kw-cyan);
  }
  /* grid-row:auto here would place items in DOM order (all three years,
     then all three pin groups, then all three copy lines) rather than
     the intended reading order - each element needs an explicit row so
     Year 1's label/pins/copy stay together before Year 2 starts. */
  .grow__stage-year,
  .grow__pins,
  .grow__stage-copy { grid-column: 1; text-align: left; margin: 0 0 6px; }
  .grow__stage-year--1 { grid-row: 1; }
  .grow__pins--1 { grid-row: 2; }
  .grow__stage-copy--1 { grid-row: 3; }
  .grow__stage-year--2 { grid-row: 4; }
  .grow__pins--2 { grid-row: 5; }
  .grow__stage-copy--2 { grid-row: 6; }
  .grow__stage-year--3 { grid-row: 7; }
  .grow__pins--3 { grid-row: 8; }
  .grow__stage-copy--3 { grid-row: 9; }

  .grow__pins {
    align-self: auto;
    justify-content: flex-start;
    align-content: flex-start;
    min-height: 0;
    padding-bottom: 0;
    margin-bottom: 14px;
  }
  .grow__pins--2, .grow__pins--3 { max-width: none; margin: 0 0 14px; }
  .grow__pins--3 { max-width: 130px; }
  .grow__stage-copy { max-width: none; margin-bottom: 32px; }
  .grow__stage-copy--3 { margin-bottom: 0; }

  /* The horizontal line/dots only make sense in the 3-column desktop
     layout - the ::before pseudo-element above is the vertical
     equivalent here. */
  .grow__line { display: none; }
  .grow__dot { display: none; }

  .grow__closing { margin-top: 48px; }
  .grow__closing-statement { font-size: 20px; }
}

/* ==========================================================================
   Benefits section — "Why KnownWaters?"
   A deliberate change of register from the preceding product-walkthrough
   sections: full-bleed navy, left-aligned, answering why a yacht should
   carry this rather than what any one screen does. Reuses the same
   off-white-card-on-navy shadow language already established by the
   Flow section, so it reads as a KnownWaters section, not a new system.
   ========================================================================== */
.benefits {
  position: relative;
  overflow: hidden;
  background: var(--kw-navy);
  padding: 88px 0 72px;
}

.benefits__heading {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.benefits__heading.is-visible { opacity: 1; transform: translateY(0); }

.benefits__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.benefits__title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kw-off-white);
  max-width: 540px;
  margin-bottom: 18px;
}
.benefits__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--kw-off-white);
  opacity: 0.72;
  white-space: nowrap;
}

.benefits__columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

.benefits__group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-off-white);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.benefits__group-label.is-visible { opacity: 1; transform: translateY(0); }
.benefits__group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--kw-cyan);
}
.benefits__group-icon svg { width: 100%; height: 100%; }

/* ---- Cards: off-white on navy, reusing Flow's shadow language (a soft
   cyan-tinted ring plus a dark contact shadow) rather than the plain
   --kw-shadow-card used on the off-white sections, which would read as
   almost invisible against navy. ---- */
.benefit-card {
  background: var(--kw-off-white);
  border-radius: 16px;
  padding: 26px 24px;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(14, 165, 196, 0.08), 0 14px 32px rgba(2, 8, 15, 0.24);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.benefit-card.is-visible { opacity: 1; transform: translateY(0); }

.benefit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--kw-cyan-bg);
  flex-shrink: 0;
  margin-bottom: 16px;
}
.benefit-card__icon svg { width: 20px; height: 20px; }

.benefit-card__title {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kw-navy);
  margin-bottom: 12px;
  padding-bottom: 12px;
}
.benefit-card__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--kw-cyan);
}
.benefit-card__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kw-slate);
}

/* ---- Main Day to day benefit: icon sits beside the body, not above it -
   the one card in the section built at a different scale. ---- */
.benefit-card--main {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  margin-bottom: 20px;
}
.benefit-card__icon--lg {
  width: 84px;
  height: 84px;
  margin-bottom: 0;
}
.benefit-card__icon--lg svg { width: 36px; height: 36px; }
.benefit-card--main .benefit-card__title { font-size: 23px; }
.benefit-card--main .benefit-card__text { max-width: 420px; }

.benefits__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.benefits__row .benefit-card:nth-child(2) { transition-delay: 0.08s; }
.benefits__row .benefit-card:nth-child(3) { transition-delay: 0.16s; }

.benefits__group--private {
  display: flex;
  flex-direction: column;
}
.benefit-card--stacked { flex: 1; }
.benefit-card--stacked + .benefit-card--stacked { margin-top: 20px; }
.benefits__group--private .benefit-card:nth-child(3) { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .benefits__heading,
  .benefits__group-label,
  .benefit-card {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Benefits section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .benefits { padding: 72px 0 60px; }
  .benefits__title { font-size: 40px; max-width: 480px; }
  .benefits__intro { white-space: normal; max-width: 460px; }
  .benefits__heading { margin-bottom: 48px; }

  .benefits__columns { gap: 28px; }

  .benefit-card--main { flex-direction: column; align-items: flex-start; gap: 16px; }
  .benefit-card__icon--lg { width: 64px; height: 64px; }
  .benefit-card__icon--lg svg { width: 28px; height: 28px; }

  /* Three-across only really works with the extra room desktop has -
     here it becomes two plus one full-width, rather than three
     increasingly cramped columns. */
  .benefits__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits__row .benefit-card:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .benefits__columns { grid-template-columns: 1fr; }
  .benefits__group--private { margin-top: 48px; }
  .benefit-card--stacked { flex: none; }
}

@media (max-width: 680px) {
  .benefits { padding: 56px 0 48px; }
  .benefits__title { font-size: 30px; max-width: none; }
  .benefits__intro { font-size: 15.5px; }
  .benefits__heading { margin-bottom: 40px; }

  .benefits__row { grid-template-columns: 1fr; gap: 16px; }
  .benefits__row .benefit-card:nth-child(3) { grid-column: 1; }

  .benefit-card { padding: 22px 20px; }
  .benefit-card--main { padding: 26px 22px; }
  .benefit-card__title { font-size: 17px; }
  .benefit-card--main .benefit-card__title { font-size: 20px; }

  .benefits__group--private { margin-top: 40px; }
  .benefit-card--stacked + .benefit-card--stacked { margin-top: 16px; }
}

/* ==========================================================================
   Credibility section — "Built by crew, for crew"
   A short, calm editorial beat after the dark Benefits section: no
   product UI, no imagery. Left is the authenticity statement; right is
   three plain proof lines (no cards, no icon badges) separated by thin
   dividers with a small cyan marker, reading as quiet supporting
   evidence rather than another feature list.
   ========================================================================== */
.credibility {
  padding: 48px 0 96px;
  background: var(--kw-off-white);
}

.credibility__grid {
  display: grid;
  /* Fixed content-width left track (not a fluid fr-ratio) so the right
     column sits close behind the actual text instead of leaving a gap
     sized to an arbitrary fraction of the container. */
  grid-template-columns: minmax(0, 760px) 1fr;
  gap: 40px;
  align-items: center;
}

.credibility__content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.credibility__content.is-visible { opacity: 1; transform: translateY(0); }

.credibility__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.credibility__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 20px;
}
.credibility__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--kw-slate);
  max-width: 720px;
}

/* A grid item stretches to fill its whole track by default - override
   that so this shrinks to its own content width and sits at the right
   of the track, rather than spreading its text all the way out to the
   container's true right edge. The dividers (full-width inside this
   box) end up exactly as wide as the widest line above/below them as a
   result, instead of needing a separate width rule of their own. */
.credibility__proof {
  display: flex;
  flex-direction: column;
  justify-self: end;
  width: fit-content;
  margin-right: 90px;
}

.credibility__proof-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px 0;
  text-align: right;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.credibility__proof-item.is-visible { opacity: 1; transform: translateY(0); }
.credibility__proof-item:nth-child(3) { transition-delay: 0.1s; }
.credibility__proof-item:nth-child(5) { transition-delay: 0.2s; }

.credibility__proof-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--kw-cyan);
}
.credibility__proof-icon svg { width: 100%; height: 100%; }

.credibility__proof-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--kw-navy);
}

.credibility__divider {
  height: 1px;
  background: var(--kw-border);
}

@media (prefers-reduced-motion: reduce) {
  .credibility__content,
  .credibility__proof-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Credibility section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .credibility { padding: 40px 0 80px; }
  .credibility__title { font-size: 32px; }
  .credibility__grid { gap: 40px; }
}

@media (max-width: 900px) {
  .credibility__grid { grid-template-columns: 1fr; gap: 48px; }
  .credibility__title, .credibility__body { max-width: none; }
  .credibility__proof { justify-self: stretch; width: auto; margin-right: 0; }

  /* Right-aligning only makes sense set against the left column - once
     everything stacks to one full-width column, read it like a normal
     left-aligned list instead. */
  .credibility__proof-item { justify-content: flex-start; text-align: left; }
}

@media (max-width: 680px) {
  .credibility { padding: 32px 0 56px; }
  .credibility__title { font-size: 26px; }
  .credibility__body { font-size: 15.5px; }
  .credibility__grid { gap: 36px; }

  .credibility__proof-item { padding: 14px 0; gap: 14px; }
  .credibility__proof-icon { width: 22px; height: 22px; }
  .credibility__proof-text { font-size: 15px; }
}

/* ==========================================================================
   Security & Privacy
   Reassurance beat right after the Pilot CTA - deliberately back on the
   light background (another navy section here would feel noisy this
   late in the page) and kept to open editorial columns with thin
   dividers, not cards, so it reads as calm fact rather than a pitch.
   ========================================================================== */
.security {
  padding: 88px 0 64px;
  background: var(--kw-off-white);
}

.security__heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.security__heading.is-visible { opacity: 1; transform: translateY(0); }

.security__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 16px;
}
.security__title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
}
.security__intro {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--kw-slate);
}

.security__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 40px;
}
.security__point {
  text-align: center;
  padding: 0 28px;
  border-left: 1px solid var(--kw-border);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.security__point:first-child { border-left: none; padding-left: 0; }
.security__point.is-visible { opacity: 1; transform: translateY(0); }
.security__grid .security__point:nth-child(2) { transition-delay: 0.08s; }
.security__grid .security__point:nth-child(3) { transition-delay: 0.16s; }
.security__grid .security__point:nth-child(4) { transition-delay: 0.24s; }

.security__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
}
.security__icon svg { width: 100%; height: 100%; }

.security__point-title { font-size: 16px; font-weight: 700; color: var(--kw-navy); margin-bottom: 6px; }
.security__point-text { font-size: 13.5px; line-height: 1.55; color: var(--kw-slate); }

/* ==========================================================================
   FAQ
   Accordion rows (not cards) - independent toggles, since this is the
   first accordion pattern on the site and multiple-open is the more
   forgiving default for a "scan several answers" FAQ context.
   ========================================================================== */
.faq {
  padding: 80px 0;
  background: var(--kw-off-white);
  border-top: 1px solid var(--kw-border);
}

.faq__heading {
  text-align: center;
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.faq__heading.is-visible { opacity: 1; transform: translateY(0); }

.faq__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 14px;
}
.faq__title { font-size: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--kw-navy); }

.faq__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  max-width: 1100px;
  margin: 0 auto;
}
.faq__column { display: flex; flex-direction: column; }

.faq__item {
  border-bottom: 1px solid var(--kw-border);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.faq__item.is-visible { opacity: 1; transform: translateY(0); }
.faq__column .faq__item:nth-child(2) { transition-delay: 0.06s; }
.faq__column .faq__item:nth-child(3) { transition-delay: 0.12s; }
.faq__column .faq__item:nth-child(4) { transition-delay: 0.18s; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--kw-navy);
}

.faq__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--kw-cyan);
  border-radius: 1px;
  transition: transform 0.25s var(--kw-ease);
}
.faq__icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%) rotate(0deg); }
.faq__item.is-open .faq__icon::after { transform: translateX(-50%) rotate(90deg); }

/* Height animation via the grid-template-rows 0fr -> 1fr trick - no JS
   height measurement needed, and it degrades to an instant snap under
   reduced-motion (see below) rather than needing a separate code path. */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--kw-ease);
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer-inner p {
  max-width: 440px;
  padding-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kw-slate);
}

/* ==========================================================================
   Final CTA
   The last conversion opportunity before the footer - a subtle tonal
   panel on the same light background (not a colour change), no pins,
   no scarcity line.
   ========================================================================== */
.final-cta {
  padding: 32px 0 100px;
  background: var(--kw-off-white);
}

.final-cta__panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 40px;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-lg);
  padding: 56px 64px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.final-cta__panel.is-visible { opacity: 1; transform: translateY(0); }

.final-cta__content { position: relative; z-index: 1; }
.final-cta__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 14px;
}
.final-cta__title-accent { color: var(--kw-cyan); }
.final-cta__copy { font-size: 16px; line-height: 1.6; color: var(--kw-slate); max-width: 420px; }

.final-cta__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.final-cta__actions .btn { justify-content: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--kw-off-white);
  border-top: 1px solid var(--kw-border);
  padding-top: 64px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.site-footer__brand img { display: block; margin-bottom: 14px; }
.site-footer__tagline { font-size: 14px; color: var(--kw-slate); margin-bottom: 18px; }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--kw-border);
  color: var(--kw-slate);
  transition: color 0.15s var(--kw-ease), border-color 0.15s var(--kw-ease);
}
.site-footer__social-link:hover { color: var(--kw-cyan); border-color: var(--kw-cyan); }

.site-footer__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-navy);
  margin-bottom: 16px;
}
.site-footer__list { display: flex; flex-direction: column; gap: 11px; }
.site-footer__list a { font-size: 14.5px; color: var(--kw-slate); }
.site-footer__list a:hover { color: var(--kw-cyan); }

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--kw-cyan);
}
.site-footer__cta:hover { text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--kw-border);
  font-size: 13px;
  color: var(--kw-muted);
}
.site-footer__bottom a { color: var(--kw-muted); }
.site-footer__bottom a:hover { color: var(--kw-cyan); }
.site-footer__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--kw-muted); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .security__heading, .security__point,
  .faq__heading, .faq__item,
  .final-cta__panel {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .faq__answer, .faq__icon::after { transition: none !important; }
}

/* ==========================================================================
   Security / FAQ / Final CTA / Footer — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .security__title { font-size: 32px; }
  .faq__title { font-size: 30px; }
  .final-cta__panel { padding: 48px; }
  .final-cta__title { font-size: 28px; }
}

@media (max-width: 900px) {
  .security__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .security__point { border-left: 1px solid var(--kw-border); padding: 0 20px; }
  .security__point:nth-child(odd) { border-left: none; padding-left: 0; }

  .faq__columns { gap: 0 40px; }

  .final-cta__panel { grid-template-columns: 1fr; text-align: left; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .security { padding: 56px 0 40px; }
  .security__title { font-size: 26px; }
  .security__grid { grid-template-columns: 1fr; gap: 28px; }
  .security__point { border-left: none !important; padding: 0 !important; }
  .security__point + .security__point { border-top: 1px solid var(--kw-border); padding-top: 24px !important; }

  .faq { padding: 48px 0; }
  .faq__title { font-size: 25px; }
  .faq__columns { grid-template-columns: 1fr; gap: 0; }
  .faq__question { font-size: 15px; padding: 18px 0; }

  .final-cta { padding: 16px 0 64px; }
  .final-cta__panel { padding: 32px 24px; }
  .final-cta__title { font-size: 24px; }

  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__bottom { flex-wrap: wrap; }
}

/* ==========================================================================
   Pilot section
   The main conversion section for the current launch: a selective,
   high-touch founding-yacht programme (3 months free in exchange for
   feedback), not a generic self-serve trial. Full-bleed navy, no outer
   card/border around the section itself. Muted text on this navy
   background reuses the off-white-at-reduced-opacity technique already
   established on the Flow section, rather than --kw-slate (which is
   tuned for off-white backgrounds and would be unreadable here).
   ========================================================================== */
.pilot {
  background: var(--kw-navy);
  padding: 100px 0 110px;
}

.pilot__top {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 64px;
  margin-bottom: 88px;
}

.pilot__intro {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.pilot__intro.is-visible { opacity: 1; transform: translateY(0); }

.pilot__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.pilot__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kw-off-white);
  margin-bottom: 20px;
}
.pilot__copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--kw-off-white);
  opacity: 0.75;
  max-width: 560px;
  margin-bottom: 24px;
}

.pilot__offer {
  border: 1px solid rgba(14, 165, 196, 0.35);
  background: rgba(14, 165, 196, 0.06);
  border-radius: var(--kw-radius-md);
  padding: 16px 20px;
  max-width: 560px;
  margin-bottom: 28px;
}
.pilot__offer p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kw-off-white);
  opacity: 0.85;
}
.pilot__offer-strong { color: var(--kw-cyan); font-weight: 700; opacity: 1; }

.pilot__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
/* Scoped so this section's primary CTA matches the mockup's navy-on-cyan
   treatment without changing the shared .btn--primary used elsewhere
   (e.g. the Hero, which keeps its white text on cyan). */
.pilot .btn--primary { color: var(--kw-navy); }

/* ---- Pilot at a glance ---- */
.pilot__glance-heading {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.pilot__glance-heading.is-visible { opacity: 1; transform: translateY(0); }

.pilot__glance-list { display: flex; flex-direction: column; }

.pilot__glance-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.pilot__glance-item.is-visible { opacity: 1; transform: translateY(0); }
.pilot__glance-list .pilot__glance-item:nth-child(3) { transition-delay: 0.08s; }
.pilot__glance-list .pilot__glance-item:nth-child(5) { transition-delay: 0.16s; }
.pilot__glance-list .pilot__glance-item:nth-child(7) { transition-delay: 0.24s; }

.pilot__glance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pilot__glance-icon svg { width: 100%; height: 100%; }

.pilot__glance-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--kw-off-white);
  margin-bottom: 3px;
}
.pilot__glance-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--kw-off-white);
  opacity: 0.65;
}

.pilot__glance-divider { height: 1px; background: rgba(246, 244, 239, 0.14); }

/* ---- How the pilot works ---- */
.pilot__how-heading {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--kw-ease), transform 0.5s var(--kw-ease);
}
.pilot__how-heading.is-visible { opacity: 1; transform: translateY(0); }

.pilot__steps {
  display: flex;
  align-items: stretch;
}

.pilot__step-divider {
  flex: 0 0 1px;
  background: rgba(246, 244, 239, 0.14);
  margin: 0 40px;
}

.pilot__step {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--kw-ease), transform 0.55s var(--kw-ease);
}
.pilot__step.is-visible { opacity: 1; transform: translateY(0); }
.pilot__steps .pilot__step:nth-of-type(3) { transition-delay: 0.1s; }
.pilot__steps .pilot__step:nth-of-type(5) { transition-delay: 0.2s; }

.pilot__step-number {
  grid-row: 1;
  grid-column: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--kw-cyan);
  color: var(--kw-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.pilot__step-title {
  grid-row: 1;
  grid-column: 2;
  font-size: 19px;
  font-weight: 700;
  color: var(--kw-off-white);
}
.pilot__step-text {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kw-off-white);
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .pilot__intro,
  .pilot__glance-heading,
  .pilot__glance-item,
  .pilot__how-heading,
  .pilot__step {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Pilot section — Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .pilot { padding: 80px 0 88px; }
  .pilot__title { font-size: 38px; }
  .pilot__top { gap: 44px; margin-bottom: 72px; }
  .pilot__step-divider { margin: 0 24px; }
}

@media (max-width: 900px) {
  .pilot__top { grid-template-columns: 1fr; gap: 56px; }
  .pilot__copy, .pilot__offer { max-width: none; }
}

@media (max-width: 680px) {
  .pilot { padding: 56px 0 64px; }
  .pilot__title { font-size: 30px; }
  .pilot__copy { font-size: 15.5px; }
  .pilot__top { margin-bottom: 56px; }

  .pilot__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .pilot__actions .btn { justify-content: center; }

  .pilot__how-heading { margin-bottom: 32px; }

  /* Vertical stack with a horizontal rule between steps, mirroring how
     the Grow timeline's horizontal line becomes a vertical one in
     reverse - here the divider changes axis instead of disappearing. */
  .pilot__steps { flex-direction: column; }
  .pilot__step-divider { flex: none; width: auto; height: 1px; margin: 28px 0; }
  .pilot__step-title { font-size: 18px; }
}

/* ==========================================================================
   Apply for a pilot — modal
   Shared by every "Apply for a pilot" CTA on the site. Locking body
   scroll while open is handled by toggling .modal-open on <html>/<body>
   from script.js, not by anything in here.
   ========================================================================== */
html.modal-open, body.modal-open { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 31, 51, 0.55);
  opacity: 0;
  transition: opacity 0.25s var(--kw-ease);
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.is-open { opacity: 1; }

.modal {
  width: 100%;
  max-width: 740px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--kw-off-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-lg);
  box-shadow: var(--kw-shadow-card-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.25s var(--kw-ease), transform 0.25s var(--kw-ease);
}
.modal-overlay.is-open .modal { opacity: 1; transform: translateY(0) scale(1); }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--kw-border);
}
.modal__logo { height: 22px; width: auto; }
.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background-color 0.15s var(--kw-ease);
}
.modal__close:hover { background: rgba(11, 31, 51, 0.06); }

.modal__body { padding: 28px 32px 32px; }
.modal__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 10px;
}
.modal__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
  margin-bottom: 8px;
}
.modal__intro { font-size: 14.5px; line-height: 1.55; color: var(--kw-slate); margin-bottom: 28px; }

/* ---- Form ---- */
.modal-form { display: flex; flex-direction: column; gap: 18px; }
.modal-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.modal-form__group { display: flex; flex-direction: column; gap: 6px; }
.modal-form__label { font-size: 13.5px; font-weight: 600; color: var(--kw-navy); }
.modal-form__required { color: var(--kw-error); font-weight: 700; }

.modal-form__input {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--kw-navy);
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-sm);
  padding: 11px 14px;
  transition: border-color 0.15s var(--kw-ease), box-shadow 0.15s var(--kw-ease);
}
.modal-form__input::placeholder { color: var(--kw-muted); }
.modal-form__input:focus {
  outline: none;
  border-color: var(--kw-cyan);
  box-shadow: 0 0 0 3px rgba(14, 165, 196, 0.15);
}
.modal-form__input.is-invalid { border-color: var(--kw-error); }
.modal-form__input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 39, 30, 0.12); }

.modal-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233A4B5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.modal-form__select:invalid { color: var(--kw-muted); }

.modal-form__textarea { font-family: inherit; resize: vertical; min-height: 88px; }

.modal-form__error {
  font-size: 12.5px;
  color: var(--kw-error);
  margin: 0;
}
.modal-form__error:empty { display: none; }

.modal-form__privacy {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kw-slate);
  margin: 4px 0 0;
}
.modal-form__privacy a { color: var(--kw-cyan); }
.modal-form__privacy a:hover { text-decoration: underline; }

.modal-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--kw-border);
}
.modal-form__actions .btn { justify-content: center; }
.modal-form__actions--end { justify-content: flex-end; }

/* ---- Success state ---- */
.modal__success-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal { transition: none !important; }
}

@media (max-width: 900px) {
  .modal-overlay { padding: 16px; }
  .modal__header { padding: 20px 24px; }
  .modal__body { padding: 24px 24px 28px; }
}

@media (max-width: 680px) {
  .modal-overlay { padding: 10px; }
  .modal { max-height: 94vh; border-radius: var(--kw-radius-md); }
  .modal__title { font-size: 23px; }
  .modal-form__row { grid-template-columns: 1fr; gap: 18px; }
  .modal-form__actions { flex-direction: column-reverse; align-items: stretch; padding-top: 18px; }
}

/* ==========================================================================
   Contact page (/contact)
   The form itself reuses .modal-form and its field classes wholesale
   (labels, inputs, selects, textarea, errors, required marks, privacy
   note) rather than duplicating that styling - it's the same field
   language as the pilot modal, just laid out in a static page panel
   instead of a dialog.
   ========================================================================== */
.contact-hero {
  padding: 88px 0 96px;
  background: var(--kw-off-white);
}

.contact-hero__intro {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.contact-hero__intro.is-visible { opacity: 1; transform: translateY(0); }

.contact-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 16px;
}
.contact-hero__title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 16px;
}
.contact-hero__copy { font-size: 16.5px; line-height: 1.6; color: var(--kw-slate); }

.contact-hero__divider {
  max-width: 640px;
  height: 1px;
  margin: 0 auto 32px;
  background: var(--kw-border);
  opacity: 0;
  transition: opacity 0.6s var(--kw-ease);
}
.contact-hero__divider.is-visible { opacity: 1; }

.contact-hero__pilot-note {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kw-slate);
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.contact-hero__pilot-note.is-visible { opacity: 1; transform: translateY(0); }
.contact-hero__pilot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--kw-cyan);
  cursor: pointer;
}
.contact-hero__pilot-link:hover { text-decoration: underline; }

/* No reveal fade-in - the form starts close enough to the fold that
   its initial visible fraction sits right at the IntersectionObserver's
   0.2 threshold, and on common viewport heights it never crosses it,
   leaving a form people need to use nearly invisible until they scroll.
   A form is functional UI, not decorative copy - it should never be
   gated behind a scroll-triggered animation. */
.contact-panel {
  max-width: 720px;
  margin: 0 auto 40px;
  background: var(--kw-white);
  border: 1px solid var(--kw-border);
  border-radius: var(--kw-radius-md);
  box-shadow: var(--kw-shadow-card);
  padding: 40px;
}

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form__privacy { text-align: center; }

.contact-success { text-align: center; padding: 8px 0; }
.contact-success .modal__title { margin-bottom: 10px; }
.contact-success .modal__intro { margin-bottom: 24px; }

.contact-hero__email-note {
  text-align: center;
  font-size: 14.5px;
  color: var(--kw-slate);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.contact-hero__email-note.is-visible { opacity: 1; transform: translateY(0); }
.contact-hero__email-link { color: var(--kw-cyan); font-weight: 600; }
.contact-hero__email-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .contact-hero__intro, .contact-hero__divider, .contact-hero__pilot-note,
  .contact-hero__email-note {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .contact-hero { padding: 72px 0 80px; }
  .contact-hero__title { font-size: 34px; }
  .contact-panel { padding: 32px; }
}

@media (max-width: 680px) {
  .contact-hero { padding: 56px 0 64px; }
  .contact-hero__title { font-size: 28px; }
  .contact-hero__copy { font-size: 15.5px; }
  .contact-panel { padding: 24px 20px 28px; border-radius: var(--kw-radius-md); }
}

/* ==========================================================================
   About page (/about)
   Reuses existing tokens/typography scale throughout rather than
   inventing new ones: eyebrow/title sizes match Credibility's off-white
   scale and Benefits' navy scale exactly; "What We Built" reuses
   .benefit-card wholesale (see about/index.html) instead of a parallel
   card system, since the brief calls for it to visually relate to the
   homepage's Benefits section.
   ========================================================================== */

/* ---- Hero: full navy, left-aligned - sized off .benefits__title (the
   closest existing full-bleed-navy, left-aligned precedent) rather than
   the homepage's own two-column Hero, which doesn't apply here. ---- */
.about-hero {
  background: var(--kw-navy);
  padding: 108px 0 84px;
}
.about-hero__inner {
  max-width: 640px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.about-hero__inner.is-visible { opacity: 1; transform: translateY(0); }
.about-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.about-hero__title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kw-off-white);
  margin-bottom: 20px;
}
.about-hero__copy {
  font-size: 18px;
  line-height: 1.65;
  color: var(--kw-off-white);
  opacity: 0.78;
}

/* ---- Why it exists: off-white, editorial two-column - no cards. ---- */
.about-why {
  background: var(--kw-off-white);
  padding: 96px 0;
}
.about-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: 64px;
  align-items: start;
}
.about-why__heading {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.about-why__heading.is-visible { opacity: 1; transform: translateY(0); }
.about-why__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.about-why__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
}
.about-why__accent {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--kw-cyan);
  margin-top: 24px;
}
.about-why__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--kw-slate);
  /* No max-width here - the grid column (.about-why__grid's 1fr track)
     is already the real constraint. A cap on top of that was making
     lines wrap well before the column's actual available width. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.08s;
}
.about-why__copy.is-visible { opacity: 1; transform: translateY(0); }

/* ---- What we built: full navy, cards reuse .benefit-card as-is. ---- */
.about-built {
  background: var(--kw-navy);
  padding: 88px 0;
}
.about-built__heading {
  max-width: 620px;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.about-built__heading.is-visible { opacity: 1; transform: translateY(0); }
.about-built__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.about-built__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--kw-off-white);
}
.about-built__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.about-built__cards .benefit-card:nth-child(2) { transition-delay: 0.08s; }
.about-built__cards .benefit-card:nth-child(3) { transition-delay: 0.16s; }

/* ---- Founder: off-white, image left / copy right - large rounded
   rectangle image, not the old About page's circular photo. ---- */
.about-founder {
  background: var(--kw-off-white);
  padding: 96px 0;
}
.about-founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 56px;
  align-items: center;
}
/* Capped independently of the grid column (not just left to fill it) so
   it stays this size even once the grid collapses to a single column
   at narrower widths - otherwise it would stretch back to full
   container width the moment the columns stack. */
.about-founder__image {
  max-width: 300px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.about-founder__image.is-visible { opacity: 1; transform: translateY(0); }
.about-founder__image img {
  width: 100%;
  /* Without this, the HTML width/height attributes (there for the
     initial-load intrinsic ratio, to avoid layout shift before CSS
     applies) win over aspect-ratio once CSS does apply, pinning the
     box at a literal 900px tall regardless of width. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--kw-radius-lg);
  box-shadow: var(--kw-shadow-card);
}
.about-founder__content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
  transition-delay: 0.08s;
}
.about-founder__content.is-visible { opacity: 1; transform: translateY(0); }
.about-founder__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 18px;
}
.about-founder__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--kw-navy);
  margin-bottom: 20px;
}
.about-founder__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--kw-slate);
  margin-bottom: 16px;
}
.about-founder__signature { margin-top: 24px; }
.about-founder__name { font-size: 16px; font-weight: 700; color: var(--kw-navy); }
.about-founder__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--kw-cyan);
  margin-top: 2px;
}
/* Deliberately quiet: the task calls for this line not to read as a
   prominent legal notice - small, muted, no border/box treatment. */
.about-founder__legal {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kw-muted);
  margin-top: 28px;
}

/* ---- Final CTA: full navy, centered - distinct from the homepage's
   off-white/panel final CTA per this page's own brief. ---- */
.about-cta {
  background: var(--kw-navy);
  padding: 100px 0;
  text-align: center;
}
.about-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.about-cta__inner.is-visible { opacity: 1; transform: translateY(0); }
.about-cta__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--kw-off-white);
  margin-bottom: 14px;
}
.about-cta__copy {
  font-size: 17px;
  color: var(--kw-off-white);
  opacity: 0.75;
  margin-bottom: 32px;
}
.about-cta__actions { display: flex; justify-content: center; }
/* Same navy-on-cyan primary button treatment the Pilot section already
   uses on navy - keeps every navy-background CTA on the site consistent. */
.about-cta .btn--primary { color: var(--kw-navy); }
.about-cta__divider {
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(246, 244, 239, 0.24);
  margin: 40px auto 20px;
}
.about-cta__tagline {
  font-size: 13.5px;
  color: var(--kw-off-white);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__inner,
  .about-why__heading, .about-why__copy,
  .about-built__heading, .about-built__cards .benefit-card,
  .about-founder__image, .about-founder__content,
  .about-cta__inner {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   About page — Responsive
   Same three-tier breakpoints (1200/900/680) used across the rest of
   the site.
   ========================================================================== */
@media (max-width: 1200px) {
  .about-hero__title { font-size: 44px; }
  .about-why__grid { grid-template-columns: 1fr; gap: 32px; }
  .about-why__title { max-width: 640px; }
  .about-founder__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .about-hero { padding: 88px 0 64px; }
  .about-built__cards { grid-template-columns: 1fr; gap: 20px; }
  .about-built__title { font-size: 34px; }
}

@media (max-width: 680px) {
  .about-hero { padding: 72px 0 56px; }
  .about-hero__title { font-size: 32px; }
  .about-hero__copy { font-size: 16px; }

  .about-why { padding: 64px 0; }
  .about-why__title { font-size: 28px; }

  .about-built { padding: 64px 0; }
  .about-built__heading { margin-bottom: 36px; }
  .about-built__title { font-size: 28px; }

  .about-founder { padding: 64px 0; }
  .about-founder__image { max-width: 200px; }
  .about-founder__title { font-size: 26px; }

  .about-cta { padding: 72px 0; }
  .about-cta__title { font-size: 26px; }
  .about-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Legal pages (Privacy Policy / Terms of Use)
   Same navy hero convention as the About page, scaled down; body is a
   sticky contents nav + prose grid rather than the marketing-page
   section patterns used elsewhere, since the content here is a single
   long, numbered document rather than distinct sections.
   ========================================================================== */
.legal-hero {
  background: var(--kw-navy);
  padding: 88px 0 56px;
}
.legal-hero__inner {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--kw-ease), transform 0.6s var(--kw-ease);
}
.legal-hero__inner.is-visible { opacity: 1; transform: translateY(0); }
.legal-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kw-cyan);
  margin-bottom: 14px;
}
.legal-hero__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kw-off-white);
  margin-bottom: 10px;
}
.legal-hero__meta {
  font-size: 14px;
  color: var(--kw-off-white);
  opacity: 0.6;
}

.legal-body {
  background: var(--kw-off-white);
  padding: 72px 0 120px;
}
.legal-grid {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr - the mobile TOC below is a
     non-wrapping horizontal-scroll pill row, whose min-content width
     would otherwise force this track (and the page) to overflow. */
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* ---- Contents nav ---- */
.legal-toc {
  position: sticky;
  top: 130px;
  /* Terms runs to 29 sections - taller than most viewports. Without
     this, once stuck the list just gets clipped at the viewport edge
     with no way to reach the remaining items; this lets it scroll
     internally instead. */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.legal-toc__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kw-muted);
  margin-bottom: 16px;
}
.legal-toc__list {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--kw-border);
}
.legal-toc__list a {
  display: block;
  padding: 7px 0 7px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--kw-slate);
  transition: color 0.15s var(--kw-ease), border-color 0.15s var(--kw-ease);
}
.legal-toc__list a:hover { color: var(--kw-navy); border-left-color: var(--kw-cyan); }

/* ---- Prose content ---- */
/* No data-reveal fade-in here, unlike other sections on the site - this
   wraps the entire page's prose (thousands of px tall), and the reveal
   observer's 20% visibility threshold can never be satisfied by an
   element that much taller than the viewport, so it would stay
   permanently invisible instead of ever revealing. */
.legal-content section {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--kw-border);
}
.legal-content section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-content h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kw-navy);
  margin-bottom: 14px;
  scroll-margin-top: 130px;
}
.legal-content h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kw-navy);
  margin: 22px 0 10px;
}
.legal-content h3:first-of-type { margin-top: 0; }
.legal-content p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--kw-slate);
  margin-bottom: 14px;
}
.legal-content p:last-child { margin-bottom: 0; }
.legal-content ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}
.legal-content ul:last-child { margin-bottom: 0; }
.legal-content li {
  position: relative;
  padding-left: 18px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--kw-slate);
}
.legal-content li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kw-cyan);
}
.legal-content a { color: var(--kw-cyan); text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { color: var(--kw-navy); font-weight: 600; }

/* Subprocessor "Active / not yet in use" badges - reuses the same
   green/amber tokens the Review Queue's "watch out for" cards use, so
   status colour language stays consistent sitewide. */
.legal-status {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.legal-status--active { background: var(--kw-green-bg); color: var(--kw-green); }
.legal-status--pending { background: var(--kw-amber-bg); color: var(--kw-amber-text); }

@media (prefers-reduced-motion: reduce) {
  .legal-hero__inner { transition: none !important; opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1200px) {
  .legal-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-toc {
    position: static;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--kw-border);
  }
  .legal-toc__heading { display: none; }
  .legal-toc__list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: none;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .legal-toc__list a {
    flex: 0 0 auto;
    padding: 6px 12px;
    margin-left: 0;
    border: 1px solid var(--kw-border);
    border-radius: 999px;
    white-space: nowrap;
  }
  .legal-toc__list a:hover { border-color: var(--kw-cyan); }
}

@media (max-width: 680px) {
  .legal-hero { padding: 72px 0 44px; }
  .legal-hero__title { font-size: 30px; }
  .legal-body { padding: 56px 0 88px; }
  .legal-content h2 { font-size: 20px; }
  .legal-content p, .legal-content li { font-size: 15px; }
}