/* POI Navigator — site styles. Plain CSS, no build step, system fonts.
   The palette is the :root block: change a colour there and it changes everywhere. */

:root {
  color-scheme: only light;
  --ink: #12202f;
  --ink-2: #4a5866;
  --paper: #f6f8f3;
  --card: #ffffff;
  --pine: #1f3b2a;
  --route: #2e7cf6;
  --line: rgba(18, 32, 47, 0.1);
  --radius: 20px;
  --max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--route); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 12px; }
.wrap { width: min(var(--max), calc(100% - 32px)); margin-inline: auto; }
.muted { color: var(--ink-2); }

/* Header */
.header { padding: 18px 0; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--ink); }

/* App Store button: Apple's official black badge, which site.js points at the store.
   Without a store link it becomes a "Coming soon" pill. */
.store { display: inline-block; line-height: 0; }
.store img { display: block; width: auto; height: 56px; }
.store[aria-disabled="true"] {
  padding: 14px 24px; border-radius: 999px; line-height: inherit;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
  opacity: 0.75; cursor: default;
}

/* Hero: a dusk sky over the mountains, a bikepacker riding along the bottom, and the
   app floating on the right. The scene is the SVG in index.html; it only animates here. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #0b1730 0%, #27406b 45%, #f0a35e 78%, #f7c59f 100%);
}
.hero .scene { position: absolute; inset: 0; z-index: 0; }
.hero .scene svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.header-on-hero { position: relative; z-index: 2; }
.header-on-hero .brand, .header-on-hero .nav a { color: #fff; }
.header-on-hero .nav a { opacity: 0.85; }
.header-on-hero .nav a:hover { opacity: 1; color: #fff; }
.hero-content {
  position: relative; z-index: 2; padding: 40px 0 150px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
}
.hero h1 { text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); }
.hero .lede { font-size: 1.15rem; color: rgba(255, 255, 255, 0.9); max-width: 34em; margin-bottom: 28px; }
.hero .store[aria-disabled="true"] { background: #fff; color: var(--ink); }
.hero .note { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); margin-top: 16px; }

/* The floating phone */
.float { justify-self: center; animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
}
.phone {
  width: 300px; max-width: 72vw; aspect-ratio: 804 / 1748;
  border-radius: 46px; background: #0c0c0f; padding: 8px;
  box-shadow: 0 0 0 2px #2a2a30, 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 39px; }

/* The Dynamic Island: screenshots never include it (it's a cutout in the glass, not
   pixels), so the frames draw it. Sized and placed as on the iPhone 17 Pro Max, as
   fractions of the screen's width (the frame's width less its 8px edge each side);
   percentage margins and widths both measure the frame's width. */
.phone, .shot { position: relative; }
.phone::after, .shot::after {
  content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  margin-top: calc((100% - 16px) * 0.025); width: calc((100% - 16px) * 0.284);
  aspect-ratio: 125 / 37; border-radius: 999px; background: #000; pointer-events: none;
}

/* Scene animation */
.cloud { animation: drift linear infinite; }
.cloud-1 { animation-duration: 90s; }
.cloud-2 { animation-duration: 130s; animation-delay: -40s; }
.cloud-3 { animation-duration: 110s; animation-delay: -70s; }
@keyframes drift { from { transform: translateX(-30%); } to { transform: translateX(110%); } }
.star { animation: twinkle 3.5s ease-in-out infinite; }
.star:nth-child(2n) { animation-delay: -1.2s; }
.star:nth-child(3n) { animation-delay: -2.1s; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.sun-glow { animation: breathe 7s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
/* The bikepacker and backpacker follow the same curve as the ground path in the SVG; the
   backpacker walks it at about a third of the speed, so the bike keeps overtaking. */
.rider, .hiker {
  offset-path: path("M -140 654 C 200 640, 420 662, 700 632 S 1100 652, 1440 620 S 1700 640, 1800 630");
  offset-rotate: auto;
  animation: ride linear infinite;
}
.rider { animation-duration: 42s; animation-delay: -14s; }  /* already mid-scene on load */
.hiker { animation-duration: 120s; animation-delay: -30s; }
@keyframes ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* Parts that turn about their own local origin (a hip, a knee, a shoulder). */
.wheel, .crank { transform-box: fill-box; transform-origin: center; }
[class*="-thigh"], [class*="-shin"], [class*="harm-"] { transform-box: view-box; transform-origin: 0 0; }

/* Wheels and cranks turn; the legs follow the pedals (angles below are worked out from the
   leg lengths and the crank, one keyframe every 15° of crank). */
.wheel { animation: spin 1.1s linear infinite; }
.crank { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.leg-near-thigh { animation: leg-near-thigh 1s linear infinite; }
.leg-near-shin { animation: leg-near-shin 1s linear infinite; }
.leg-far-thigh { animation: leg-far-thigh 1s linear infinite; }
.leg-far-shin { animation: leg-far-shin 1s linear infinite; }
.rider-body { animation: bob 0.5s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1px); } }
/* Generated by Scripts/website/figures.py: pedal angles. */
@keyframes leg-near-thigh { 0% { transform: rotate(-52.8deg); } 4.17% { transform: rotate(-47.0deg); } 8.33% { transform: rotate(-40.9deg); } 12.5% { transform: rotate(-34.7deg); } 16.67% { transform: rotate(-29.0deg); } 20.83% { transform: rotate(-24.7deg); } 25% { transform: rotate(-22.4deg); } 29.17% { transform: rotate(-22.0deg); } 33.33% { transform: rotate(-23.2deg); } 37.5% { transform: rotate(-25.3deg); } 41.67% { transform: rotate(-28.0deg); } 45.83% { transform: rotate(-31.3deg); } 50% { transform: rotate(-35.1deg); } 54.17% { transform: rotate(-39.4deg); } 58.33% { transform: rotate(-44.0deg); } 62.5% { transform: rotate(-49.0deg); } 66.67% { transform: rotate(-53.9deg); } 70.83% { transform: rotate(-58.5deg); } 75% { transform: rotate(-62.2deg); } 79.17% { transform: rotate(-64.6deg); } 83.33% { transform: rotate(-65.3deg); } 87.5% { transform: rotate(-64.3deg); } 91.67% { transform: rotate(-61.7deg); } 95.83% { transform: rotate(-57.7deg); } 100% { transform: rotate(-52.8deg); } }
@keyframes leg-near-shin { 0% { transform: rotate(64.5deg); } 4.17% { transform: rotate(55.8deg); } 8.33% { transform: rotate(47.2deg); } 12.5% { transform: rotate(39.3deg); } 16.67% { transform: rotate(32.8deg); } 20.83% { transform: rotate(29.2deg); } 25% { transform: rotate(29.5deg); } 29.17% { transform: rotate(33.7deg); } 33.33% { transform: rotate(40.5deg); } 37.5% { transform: rotate(48.6deg); } 41.67% { transform: rotate(57.3deg); } 45.83% { transform: rotate(66.0deg); } 50% { transform: rotate(74.3deg); } 54.17% { transform: rotate(82.1deg); } 58.33% { transform: rotate(88.8deg); } 62.5% { transform: rotate(94.3deg); } 66.67% { transform: rotate(98.1deg); } 70.83% { transform: rotate(100.0deg); } 75% { transform: rotate(99.8deg); } 79.17% { transform: rotate(97.6deg); } 83.33% { transform: rotate(93.5deg); } 87.5% { transform: rotate(87.8deg); } 91.67% { transform: rotate(80.8deg); } 95.83% { transform: rotate(73.0deg); } 100% { transform: rotate(64.5deg); } }
@keyframes leg-far-thigh { 0% { transform: rotate(-35.1deg); } 4.17% { transform: rotate(-39.4deg); } 8.33% { transform: rotate(-44.0deg); } 12.5% { transform: rotate(-49.0deg); } 16.67% { transform: rotate(-53.9deg); } 20.83% { transform: rotate(-58.5deg); } 25% { transform: rotate(-62.2deg); } 29.17% { transform: rotate(-64.6deg); } 33.33% { transform: rotate(-65.3deg); } 37.5% { transform: rotate(-64.3deg); } 41.67% { transform: rotate(-61.7deg); } 45.83% { transform: rotate(-57.7deg); } 50% { transform: rotate(-52.8deg); } 54.17% { transform: rotate(-47.0deg); } 58.33% { transform: rotate(-40.9deg); } 62.5% { transform: rotate(-34.7deg); } 66.67% { transform: rotate(-29.0deg); } 70.83% { transform: rotate(-24.7deg); } 75% { transform: rotate(-22.4deg); } 79.17% { transform: rotate(-22.0deg); } 83.33% { transform: rotate(-23.2deg); } 87.5% { transform: rotate(-25.3deg); } 91.67% { transform: rotate(-28.0deg); } 95.83% { transform: rotate(-31.3deg); } 100% { transform: rotate(-35.1deg); } }
@keyframes leg-far-shin { 0% { transform: rotate(74.3deg); } 4.17% { transform: rotate(82.1deg); } 8.33% { transform: rotate(88.8deg); } 12.5% { transform: rotate(94.3deg); } 16.67% { transform: rotate(98.1deg); } 20.83% { transform: rotate(100.0deg); } 25% { transform: rotate(99.8deg); } 29.17% { transform: rotate(97.6deg); } 33.33% { transform: rotate(93.5deg); } 37.5% { transform: rotate(87.8deg); } 41.67% { transform: rotate(80.8deg); } 45.83% { transform: rotate(73.0deg); } 50% { transform: rotate(64.5deg); } 54.17% { transform: rotate(55.8deg); } 58.33% { transform: rotate(47.2deg); } 62.5% { transform: rotate(39.3deg); } 66.67% { transform: rotate(32.8deg); } 70.83% { transform: rotate(29.2deg); } 75% { transform: rotate(29.5deg); } 79.17% { transform: rotate(33.7deg); } 83.33% { transform: rotate(40.5deg); } 87.5% { transform: rotate(48.6deg); } 91.67% { transform: rotate(57.3deg); } 95.83% { transform: rotate(66.0deg); } 100% { transform: rotate(74.3deg); } }

/* The backpacker's stride: legs swing and bend, arms and poles swing against them. */
.hleg-near-thigh, .hleg-far-thigh { animation: stride-thigh 1.3s ease-in-out infinite; }
.hleg-near-shin, .hleg-far-shin { animation: stride-shin 1.3s ease-in-out infinite; }
.hleg-far-thigh, .hleg-far-shin { animation-delay: -0.65s; }
.harm-near { animation: stride-arm 1.3s ease-in-out infinite; animation-delay: -0.65s; }
.harm-far { animation: stride-arm 1.3s ease-in-out infinite; }
/* The forearms bend at the elbow, a little more as the arm swings forward. */
.harm-fore-near { animation: stride-forearm 1.3s ease-in-out infinite; animation-delay: -0.65s; }
.harm-fore-far { animation: stride-forearm 1.3s ease-in-out infinite; }
.hiker-body { animation: step 0.65s ease-in-out infinite alternate; }
@keyframes stride-thigh { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(22deg); } }
@keyframes stride-shin {
  0%, 100% { transform: rotate(4deg); } 45% { transform: rotate(6deg); }
  65% { transform: rotate(42deg); } 85% { transform: rotate(18deg); }
}
@keyframes stride-arm { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-22deg); } }
@keyframes stride-forearm { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-42deg); } }
@keyframes step { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* Still, for visitors who've asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .float, .cloud, .star, .sun-glow, .rider, .hiker, .rider *, .hiker * { animation: none; }
  .rider { offset-distance: 45%; }
  .hiker { offset-distance: 38%; }
}

