/* ============================================================================
   Neptune — demo/preview page styles
   ----------------------------------------------------------------------------
   The palette is lifted directly from the app's default "Deep Instrument"
   theme (Neptune/Theme/AppTheme.swift) so the page reads as the same product,
   not a marketing skin bolted onto it. Token names mirror the Swift `Palette`
   struct fields where they map 1:1.

   Kept as a separate stylesheet (unlike index.html / privacy.html, which
   inline their CSS on purpose) because this page is long enough that the
   duplication cost outweighs the standalone-render benefit.
   ========================================================================= */

:root {
  /* -- Water column. Matches Palette.gradientTop -> gradientBottom (dark). -- */
  --bg: #050b0e;
  --bg-deep: #0b262c;

  /* -- Surfaces. Palette.background / .card, plus one extra raised step. -- */
  --surface: #08181d;
  --card: #10232a;
  --card-raised: #163038;

  /* -- Hairline borders. Palette.border. -------------------------------- */
  --border: #1d3a42;
  --border-bright: #2a545f;

  /* -- Type. Palette.textPrimary / .textSecondary. ---------------------- */
  --text: #e9f5f6;
  --text-dim: #8faeb4;
  --text-faint: #5f8189;

  /* -- Signal colors. Palette.accent / .success / .warning / .destructive
        Cyan is the app's accent and is reserved for live data + emphasis;
        it is never used as decorative fill. ------------------------------ */
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-line: rgba(34, 211, 238, 0.28);
  --on-accent: #062026;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f85149;

  /* -- Fluid type scale. Extends the ramp already used by index.html. --- */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  /* -- Rhythm. Deliberately non-uniform: section gaps breathe, card
        interiors stay tight so data reads as data. --------------------- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* The app renders numeric readouts in the system monospaced design via
     Font.dataNumeral(...) so columns align and values don't jitter as they
     tick. Mirrored here for every stat, axis label, and table figure. */
  --font-data: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections clear the sticky header. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmosphere: a single fixed water-column wash plus two restrained cyan
   glows, echoing the gradient behind the app's root screens. Fixed rather
   than scrolling so it behaves like a backdrop, not a parallax gimmick. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 45% at 12% -8%, rgba(34, 211, 238, 0.13), transparent 62%),
    radial-gradient(ellipse 55% 40% at 95% 4%, rgba(34, 211, 238, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #071820 55%, var(--bg-deep) 100%);
}

/* Faint horizontal contour lines — a nod to the depth-contour motif in the
   app's map + "Deep Instrument" naming. Very low contrast on purpose. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(143, 174, 180, 0.045) 0px,
    rgba(143, 174, 180, 0.045) 1px,
    transparent 1px,
    transparent 96px
  );
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 11, 14, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  background: rgba(5, 11, 14, 0.9);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  color: var(--text);
}
.wordmark:hover { text-decoration: none; }
.wordmark .mark { width: 26px; height: 26px; flex-shrink: 0; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav a {
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover {
  color: var(--text);
  background: rgba(143, 174, 180, 0.09);
  text-decoration: none;
}
@media (max-width: 860px) { .nav { display: none; } }

/* Sticky-header install CTA. Deliberately a SIBLING of .nav, not a child:
   .nav is display:none below 860px, and Neptune is an iPhone app, so the one
   link that matters most must survive on the narrow screens where people are
   most likely to install it. On desktop .nav's margin-left:auto already
   pushes this group right; below 860px .nav vanishes, so the CTA takes over
   that job itself. */
.btn-sm {
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  font-size: var(--text-sm);
}
.header-cta { flex-shrink: 0; }
@media (max-width: 860px) { .header-cta { margin-left: auto; } }
@media (max-width: 400px) {
  .header-cta { padding: 0.5rem 0.85rem; }
  .header-cta .cta-long { display: none; }
}

/* ------------------------------------------------------------- utilities -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--accent-line);
}

.section { padding-block: var(--space-section); }

.section-title {
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-weight: 700;
}

.section-lede {
  color: var(--text-dim);
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0;
}

.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--text-base);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 22px -10px rgba(34, 211, 238, 0.7);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(34, 211, 238, 0.8);
  text-decoration: none;
}
.btn-ghost {
  background: rgba(143, 174, 180, 0.06);
  border-color: var(--border-bright);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(143, 174, 180, 0.12);
  border-color: var(--accent-line);
  transform: translateY(-2px);
  text-decoration: none;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  padding-top: clamp(3rem, 2rem + 5vw, 6rem);
  padding-bottom: var(--space-section);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: rgba(143, 174, 180, 0.07);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(34, 211, 238, 0.75);
}
.badge .dot.live { animation: pulse 2.4s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 1.25rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
  /* Underline the differentiator without a boxy highlight. */
  background: linear-gradient(180deg, transparent 78%, var(--accent-line) 78%);
}

