/* MyBoatMate website: one stylesheet, no external resources.
   Palette: docs/product-spec.md "Visual style (approved 2026-09-25)", the same tokens as the app. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Canvas, cards, text */
  --bg: #f4f8fc;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-muted: #eef4fa;
  --text: #0b2540;
  --muted: #5b7089;
  --border: #dce6f0;

  /* Ocean blue. --primary for icons, borders and markers; --primary-strong for blue text (links, labels). */
  --primary: #0a84ff;
  --primary-strong: #0a6bd6;
  --primary-soft: #eaf3ff;
  --link: var(--primary-strong);
  --link-hover: #0b2540;

  /* Main action (coral): label is navy, because white on coral is too low contrast. */
  --action: #ff6b4a;
  --action-hover: #f2552f;
  --on-action: #0b2540;

  --focus: #0a6bd6;
  --focus-on-hero: #ffd166;
  --shadow: 0 1px 2px rgb(11 37 64 / 5%), 0 8px 24px rgb(10 107 214 / 8%);

  /* Hero band (ocean blue) */
  --hero: #0a6bd6;
  --hero-bg: var(--hero);
  --hero-text: #ffffff;
  --hero-muted: #f0f6ff;
  --wave-back: #2a84ea;
  --wave-mid: #6ab3fa;
  /* The logo's boat (brand/logo-glyph.svg): white with light-blue windows */
  --boat: #ffffff;
  --boat-window: #8cc4ff;

  /* Status chips */
  --amber-soft: #fff1d6;
  --amber-ink: #8a5a00;

  /* Section colours (tinted square + strong icon), as in the app */
  --sec-maintenance-soft: #ffede3;
  --sec-maintenance-icon: #d24e08;
  --sec-journeys-soft: #dff5f7;
  --sec-journeys-icon: #0b7f8a;
  --sec-checklists-soft: #e0f6e8;
  --sec-checklists-icon: #0d8040;
  --sec-documents-soft: #f0e9fe;
  --sec-documents-icon: #7c3aed;
  --sec-engines-soft: #e3effd;
  --sec-engines-icon: #0a6bd6;
  --sec-service-soft: #fff3d1;
  --sec-service-icon: #946a00;

  --icon-bg: var(--primary-soft);
  --icon-fg: var(--primary-strong);

  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Rich mid-blue, never near-black */
    --bg: #0f1e33;
    --bg-alt: #172a44;
    --surface: #172a44;
    --surface-muted: #1f3656;
    --text: #f2f7ff;
    --muted: #92a8c4;
    --border: #22385a;

    --primary: #3d9bff;
    --primary-strong: #7dbbff;
    --primary-soft: #1d3f6b;
    --link-hover: #f2f7ff;

    --action: #ff7a5c;
    --action-hover: #ff6a47;

    --focus: #7dbbff;
    --shadow: 0 1px 2px rgb(4 12 26 / 30%), 0 8px 24px rgb(4 12 26 / 22%);

    --hero: #1a5fb4;
    --hero-muted: #d6e6fa;
    --wave-back: #2369c0;
    --wave-mid: #2f79d2;

    --amber-soft: #4a3a12;
    --amber-ink: #ffd166;

    --sec-maintenance-soft: #4a2a1c;
    --sec-maintenance-icon: #ff9e66;
    --sec-journeys-soft: #123f4b;
    --sec-journeys-icon: #4fd6e2;
    --sec-checklists-soft: #143f2e;
    --sec-checklists-icon: #5cd68e;
    --sec-documents-soft: #33275e;
    --sec-documents-icon: #c1a6ff;
    --sec-engines-soft: #1d3f6b;
    --sec-engines-icon: #8cc4ff;
    --sec-service-soft: #46391a;
    --sec-service-icon: #ffcb45;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

h3 {
  font-size: 1.15rem;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--action);
  color: var(--on-action);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--on-action);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 750;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand svg {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.975rem;
  font-weight: 550;
  padding: 0.25rem 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.hero :focus-visible,
.page-head :focus-visible,
.get-app :focus-visible {
  outline-color: var(--focus-on-hero);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(7rem, 15vw, 11rem);
}

@media (min-width: 52rem) {
  .hero-inner {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  background: rgb(11 37 64 / 12%);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hero-text);
  letter-spacing: 0.02em;
}

.hero h1 {
  color: var(--hero-text);
  max-width: 18ch;
}

.hero .lede {
  font-size: clamp(1.1rem, 2.3vw, 1.3rem);
  color: var(--hero-muted);
  max-width: 36rem;
}

.hero .lede strong {
  color: var(--hero-text);
  font-weight: 650;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--hero-muted);
}

