/* Metro Hub — landing site
   Palette and type are lifted from the iOS app's design tokens so the site and
   the app read as one product:
     Assets.xcassets/Colors/*.colorset  →  the --c-* variables below
     Resources/Fonts/Instrument{Serif,Sans}  →  the two families
   Keep them in sync by hand; nothing generates this file.

   The landing page is deliberately ONE SCREEN — everything is sized against
   100dvh so there is nothing to scroll past. The legal pages (privacy, terms,
   support) are ordinary scrolling documents and share only the tokens, the
   masthead and the footer. */

:root {
  color-scheme: light dark;

  /* Brand — AccentSage / AccentSageDeep */
  --sage: #8bbf84;
  --sage-deep: #3b6e52;

  /* Surfaces — BackgroundPrimary / SurfacePrimary / SurfaceMuted / SurfaceLavender */
  --bg: #f2f4f7;
  --surface: #ffffff;
  --muted: #e8ebf0;
  --lavender: #eeedf8;

  /* Type — TextPrimary / TextSecondary / TextTertiary */
  --ink: #111826;
  --ink-2: #6b7280;
  --ink-3: #9ca3af;

  --line: rgba(17, 24, 38, 0.10);

  /* The glass pane */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 1px 2px rgba(17, 24, 38, .04), 0 24px 70px -12px rgba(17, 24, 38, .18);

  --serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(18px, 4vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sage: #7db87a;
    --sage-deep: #5ea85a;
    --bg: #12141c;
    --surface: #1c2030;
    --muted: #262d3f;
    --lavender: #1e2038;
    --ink: #f9fafb;
    --ink-2: #9ca3af;
    --ink-3: #6b7280;
    --line: rgba(249, 250, 251, 0.12);

    --glass-bg: rgba(34, 39, 56, 0.55);
    --glass-line: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 70px -12px rgba(0, 0, 0, .55);
  }
}

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

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

img, svg { max-width: 100%; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  z-index: 100;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── The lit backdrop the glass sits on ───────────────── */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.aurora .a1 {
  width: 46vw; height: 46vw;
  top: -14vw; left: -8vw;
  background: var(--sage);
}
.aurora .a2 {
  width: 40vw; height: 40vw;
  bottom: -16vw; right: -6vw;
  background: #b9b3e8;
  opacity: .42;
}
.aurora .a3 {
  width: 30vw; height: 30vw;
  top: 44%; left: 42%;
  background: var(--sage-deep);
  opacity: .22;
}
@media (prefers-color-scheme: dark) {
  .aurora span { opacity: .3; filter: blur(85px); }
  .aurora .a2 { opacity: .26; }
  .aurora .a3 { opacity: .2; }
}

/* ── Masthead ─────────────────────────────────────────── */

.masthead {
  padding-top: env(safe-area-inset-top, 0px);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}

.mark {
  width: 25px; height: 25px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--sage), var(--sage-deep));
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mark svg { width: 14px; height: 14px; display: block; }

.masthead nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 26px);
  font-size: 15px;
}
.masthead nav a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease;
}
.masthead nav a:hover { color: var(--ink); }

/* ── One-screen landing ───────────────────────────────── */

.stage {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.stage-main {
  display: grid;
  place-items: center;
  padding-block: clamp(8px, 2vh, 28px);
}

.glass {
  width: 100%;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  padding: clamp(26px, 3.6vw, 52px) clamp(24px, 3.6vw, 54px);
  border-radius: 30px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage-deep);
  flex: none;
}

h1 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
}
h1 em { font-style: italic; color: var(--sage-deep); }

.lede {
  margin: 0 0 30px;
  max-width: 42ch;
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  line-height: 1.55;
  color: var(--ink-2);
}


/* ── Store badges ─────────────────────────────────────── */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 0 0 15px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 19px 10px 16px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.store:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(17, 24, 38, .45); }
.store:active { transform: translateY(0); }
.store > svg { width: 23px; height: 23px; flex: none; }
.store .lines { display: grid; text-align: left; line-height: 1.16; }
.store .lines small { font-size: 10.5px; opacity: .78; letter-spacing: .01em; }
.store .lines strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* Neither store has a listing yet — both badges are deliberately inert.
   When a listing exists: set the href, drop aria-disabled, and change the
   small line to "Download on the" / "GET IT ON". */
