/* BayCast Offshore — clean marine palette, mobile-first, high-contrast for sun.
   Map-dominant layout. Slim readout bar at bottom of map; small layers panel top-right. */

:root {
  --navy:   #0a2540;
  --navy-2: #143058;
  --blue:   #0066cc;
  --blue-2: #0050a0;
  --bg:     #ffffff;
  --line:   #cfd8e3;
  --ink:    #0a2540;
  --muted:  #4a5b73;
  --warn:   #c63124;
  --tap:    48px;

  --topbar-h:  56px;
  --regions-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* TOPBAR */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  height: var(--topbar-h);
  background: var(--navy);
  color: white;
  flex: 0 0 auto;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: 0.3px; }
.brand-sub  { font-size: 13px; font-weight: 500; opacity: 0.9; }
.updated    { font-size: 13px; opacity: 0.9; text-align: right; max-width: 50%; }

/* REGIONS */
.regions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  height: var(--regions-h);
  overflow-x: auto;
  background: var(--navy);
  border-bottom: 3px solid var(--blue);
  -webkit-overflow-scrolling: touch;
  flex: 0 0 auto;
}
.region-btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid white;
  background: transparent;
  color: white;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color 80ms ease, color 80ms ease;
}
.region-btn:hover { background: rgba(255,255,255,0.15); }
.region-btn.active { background: white; color: var(--navy); }
.region-btn:active { transform: translateY(1px); }

/* MAP — fills remaining viewport */
.map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 360px;
}
#map { position: absolute; inset: 0; }
.leaflet-container { background: #c5dbe9; font-family: inherit; }
.leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 22px !important;
  color: var(--navy) !important;
}

/* CROSSHAIR — fixed, doesn't move with the map */
.crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  pointer-events: none;
  z-index: 600;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* LAYERS PANEL — compact, top-right of map */
.layers {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 500;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 8px 10px;
  width: 168px;
  box-shadow: 0 3px 10px rgba(10, 37, 64, 0.18);
}
.layers-header {
  /* Visible only on mobile — desktop renders the panel always-open. */
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  min-height: 44px;
}
.lh-chev { transition: transform 180ms ease; font-size: 18px; line-height: 1; }
.layers.is-collapsed .lh-chev { transform: rotate(-90deg); }
.layers.is-collapsed .layers-body { display: none; }

/* Base-map segment control — Dark / Light. Sits at the top of the layer
   panel since it affects everything below. */
.map-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mm-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  flex: 0 0 auto;
}
.mm-btn {
  flex: 1 1 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: white;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 5px;
  padding: 4px 6px;
  cursor: pointer;
  min-height: 36px;
  transition: background-color 80ms ease;
}
.mm-btn.active {
  background: var(--navy);
  color: white;
}
.mm-btn:not(.active):hover { background: #eef3f8; }
.layer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}
.layer-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}
.select-row {
  display: grid;
  gap: 4px;
  margin: 8px 0 4px;
}
.select-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
}
.select-row select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: white;
  border: 2px solid var(--navy);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  width: 100%;
  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'%3E%3Cpath fill='%230a2540' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

/* SST tile smoothing modes — applied to the leaflet-pane that hosts the
   WMS image overlay. JS toggles these classes on the map root. The contrast
   and saturate filter on every SST tile gives the boxfill palette enough
   visual punch to read like marine electronics, not BOM 1995. */
.leaflet-tile-pane img.sst-tile,
.leaflet-overlay-pane img.sst-tile {
  filter: contrast(1.15) saturate(1.2);
}
/* Soft-blur the coarse 9 km L4 layer so its grid-step coastline melts into
   the crisper L3SM-6d (2 km) layer underneath. The finer layers stay
   sharp — only L4's blockiness is feathered. */
.leaflet-tile-pane img.sst-tile-l4,
.leaflet-overlay-pane img.sst-tile-l4 {
  filter: contrast(1.15) saturate(1.2) blur(0.6px);
}
.sst-smooth-none .leaflet-overlay-pane img,
.sst-smooth-none .leaflet-tile-pane img.sst-tile {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.sst-smooth-soft .leaflet-overlay-pane img,
.sst-smooth-soft .leaflet-tile-pane img.sst-tile {
  image-rendering: auto;
}
.sst-smooth-max .leaflet-overlay-pane img,
.sst-smooth-max .leaflet-tile-pane img.sst-tile {
  image-rendering: auto;
  /* "Max" also requests 2× resolution upstream — the CSS here just ensures
     no anti-smoothing override. */
}

.legend {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.legend-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 3px;
}
.legend-bar {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    #1a3a8c 0%, #2d6cdf 22%, #5fc5e8 42%, #9be090 58%, #f5c542 74%, #f57842 88%, #d0382b 100%);
  border: 1px solid rgba(10,37,64,0.15);
}
.legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink);
  margin-top: 2px;
  font-weight: 700;
}

