/*
 * goweatherwise.com. No external requests. Palette from design/README.md; the hero and band skies use the app's
 * clear-day Today card (lib/today/weather_scene_card.dart).
 * Fonts: body text uses the system font. Headings, the wordmark, eyebrows and the status chip use Figtree, self-hosted
 * from assets/fonts/ (SIL OFL 1.1, licence in assets/fonts/OFL.txt; CSP font-src 'self'), with a metric-matched Arial
 * fallback so nothing shifts when it arrives.
 */
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
/*
 * Arial scaled to Figtree's width and line box, so headings keep their size and line breaks while the font loads.
 * Figtree: 1000 units per em, ascent 950, descent 250, no line gap. size-adjust is Figtree's width over Arial's for
 * the site's headings (measured in Chromium: 1.009 at weight 400, 0.967 at 700); each override is the Figtree metric
 * divided by size-adjust, because size-adjust scales the overrides too.
 */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 300 599;
  size-adjust: 100.9%;
  ascent-override: 94.15%;
  descent-override: 24.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 96.7%;
  ascent-override: 98.24%;
  descent-override: 25.85%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;
  --bg: #f6f5f0;
  --surface: #ffffff;
  --surface-alt: #e9eedd;
  --text: #1c3339;
  --muted: #586a6e;
  --muted-strong: #44585c; /* muted text over the hero's tinted glow (>= 4.5:1 at its strongest point) */
  --border: #dce1da;
  --link: #235e62;
  --accent: #173e49;
  --accent-ink: #f6f5f0;
  --icon-bg: #dcecee;
  --icon-ink: #173e49;
  --glow-sun: rgba(240, 198, 111, 0.45);
  --glow-sky: rgba(84, 167, 180, 0.22);
  --banner-bg: #f6e3ba;
  --banner-text: #1c3339;
  --banner-border: #e2c98e;
  --mark-bg: #ffe08a;
  --mark-text: #1c3339;
  --focus: #0b6e79;
  --phone-frame: #1c3339;
  --phone-frame-hi: #3f5f67;
  --phone-frame-lo: #0e2126;
  --phone-rim: rgba(255, 255, 255, 0.14);
  --phone-rim-top: rgba(255, 255, 255, 0.22);
  --phone-shadow: rgba(23, 62, 73, 0.34);
  --phone-shadow-near: rgba(23, 62, 73, 0.16);
  --input-border: #7a8986;
  --error-bg: #fbeae6;
  --error-border: #d9a197;
  --error-text: #5f1d12;
  /* The app's clear-day Today card sky. The hero panel carries no text; bands that do use --band-* (see .section-sky). */
  --sky-top: #214850;
  --sky-bottom: #426d70;
  --sun: #f0c66f;
  /*
   * Bands that carry text (.section-sky) run from midnight teal to a light end no lighter than #2e5a60, and their
   * gold glow peaks at 16% at the upper right: cream text stays >= 5.3:1 even on the glow at the light end, and the
   * band link colour 5.25:1 off the glow. The footer is midnight teal with cream (10.6:1) and #bfd0d2 (7.2:1) text.
   */
  --band-top: #173e49;
  --band-bottom: #2e5a60;
  --band-glow: rgba(240, 198, 111, 0.16);
  --on-sky: #f6f5f0;
  --on-sky-link: #a6e0e7;
  --footer-bg: #173e49;
  --footer-text: #f6f5f0;
  --footer-muted: #bfd0d2;
  --chip-border: #a9b5b0;
  --panel: #ecefe6;
  --radius: 20px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /*
   * Type scale: about 38 px on a 375 px phone up to 70 px on a laptop for h1. The cap keeps the home headline on two
   * lines ("Know what the / weather means.") in the 504 px copy column; at 73.6 px it broke into three.
   */
  --step-h1: clamp(2.4rem, 1.35rem + 4.2vw, 4.4rem);
  --step-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  --step-h3: 1.2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10232a;
    --surface: #16313a;
    --surface-alt: #1b3a43;
    --text: #e9efee;
    --muted: #a9bbbe;
    --muted-strong: #a9bbbe;
    --border: #2a4a54;
    --link: #8fd3dc;
    --accent: #f0c66f;
    --accent-ink: #1c3339;
    --icon-bg: #1f4550;
    --icon-ink: #8fd3dc;
    --glow-sun: rgba(240, 198, 111, 0.16);
    --glow-sky: rgba(84, 167, 180, 0.18);
    --banner-bg: #4a3a12;
    --banner-text: #fbefd2;
    --banner-border: #6b5521;
    --focus: #8fd3dc;
    --phone-frame: #07141a;
    --phone-frame-hi: #2f505b;
    --phone-frame-lo: #03090c;
    --phone-rim: rgba(160, 205, 214, 0.26);
    --phone-rim-top: rgba(200, 230, 236, 0.3);
    --phone-shadow: rgba(0, 0, 0, 0.5);
    --phone-shadow-near: rgba(0, 0, 0, 0.35);
    --input-border: #6b8f99;
    --error-bg: #42201b;
    --error-border: #85433a;
    --error-text: #fbdcd5;
    --chip-border: #4f7680;
    --panel: #142d35;
  }
}

