/* divedivedive.io: the app's ocean, on the web.
   Colours come from the app (iOS/D3/Views/Shared/Palette.swift): the ocean background (deep
   navy when the device is in dark mode, rich teal in light mode, white text on both, as on the
   app's ocean screens), content cards that darken the water, aqua accent text, and the brand
   teal of the logo. Text colours keep WCAG AA contrast on every background they sit on, as the
   app's ContrastTests require. */

:root {
  color-scheme: dark;
  /* Ocean, dark mode (Palette.oceanDark): top, centre, bottom of the screen. */
  --ocean-top: #000d21;
  --ocean-mid: #00283c;
  --ocean-bottom: #00394e;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.85);   /* Palette.secondaryTextOpacityDark */
  --accent-text: #96ebf0;               /* Palette.accentTextDark, pale aqua */
  --warm-text: #ffc88c;                 /* Palette.warmTextDark */
  --accent-fill: #00727a;               /* Palette.accentFill, behind white labels */
  --brand-teal: #008a8f;                /* the middle "Dive" of the logo */
  --card: rgba(0, 0, 0, 0.22);          /* Palette.contentCardDarkOpacity */
  --card-edge: rgba(255, 255, 255, 0.10);
  --rule: rgba(255, 255, 255, 0.14);
  --caustic: rgba(51, 242, 242, 0.08);  /* Palette.causticCyan, within its 6–10 % */
}
@media (prefers-color-scheme: light) {
  :root {
    /* Ocean, light mode (Palette.oceanLight): lightest at the top. */
    --ocean-top: #006170;
    --ocean-mid: #005261;
    --ocean-bottom: #00404f;
    /* The logo's teal vanishes on the light (teal) ocean; the middle "Dive" goes aqua. */
    --brand-teal: #96ebf0;
  }
}
@media (prefers-contrast: more) {
  :root { --muted: #ffffff; --card: rgba(0, 0, 0, 0.32); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ocean-bottom); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--ocean-bottom);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  position: relative;
}

/* The water: a fixed gradient with slow caustic glows, behind everything. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background: linear-gradient(180deg, var(--ocean-top) 0%, var(--ocean-mid) 50%, var(--ocean-bottom) 100%);
}
body::after {
  z-index: -1;
  background:
    radial-gradient(40vmax 28vmax at 22% 8%, var(--caustic), transparent 70%),
    radial-gradient(34vmax 24vmax at 82% 30%, var(--caustic), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0); }
  to { transform: translate3d(2%, 3%, 0); }
}

a { color: var(--accent-text); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- header -- */

header.site {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
header.site .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
header.site .brand img { height: 38px; width: auto; }
header.site .brand b { color: var(--brand-teal); font-weight: 800; }
header.site nav { display: flex; gap: 18px; }
header.site nav a { color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; opacity: 0.92; }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--accent-text); opacity: 1; }

/* --------------------------------------------------------- reading pages -- */

main { max-width: 760px; margin: 0 auto; padding: 16px 20px 48px; }
h1 { font-size: 34px; line-height: 1.15; margin: 18px 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 22px; line-height: 1.25; margin: 36px 0 8px; }
p, li { color: var(--text); }
.lede { font-size: 19px; color: var(--muted); }
.meta { color: var(--muted); font-size: 15px; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
/* A short list of links to the page's sections. */
.toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.toc li { margin: 0; }
strong { font-weight: 650; }

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;   /* CardStyle.cornerRadius */
  padding: 16px 18px;
  margin: 20px 0;
}
.card p { margin: 6px 0; }

/* ---------------------------------------------------------------- footer -- */

footer {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 20px 44px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}
footer p { margin: 0; color: var(--muted); flex-basis: 100%; }
footer a { color: var(--accent-text); }

/* ------------------------------------------------------------ home page -- */

.home main { max-width: 1040px; }

.hero {
  position: relative;
  text-align: center;
  padding: 40px 0 36px;
  overflow: hidden;
}
/* The dive flag's stripe, faint, behind the name (as on the launch screen). */
.hero::before {
  content: "";
  position: absolute;
  left: -20%; right: -20%;
  top: 46%;
  height: 150px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07) 30%, rgba(255, 255, 255, 0.07) 70%, transparent);
  transform: rotate(-24deg);
  transform-origin: center;
  z-index: -1;
}
.hero-mark { width: 104px; height: auto; display: block; margin: 0 auto 10px; }
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 6px auto 18px;
  font-size: clamp(56px, 11vw, 96px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wordmark span:nth-child(2) { color: var(--brand-teal); margin-left: 0.62em; }
.wordmark span:nth-child(3) { margin-left: 1.24em; }
.wordmark .tm { font-size: 0.22em; font-weight: 600; vertical-align: super; margin-left: 0.1em; letter-spacing: 0; }
.tagline { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.hero .lede { max-width: 560px; margin: 0 auto; font-size: 19px; }
.fineprint { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* The call to action: white on the app's accent fill, like its prominent buttons. */
.button {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.button:hover { background: #00838c; text-decoration: none; }

/* Bubbles rising behind the hero. */
.bubbles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bubbles i {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.45), rgba(150, 235, 240, 0.08) 40%, transparent 70%);
  animation: rise linear infinite;
}
.bubbles i:nth-child(1) { left: 8%;  width: 14px; height: 14px; animation-duration: 13s; }
.bubbles i:nth-child(2) { left: 18%; width: 8px;  height: 8px;  animation-duration: 10s; animation-delay: -4s; }
.bubbles i:nth-child(3) { left: 31%; width: 20px; height: 20px; animation-duration: 16s; animation-delay: -9s; }
.bubbles i:nth-child(4) { left: 64%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: -2s; }
.bubbles i:nth-child(5) { left: 76%; width: 24px; height: 24px; animation-duration: 18s; animation-delay: -7s; }
.bubbles i:nth-child(6) { left: 88%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: -6s; }
.bubbles i:nth-child(7) { left: 52%; width: 6px;  height: 6px;  animation-duration: 9s;  animation-delay: -1s; }
@keyframes rise {
  from { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate3d(10px, -260px, 0); }
  to { transform: translate3d(-6px, -560px, 0); opacity: 0; }
}

.features {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.feature {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.feature h3 { margin: 10px 0 4px; font-size: 18px; line-height: 1.3; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; }
.feature svg { width: 30px; height: 30px; stroke: var(--accent-text); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature.warm svg { stroke: var(--warm-text); }

.plans {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.plan { background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px; padding: 20px; }
.plan.pro { border-color: rgba(150, 235, 240, 0.35); }
.plan h3 { margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.plan > p { margin: 0; color: var(--muted); }
/* The app's PRO pill. */
.pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: var(--accent-fill);
  border-radius: 999px;
  padding: 3px 9px;
  line-height: 1.3;
}

.closing { text-align: center; margin: 56px 0 12px; }
.closing h2 { font-size: 30px; margin: 0; }
.closing .button { margin-top: 16px; }

@media (max-width: 560px) {
  header.site { padding-top: 16px; }
  header.site .brand { font-size: 19px; }
  header.site .brand img { height: 32px; }
  header.site nav { gap: 14px; }
  .hero { padding-top: 24px; }
  .hero-mark { width: 84px; }
  .hero .lede { font-size: 18px; }
  h1 { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .bubbles { display: none; }
}