/* Screenshots in the gallery */
.shot { display: block; }
.shots img {
  display: block; border-radius: 36px; border: 8px solid #10151b;
  box-shadow: 0 24px 48px -20px rgba(11, 23, 48, 0.45);
}

/* Sections */
.section { padding: 64px 0; }
/* Back-to-back sections share one gap rather than stacking two. */
.section + .section { padding-top: 0; }
.section-head { max-width: 640px; margin-bottom: 32px; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.feature p { color: var(--ink-2); margin: 0; }

.walkthrough {
  display: block; width: 100%; height: auto; background: #0c1330;
  border-radius: var(--radius); box-shadow: 0 24px 48px -20px rgba(11, 23, 48, 0.45);
}

.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.shots figure { margin: 0; }
.shots figcaption { text-align: center; font-size: 0.95rem; color: var(--ink-2); margin-top: 12px; }

/* Text pages (support, privacy) */
.page { padding: 24px 0 64px; }
.page .wrap { max-width: 760px; }
.page h2 { font-size: 1.3rem; margin-top: 36px; }
.page ul { padding-left: 20px; margin: 0 0 12px; }
.page li { margin-bottom: 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 24px 0; }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { font-weight: 600; cursor: pointer; }
details p { color: var(--ink-2); margin: 10px 0 0; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 0.9rem; color: var(--ink-2); }
.footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* The KepMad Systems logo (assets/kepmad-logo.png: the logo in --ink on transparent) */
.maker { display: flex; align-items: center; gap: 14px; }
.maker img { width: auto; height: 52px; opacity: 0.85; }
.footer a { color: var(--ink-2); margin-left: 16px; }

/* Narrow screens */
@media (max-width: 860px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; padding-top: 24px; }
  .hero .lede { margin-inline: auto; }
  .cloud { opacity: 0.2; }
  .features { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .nav { gap: 6px 14px; }
  .footer a { margin: 0 16px 0 0; }
}