[hidden] { display: none !important; }

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--font);
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

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

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--step-h1); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 0.4em; }
h2 { font-size: var(--step-h2); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 0.6em; }
h3 { font-size: var(--step-h3); font-weight: 650; margin: 0 0 0.35em; }
h1, h2 { text-wrap: balance; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 10px;
  font-weight: 650;
}
.skip-link:focus { top: 12px; }

/* Review banner (review builds only) */
.review-banner {
  background: var(--banner-bg);
  color: var(--banner-text);
  border-bottom: 1px solid var(--banner-border);
  font-size: 0.95rem;
}
.review-banner .wrap { padding-top: 10px; padding-bottom: 10px; }
.review-banner p { margin: 0; }

mark.review-marker {
  background: var(--mark-bg);
  color: var(--mark-text);
  padding: 0.05em 0.25em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 650;
}

/*
 * Header. On phones it stays in the page (it wraps to two rows, about 116 px at 375 px). From 800 px wide it is one
 * 68 px row (69 px with its border, --header-h), pinned on frosted cream (blur kept at 12 px and never animated),
 * solid where backdrop-filter is missing, but only on screens at least 600 px tall: a landscape phone or a laptop
 * zoomed to 200% keeps a static header, so pinned bars never take a third of the screen. The review banner above it
 * scrolls away. scroll-padding-top keeps anchors and focused elements clear of it (WCAG 2.4.11).
 */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
@media (min-width: 800px) {
  .header-inner { min-height: 68px; padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 800px) and (min-height: 600px) {
  :root { --header-h: 69px; }
  .site-header { position: sticky; top: 0; z-index: 10; }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header {
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
}
html { scroll-padding-top: calc(var(--header-h, 0px) + var(--jump-h, 0px) + 12px); }
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a { color: var(--text); text-decoration: none; font-weight: 550; padding: 6px 0; display: inline-block; }
.site-nav a:hover { color: var(--link); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; }

/* Home: hero */
.hero {
  background:
    radial-gradient(circle at 82% 18%, var(--glow-sun), transparent 42%),
    radial-gradient(circle at 10% 90%, var(--glow-sky), transparent 50%);
}
.hero-inner {
  display: grid;
  gap: 32px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 56px;
}
@media (min-width: 800px) {
  .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 48px; padding-top: 72px; padding-bottom: 80px; }
  /*
   * The copy column is about 0.512 x (viewport - 96 px) up to 1080 px, and "weather means." is about 6.9 em wide, so
   * the headline shrinks with the column (7.2vw - 8px) until --step-h1's cap takes over: two lines at every width.
   */
  .hero h1 { font-size: min(var(--step-h1), 7.2vw - 8px); }
}
.eyebrow {
  margin: 0 0 0.75em;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lede { font-size: 1.2rem; color: var(--text); max-width: 36em; text-wrap: pretty; }
.hero .eyebrow { color: var(--muted-strong); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 1.6em; }

/*
 * "Coming soon to Google Play": a quiet outlined chip, deliberately unlike the filled .button and unlike a store
 * badge (no logo, not a link, not a button). The gold dot is decorative.
 */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 16px 7px 13px;
  border: 1.5px solid var(--chip-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
}
.status-chip::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 28%, transparent);
}