/* Boats on the water along the bottom of the hero: distant boats, the back wave, the logo's cruiser, the mid wave
   over its waterline, then the front wave in the page colour. */
.hero-scene {
  --scene-h: clamp(84px, 12vw, 160px);
  --main-w: clamp(170px, 22vw, 290px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--scene-h);
  pointer-events: none;
  overflow-x: clip;
}

.hero-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-waves .wave-back {
  fill: var(--wave-back);
}

.hero-waves .wave-mid {
  fill: var(--wave-mid);
}

/* A lane is a full-width strip at the boat's waterline (--waterline: fraction of the scene height). The main boat's
   hull bottom sits just below the mid wave's troughs (42/120 of the scene up), so the wave laps over it. Static (as
   with reduced motion) the main boat sits at the left of the content column. */
.boat-lane {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: calc(var(--scene-h) * var(--waterline) - var(--boat-w) * 0.03);
}

.boat-main {
  --boat-w: var(--main-w);
  --waterline: 0.3;
}

.boat-bob {
  width: var(--boat-w);
}

.boat-main .boat-bob {
  margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

/* The logo's boat (symbol #hero-cruiser): hull and cabin in currentColor, windows in the inherited fill */
.hero-boat {
  display: block;
  width: 100%;
  height: auto;
  color: var(--boat);
  fill: var(--boat-window);
}

/* Distant boats: the same drawing, smaller, paler and nearer the horizon, behind the back wave.
   Only shown when animating. */
.boat-far {
  display: none;
}

.far-1 {
  --boat-w: calc(var(--main-w) * 0.5);
  --waterline: 0.52;
  opacity: 0.58;
}

.far-3 {
  --boat-w: calc(var(--main-w) * 0.43);
  --waterline: 0.545;
  opacity: 0.5;
}

.far-2 {
  --boat-w: calc(var(--main-w) * 0.36);
  --waterline: 0.565;
  opacity: 0.42;
}

.far-rtl .hero-boat {
  transform: scaleX(-1);
}

/* Passing boats. Each lane is the scene width plus one boat (and a little room for the roll), starting that far left
   of the scene: translateX(0) has the boat just off-screen left, translateX(100%) just off-screen right, so every
   loop restarts out of sight.
   The distant boats share a 60 s cycle (a 28-38 s pass, then off-screen), staggered so one or two are out at a time. */
@media (prefers-reduced-motion: no-preference) {
  .boat-lane {
    left: calc(-1 * var(--boat-w) - 8px);
    width: calc(100% + var(--boat-w) + 16px);
  }

  .boat-main {
    animation: hero-sail 18s linear -6s infinite;
  }

  .boat-main .boat-bob {
    margin-left: 0;
    animation: hero-bob 3.2s ease-in-out infinite alternate;
  }

  .boat-main .hero-boat {
    transform-origin: 50% 90%;
    animation: hero-roll 4.6s ease-in-out -1.7s infinite alternate;
  }

  .boat-far {
    display: block;
  }

  .boat-far .boat-bob {
    animation: hero-bob 4.4s ease-in-out -2s infinite alternate;
  }

  .far-1 {
    animation: hero-far-1 60s linear -48s infinite;
  }

  .far-2 {
    animation: hero-far-2 60s linear -28s infinite;
  }

  .far-3 {
    animation: hero-far-3 60s linear -8s infinite;
  }
}

/* Phones: the main boat and one distant boat */
@media (max-width: 40rem) {
  .boat-far.far-1,
  .boat-far.far-2 {
    display: none;
  }
}

@keyframes hero-sail {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes hero-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(var(--boat-w) * -0.012));
  }
}

@keyframes hero-roll {
  from {
    transform: rotate(-1.5deg);
  }
  to {
    transform: rotate(1.5deg);
  }
}

/* Left to right: a 28 s pass, then 32 s off-screen right */
@keyframes hero-far-1 {
  0% {
    transform: translateX(0);
  }
  46.667%,
  100% {
    transform: translateX(100%);
  }
}

/* Right to left: a 38 s pass, then off-screen left */
@keyframes hero-far-2 {
  0% {
    transform: translateX(100%);
  }
  63.333%,
  100% {
    transform: translateX(0);
  }
}

/* Right to left: a 32 s pass, then off-screen left */
@keyframes hero-far-3 {
  0% {
    transform: translateX(100%);
  }
  53.333%,
  100% {
    transform: translateX(0);
  }
}

.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(28px, 5vw, 60px);
  display: block;
  color: var(--bg);
}

/* Hero screenshot in a phone frame */
.device {
  justify-self: center;
  width: min(100%, 17rem);
  margin: 0;
  position: relative;
  z-index: 1;
}

.device .phone {
  box-shadow: 0 24px 48px rgb(5 38 84 / 38%);
}