/* READOUT — compact corner badge for the crosshair workflow on touch.
   Hidden on hover-capable devices via the (hover: hover) block below. */
.readout {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: rgba(10, 37, 64, 0.94);
  color: white;
  border: 2px solid white;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.rd-coords {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rd-key {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #b9d2f2;
}
.rd-decimal {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-dmm {
  font-size: 11px;
  color: #b9d2f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-stats {
  display: flex;
  gap: 10px;
}
.rd-stat {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.rd-stat:last-child { text-align: right; }
.rd-stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #b9d2f2;
}
.rd-stat-value {
  font-size: 13px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
}
.rd-stat-value.dim { color: #b9d2f2; font-weight: 600; }

/* HOVER TOOLTIP — desktop only. Follows the cursor with translate, hidden by
   default. .visible class fades it in. Sized for at-a-glance reading from
   ~arm's length. */
.hover-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 700;
  pointer-events: none;
  background: rgba(10, 37, 64, 0.92);
  color: white;
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 220px;
  font-size: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 100ms ease;
  will-change: transform, opacity;
}
.hover-tooltip.visible { opacity: 1; }
.ht-coords {
  font-size: 13px;
  color: #b9d2f2;
  margin-bottom: 10px;
  white-space: nowrap;
}
.ht-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
}
.ht-key {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #b9d2f2;
  text-transform: uppercase;
}
.ht-val {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
/* Water (SST) is the headline value — give it the size that lets you read
   it without bringing the boat about. */
#ht-sst { font-size: 24px; }

/* Hover-capable devices (desktop with mouse): no crosshair, no readout
   badge — the hover tooltip takes over instead. (pointer: fine) was too
   strict — Windows touch laptops with mice report pointer: coarse. */
@media (hover: hover) {
  .crosshair    { display: none; }
  .readout      { display: none; }
  .hover-tooltip { display: block; }
}

/* MARK POPUP (press-and-hold) — three formats stacked, each with a copy
   button inline so the user never has to convert. Decimal/DMM/DMS all
   visible at once. */
.mark-popup { font-family: inherit; min-width: 280px; }
.mark-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.mark-fmt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  margin-bottom: 10px;
}
.mark-fmt-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.mark-fmt-val {
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  background: #eef3f8;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  user-select: all;
  word-break: break-all;
}
.mark-copy {
  align-self: stretch;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: white;
  background: var(--blue);
  border: 0;
  border-radius: 6px;
  padding: 0 14px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 80ms ease;
}
.mark-copy:hover { background: var(--blue-2); }
.mark-copy:active { transform: translateY(1px); }
.mark-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: white;
  background: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  white-space: nowrap;
}
.mark-btn:hover { background: var(--navy-2); }
.mark-btn.secondary {
  background: white;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.mark-btn.danger {
  background: white;
  color: var(--warn);
  border: 2px solid var(--warn);
}
.mark-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.mark-toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translate(-50%, -8px);
  background: var(--navy);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.mark-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* MARKERS — current arrows (kept for potential power-user toggle; not in
   panel). The "alive" feel comes from the leaflet-velocity flow layer. */
.arrow-icon { background: transparent !important; border: none !important; }

/* FISHING INTEL — pulsing markers for current edges and upwelling zones. */
.edge-icon { background: transparent !important; border: none !important; }
.edge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow:
    0 0 6px rgba(0, 240, 255, 0.95),
    0 0 16px rgba(0, 200, 255, 0.55);
  animation: edge-pulse 2.4s ease-in-out infinite;
  pointer-events: auto;
  cursor: pointer;
}
@keyframes edge-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1);    }
  50%      { opacity: 1.00; transform: scale(1.25); }
}