/*
 * The hero stage: the app's clear-day Today card sky (gradient, gold glow and air currents, all decorative) with the
 * Today screen in front and the Radar screen tilted behind it. It carries no text.
 */
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  border-radius: 36px;
  background: linear-gradient(135deg, var(--sky-top), var(--sky-bottom));
  box-shadow: 0 30px 60px -34px rgba(23, 62, 73, 0.55);
}
.hero-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-stage .phone { --phone-shadow: rgba(6, 22, 27, 0.55); --phone-shadow-near: rgba(6, 22, 27, 0.32); }
/*
 * Desktop: the pair sits inside the panel with air on both sides (about 22 px left and 36 px right at 1280 px, 16 and
 * 26 at 820), so the tilted Radar phone never grazes the panel's edge. The Radar map's own credit falls below the
 * clip, so the sources strip under the hero credits the map (CARTO, OpenStreetMap).
 */
@media (min-width: 800px) {
  .hero-stage { aspect-ratio: 5 / 6; }
  .hero-stage .phone { position: absolute; top: 8%; left: 24%; width: 58%; max-width: none; }
  .phone-hero { z-index: 1; translate: 18% 0; }
  .phone-back { transform: translate(-34%, 10%) scale(0.86) rotate(-4deg); }
}
/* Phones: one phone, cropped to its upper part and fading into the sky; the decorative back phone is not shown. */
@media (max-width: 799px) {
  .hero-stage { --hero-phone: min(64vw, 270px); display: grid; justify-items: center; padding-top: 28px; }
  .phone-back { display: none; }
  .phone-hero {
    width: var(--hero-phone);
    margin-bottom: calc(var(--hero-phone) * -0.36);
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 84%);
    mask-image: linear-gradient(to bottom, #000 66%, transparent 84%);
  }
}

/* Sections */
.section { padding: 56px 0; }
.section-alt { background: var(--surface-alt); }
.note {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  color: var(--text);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.feature {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.feature p { margin: 0; color: var(--muted); }
.feature-plus { border-color: var(--accent); }
.icon {
  display: block;
  width: 44px;
  height: 44px;
  padding: 9px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--icon-bg);
  color: var(--icon-ink);
}

.split { display: grid; gap: 24px; }
@media (min-width: 800px) { .split { grid-template-columns: 1fr 1.3fr; gap: 48px; } }
.checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checklist li {
  position: relative;
  padding: 14px 16px 14px 46px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--link);
  border-bottom: 2.5px solid var(--link);
  transform: rotate(-45deg);
}
.text-link { font-weight: 650; }

/* Home: the data sources, by name only (no logos), between the hero and the features. */
.sources { border-block: 1px solid var(--border); background: var(--surface); }
.sources-strip {
  max-width: 62rem;
  margin: 0 auto;
  padding: 18px 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}
.sources-label { color: var(--text); font-weight: 650; }

/*
 * A full-width sky band (the home gallery): midnight teal with a gold sun glow at the upper right, as on the app's
 * Today card. Text inside uses the on-sky colours: cream text passes AA even where the glow peaks, and the glow's
 * ellipse ends well above the band's link at the bottom left (see the token notes above).
 */
