/* getmapn.com
   The landing page is the app's launch screen continued: the same teal
   gradient, the same folded-map hero, and then it stops. Everything below the
   gradient is deliberately quiet — the identity is carried in one place rather
   than sprinkled as teal accents over a generic layout.

   Palette from Color+App.swift; Nunito stands in for SF Rounded. */

:root {
  --teal:      #00A6AB;
  --teal-lit:  #00D1D9;
  --ink:       #0B1719;
  --ink-soft:  #34484C;
  --muted:     #5E7276;
  --line:      #EAF1F2;
  --surface:   #FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

/* ---------- landing: the hero ---------- */

.hero {
  background: linear-gradient(140deg, var(--teal-lit), var(--teal));
  color: #fff;
  text-align: center;
  padding: clamp(44px, 8vw, 76px) 26px clamp(50px, 8vw, 80px);
}

.hero-inner { max-width: 460px; margin: 0 auto; }

/* svg, not img: the hero map is inlined into the page so its pin-drop
   animation actually runs. See the comment at the hero markers in index.html. */
.hero svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.wordmark {
  font-size: clamp(42px, 11vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: clamp(20px, 4vw, 30px);
}

.tagline {
  font-size: clamp(16px, 3.6vw, 19px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.93);
  margin-top: 6px;
}

.intro {
  font-size: clamp(15px, 3.4vw, 17px);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  margin-top: clamp(20px, 4vw, 26px);
}

/* Apple's guidelines: the badge ships unmodified, so the only thing set here
   is how big it is and how much room it gets. 168px is comfortably above
   their minimum, and the top margin doubles as the clear space they ask for
   — at least a tenth of the badge's height on every side, which nothing here
   comes near. */
.badge {
  display: inline-block;
  margin-top: clamp(24px, 5vw, 32px);
  line-height: 0;
}

.badge img {
  width: 168px;
  height: auto;
  display: block;
}

/* The pre-launch pill this replaced. Kept because the app being rejected is a
   real possibility, and putting it back is then a one-line markup change
   rather than an archaeology exercise. */
.soon {
  display: inline-block;
  margin-top: clamp(24px, 5vw, 32px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 8px 18px;
}

/* ---------- landing: the screenshot strip ---------- */

/* Wider than anything else on the page, and allowed to scroll sideways rather
   than shrink — four phones at a legible size beat four thumbnails that fit.
   The row centres itself when the viewport can hold it and scrolls when it
   can't, with no breakpoint doing the deciding. */
.shots {
  overflow-x: auto;
  padding: clamp(30px, 6vw, 48px) 0 0;
  scroll-snap-type: x proximity;
  scrollbar-width: none;            /* the row is obviously scrollable from
                                       the cropped fourth phone */
}
.shots::-webkit-scrollbar { display: none; }

.shots-row {
  display: flex;
  gap: 18px;
  width: max-content;
  margin: 0 auto;
  padding: 0 26px;
}

.shots img {
  display: block;
  width: 196px;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 22px rgba(11, 23, 25, 0.10);
  scroll-snap-align: center;
}

/* ---------- landing: the three uses ---------- */

.uses {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(44px, 8vw, 68px) 26px clamp(36px, 6vw, 52px);
}

.use { display: flex; gap: 18px; padding: 20px 0; }
.use + .use { border-top: 1px solid var(--line); }

/* Numbered because these genuinely are a sequence — you pin, friends follow,
   and the recommendations fall out of both — not a feature list. */
.use .n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--teal);
  padding-top: 5px;
  flex: 0 0 20px;
}

.use h2 { font-size: 18px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; }
.use p  { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ---------- landing: Memory Lane ---------- */

/* Deliberately not a fourth numbered use. The numbering above is a sequence —
   you pin, friends follow, recommendations fall out of both — and Memory Lane
   is not the next step in it; it is a faster way to do the first one. A card
   says "and there is also this" without pretending to continue the list. */
.lane {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 26px clamp(44px, 8vw, 68px);
}

/* Two boxes in a row sit close, as one group, rather than a section apart. */
.lane:has(+ .lane) { padding-bottom: 14px; }

.lane-inner {
  background: var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}

.lane h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

/* 22 rather than matching the 18px cap-height of the heading beside it: a
   single-bladed signpost needs visible post above the blade or it reads as a
   flag, and those few pixels are the whole difference. */
.lane-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: var(--teal);
}
.lane p { font-size: 15.5px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ---------- inner pages ---------- */

/* The same gradient as the landing hero, which is the same one the app puts
   behind its own wordmark — so arriving at /privacy from inside the app does
   not feel like leaving it. No bottom border: the colour already separates
   the header from the page, and a hairline on top of it just muddies the
   edge. */
.masthead { background: linear-gradient(140deg, var(--teal-lit), var(--teal)); }

.masthead-inner,
.page {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 26px;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
}

.masthead .mark {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.masthead nav { display: flex; gap: 20px; font-size: 15px; font-weight: 600; }
/* 0.75 rather than a darker teal: on this gradient a tinted link goes muddy
   at the light end and disappears at the dark one, while white at reduced
   opacity holds its contrast the whole way across. */
.masthead nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: #fff; }

.page { padding-top: 44px; padding-bottom: 76px; }

.page h1 {
  font-size: clamp(30px, 6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 10px;
}

.page h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 34px 0 8px;
}

.page p, .page ul { margin: 0 0 14px; }
.page ul { padding-left: 22px; }
.page li { margin-bottom: 7px; }
.page p, .page li { color: var(--ink-soft); }

.updated { font-size: 14px; color: var(--muted); margin: 0 0 30px; }

.mail {
  display: inline-block;
  font-size: clamp(20px, 5vw, 25px);
  font-weight: 800;
  color: var(--teal);
  text-decoration: none;
  margin: 8px 0 20px;
  letter-spacing: -0.01em;
}

.aside { font-size: 14.5px; color: var(--muted); margin-top: 30px; }

/* Wide content scrolls in its own container so the page body never does. */
.tbl-scroll { overflow-x: auto; margin: 0 0 14px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
th, td {
  text-align: left;
  padding: 9px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
th {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 24px 26px 32px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}
footer a { color: var(--muted); text-decoration: none; margin: 0 10px; }
footer a:hover { color: var(--teal); }
footer .legal { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}