.hero-lede {
  color: var(--text-dim);
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0 0 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.hero-note {
  margin: 1.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--text-faint);
}

/* Hero stat strip — first place the monospaced data font appears. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-stats div {
  background: var(--surface);
  padding: 1rem 1.15rem;
}
.hero-stats dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  margin: 0 0 0.35rem;
  font-weight: 600;
}
.hero-stats dd {
  margin: 0;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------- phone mockup -- */

.phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}

/* Depth glow behind the device. */
.phone-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2), transparent 68%);
  filter: blur(18px);
}

.phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 660;
  background: #01070a;
  border-radius: 46px;
  padding: 11px;
  border: 1px solid #2b4a53;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 40px 80px -30px rgba(0, 0, 0, 0.95),
    inset 0 1px 1px rgba(233, 245, 246, 0.14);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(180deg, #050b0e 0%, #071820 55%, #0b262c 100%);
  display: flex;
  flex-direction: column;
  /* Screens are authored at a fixed logical width, then scaled to whatever
     the frame is, so the app UI keeps its real proportions instead of
     reflowing like a web page. */
  font-size: 11px;
  line-height: 1.45;
}

/* Dynamic Island. */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 20px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem 0.3rem;
  font-family: var(--font-data);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.status-bar .glyphs { display: flex; gap: 3px; align-items: center; }
.status-bar .bar { width: 2.5px; border-radius: 1px; background: var(--text); }

.screen-body {
  flex: 1;
  overflow: hidden;
  padding: 0.5rem 0.85rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.screen-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0;
}

/* In-app card. Mirrors Palette.card + hairline border + 16px radius. */
.app-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.7rem 0.8rem;
}

.app-eyebrow {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.3rem;
}

/* Bottom tab bar — 5 items max, icon + label, active item tinted. */
.tab-bar {
  flex-shrink: 0;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 0.5rem 0.35rem 0.85rem;
  border-top: 1px solid var(--border);
  background: rgba(8, 24, 29, 0.9);
  backdrop-filter: blur(8px);
}
.tab-bar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  font-weight: 600;
  color: var(--text-faint);
}
.tab-bar span[aria-current] { color: var(--accent); }
.tab-bar svg { width: 17px; height: 17px; }

/* ------------------------------------------------------------ bento grid -- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.tile {
  position: relative;
  grid-column: span 2;
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover {
  border-color: var(--border-bright);
  transform: translateY(-3px);
}
.tile.wide { grid-column: span 3; }
.tile.full { grid-column: span 6; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile.wide { grid-column: span 1; }
  .tile.full { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.wide, .tile.full { grid-column: span 1; }
}

.tile-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 1.15rem;
}
.tile-icon svg { width: 21px; height: 21px; }

.tile h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.tile p {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------ split rows -- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.split.reverse .split-visual { order: -1; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-visual { order: 0; }
}

.feature-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.feature-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.85rem;
  align-items: start;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.feature-list svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-top: 1px;
}
.feature-list strong { color: var(--text); font-weight: 650; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 3rem 3.5rem;
  margin-top: var(--space-section);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: var(--text-sm);
}
.footer-grid nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--accent); }

/* --------------------------------------------------------------- reveals -- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   Walkthrough steps
   ========================================================================= */

.step { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.step-num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}
.step-num span {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-bright);
}

.step-title {
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1rem;
}
.step-title em {
  font-style: normal;
  color: var(--accent);
}

.step-body {
  color: var(--text-dim);
  margin: 0 0 1rem;
  line-height: 1.65;
  max-width: 54ch;
}
.step-body strong { color: var(--text); font-weight: 650; }
.step-body em { color: var(--text); font-style: italic; }

/* ---- numbered causal chain (year class explainer) ---------------------- */

.chain {
  list-style: none;
  counter-reset: chain;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.chain li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 1rem;
  align-items: start;
  color: var(--text-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
  position: relative;
}
/* Connector line between steps. */
.chain li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14.5px;
  top: 32px;
  bottom: -1.15rem;
  width: 1px;
  background: linear-gradient(180deg, var(--border-bright), transparent);
}
.chain-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}
.chain b { color: var(--text); display: block; font-weight: 650; margin-bottom: 0.15rem; }
.chain em { color: var(--text); font-style: italic; }