.section-sky {
  --text: var(--on-sky);
  --muted: var(--on-sky);
  --link: var(--on-sky-link);
  --focus: var(--on-sky-link);
  color: var(--text);
  background:
    radial-gradient(ellipse 50% 42% at 84% 16%, var(--band-glow), rgba(240, 198, 111, 0.07) 45%, transparent),
    linear-gradient(165deg, var(--band-top), var(--band-bottom));
}
.section-sky .phone { --phone-shadow: rgba(4, 16, 20, 0.6); --phone-shadow-near: rgba(4, 16, 20, 0.35); --phone-rim: rgba(255, 255, 255, 0.2); }
/*
 * Review builds: a placeholder frame in the band keeps the band's dark surface, because the band's cream text would
 * vanish on the default white placeholder (cream on #173e49 is 10.6:1, and 7.5:1 under the 16% glow).
 */
.section-sky .phone-empty .phone-placeholder {
  background: radial-gradient(circle at 78% 14%, var(--band-glow), transparent 46%), var(--band-top);
}

/*
 * Home: closing band, then the deep-teal footer. The band's glow is centred on the icon (72 px padding + half of
 * 88 px) and has faded out by the seam with the section above (116 px is 70% of its 166 px height, where the
 * gradient ends), so there is no cut edge; dark mode uses the teal glow, because 16% gold over
 * the dark page mixes to olive. Text under it stays AA even at the peak (link #235e62 5.7:1 light, 7.2:1 dark).
 */
.cta-band {
  padding: 72px 0 80px;
  text-align: center;
  background: radial-gradient(ellipse 420px 166px at 50% 116px, var(--glow-sun), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  .cta-band { background: radial-gradient(ellipse 420px 166px at 50% 116px, var(--glow-sky), transparent 70%); }
}
.cta-band-inner { display: grid; justify-items: center; }
.cta-band h2 { font-size: var(--step-h2); margin: 0.55em 0 0.5em; }
.cta-band .status-chip { margin-bottom: 1.2em; }
.cta-band p:not(.status-chip) { max-width: 34rem; }
.cta-band p:last-child { margin-bottom: 0; }
.cta-icon { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 14px 34px -14px rgba(23, 62, 73, 0.45); }

/* Documents: legal pages and the deletion page */
.doc { max-width: 780px; padding-top: 40px; padding-bottom: 64px; }
.doc.narrow { max-width: 620px; }
.doc-header { margin-bottom: 28px; }
.doc h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.8rem); }
.doc h2 { font-size: 1.4rem; margin-top: 2em; }
.doc section > h2:first-child { margin-top: 0; }
.doc section { margin-top: 2.2em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.55em; }

.prose h2 { scroll-margin-top: 16px; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.prose strong { font-weight: 650; }

.callout {
  margin-top: 0;
  padding: 24px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
}
.doc .callout { margin-top: 0; }
.doc h3 { font-size: 1.12rem; margin: 1.8em 0 0.5em; }
.callout h3:first-child { margin-top: 0; }
.delete-account { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--border); }
.delete-account .callout { margin: 1.2em 0 0; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1em; }
.doc .steps { padding-left: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  min-height: 32px;
  margin-bottom: 14px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}
.callout p:last-child { margin-bottom: 0; }

.plain-list li::marker { color: var(--link); }