.store[aria-disabled="true"] { opacity: .82; cursor: default; }
.store[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

.fineprint {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 40ch;
}

/* ── The device cluster ───────────────────────────────── */

.devices {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  /* The whole cluster is sized off the viewport height so the page never
     needs to scroll, whatever the window is. */
  height: min(60dvh, 540px);
  width: 100%;
}

.device {
  position: absolute;
  border-radius: 13% / 6.4%;
  padding: 1.15%;
  background: linear-gradient(168deg, #3a4155, #10131c 58%);
  box-shadow: 0 2px 5px rgba(17, 24, 38, .16), 0 30px 60px -18px rgba(17, 24, 38, .45);
  aspect-ratio: 9 / 19.5;
  height: 100%;
}

/* Two flanking phones sit behind, smaller and tilted, so the page reads as
   "a few screenshots" without a gallery. They are decorative. */
/* The two behind are offset vertically as well as sideways, so the part that
   stays visible past the front phone is a header and some content rather than
   a blank strip of card edge. */
.device.side { height: 72%; }
.device.left  { transform: translate(-74%, 9%) rotate(-9deg); z-index: 1; }
.device.right { transform: translate(74%, -9%) rotate(9deg); z-index: 1; }
.device.front { z-index: 2; }

.device .screen {
  position: relative;
  height: 100%;
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

/* A real screenshot, when one exists, simply fills the screen. */
.device .screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.device .island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  aspect-ratio: 5 / 1.45;
  border-radius: 999px;
  background: #0b0d14;
  z-index: 4;
}

@media (max-width: 980px) {
  .device.side { display: none; }
}

/* ── Footer ───────────────────────────────────────────── */

.footbar {
  padding-block: 14px calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--ink-3);
  font-size: 13.5px;
}
.footbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: space-between;
}
.footbar nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footbar a { text-decoration: none; color: var(--ink-2); }
.footbar a:hover { color: var(--ink); text-decoration: underline; }

/* ── Narrow / short screens ───────────────────────────── */

/* Below this the two columns cannot both be legible, so the page becomes an
   ordinary stacked page and is allowed to scroll. */
@media (max-width: 860px) {
  .glass {
    grid-template-columns: 1fr;
    text-align: center;
    padding-block: clamp(24px, 4vh, 40px);
  }
  .lede, .fineprint { margin-inline: auto; }
  .stores { justify-content: center; }
  .devices { order: -1; height: min(46dvh, 400px); margin-bottom: 4px; }
}

/* A short landscape window (a laptop at 1280×720, say) would otherwise clip
   the device. Shrink the cluster rather than introduce a scrollbar. */
@media (min-width: 861px) and (max-height: 760px) {
  .devices { height: min(58dvh, 460px); }
  h1 { font-size: clamp(32px, 3.6vw, 44px); }
}

/* ── Document pages (privacy / terms / support) ───────── */

.doc { padding-block: clamp(36px, 6vw, 68px); }
.doc .wrap { max-width: 740px; }
.doc h1 {
  font-size: clamp(34px, 5vw, 48px);
  margin-bottom: 10px;
}
.doc .updated {
  margin: 0 0 40px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.doc h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  margin: 40px 0 12px;
}
.doc h3 { font-size: 17px; font-weight: 600; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-2); font-size: 16.5px; line-height: 1.68; }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }

.doc .callout {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage-deep);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 32px;
}
.doc .callout p:last-child { margin-bottom: 0; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15.5px;
}
.doc th, .doc td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.doc th { color: var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }

.doc-footer {
  padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 14.5px;
}
.doc-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.doc-footer nav { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.doc-footer a { text-decoration: none; color: var(--ink-2); }
.doc-footer a:hover { color: var(--ink); text-decoration: underline; }