.prime-inline {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--success);
  background: rgba(52, 211, 153, 0.13);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  vertical-align: 1px;
}

/* ---- callout ----------------------------------------------------------- */

.note-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  background: rgba(34, 211, 238, 0.045);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
}
.note-card svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.note-card b { color: var(--text); display: block; margin-bottom: 0.3rem; }
.note-card em { color: var(--text); font-style: italic; }

/* ---- "why it matters" pair -------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.why-card {
  background: linear-gradient(180deg, var(--card-raised), var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.why-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}
.why-card p { color: var(--text-dim); margin: 0; font-size: 0.9375rem; line-height: 1.6; }

/* ---- closing panel ----------------------------------------------------- */

.cta-panel {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(34, 211, 238, 0.1), transparent 70%),
    linear-gradient(180deg, var(--card-raised), var(--card));
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter);
}

/* ============================================================================
   In-app screen components (inside .phone-screen)
   ========================================================================= */

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

/* -- conditions score ---------------------------------------------------- */

.score-row { display: flex; align-items: center; gap: 0.75rem; }

.score-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.score-ring svg { width: 100%; height: 100%; }
.score-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Arc draws in on reveal. dashoffset 45.6 of 207.3 circumference == 78%. */
.reveal.in .score-arc {
  animation: draw 1.1s var(--ease) both;
}
@keyframes draw {
  from { stroke-dashoffset: 207.3; }
}

.score-bars { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fbar {
  display: grid;
  grid-template-columns: 52px 1fr 22px;
  align-items: center;
  gap: 5px;
  font-size: 8.5px;
}
.fbar span { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbar i {
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  width: var(--w);
  opacity: 0.85;
}
.fbar b { color: var(--accent); text-align: right; font-size: 8.5px; font-weight: 700; }

.big-score { display: flex; align-items: center; gap: 0.6rem; }
.big-score > b { font-size: 38px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }

/* -- live trip ----------------------------------------------------------- */

.live-head { display: flex; align-items: center; justify-content: space-between; }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--danger);
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid rgba(248, 81, 73, 0.35);
  border-radius: 999px;
  padding: 2px 7px;
}
.live-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--danger); box-shadow: none; }
.live-head > b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }

.catch-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
}
.catch-row .fish-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.7);
}
.catch-row b { font-size: 10.5px; font-weight: 650; display: block; }
.catch-row p { margin: 0; font-size: 8.5px; color: var(--text-faint); }
.catch-row > span { font-size: 11px; font-weight: 700; }

.app-cta {
  margin-top: auto;
  margin-bottom: 0.5rem;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 0.62rem;
  cursor: default;
}

/* -- catch detail -------------------------------------------------------- */

.measure-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 9.5px;
  color: var(--text-dim);
  margin-bottom: 0.15rem;
}
.measure-row b { font-size: 14px; color: var(--text); font-weight: 700; }

.tier-chip {
  margin-left: auto;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--warning);
  background: rgba(251, 191, 36, 0.13);
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 5px;
  padding: 2px 6px;
}

.auto-chip {
  margin-left: 5px;
  font-size: 7px;
  letter-spacing: 0.09em;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  padding: 1px 4px;
}

.cond-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem 0.3rem;
}
.cond-grid > div { display: flex; flex-direction: column; gap: 1px; }
.cond-grid span { font-size: 7.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.cond-grid b { font-size: 10px; font-weight: 650; }
/* Trend arrow is an indicator, not an alarm: falling pressure is a
   positive signal in this domain, so it must not borrow the danger colour. */
.cond-grid b i { color: var(--text-faint); font-style: normal; font-size: 8px; }

.map-stub {
  position: relative;
  height: 58px;
  border-radius: 9px;
  background:
    radial-gradient(circle at 62% 45%, rgba(34, 211, 238, 0.14), transparent 55%),
    linear-gradient(140deg, #0a2028, #0f2e36);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Suggest contour/waterway lines without shipping a map tile. */
.map-stub::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(58deg, rgba(143,174,180,0.14) 0 1px, transparent 1px 15px);
}
.map-stub .pin {
  position: absolute;
  left: 58%; top: 44%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--on-accent);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.22);
}

/* -- factor lift --------------------------------------------------------- */

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(143, 174, 180, 0.09);
  font-size: 8.5px;
  font-weight: 600;
  text-align: center;
}
.seg span { padding: 3px 0; border-radius: 6px; color: var(--text-dim); }
.seg span[aria-selected="true"] { background: var(--card-raised); color: var(--text); }