.keep-list { list-style: none; margin: 0; display: grid; gap: 12px; }
.doc .keep-list { padding: 0; }
.keep-list li {
  margin: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.keep-list p { margin: 0; }
.keep-list .keep-what { font-weight: 650; }
.keep-list .keep-how-long { color: var(--link); font-weight: 650; margin: 2px 0 6px; }
.keep-list p:last-child { color: var(--muted); }

.link-list { list-style: none; display: grid; gap: 10px; }
.doc .link-list { padding: 0; }

.section-more { margin: 28px 0 0; }

/* Screenshots: a CSS phone frame around a same-origin PNG, or a placeholder frame in review builds */
.screen {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than its cell, whatever the placeholder text */
  justify-items: center;
  align-content: start;
  gap: 14px;
}
/*
 * A Pixel-style frame: a thin gradient bezel with a light rim, a centred punch-hole camera (the screenshots' 9:41
 * demo status bar is empty in the middle) and a small power key on the right edge, with a teal-tinted shadow.
 */
.phone {
  --bezel: 7px;
  position: relative;
  width: 100%;
  max-width: 290px;
  padding: var(--bezel);
  border-radius: 40px;
  background: linear-gradient(150deg, var(--phone-frame-hi), var(--phone-frame) 42%, var(--phone-frame-lo));
  box-shadow:
    inset 0 0 0 1px var(--phone-rim),
    inset 0 1.5px 0 var(--phone-rim-top),
    0 30px 60px -24px var(--phone-shadow),
    0 8px 18px -8px var(--phone-shadow-near);
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--bezel) + 1.95%);
  left: 50%;
  width: max(6px, 3.4%);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: #0a1316;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.07);
}
.phone::after {
  content: "";
  position: absolute;
  top: 22%;
  right: -2.5px;
  width: 3px;
  height: 10%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--phone-frame), var(--phone-frame-hi));
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(40px - var(--bezel));
  background: var(--surface-alt);
}
.phone-empty .phone-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  aspect-ratio: 9 / 20;
  padding: 18px;
  border-radius: calc(40px - var(--bezel));
  text-align: center;
  background:
    radial-gradient(circle at 78% 14%, var(--glow-sun), transparent 46%),
    radial-gradient(circle at 18% 88%, var(--glow-sky), transparent 54%),
    var(--surface);
}
.phone-placeholder p { margin: 0; }
.phone-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.phone-slot { font-size: 1.35rem; font-weight: 750; color: var(--text); }
.phone-todo { font-size: 0.8rem; line-height: 1.4; overflow-wrap: anywhere; }
.screen figcaption {
  max-width: 22rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
}

/*
 * Home: screenshot gallery. Desktop: four phones in a row, the middle two raised. Below 800 px: a swipe row of
 * readable phones (about 250 px) that snap to the centre with the next one peeking in; the row scrolls inside its own
 * focusable region (.gallery-scroller), bleeding to the screen edges, so the page itself never scrolls sideways.
 */