.upwelling-icon { background: transparent !important; border: none !important; }
.upwelling-pulse {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 200, 60, 0.95);
  box-shadow:
    0 0 12px rgba(255, 200, 60, 0.65),
    inset 0 0 8px rgba(255, 200, 60, 0.30);
  animation: upwell-pulse 2.6s ease-in-out infinite;
  pointer-events: auto;
  cursor: pointer;
}
@keyframes upwell-pulse {
  0%, 100% { opacity: 0.70; transform: scale(1);    }
  50%      { opacity: 1.00; transform: scale(1.18); }
}

/* Italic note in detection popups. */
.pt-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .edge-dot, .upwelling-pulse { animation: none; }
}

/* Flow particle depth — leaflet-velocity renders into a single canvas in
   overlayPane, so a CSS filter is the only way to add depth without
   forking the library. Per-speed glow / thickness scaling needs the
   fork (queued in brief.md). */
.leaflet-overlay-pane canvas {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* MAP LABELS — Cartocdn ships labels as raster tiles so font size/weight
   can't be restyled (would need vector tiles). What we CAN do: brighten
   the dark-mode labels toward white and add a soft drop-shadow so they
   read against bright SST hues. Light mode keeps Carto's defaults. */
.basemap-dark .leaflet-labels-pane img {
  filter:
    brightness(1.7)
    contrast(1.25)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}

/* MEASURING TOOL — segment label hangs above the latest vertex. Same dark
   marine palette as the readout/tooltip so it reads as part of the same
   instrument. */
.measure-tooltip.leaflet-tooltip {
  background: rgba(10, 37, 64, 0.94);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.measure-tooltip.leaflet-tooltip-top:before { border-top-color: rgba(10, 37, 64, 0.94); }
.measure-tooltip.leaflet-tooltip-bottom:before { border-bottom-color: rgba(10, 37, 64, 0.94); }
.measure-tooltip .ms-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 1px 0;
}
.measure-tooltip .ms-key {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #b9d2f2;
  text-transform: uppercase;
}
.measure-tooltip .ms-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
}

/* FOOTER */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--muted);
  background: white;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.foot .hint { font-size: 12px; }
.foot .legal {
  font-size: 10px;
  color: #8696ad;
  letter-spacing: 0.2px;
  margin-left: auto;
}
.foot .legal-link {
  font-size: 11px;
  color: #8696ad;
  text-decoration: none;
  margin-left: auto;
  border-bottom: 1px dotted #8696ad;
}
.foot .legal-link:hover { color: var(--ink); border-color: var(--ink); }

/* SST tile watermark — single overlay positioned over the map (not per-tile,
   per the deferred-feature note in the README; per-tile would need worker
   image manipulation). */
.map-wrap::after {
  content: 'BayCast';
  position: absolute;
  bottom: 38px;
  right: 8px;
  z-index: 450;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}

/* Topbar nav link (used on landing + licenses pages) */
.topbar-link, .topbar-nav a {
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  transition: background-color 80ms ease;
}
.topbar-link:hover, .topbar-nav a:hover { background: rgba(255,255,255,0.15); }
.topbar-nav { display: flex; gap: 8px; }

/* ===== LANDING PAGE ===== */
.page { background: white; min-height: 100vh; display: flex; flex-direction: column; }

/* HERO BANNER — full-width image carries the tagline + features (baked in
   to the artwork). On desktop we cap height at 720 px and crop with
   object-fit: cover; on phones we let the image breathe in its native
   aspect so nothing important gets sliced off. */
.hero-banner {
  width: 100%;
  background: #000;
  display: block;
  overflow: hidden;
}
.hero-banner picture { display: block; width: 100%; }
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: cover;
}
@media (max-width: 720px) {
  .hero-banner img { max-height: none; }
}
.hero-cta-band {
  background: var(--navy);
  color: white;
  padding: 32px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero-cta-band .btn-lg {
  font-size: 18px;
  padding: 16px 36px;
  min-height: 56px;
}
.hero-cta-band .hero-trial {
  margin: 14px 0 0;
  font-size: 14px;
  color: #b9d2f2;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.hero-cta-band .hero-coverage {
  margin: 8px 0 0;
  font-size: 13px;
  color: #b9d2f2;
  font-weight: 500;
  letter-spacing: 0.2px;
  opacity: 0.9;
}

/* Legacy hero classes kept for now — old gradient hero is no longer
   rendered, but other pages may reference these. */
.landing .hero {
  padding: 64px 28px 48px;
  background: linear-gradient(180deg, #0a2540 0%, #143058 100%);
  color: white;
  text-align: center;
}
.hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.hero-sub {
  font-size: 19px;
  line-height: 1.45;
  max-width: 640px;
  margin: 0 auto 32px;
  color: #c2d6f0;
  font-weight: 500;
}
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 52px;
  line-height: 22px;
  transition: transform 60ms ease, background-color 80ms ease, border-color 80ms ease;
}
.btn-primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-2); border-color: var(--blue-2); }
.btn-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255,255,255,0.5);
}
.btn-ghost:hover { background: rgba(255,255,255,0.15); }
.btn:active { transform: translateY(1px); }

