/* Sunset Map · sunset-map.com
   One stylesheet, no dependencies, no external requests.
   "Heure bleue" palette: the deep navy of the sky opposite the sunset, with
   the gold and coral of the heatmap as the light in it. */

:root {
  --bg: #0f1d31;
  --bg-raised: #1b2e4a;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.1);
  --hairline: rgba(255, 255, 255, 0.13);

  --gold: #ffd18d;
  --gold-soft: #ffe3b8;
  --gold-deep: #d6a259;
  --cream: #f8f0dd;

  --coral: #ff8f63;
  --coral-soft: #ffb18f;
  --rose: #d95f7f;

  --text: rgba(255, 255, 255, 0.92);
  --text-dim: rgba(248, 240, 221, 0.66);
  --text-faint: rgba(248, 240, 221, 0.55); /* 4.76:1 even on --bg-raised — keeps AA for small text */

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1100px;
  --radius: 18px;
  --radius-lg: 26px;
}

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  /* Keeps iOS Safari from inflating text on orientation change. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
a:hover { color: var(--gold-soft); }

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

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  color: var(--cream);
}
h3 { font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; }

/* Balanced headings, calmer paragraph rags. Progressive enhancement:
   browsers without text-wrap support simply ignore these. */
h1, h2, h3, .faq summary { text-wrap: balance; }
p, .faq .answer { text-wrap: pretty; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #221404;
  padding: 10px 16px;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  /* max() keeps content clear of the notch in landscape (viewport-fit=cover). */
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}

section { position: relative; }

.section-pad { padding: clamp(56px, 12vw, 88px) 0; }
.section-flush { padding-top: 0; }

/* Section headings. Kept as classes rather than inline styles: the CSP
   (style-src 'self') refuses style attributes. */
.h-section { font-size: clamp(30px, 4.4vw, 42px); }
.h-section-sm { font-size: clamp(28px, 4vw, 38px); }

.stack-sm { margin-top: 16px; }
.stack-md { margin-top: 26px; }

.lede {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 56ch;
}

/* ---------- Aurora ---------- */

/* The glow is plain radial gradients: no filter, no mix-blend-mode, no mask.
   Large blurred blend layers are the classic iOS Safari compositing bug (they
   rendered whole regions black) and cost GPU time on every frame. The gradient
   stops bake in the same softness; on a dusk-dark page, screen-blending these
   colours is visually the same as just painting them. */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora span {
  position: absolute;
  display: block;
  will-change: transform;
}

.aurora .a1 {
  width: 78vw; height: 46vh;
  left: -8vw; top: -16vh;
  background: radial-gradient(closest-side, rgba(255, 209, 141, 0.40), transparent 72%);
  animation: drift-a 16s ease-in-out infinite alternate;
}
.aurora .a2 {
  width: 62vw; height: 38vh;
  right: -10vw; top: -10vh;
  background: radial-gradient(closest-side, rgba(255, 143, 99, 0.34), transparent 72%);
  animation: drift-b 20s ease-in-out infinite alternate;
}
.aurora .a3 {
  width: 46vw; height: 30vh;
  left: 28vw; top: -20vh;
  background: radial-gradient(closest-side, rgba(217, 95, 127, 0.26), transparent 72%);
  animation: drift-c 24s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 5vh, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 2vh, 0) scale(1.05); }
  to   { transform: translate3d(-11vw, -3vh, 0) scale(1); }
}
@keyframes drift-c {
  from { transform: translate3d(-4vw, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 6vh, 0) scale(1.18); }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15, 29, 49, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--hairline); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand img {
  width: 32px; height: 32px;
  border-radius: 8px;
  filter: drop-shadow(0 0 10px rgba(255, 209, 141, 0.45));
}
.brand:hover { color: var(--cream); }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.nav a { color: var(--text-dim); }
.nav a:hover { color: var(--text); }