.gallery-scroller { margin-top: 28px; }
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery .phone { --bezel: 5px; border-radius: 30px; }
.gallery .phone img,
.gallery .phone-placeholder { border-radius: 25px; }
@media (min-width: 800px) {
  .gallery-scroller { margin-top: 52px; }
  .gallery li:nth-child(2),
  .gallery li:nth-child(3) { transform: translateY(-24px); }
}
@media (max-width: 799px) {
  .gallery-scroller {
    margin-inline: -16px;
    padding: 4px 16px 8px;
    scroll-padding-inline: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .gallery-scroller::-webkit-scrollbar { display: none; }
  .gallery-scroller:focus-visible { outline-offset: -3px; border-radius: 12px; }
  /* max-content: the list is as wide as its phones, so the scroller's end padding gives the last one a gutter too. */
  .gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(70vw, 250px); gap: 20px; width: max-content; }
  .gallery li { scroll-snap-align: center; }
}
@media (min-width: 640px) and (max-width: 799px) {
  .gallery-scroller { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
}
/* Dots under the row where the browser supports scroll markers (Chrome and Edge 135+); elsewhere, swipe and snap. */
@supports selector(::scroll-marker) {
  @media (max-width: 799px) {
    .gallery-scroller { scroll-marker-group: after; }
    .gallery { counter-reset: shot; }
    .gallery-scroller::scroll-marker-group { display: flex; justify-content: center; gap: 12px; padding-top: 18px; }
    .gallery li { counter-increment: shot; }
    .gallery li::scroll-marker {
      content: "" / "Screenshot " counter(shot);
      width: 10px;
      height: 10px;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      color: var(--muted);
    }
    .gallery li::scroll-marker:target-current { background: currentColor; }
    .gallery li::scroll-marker:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  }
}
.gallery .phone-slot { font-size: 1.1rem; }
.gallery .phone-placeholder { padding: 14px 8px; }
.gallery .phone-todo { font-size: 0.7rem; }
.gallery .screen figcaption { font-size: 0.9rem; }

/* Features page */
.page-hero {
  padding: 48px 0 40px;
  background:
    radial-gradient(circle at 88% 10%, var(--glow-sun), transparent 40%),
    radial-gradient(circle at 6% 100%, var(--glow-sky), transparent 46%);
}
@media (min-width: 800px) { .page-hero { padding: 72px 0 48px; } }
.page-hero .eyebrow { color: var(--muted-strong); }
.page-hero .lede { margin-bottom: 0; }

/*
 * Features: a jump bar pinned under the header (at the top wherever the header scrolls away; not pinned on screens
 * under 500 px tall), then one numbered chapter per feature, alternate chapters on full-width panels. The bar is one
 * row that scrolls sideways
 * inside itself if it has to, so its height is fixed and scroll-padding-top can clear it. In browsers with
 * scroll-target-group (Chrome 140+) the pill for the chapter on screen fills in; elsewhere the pills stay plain.
 */
.jump-links {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .jump-links {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
/* Pinned only on screens at least 500 px tall (a landscape phone keeps it in the page); 57 px + 1 px border. */
@media (min-height: 500px) {
  .jump-links {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 9;
  }
  :root:has(.jump-links) { --jump-h: 58px; }
}
.jump-links .wrap { padding-inline: 0; }
.jump-links ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  height: 57px;
  align-items: center;
  margin: 0;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  scroll-target-group: auto;
}
.jump-links ul::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .jump-links ul { padding-inline: 24px; } }
.jump-links li { flex: none; }
.jump-links a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
.jump-links a:hover { border-color: var(--link); color: var(--link); }
.jump-links a:focus-visible { outline-offset: -1px; }
.jump-links a:target-current { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.feature-row {
  --row-tint: rgba(84, 167, 180, 0.26);
  padding: 40px 0;
  overflow: hidden;
  overflow: clip;
  scroll-margin-top: -12px; /* a chapter lands flush under the bars; its own padding gives the breathing room */
}
.feature-row:nth-child(even) { background: var(--panel); }
@media (min-width: 800px) { .feature-row { padding: 44px 0; } }
.feature-row-inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 800px) {
  .feature-row-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; }
  .feature-row:nth-child(even) .feature-copy { order: 2; }
}
.feature-row .phone { max-width: 260px; }
/* Each phone stands on a soft disc in its chapter's colour, kept inside the phone's height so captions stay clear. */
.feature-row .screen { position: relative; isolation: isolate; }
.feature-row .screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 44%;
  left: 50%;
  width: min(150%, 380px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--row-tint) 0 70%, transparent);
}
.tint-gold { --row-tint: rgba(240, 198, 111, 0.45); }
.tint-blue { --row-tint: rgba(131, 201, 230, 0.36); }
.tint-sage { --row-tint: rgba(150, 182, 122, 0.32); }
/* A dusk-blue pastel like the other discs: the phone's dark bezel stays outlined against it (7.3:1). */
.tint-night { --row-tint: rgba(58, 92, 124, 0.3); }
.tint-ring .screen::before { background: none; border: 12px solid rgba(240, 198, 111, 0.55); width: min(140%, 360px); }
@media (prefers-color-scheme: dark) {
  .feature-row { --row-tint: rgba(84, 167, 180, 0.22); }
  .tint-gold { --row-tint: rgba(240, 198, 111, 0.24); }
  .tint-blue { --row-tint: rgba(131, 201, 230, 0.2); }
  .tint-sage { --row-tint: rgba(150, 182, 122, 0.2); }
  .tint-night { --row-tint: rgba(58, 92, 124, 0.75); }
  /* Opaque muted gold: a translucent gold over the dark teal page mixes to olive. */
  .tint-ring .screen::before { border-color: #9c7f45; }
}
.kicker { display: flex; align-items: baseline; gap: 10px; margin-bottom: 0.9em; }
.kicker span { color: var(--link); font-size: 1rem; font-weight: 750; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.feature-copy { max-width: 36rem; }
.feature-copy h3 { margin-top: 1.4em; }
.feature-copy p { color: var(--text); }
.feature-copy p,
.feature-points li { text-wrap: pretty; }
.feature-points { margin: 0 0 1em; padding-left: 1.2em; }
.feature-points li { margin-bottom: 0.45em; }
.feature-points li::marker { color: var(--link); }

.cta-card {
  align-self: start;
  padding: 24px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
}
.cta-card .status-chip { margin-bottom: 1em; }
.cta-card p:last-child { margin-bottom: 0; }

/* Support form */
.help-links { margin: 0 0 28px; padding-left: 1.2em; }
.help-links li::marker { color: var(--link); }
.form-alerts { margin-bottom: 20px; }
.form-alert {
  padding: 14px 16px;
  border: 1px solid var(--error-border);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--error-bg);
  color: var(--error-text);
}
.form-alert p { margin: 0; }
.form-alert a { color: inherit; }
.support-form {
  display: grid;
  gap: 20px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/*
 * The Turnstile widget is a fixed 300 px wide (its "flexible" size has the same minimum), so the card's content box
 * must stay at least 300 px: narrower side padding up to 399 px (302 px of content at 360 px), and below 360 px no
 * card at all (at 320 px the widget sits at 16..316, inside the page's gutter, with no sideways scroll).
 */
@media (max-width: 399px) { .support-form { padding: 20px 12px; } }
@media (max-width: 359px) { .support-form { padding: 4px 0 0; border: 0; border-radius: 0; background: none; } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 650; }
.optional { color: var(--muted); font-weight: 400; }
.field-hint { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.char-count { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.cf-turnstile { min-height: 65px; }
.form-privacy { margin: 0; color: var(--muted); font-size: 0.92rem; }
.button {
  display: inline-block;
  justify-self: start;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
.button:disabled { opacity: 0.6; cursor: progress; }
/* The honeypot: hidden from people and assistive technology, still submitted (empty) with the form. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer: midnight teal on every page, with the mark, the tagline and labelled link columns. */
.site-footer {
  --text: var(--footer-text);
  --muted: var(--footer-muted);
  --link: var(--footer-text);
  --focus: var(--on-sky-link);
  margin-top: 0;
  background: var(--footer-bg);
  color: var(--text);
  font-size: 0.95rem;
}
.footer-inner {
  display: grid;
  gap: 32px;
  padding-top: 48px;
  padding-bottom: 28px;
}
@media (min-width: 640px) { .footer-inner { grid-template-columns: 1fr auto; } }
.footer-brand { margin-bottom: 10px; }
.footer-about p { margin: 0 0 0.3em; color: var(--muted); }
.footer-about .footer-tagline { color: var(--text); font-family: var(--font-display); font-weight: 600; }
/* The home page's closing band already ends on the tagline, a screen above. */
.page-home .footer-tagline { display: none; }
.footer-about a { color: var(--link); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.footer-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.footer-links a { color: var(--link); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-fine { padding-bottom: 36px; color: var(--muted); font-size: 0.875rem; }
.footer-fine p { margin: 0 0 0.4em; text-wrap: pretty; }
.footer-fine p:first-child { padding-top: 18px; border-top: 1px solid rgba(246, 245, 240, 0.16); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}