.device figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--hero-muted);
}

/* Phone frame: dark bezel around a real app screenshot (the screenshots are the app's dark theme) */
.phone {
  padding: 0.5rem;
  border-radius: 2.25rem;
  background: #0b1a2e;
  border: 1px solid rgb(125 187 255 / 35%);
  box-shadow: 0 14px 32px rgb(11 37 64 / 22%);
}

.phone picture,
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.8rem;
}

.phone img {
  aspect-ratio: 540 / 1070;
  background: #0f1e33;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover {
    transition: none;
    transform: none;
  }
}

.btn-primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: 0 6px 16px rgb(255 107 74 / 28%);
}

.btn-primary:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

.btn-ghost {
  border-color: rgb(255 255 255 / 70%);
  color: #fff;
}

.btn-ghost:hover {
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.section-head p {
  color: var(--muted);
  font-size: 1.1rem;
}

.kicker {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--primary-strong);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--muted);
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-fg);
}

.icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Section colours, as on the app's tiles */
.icon-maintenance {
  --icon-bg: var(--sec-maintenance-soft);
  --icon-fg: var(--sec-maintenance-icon);
}

.icon-journeys {
  --icon-bg: var(--sec-journeys-soft);
  --icon-fg: var(--sec-journeys-icon);
}

.icon-checklists {
  --icon-bg: var(--sec-checklists-soft);
  --icon-fg: var(--sec-checklists-icon);
}

.icon-documents {
  --icon-bg: var(--sec-documents-soft);
  --icon-fg: var(--sec-documents-icon);
}

.icon-engines {
  --icon-bg: var(--sec-engines-soft);
  --icon-fg: var(--sec-engines-icon);
}

.icon-service {
  --icon-bg: var(--sec-service-soft);
  --icon-fg: var(--sec-service-icon);
}

/* ---------- Screenshots ---------- */
/* Phones: a swipeable strip that snaps to each screen. Wide screens: a centred grid, four across. */
.screens-scroller {
  margin-inline: calc(-1 * var(--gutter));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  border-radius: 0;
}

.screens-scroller:focus-visible {
  outline-offset: -3px;
}

.screens {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0.5rem var(--gutter) 1.5rem;
  list-style: none;
}

.screens > li {
  flex: none;
  width: min(62vw, 15rem);
  scroll-snap-align: start;
}

.screen {
  margin: 0;
}

.screen figcaption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.screen figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-size: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  .phone {
    border-color: rgb(125 187 255 / 30%);
    box-shadow: 0 14px 32px rgb(4 12 26 / 45%);
  }
}

@media (min-width: 60rem) {
  .screens-scroller {
    margin-inline: 0;
    overflow: visible;
  }

  .screens {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem 2rem;
    padding: 0;
  }

  .screens > li {
    width: calc((100% - 3 * 2rem) / 4);
    max-width: 15rem;
  }
}

/* ---------- Core loop steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4rem;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary-strong);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

@media (prefers-color-scheme: dark) {
  .steps li::before {
    background: var(--primary);
    color: #0b2540;
  }
}

.steps strong {
  display: block;
}

.steps span {
  color: var(--muted);
}

/* ---------- Get the app ---------- */
.get-app {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(1.75rem, 5vw, 3rem);
  display: grid;
  gap: 1.5rem;
  box-shadow: var(--shadow);
}

.get-app h2 {
  color: var(--hero-text);
}

