/* Nautis pitch page V2 — portrait scrollable
   Light-mode palette pulled from brand-style-guide.md §3 + §4
*/

:root {
  --nautis-bg: #F8FCFF;
  --nautis-surface: #FFFFFF;
  --nautis-surface-highlight: #E3F2FD;
  --nautis-border-subtle: #E3F2FD;

  --nautis-navy: #0A3D62;
  --nautis-blue: #3B82F6;

  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;

  --max-width: 760px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--nautis-bg);
  color: var(--slate-800);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

section {
  padding: 48px 0 96px;
  border-bottom: 1px solid var(--nautis-border-subtle);
}

section:first-of-type { padding-top: 48px; }
section:last-of-type { border-bottom: none; }

/* Headings */
h1 {
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--nautis-navy);
  margin: 24px 0 0;
  letter-spacing: -0.025em;
  line-height: 1;
}

h2 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--nautis-navy);
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--nautis-navy);
  margin: 32px 0 8px;
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 18px;
  color: var(--slate-700);
  font-size: 1.125rem;
  line-height: 1.65;
}

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

a {
  color: var(--nautis-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--nautis-blue);
}

/* Hero */
.hero {
  text-align: center;
  padding-top: 64px;
  border-bottom: none;
}

.hero .logo {
  width: 96px;
  height: 96px;
}

.hero h1 {
  margin-top: 28px;
}

.hero .lockup {
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--nautis-navy);
  margin-top: 28px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Hero subtitle variant for metadata lines (e.g. "Last updated…" on legal pages).
   Muted slate instead of navy, slightly heavier weight for readability. */
.hero .lockup-meta {
  color: var(--slate-500);
  font-weight: 400;
  font-size: 1.125rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Snap-scroll architecture — mobile-only, homepage-only.
   Desktop gets normal long-scroll for natural marketing-page reading.
   Mobile (≤768px) gets TikTok-style mandatory snap so each section
   "lands" as a discrete viewport on touch swipes.
   ───────────────────────────────────────────────────────────────────── */
/* Mobile-page rules — scoped to html.snap-page.mobile (the /m/ page).
   Desktop /index.html doesn't have the .mobile class so it never gets
   these. No @media query — the class itself is the trigger. */
html.snap-page.mobile {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* One slide per viewport — every section fills the screen so short
   sections don't bleed the next one into view at the bottom. */
.snap-page.mobile section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
}

/* Footer becomes its own snap target so it's swipeable-to. */
.snap-page.mobile footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* §3 Friends — phones stack one per row instead of side-by-side. */
.snap-page.mobile .screens-pair.vertical {
  grid-template-columns: 1fr;
  gap: 48px;
}

/* §6 Offline-first — sync diagram flows top-to-bottom.
   Arrows rotate 90° to point downward. */
.snap-page.mobile .sync-diagram {
  flex-direction: column;
}

.snap-page.mobile .sync-diagram .diagram-arrow svg {
  transform: rotate(90deg);
}

/* Cloud forks into two audiences side-by-side on mobile.
   The fork SVG (200px wide) sits above a grid-aligned audience-row of
   the same width, so the arrow endpoints land precisely on each cell's
   X-center. Math is exact, not eyeballed. */
.snap-page.mobile .sync-diagram .audience-fork {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}

.snap-page.mobile .sync-diagram .fork-svg {
  display: block;
}

.snap-page.mobile .sync-diagram .audience-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
  align-items: flex-start;
  margin-top: 4px;
}

.snap-page.mobile .sync-diagram .audience-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile scale pass — typography + image sizes designed for a ~390px
   portrait viewport, not the 760px desktop column the original tokens
   target. Keeps the same visual rhythm, just proportional to a phone.
   ───────────────────────────────────────────────────────────────────── */

/* Body container — tighter horizontal padding so content has more room */
.snap-page.mobile main {
  padding: 0 20px;
}

/* Body text — slightly smaller for phone reading distance */
.snap-page.mobile body {
  font-size: 16px;
}

/* Hero h1 — was clamp(3rem, 12vw, 4.5rem). On mobile lock to 2.5rem
   (40px) so it doesn't dominate the viewport. */
.snap-page.mobile .hero h1 {
  font-size: 2.5rem;
}

/* Hero logo — slightly smaller on mobile */
.snap-page.mobile .hero .logo {
  width: 72px;
  height: 72px;
}

/* Hero lockup tagline — scaled down */
.snap-page.mobile .hero .lockup {
  font-size: 1.25rem;
}

/* Section headings — 1.5rem (24px) reads well at phone distance */
.snap-page.mobile h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
}

/* Body paragraphs in feature sections */
.snap-page.mobile p {
  font-size: 1rem;
  margin-bottom: 14px;
}

/* Section padding — tighter overall vertical rhythm on mobile */
.snap-page.mobile section {
  padding: 32px 0 48px;
}

.snap-page.mobile section:first-of-type {
  padding-top: 32px;
}

/* Screenshots in pairs — narrower so they fit nicely on a phone column.
   Previously 260px, now 180px. */