@media (max-width: 720px) {
  .nav .nav-link { display: none; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: var(--gold);
  color: #221404;
  box-shadow: 0 0 0 rgba(255, 209, 141, 0);
}
.btn-primary:hover {
  color: #221404;
  transform: translateY(-1px);
  box-shadow: 0 8px 34px rgba(255, 209, 141, 0.28);
}
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
}
.btn-ghost:hover { color: var(--text); background: var(--surface-strong); }

.btn-sm { padding: 9px 18px; font-size: 15px; }

/* App Store badge: drawn, not fetched. */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 18px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  line-height: 1.15;
}
.appstore[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}
/* At 0.55 element opacity the dimmed 12px line would drop to ~2.9:1; full
   --text keeps it at ~5.1:1 while the badge still reads as inactive. */
.appstore[aria-disabled="true"] .as-small { color: var(--text); }
.appstore:hover { color: var(--text); }
.appstore:not([aria-disabled="true"]):hover {
  background: var(--surface-strong);
  transform: translateY(-1px);
}
.appstore svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.appstore .as-small {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.appstore .as-big {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 96px 0 64px;
  isolation: isolate;
  /* The sun just under the horizon: a gold core inside a coral spread,
     anchored to the bottom edge. This is what makes the page glow. */
  background:
    radial-gradient(55% 42% at 50% 112%, rgba(255, 209, 141, 0.42), transparent 65%),
    radial-gradient(120% 85% at 50% 108%, rgba(255, 143, 99, 0.30), transparent 62%),
    var(--bg);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 480px) {
  /* The manual hero line break fights the narrow column; text-wrap: balance
     splits the heading into even lines on its own. */
  .hero h1 br { display: none; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-top: 64px; }
  .hero .device { max-width: 280px; }

  /* Centre the whole stacked hero on mobile. The device below is already
     centred; text-align handles the heading, lede and note, but the block
     image (img { display:block }) and the flex CTA row need explicit centring. */
  .hero-grid > div:first-child { text-align: center; }
  .hero-medallion { margin-left: auto; margin-right: auto; }
  .hero p.lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

.hero-medallion {
  width: 76px; height: 76px;
  margin-bottom: 26px;
  border-radius: 18px;
  filter: drop-shadow(0 0 26px rgba(255, 209, 141, 0.55));
}

.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
}
.hero h1 .accent {
  color: var(--gold);
  text-shadow: 0 0 34px rgba(255, 209, 141, 0.45);
}

.hero p.lede {
  margin-top: 20px;
  font-size: 19px;
}

.hero-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hero-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-faint);
}