.features {
  display: grid;
  gap: 24px;
  padding: 48px 28px;
  max-width: 1100px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
.feature {
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  background: white;
}
.feature-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--blue);
  background: #eaf2fc;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.feature h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.feature p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 720px) {
  .features { grid-template-columns: 1fr 1fr; }
}

.hero-trial {
  font-size: 13px;
  color: #b9d2f2;
  margin: 14px 0 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* PRICING */
.pricing {
  padding: 56px 28px 48px;
  background: #f4f7fb;
  border-top: 1px solid var(--line);
}
.pricing-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.pricing-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}
.pricing-sub {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 28px;
  font-weight: 600;
}
.pricing-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
  text-align: left;
}
@media (min-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid-single {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }
}
.price-card {
  background: white;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-card-featured {
  border-color: var(--blue);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.18);
}
.price-cad {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.price-save {
  background: var(--blue);
  color: white;
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
}
.price-amount {
  font-size: 38px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  line-height: 1;
}
.price-currency {
  font-size: 22px;
  vertical-align: top;
  font-weight: 700;
  margin-right: 1px;
  position: relative;
  top: 4px;
}
.price-period {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}
.price-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.price-features li {
  font-size: 15px;
  color: var(--ink);
  padding-left: 24px;
  position: relative;
  line-height: 1.4;
}
.price-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.btn-ghost-blue {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-ghost-blue:hover {
  background: var(--blue);
  color: white;
}
.pricing-note {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* WAITLIST — invite-only soft launch. Sits between cta-band and footer.
   Single-field email form that opens the user's mail client (no backend). */
.waitlist {
  background: linear-gradient(180deg, #0d2c4d 0%, #0a2540 100%);
  color: white;
  padding: 56px 28px 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.waitlist-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.waitlist-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
}
.waitlist-sub {
  font-size: 16px;
  line-height: 1.5;
  color: #c2d6f0;
  margin: 0 0 24px;
}
.waitlist-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.waitlist-input {
  flex: 1 1 260px;
  min-width: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  min-height: 52px;
}
.waitlist-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.waitlist-input:focus {
  outline: none;
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.12);
}
.waitlist-btn {
  flex: 0 0 auto;
  min-height: 52px;
  font-size: 16px;
  padding: 0 28px;
}
.waitlist-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: #b9d2f2;
  font-weight: 500;
  letter-spacing: 0.2px;
}
@media (max-width: 480px) {
  .waitlist-form { flex-direction: column; }
  .waitlist-btn  { width: 100%; }
}

.cta-band {
  background: var(--navy);
  color: white;
  padding: 40px 28px;
  text-align: center;
}
.cta-band-inner {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.cta-band p {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.foot-landing {
  display: block;
  padding: 24px 28px;
  border-top: 1px solid var(--line);
}
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.foot-brand { font-weight: 700; color: var(--navy); }
.foot-links {
  display: flex;
  gap: 18px;
  font-size: 14px;
}
.foot-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.foot-links a:hover { color: var(--navy); border-color: var(--navy); }

/* ===== LICENSES PAGE ===== */
.page-body {
  max-width: 760px;
  padding: 32px 28px 64px;
  margin: 0 auto;
  flex: 1 1 auto;
}
.page-body h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}
.page-body .lede {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 32px;
}
.lic-block {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-bottom: 22px;
}
.lic-block h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}
.lic-block p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 10px;
}
.lic-block ul {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
}
.lic-block .cite {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
}
.lic-block a { color: var(--blue); }
.lic-foot {
  margin-top: 32px;
  font-size: 13px;
  color: var(--muted);
}

/* Current points popup */
.pt-popup { font-family: inherit; min-width: 220px; }
.pt-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.pt-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
  gap: 12px;
}
.pt-key {
  font-weight: 700;
  color: var(--muted);
}
.pt-ts {
  font-size: 11px;
  color: var(--muted);
}

