/* Mountain Identifier — site styles
   Palette sampled from the App Store screenshots (see app.md "Design cues") so
   the site and the listing read as one product.
     brand blue #0066F3 (screenshot headlines)   action blue #1A94FF (Share button)
     navy #182443 (Peaks Passport card)          grey #F1F1F1 (screenshot frames)
   Ported from flock-web's main.css; the class names are unchanged so fixes can
   move between the two repos. */

:root {
  --navy: #182443;
  --navy-2: #1f2d52;
  --navy-3: #2b3b66;
  --blue: #0066f3;
  --blue-hover: #0057d1;
  --blue-ink: #0057d1;        /* blue as TEXT: 5.4:1 on #f1f1f1; brand blue is 4.4 */
  --blue-light: #8cc4ff;      /* accent on navy: 9:1 contrast */
  --blue-soft: rgba(0, 102, 243, 0.08);
  --grey: #f1f1f1;
  --grey-2: #e6e8ec;
  --paper: #ffffff;
  --text: #101010;
  --text-mute: #545b66;
  --text-invert: #f4f6fb;
  --text-invert-mute: #b4bfd6;
  --line: rgba(16, 16, 16, 0.12);
  --line-invert: rgba(255, 255, 255, 0.14);

  --wrap: 1120px;
  --wrap-narrow: 760px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(24, 36, 67, 0.06), 0 2px 8px rgba(24, 36, 67, 0.04);
  --shadow-md: 0 4px 12px rgba(24, 36, 67, 0.08), 0 16px 40px rgba(24, 36, 67, 0.08);
  --shadow-lg: 0 20px 60px rgba(8, 14, 30, 0.35);

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

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.7vw, 4rem);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 800;
}
h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); letter-spacing: -0.03em; }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1.1em; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--grey { background: var(--grey); }
.section--navy { background: var(--navy); color: var(--text-invert); }
.section--navy h2, .section--navy h3 { color: var(--text-invert); }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-ink);
  margin-bottom: 0.9rem;
}
.section--navy .eyebrow, .hero .eyebrow { color: var(--blue-light); }