.snap-page.mobile .screens-pair img {
  max-width: 180px;
}

/* Stacked-screen pattern (light over dark) — bigger on mobile so the
   composition reads as the section's hero element. */
.snap-page.mobile .screen-stacked .stacked-images img {
  width: 240px;
}

.snap-page.mobile .screen-stacked .stacked-images .behind {
  margin-left: -160px;
}

/* Single screen (Radar) — smaller centered phone */
.snap-page.mobile .screen-single img {
  max-width: 220px;
}

/* Triple-screen row (used for Radar's three views) */
.snap-page.mobile .screens-triple img {
  max-width: 110px;
}

/* Gap between body text and the visual block */
.snap-page.mobile .screens-pair,
.snap-page.mobile .screens-triple,
.snap-page.mobile .screen-single {
  margin-top: 24px;
}

.snap-page.mobile .screens-pair.vertical {
  gap: 32px;
}

/* OnWatch showcase — currently uses absolute positioning calibrated to
   desktop widths. On mobile keep proportions but scale down the margins
   so the labels-and-phone composition doesn't blow the viewport. */
.snap-page.mobile .onwatch-showcase {
  margin: 32px auto 48px;
}

/* Mobile single-column stack — wrapper that centers either a
   .screen-stacked composition or a single .screen-solo image on the
   page. Unified mobile pattern: every section is one column. */
.snap-page.mobile .screens-column {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.snap-page.mobile .screens-column .screen-solo {
  display: block;
  width: 240px;
}

/* §3 mobile composition — profile centered with friend trip + log
   peeking out from behind, left and right. Three phones, one row. */
.snap-page.mobile .screens-spread-triple {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.snap-page.mobile .screens-spread-triple img {
  display: block;
}

.snap-page.mobile .screens-spread-triple .screen-center {
  width: 160px;
  position: relative;
  z-index: 2;
}

.snap-page.mobile .screens-spread-triple .screen-left,
.snap-page.mobile .screens-spread-triple .screen-right {
  width: 120px;
  position: relative;
  z-index: 1;
}

.snap-page.mobile .screens-spread-triple .screen-left {
  margin-right: -64px;
}

.snap-page.mobile .screens-spread-triple .screen-right {
  margin-left: -64px;
}

/* Hero on the snap-page: fills the viewport, content vertically AND
   horizontally centered (flex column needs explicit align-items: center
   for non-stretching children like the <img> logo). */
.snap-page .hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Mobile-aware h1 sizing on the snap-page only — desktop appearance
   unchanged. clamp() floors at 3rem on narrow viewports, scales up
   with width, ceiling at 4.5rem (existing desktop size). */
.snap-page .hero h1 {
  font-size: clamp(3rem, 12vw, 4.5rem);
}


/* Placeholder section */
.placeholder {
  background: var(--nautis-surface-highlight);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  color: var(--slate-500);
  font-style: italic;
  border-bottom: none;
  margin-top: 32px;
}

.placeholder p { color: var(--slate-500); margin-bottom: 0; }

/* Footer */
footer {
  text-align: center;
  padding: 64px 0 40px;
  margin-top: 32px;
  border-top: 1px solid var(--nautis-border-subtle);
}

footer .footer-tagline {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nautis-navy);
  margin: 0 0 28px;
  letter-spacing: -0.015em;
}

footer .footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

footer .footer-links a {
  font-size: 0.9rem;
  color: var(--slate-500);
  text-decoration: none;
  border-bottom: none;            /* override global a border-bottom */
  transition: color 0.15s ease;
}

footer .footer-links a:hover {
  color: var(--nautis-navy);
}

footer .footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
}

footer .footer-social a {
  display: inline-flex;
  color: var(--slate-500);        /* muted icon — same colour register as the links */
  border-bottom: none;            /* override global a border-bottom */
  transition: color 0.15s ease;
}

footer .footer-social a:hover {
  color: var(--nautis-navy);
}

footer .footer-copyright {
  font-size: 0.8rem;
  color: var(--slate-500);
  margin: 0;
}

/* "View desktop site" link — only present on /m/. Tiny, very muted. */
footer .footer-view-desktop {
  margin: 12px 0 0;
  font-size: 0.75rem;
}

footer .footer-view-desktop a {
  color: var(--slate-500);
  border-bottom: none;
  transition: color 0.15s ease;
}

footer .footer-view-desktop a:hover {
  color: var(--nautis-navy);
}

/* Section comment block (so I can label what's in flight) */
.draft-note {
  display: block;
  font-size: 0.75rem;
  color: var(--slate-400);
  margin-top: 24px;
  font-style: italic;
}

/* Single screen, centered (e.g. Radar) */
.screen-single {
  margin-top: 48px;
  text-align: center;
}

.screen-single img {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
}

.screen-single .screen-label {
  margin-top: 2px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* On Watch flow diagram (sailor → link → family)
   + Sync architecture diagram (boat → cloud → server → audiences)
*/
.onwatch-diagram,
.sync-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 56px;
  flex-wrap: wrap;
}