.get-app p {
  color: var(--hero-muted);
  max-width: 40rem;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 13.5rem;
  min-height: 3.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  background: #0b2540;
  border: 1px solid rgb(255 255 255 / 30%);
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

.store-btn:hover {
  color: #fff;
  background: #071a30;
}

.store-btn svg {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

.store-btn .store-text {
  display: flex;
  flex-direction: column;
}

.store-btn small {
  font-size: 0.75rem;
  color: #c9d8e8;
}

.store-btn b {
  font-size: 1.1rem;
  font-weight: 650;
}

.store-btn.web {
  background: var(--action);
  color: var(--on-action);
  border-color: transparent;
}

.store-btn.web small {
  color: var(--on-action);
}

.store-btn.web:hover {
  background: var(--action-hover);
  color: var(--on-action);
}

/* ---------- Coming soon ---------- */
/* Holding page (coming-soon.html), where /app-store and /google-play lead until the store listings are live.
   The hero band with its boats and waves, everything centred.
   The header and the hero together fill at least the screen, so the footer starts below it. The content sits in
   the middle of the blue above the wave scene, with the same clear space above the pill as between the button and
   the top of the scene; on a short screen the page just flows. */
.coming-soon-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.coming-soon-screen main,
.coming-soon {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.coming-soon {
  /* The wave scene is the home page hero's, at the same size (--scene-h of .hero-scene) */
  --soon-scene-h: clamp(84px, 12vw, 160px);
  /* The least clear blue above the pill and between the button and the scene: 64px on phones, up to 96px on wide
     screens. The 8vh term keeps it at 64px on a wide but short screen (a laptop), so the whole scene still fits
     on the first screen there; on a taller screen the centring adds more than this anyway. */
  --soon-gap: clamp(4rem, min(7.5vw, 8vh), 6rem);
}

.coming-soon .hero-scene {
  --scene-h: var(--soon-scene-h);
}

.coming-soon-inner {
  position: relative;
  z-index: 1;
  margin-block: auto;
  text-align: center;
  padding-block: var(--soon-gap) calc(var(--soon-scene-h) + var(--soon-gap));
}

.coming-soon h1,
.coming-soon .lede {
  margin-inline: auto;
}

.coming-soon h1 {
  max-width: none;
  text-wrap: balance;
}

.coming-soon .store-buttons {
  justify-content: center;
  margin-top: 1.75rem;
}

/* The holding page centres its text; a store button (link or marker) keeps the home page's left-aligned label */
.coming-soon .store-btn {
  text-align: left;
}

/* Store markers: the look of the store buttons, but plain text, not links (a store the app is not in yet) */
.store-soon {
  cursor: default;
}

.store-soon:hover {
  background: #0b2540;
}

.coming-soon .hero-note {
  margin: 1.25rem 0 0;
  font-size: 1rem;
}

/* "Email us" line: a link that reads on the blue (white, underlined), as the hero's other text does */
.coming-soon-notify {
  margin: 0.75rem 0 0;
  color: var(--hero-muted);
  text-wrap: balance;
}

.coming-soon-notify a,
.coming-soon-notify a:hover {
  color: var(--hero-text);
  font-weight: 650;
}

.coming-soon-back {
  margin: 1.5rem 0 0;
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 48rem;
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq details:first-of-type {
  border-top: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-weight: 650;
  font-size: 1.075rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary-strong);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq .answer {
  padding: 0 0.25rem 1.1rem;
  color: var(--muted);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact ---------- */
.contact-card {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 48rem) {
  .contact-card {
    grid-template-columns: 1fr auto;
  }
}

.contact-card p {
  color: var(--muted);
}

.contact-email {
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 650;
  word-break: break-word;
}

.btn-outline {
  border-color: var(--link);
  color: var(--link);
}

.btn-outline:hover {
  background: var(--primary-soft);
  color: var(--link-hover);
}

/* ---------- Legal / content pages ---------- */
.page-head {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}

.page-head h1 {
  color: var(--hero-text);
  margin-bottom: 0.3em;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
}

.page-head p {
  color: var(--hero-muted);
  margin: 0;
}

.prose {
  max-width: 46rem;
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

.prose h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}

.prose h3 {
  margin-top: 1.75rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--primary);
}

.summary-box {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}

.summary-box h2 {
  margin-top: 0;
  padding-top: 0;
  font-size: 1.15rem;
}

.summary-box ul {
  margin-bottom: 0;
}

.toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.toc h2 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1rem;
}

.toc ol {
  margin: 0;
  columns: 2 16rem;
  column-gap: 2rem;
}

.toc li {
  break-inside: avoid;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface-muted);
  font-weight: 650;
}

.callout {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.callout h2,
.callout h3 {
  margin-top: 0;
  padding-top: 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

.option-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  margin: 1.5rem 0 2rem;
}

.option-grid .callout {
  margin: 0;
}

.path {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 404 ---------- */
.not-found {
  text-align: center;
  padding-block: clamp(3rem, 10vw, 6rem);
}

.not-found svg {
  width: min(100%, 18rem);
  height: auto;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

/* The logo's boat in brand blue on the light page (as the app's inverse mark), white on the dark page */
.not-found .boat {
  fill: #0a6bd6;
}

.not-found .window {
  fill: var(--boat-window);
}

@media (prefers-color-scheme: dark) {
  .not-found .boat {
    fill: var(--boat);
  }
}

.not-found p {
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding-block: 2.5rem 2rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: var(--text);
}

.site-footer a:hover {
  color: var(--link);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.footer-top .brand {
  font-size: 1.05rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal {
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-legal p {
  margin-bottom: 0.4rem;
}

/* The copyright line is two parts ("© 2026 Purple Loop Limited," and the rest): one line where it fits, and on a
   narrow screen it breaks between the parts instead of mid-phrase. */
.footer-legal span {
  display: inline-block;
}

/* Wordmark: "Mate" in the brand coral (see /brand) */
.brand .mate { color: #FF6B4A; }