/* 404 */
.hero-center {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.hero-center .hero-medallion { margin-left: auto; margin-right: auto; }
.hero-center h1 { font-size: clamp(34px, 5vw, 52px); }
.hero-center .lede { margin: 18px auto 30px; }

/* ---------- Device mockup ---------- */

/* The bezel wraps the screenshot at its intrinsic ratio: no aspect-ratio on the
   frame, no object-fit crop. The screen is exactly the capture, edge to edge —
   it already contains the real Dynamic Island, so nothing is drawn on top.
   Cool-dark bezel: the app's pastel heatmap UI pops against it. */
.device {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 46px;
  padding: 10px;
  background: linear-gradient(160deg, #2b3a52, #0d1725 42%, #223048);
  box-shadow:
    0 40px 90px rgba(2, 7, 14, 0.65),
    0 0 60px rgba(255, 209, 141, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.device-screen {
  position: relative;
  border-radius: 37px;
  overflow: hidden;
  background: #000;
}
.device-screen img { display: block; width: 100%; height: auto; }

/* ---------- Feature split ---------- */

/* A device beside a block of cards. The phone sits left on desktop, mirroring
   the hero (device right), and drops below the cards on small screens. */
.feature-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
  margin-top: 42px;
}
.feature-split .grid { margin-top: 0; }
.feature-split .card { padding: 24px; }
@media (max-width: 900px) {
  .feature-split { grid-template-columns: 1fr; gap: 44px; }
  .feature-split .device { order: 2; max-width: 280px; }
}

/* The problem section flips the split: text left, phone right. */
.feature-split-rev { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 900px) {
  .feature-split-rev { grid-template-columns: 1fr; }
}

/* ---------- Feature grid ---------- */

.grid {
  display: grid;
  gap: 18px;
  margin-top: 42px;
}
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.card {
  background: linear-gradient(180deg, rgba(255, 209, 141, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.card p { color: var(--text-dim); font-size: 16px; }

/* Numbered circles for the how-it-works steps. */
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--coral);
  color: #2b1207;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Inline icons ---------- */

/* Stroke icons live inline in the HTML: the CSP (style-src 'self', img-src
   'self' data:) rules out external icon files, and fill/stroke/width are
   presentation attributes, which it allows. */
.card-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  color: var(--gold);
}
.callout-icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  color: var(--gold);
}

/* ---------- Card screenshot strip ---------- */

/* A crop, not a bezel: three more phone frames in a row would tower over
   the step text and repeat the hero. */
.card-shot {
  border-radius: 14px;
  border: 1px solid var(--hairline);
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 4 / 3;
  background: #000;
}
.card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* Per-capture framing: the interesting part is not always at the top. */
.card-shot.shot-mid img { object-position: center 30%; }
.card-shot.shot-bottom img { object-position: center 88%; }

/* ---------- Pricing ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 42px;
  align-items: stretch;
}
@media (max-width: 980px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}
.plan.featured {
  border-color: rgba(255, 209, 141, 0.75);
  box-shadow: 0 0 40px rgba(255, 209, 141, 0.18);
}
.plan-badge {
  position: absolute;
  top: -11px; right: 18px;
  background: var(--coral);
  color: #2b1207;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.plan h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--text); }
.plan .price {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.plan .price small {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-faint);
}
.plan .trial {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gold);
  min-height: 21px;
}
.plan ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  font-size: 15px;
  color: var(--text-dim);
}
.plan li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 209, 141, 0.5);
}
.plan.featured li::before { background: var(--gold); }

.pricing-note {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-faint);
}

/* ---------- FAQ ---------- */

.faq { margin-top: 36px; }
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer {
  padding: 0 8px 20px 0;
  color: var(--text-dim);
  font-size: 16px;
  max-width: 74ch;
}

/* ---------- Closing panel ---------- */

.waitlist {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(255, 209, 141, 0.22), transparent 62%),
    var(--bg-raised);
  padding: 48px 32px;
  text-align: center;
}
.waitlist h2 { font-size: clamp(28px, 4vw, 38px); }
.waitlist p.lede { margin: 14px auto 0; }

.wl-privacy { margin-top: 8px; font-size: 14px; color: var(--text-faint); }

/* ---------- Legal / support pages ---------- */

.page-head {
  padding: 72px 0 32px;
  position: relative;
  isolation: isolate;
  /* A softer version of the hero's under-horizon glow. */
  background:
    radial-gradient(70% 60% at 50% 130%, rgba(255, 143, 99, 0.16), transparent 62%),
    var(--bg);
}
/* Without this the aurora (position:absolute, z-index:0) paints over the
   heading, which is unpositioned in-flow content. */
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(34px, 5vw, 48px); }
.page-head .updated {
  margin-top: 12px;
  color: var(--text-faint);
  font-size: 14px;
}

.prose {
  padding-bottom: 90px;
  max-width: 76ch;
}
.prose h2 {
  font-size: 24px;
  margin: 46px 0 14px;
}
.prose h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 28px 0 8px;
}
.prose p, .prose li { color: var(--text-dim); font-size: 16.5px; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 20px; margin: 12px 0; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }

.callout {
  border: 1px solid rgba(255, 209, 141, 0.28);
  background: rgba(255, 209, 141, 0.06);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 26px 0;
}
.callout p { color: var(--text); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 42px 0 56px;
  color: var(--text-faint);
  font-size: 14px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  align-items: center;
  justify-content: space-between;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
/* Padded to a >=43px tap target. */
.footer-links a {
  color: var(--text-dim);
  display: inline-block;
  padding: 10px 6px;
}
.footer-links a:hover { color: var(--gold); }

/* Required data attribution, small and quiet under the footer row. */
.footer-attrib {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-faint);
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .appstore { transition: none; }
}