.sync-diagram .audience-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex-shrink: 0;
}

.sync-diagram .diagram-node.compact .diagram-label {
  font-size: 0.8125rem;
  margin-top: 8px;
}

.sync-diagram .diagram-node.compact .diagram-sublabel {
  font-size: 0.6875rem;
}

.diagram-node {
  text-align: center;
  flex-shrink: 0;
}

/* OnWatch showcase composition — large MacBook with iPhone overlapping bottom-right,
   plus hand-pointed annotations identifying "what family sees" (laptop) and
   "the sailor, logging" (phone). Extra top/bottom margin to fit the labels. */
.onwatch-showcase {
  position: relative;
  width: 100%;
  margin: 80px auto 100px;
}

.onwatch-showcase .showcase-mac {
  display: block;
  width: 100%;
  height: auto;
}

.onwatch-showcase .showcase-phone {
  position: absolute;
  bottom: -18%;
  right: 0%;
  width: 32%;                 /* bumped from 22% — phone reads bigger */
  height: auto;
  filter: drop-shadow(0 12px 32px rgba(10, 61, 98, 0.22));
}

/* Hand-pointed annotations — small label + curved arrow indicating each device */
.onwatch-showcase .showcase-annotation {
  position: absolute;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nautis-navy);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 3;
}

.onwatch-showcase .annotation-mac {
  top: -28px;
  left: 0;                    /* W of "What" aligns with the MacBook's left edge */
  align-items: flex-start;
  text-align: left;
}

.onwatch-showcase .annotation-phone {
  bottom: -12%;
  right: 16%;                 /* anchor to phone's horizontal center (phone is right:0, width:32%) */
  transform: translateX(50%); /* shift caption right by half its width → centered under the phone */
  text-align: center;
  align-items: center;
}

.onwatch-showcase .showcase-annotation svg {
  display: block;
}

.diagram-label {
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nautis-navy);
}

.diagram-sublabel {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 2px;
}

.diagram-sublabel.mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

.diagram-arrow {
  text-align: center;
  flex-shrink: 0;
  padding: 0 4px;
}

.arrow-caption {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  margin-bottom: 4px;
  font-weight: 600;
}

/* Layered triple — three screens shrinking top-left → bottom-right,
   sharing the same bottom baseline. Eye travels diagonally from the
   biggest, tallest image on the left down to the smallest on the right. */
.screens-layered-triple {
  display: flex;
  justify-content: center;
  align-items: flex-end;   /* shared bottom line */
  margin-top: 56px;
  margin-bottom: 24px;
}

.screens-layered-triple .layer {
  flex-shrink: 0;
  position: relative;
}

.screens-layered-triple .layer img {
  width: 100%;
  display: block;
}

.screens-layered-triple .back {
  width: 320px;       /* biggest, top-left */
  z-index: 1;
}

.screens-layered-triple .middle {
  width: 240px;
  margin-left: -90px;  /* overlap left edge into back layer */
  z-index: 2;
}

.screens-layered-triple .front {
  width: 180px;        /* smallest, bottom-right */
  margin-left: -80px;
  z-index: 3;
}

/* Three-screen row — same shape as screens-pair but 3 columns */
.screens-triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}

.screens-triple .screen {
  text-align: center;
}

.screens-triple img {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  display: block;
}

.screens-triple .screen-label {
  margin-top: 2px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Two-screen pair (e.g. trip overview + log overview) */
.screens-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 48px;
  align-items: start;
}

.screens-pair .screen {
  text-align: center;
}

.screens-pair img {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  display: block;
}

.screens-pair .screen-label {
  margin-top: 2px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

/* Legal pages — tables for Privacy Policy (§3, §4, §6) and Terms */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 8px;
  font-size: 0.95rem;
  background: var(--nautis-surface);
  border: 1px solid var(--nautis-border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.legal-table thead th {
  background: var(--nautis-surface-highlight);
  color: var(--nautis-navy);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nautis-border-subtle);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.legal-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--nautis-border-subtle);
  color: var(--slate-700);
  vertical-align: top;
  line-height: 1.55;
}

.legal-table tbody tr:last-child td {
  border-bottom: none;
}

.legal-table a {
  word-break: break-word;
}

/* Lists inside legal sections — slightly tighter than default */
.feature ul {
  margin: 0 0 18px;
  padding-left: 24px;
}

.feature ul li {
  color: var(--slate-700);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 6px;
}

.feature ul li:last-child {
  margin-bottom: 0;
}

/* Stacked screen — front layer covers the left side of the back layer, both
   the same size. The back layer's right portion peeks out from behind. */
.screen-stacked .stacked-images {
  display: inline-flex;
  align-items: flex-start;
}

.screen-stacked .stacked-images img {
  display: block;
  width: 260px;
  position: relative;
}

.screen-stacked .stacked-images .front {
  z-index: 2;
}

.screen-stacked .stacked-images .behind {
  margin-left: -180px;
  z-index: 1;
}