.lede { font-size: var(--step-1); color: var(--text-mute); max-width: 62ch; }
.section--navy .lede { color: var(--text-invert-mute); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--blue); color: #fff;
  padding: 0.75rem 1.25rem; font-weight: 700; z-index: 999;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(24, 36, 67, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-invert);
  color: var(--text-invert);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 62px;
}
.brand {
  display: flex; align-items: center; gap: 0.65rem;
  font-weight: 800; letter-spacing: -0.02em; text-decoration: none;
  font-size: 1.05rem; color: var(--text-invert);
}
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.site-nav__links { display: contents; }
.site-nav a {
  color: var(--text-invert-mute); text-decoration: none;
  font-size: 0.94rem; font-weight: 600;
}
.site-nav a:hover { color: var(--text-invert); }
.site-nav .btn { color: #fff; }

/* Hamburger. Hidden on desktop, where every link is already in the bar. */
.nav-toggle {
  display: none; order: 3; flex: none;
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-invert);
  border-radius: 10px; color: var(--text-invert); cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, background 0.18s ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { gap: 0.7rem; }
  /* The panel drops out of the header, full bleed. `visibility` rather than
     `display` so it can animate and so the links stay out of the tab order
     while closed. */
  .site-nav__links {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(24, 36, 67, 0.98);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line-invert);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .site-nav__links[data-open] { visibility: visible; opacity: 1; transform: none; }
  .site-nav__links a {
    padding: 0.95rem 1.25rem; font-size: 1.02rem;
    border-bottom: 1px solid var(--line-invert);
  }
  .site-nav__links a:last-child { border-bottom: 0; }
}
/* No script, no toggle — fall back to showing every link inline. */
.no-js .nav-toggle { display: none; }
@media (max-width: 720px) {
  .no-js .site-nav__links { position: static; visibility: visible; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700; font-size: 0.98rem; text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn--sm { padding: 0.5rem 1.05rem; font-size: 0.88rem; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px rgba(0, 102, 243, 0.28); }
.btn--primary:hover { background: var(--blue-hover); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 102, 243, 0.36); }
.btn--ghost { border-color: var(--line-invert); color: var(--text-invert); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn--outline { border-color: var(--line); color: var(--text); }
.btn--outline:hover { background: rgba(24, 36, 67, 0.04); }

/* App Store badge — Apple's own artwork, used unmodified. Apple's marketing
   guidelines allow uniform scaling only, so nothing here may recolour, crop or
   re-round the SVG. The wrapper carries the hover lift; the image never
   changes. Minimum badge height is 40px. */
.appstore {
  display: inline-block; line-height: 0;
  border-radius: 9px; text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.appstore img { display: block; height: 48px; width: auto; }
.appstore:hover { transform: translateY(-2px); filter: brightness(1.08); }
.appstore:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (max-width: 520px) { .appstore img { height: 44px; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate;
  background: var(--navy); color: var(--text-invert);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__inner { position: relative; }
.hero h1 { color: #fff; margin-bottom: 0.9rem; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--blue-light); }
.hero__sub {
  font-size: var(--step-1); color: var(--text-invert-mute);
  max-width: 48ch; margin-bottom: 2rem;
}

/* The generated panorama: the app's live view, drawn. Full bleed, cropped
   (preserveAspectRatio slice) from the middle on narrow screens, which reads
   like panning the phone. Label text is SVG, so it scales with the strip. */
.hero__pano {
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
  position: relative;
}
.pano { width: 100%; height: clamp(240px, 34vw, 440px); display: block; }
.pano-flag rect { fill: #fff; filter: drop-shadow(0 4px 10px rgba(8, 14, 30, 0.35)); }
.pano-stem { stroke: #fff; stroke-width: 2; stroke-opacity: 0.85; }
.pano-dot { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.pano-name { font: 700 19px var(--font); fill: var(--text); letter-spacing: -0.01em; }
.pano-meta { font: 600 15px var(--font); fill: var(--blue); }
.hero__pano figcaption {
  position: absolute; right: 1rem; bottom: 0.7rem;
  font-size: 0.78rem; color: rgba(244, 246, 251, 0.72); max-width: 44ch; text-align: right;
}

@media (max-width: 700px) {
  .hero h1 { max-width: none; }
  .hero__pano figcaption { position: static; text-align: left; padding: 0.7rem 1.25rem 0; color: var(--text-invert-mute); }
}

.trust-strip {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line-invert);
  border: 1px solid var(--line-invert); border-radius: var(--radius);
  overflow: hidden; margin-top: clamp(2.4rem, 5vw, 3.5rem);
}
.trust-strip div { background: var(--navy-2); padding: 1.05rem 1.15rem; }
.trust-strip strong {
  display: block; font-size: var(--step-2); font-weight: 800;
  color: var(--blue-light); letter-spacing: -0.03em; line-height: 1.1;
}
.trust-strip span { font-size: var(--step--1); color: var(--text-invert-mute); }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 0.4rem; }
.card p { margin: 0; color: var(--text-mute); font-size: 0.97rem; }
.card--link { text-decoration: none; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(0, 102, 243, 0.45); }
.card__more { color: var(--blue-ink); font-weight: 700; font-size: 0.92rem; margin-top: 0.9rem; display: inline-block; }

.step { counter-increment: step; position: relative; padding-left: 3.4rem; }
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue-ink);
  font-weight: 800; font-size: 1.05rem;
  border: 1.5px solid rgba(0, 102, 243, 0.35);
}
.steps { counter-reset: step; }
.section--navy .step::before { background: rgba(140, 196, 255, 0.14); color: var(--blue-light); }

/* ---------------------------------------------------------------- shots */
.shots {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 240px);
  gap: 1.2rem; overflow-x: auto;
  padding: 0.5rem 0 1.6rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.shots figure { margin: 0; scroll-snap-align: center; }
.shots img {
  width: 100%; border-radius: 20px;
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  background: var(--grey-2);
}
.shots figcaption {
  margin-top: 0.85rem; font-size: 0.92rem;
  color: var(--text-mute); text-align: center;
}
.shots figcaption b { display: block; color: var(--text); font-size: 0.98rem; }

/* ---------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-weight: 700; font-size: var(--step-1);
  position: relative; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__body { padding-bottom: 1.4rem; max-width: 68ch; }
.faq__body p { color: var(--text-mute); }
.faq__body a { color: var(--blue-ink); font-weight: 700; }

/* ---------------------------------------------------------------- tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.95rem;
  min-width: 460px;
}
table.data th, table.data td {
  text-align: left; padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
table.data th {
  font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-mute); font-weight: 800;
}
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover { background: rgba(0, 102, 243, 0.05); }
table.data a { color: var(--text); font-weight: 600; text-decoration: none; }
table.data a:hover { color: var(--blue-ink); text-decoration: underline; }


/* ---------------------------------------------------------------- stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem; }
.stat {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; background: var(--paper);
}
.stat strong {
  display: block; font-size: var(--step-3); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; color: var(--navy);
}
.stat span { font-size: var(--step--1); color: var(--text-mute); }
.section--grey .stat { background: rgba(255, 255, 255, 0.66); }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; font-size: var(--step-2); }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--blue-ink); font-weight: 600; }
.prose blockquote {
  margin: 1.6rem 0; padding: 1rem 1.3rem;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .answer {
  font-size: var(--step-1); font-weight: 600; color: var(--text);
  border-left: 3px solid var(--blue); padding: 0.2rem 0 0.2rem 1.2rem;
  margin-bottom: 1.8rem;
}

.inline-cta {
  margin: 2.4rem 0; padding: 1.6rem;
  background: var(--grey); border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 102, 243, 0.18);
}
.inline-cta h3 { margin-bottom: 0.35rem; }
.inline-cta p { color: var(--text-mute); margin-bottom: 1.1rem; }

.breadcrumbs { font-size: 0.9rem; color: var(--text-mute); margin-bottom: 1.4rem; }
.breadcrumbs a { color: var(--text-mute); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue-ink); text-decoration: underline; }
.breadcrumbs span { opacity: 0.5; margin: 0 0.4rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0; }
.pill {
  display: inline-block; padding: 0.35rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.88rem; text-decoration: none; color: var(--text-mute);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pill:hover, .pill:focus-visible { border-color: var(--blue-ink); color: var(--text); }
/* On the dark sections --text is near-black, so the plain :hover rule above
   made the label disappear on hover. Dark grounds get the inverted pair. */
.section--navy .pill, .hero .pill {
  border-color: var(--line-invert); color: var(--text-invert-mute);
}
.section--navy .pill:hover, .section--navy .pill:focus-visible,
.hero .pill:hover, .hero .pill:focus-visible {
  border-color: var(--blue-light); color: #fff; background: rgba(140, 196, 255, 0.14);
}

.note {
  font-size: var(--step--1); color: var(--text-mute);
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy); color: var(--text-invert-mute);
  padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; font-size: 0.94rem;
}
.site-footer .footer__h {
  color: #fff; font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 0.9rem;
}
.site-footer a { color: var(--text-invert-mute); text-decoration: none; }
.site-footer a:hover { color: var(--blue-light); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.5rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer__legal {
  margin-top: 2.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-invert);
  font-size: 0.86rem; line-height: 1.7;
}
.footer__legal p { margin-bottom: 0.6rem; }

/* sticky mobile download bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  background: rgba(24, 36, 67, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-invert);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 0.9rem;
}
.sticky-cta img { width: 34px; height: 34px; border-radius: 8px; }
.sticky-cta div { flex: 1; min-width: 0; color: var(--text-invert); line-height: 1.25; }
.sticky-cta b { display: block; font-size: 0.94rem; }
.sticky-cta small { color: var(--text-invert-mute); font-size: 0.8rem; }
@media (max-width: 720px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 74px; }
}

/* Guide cards sit on the navy band on the home page. */
.section--navy .card { background: var(--navy-2); border-color: var(--line-invert); box-shadow: none; }
.section--navy .card h3 { color: #fff; }
.section--navy .card p { color: var(--text-invert-mute); }
.section--navy .card__more { color: var(--blue-light); }
.section--navy .card--link:hover { border-color: var(--blue-light); }
.section--navy .btn--ghost { border-color: var(--line-invert); color: var(--text-invert); }
.section--grey .card, .section--grey .inline-cta { background: var(--paper); }

/* Tables inside guides need air before the next paragraph. */
.prose .table-scroll { margin: 1.2rem 0 1.5rem; }
.prose .note { margin: 1.2rem 0 1.5rem; }

/* Three stats, three columns, even on a phone. */
.trust-strip { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) {
  .trust-strip div { padding: 0.85rem 0.75rem; }
  .trust-strip strong { font-size: var(--step-1); }
}

/* Keep the wordmark on one line; on the narrowest phones the sticky bar
   carries the download button, so the header one steps aside. */
.brand { white-space: nowrap; }
@media (max-width: 400px) {
  .site-nav > .btn { display: none; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}