.lift-row { padding: 0.55rem 0.7rem; }
.lift-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.lift-head b { font-size: 10px; font-weight: 650; }
.lift-val { font-size: 12px; font-weight: 700; color: var(--accent); }
.lift-band { margin: 1px 0 4px; font-size: 8.5px; color: var(--text-dim); }
.lift-bar { height: 4px; border-radius: 2px; background: rgba(143, 174, 180, 0.14); overflow: hidden; }
.lift-bar i { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--accent); }
.lift-n { margin: 3px 0 0; font-size: 7.5px; color: var(--text-faint); }
.lift-row.muted { opacity: 0.5; }
.lift-row.muted .lift-val { color: var(--text-faint); }

/* -- hourly match curve -------------------------------------------------- */

.spark { width: 100%; height: 52px; display: block; }
.spark-axis,
.day-strip {
  display: flex;
  justify-content: space-between;
  font-size: 7.5px;
  color: var(--text-faint);
  margin-top: 3px;
}
.day-strip { gap: 3px; }
.day-strip > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border-radius: 7px;
  background: rgba(143, 174, 180, 0.06);
}
.day-strip b { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.day-strip b.hot { color: var(--accent); }

/* -- year class ---------------------------------------------------------- */

.yc-card { border-color: rgba(52, 211, 153, 0.32); }
.yc-top { display: flex; align-items: flex-start; gap: 1.1rem; }
.yc-age { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.yc-age i { font-style: normal; font-size: 9px; color: var(--text-dim); font-weight: 500; }

.prime-badge {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-data);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--success);
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.45);
  border-radius: 999px;
  padding: 3px 8px;
}

/* Age axis 0-12: the prime band (ages 5-9) highlighted, marker at age 6. */
.yc-axis {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: rgba(143, 174, 180, 0.14);
  overflow: visible;
}
.yc-band {
  position: absolute;
  left: 41.7%;   /* age 5 of 12 */
  width: 33.3%;  /* through age 9 */
  top: 0; bottom: 0;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.5);
}
.yc-marker {
  position: absolute;
  left: 50%;     /* age 6 of 12 */
  top: 50%;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid #0b1f20;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}
.yc-ticks { display: flex; justify-content: space-between; font-size: 7.5px; color: var(--text-faint); margin-top: 4px; }
.yc-src { margin: 0.45rem 0 0; font-size: 7.5px; color: var(--text-faint); letter-spacing: 0.04em; }

.cohort-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 3.5px 0;
  border-bottom: 1px solid rgba(29, 58, 66, 0.6);
  font-size: 9.5px;
}
.cohort-row:last-child { border-bottom: 0; }
.cohort-row b { font-weight: 600; }
.cohort-row span { color: var(--text-dim); font-size: 8.5px; }

.match-callout {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 13px 1fr;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: rgba(52, 211, 153, 0.09);
  border: 1px solid rgba(52, 211, 153, 0.3);
  font-size: 8.5px;
  line-height: 1.45;
  color: var(--text-dim);
}
.match-callout svg { width: 12px; height: 12px; color: var(--success); margin-top: 1px; }
.match-callout b { color: var(--text); font-weight: 650; }

/* Center ⊕ slot: the app renders it larger than its neighbours and with no
   text label, so it reads as an action rather than a destination. */
.tab-bar .fab-slot { justify-content: center; }
.tab-bar .fab-slot svg {
  width: 25px;
  height: 25px;
  filter: drop-shadow(0 0 7px rgba(34, 211, 238, 0.5));
}

/* Grid child guard: without min-width:0 a long unbroken data string can push
   the copy column past its track and force the page to scroll sideways. */
.step-copy { min-width: 0; }

/* Two-column text comparisons must align at the top — .split's default
   centring makes the two headings sit at different heights, which reads as a
   mistake when there's no visual (phone mockup) to anchor the pairing. */
.split.top { align-items: start; }

/* Reserve two lines for every stat label so a wrapping label ("Stocking
   records") can't push its number out of line with its neighbours. The label
   inherits line-height 1.6, so two lines is 3.2em — 2.4em was short by half a
   line and let the wrapping cell sag ~10px below its neighbours. */
.hero-stats dt { min-height: 3.2em; }

/* Both stat strips hold exactly three figures, so pin three columns rather
   than letting auto-fit reflow to 2+1 and leave an empty orphan cell at
   phone widths. Padding and label size tighten instead. */
.hero-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) {
  .hero-stats div { padding: 0.8rem 0.7rem; }
  .hero-stats dt { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .hero-stats dd { font-size: 1.15rem; }
}