/* MOBILE */
@media (max-width: 720px) {
  :root { --topbar-h: 52px; --regions-h: 54px; }
  .brand-name { font-size: 18px; }
  .brand-sub  { font-size: 12px; }
  .updated    { font-size: 12px; }
  .region-btn { padding: 0 13px; font-size: 14px; min-height: 44px; }

  /* Collapsible panel — header always visible, body toggles. Touch targets
     bumped to 44px so wet-handed taps land. */
  .layers {
    right: 8px;
    top: 8px;
    width: 168px;
    padding: 6px 10px;
    max-height: calc(100vh - var(--topbar-h) - var(--regions-h) - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layers-header { display: flex; }
  .layer-toggle { font-size: 14px; min-height: 44px; gap: 12px; }
  .layer-toggle input[type="checkbox"] { width: 22px; height: 22px; }
  .select-row select { min-height: 40px; font-size: 14px; padding: 8px 12px; padding-right: 28px; }
  .mm-btn { min-height: 44px; font-size: 13px; }

  /* Readout: corner-badge default already mobile-friendly; just nudge in. */
  .readout {
    left: 8px;
    bottom: 8px;
    width: 220px;
  }

  .foot { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
}

/* ============================================================
   MOBILE STRIP + GPU PROMOTION (added 2026-05-09)
   Brett's "map = product, UI = invisible servant" mode for ≤480 px.
   Also nudges the GPU on all viewports for smoother drag/pan/zoom.
   ============================================================ */

/* GPU promotion — cheap on desktop, big help on mobile. */
.leaflet-pane.leaflet-tile-pane,
.leaflet-pane.leaflet-overlay-pane,
.leaflet-pane.leaflet-marker-pane {
  will-change: transform;
  transform: translateZ(0);
}

/* Mobile-only chrome — hidden by default, shown ≤480 px below. */
.mb-back-btn,
.mb-menu-btn { display: none; }

@media (max-width: 480px) {
  /* Backdrop-filter blurs over the map are the #1 lag source on phones —
     they force a full re-composite per drag frame. Mobile-only nuke;
     desktop keeps its blur. */
  .layers,
  .readout,
  .hover-tooltip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Hide topbar / regions / layers / sign-up CTA. Map fills viewport. */
  body.map-page .site-header,
  body.map-page .topbar,
  body.map-page .regions,
  body.map-page .layers,
  body.map-page .header-cta {
    display: none !important;
  }
  /* When ≡ tapped, slide regions + layers back in. */
  body.map-page.controls-open .regions { display: flex !important; }
  body.map-page.controls-open .layers  { display: block !important; }

  body.map-page { display: block; }
  body.map-page .map-shell { position: fixed; inset: 0; }

  .crosshair, .crosshair svg { width: 32px; height: 32px; }

  /* Bottom data strip — readout is the always-visible HUD. */
  .readout {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px; top: auto;
    margin: 0; padding: 10px 14px;
    background: rgba(10, 37, 64, 0.85);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    font-size: 14px;
    z-index: 999;
  }

  /* Tiny ≡ menu top-right. */
  .mb-menu-btn {
    display: flex;
    position: fixed; top: 12px; right: 12px;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(10, 37, 64, 0.70);
    color: #fff;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 200ms ease;
  }

  /* Tiny back arrow top-left → /offshore/. */
  .mb-back-btn {
    display: flex;
    position: fixed; top: 12px; left: 12px;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(10, 37, 64, 0.70);
    color: #fff;
    text-decoration: none;
    z-index: 1000;
    transition: opacity 200ms ease;
  }

  /* 3 s idle → fade chrome to 0.4 opacity. */
  body.map-page.controls-idle .mb-menu-btn,
  body.map-page.controls-idle .mb-back-btn {
    opacity: 0.4;
  }

  /* Constrain BAYCAST LIVE readout — was overflowing on iPhone 12 (390 px).
     Center it, cap at 360 px, tighter padding. */
  .readout {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    top: auto !important;
    transform: translateX(-50%);
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    padding: 8px 12px !important;
    font-size: 13px;
    gap: 4px;
  }

  /* Touch-action declarative pan hint — Brett's call. */
  body.map-page #map {
    touch-action: pan-x pan-y !important;
  }

  /* Kill any model/data dots on mobile (markers, circle markers, model
     grid points). User-dropped pins are also markers, so they vanish too —
     consistent with strip-mode "map = product, UI = invisible servant". */
  .leaflet-marker-pane > * {
    display: none !important;
  }
}