/* ==========================================================================
   I get movin — shared site chrome
   Tokens are DESIGN.md section 9 (the documented web/marketing palette), light
   only. There is deliberately no dark scheme: the App Store screenshots and the
   app's own default surfaces are light, and a dark site next to light
   screenshots reads as two products.
   ========================================================================== */

:root {
  /* Palette — DESIGN.md section 9 */
  --pine:        #2E7D53;   /* accent; maps to the app's .green   */
  --pine-deep:   #24603F;   /* hover/pressed                      */
  --pine-soft:   #DCEBE1;   /* green wash                         */
  --gold:        #B98A0F;   /* maps to .yellow                    */
  --gold-soft:   #F4EBD2;
  --clay:        #B4523A;   /* maps to .orange                    */
  --clay-soft:   #F3E0DB;
  --ink:         #16211B;   /* .primary                           */
  --ink-2:       #6A776E;   /* .secondary                         */
  --surface:     #FFFFFF;   /* card background                    */
  --bg:          #F1F3EE;   /* screen background                  */
  --ghost:       #DEE3D9;   /* tracks, hairlines                  */

  /* Elevation — resting cards are flat, per DESIGN.md section 2. The single
     soft shadow below is reserved for lifted surfaces (device mocks, the
     sticky nav once scrolled). */
  --lift: 0 1px 2px rgba(22, 33, 27, .04), 0 18px 40px rgba(22, 33, 27, .07);

  --radius:    16px;  /* cards, matching the app's 16pt          */
  --radius-sm: 12px;  /* banners                                 */
  --measure:  68ch;

  /* SF Pro on Apple platforms, matching the app and the screenshots. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* Height of a control in a button row. The .btn padding below already adds up
     to this; naming it lets the App Store badge, which is an image and has no
     padding to add up, land on exactly the same height. Redefined on .site-nav,
     where controls are shorter. */
  --control-h: 48px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::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%; }
img { height: auto; }

a { color: var(--pine); text-underline-offset: 2px; }
a:hover { color: var(--pine-deep); }

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ghost);
  font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

/* Small uppercase kicker above a heading — DESIGN.md section 3's "section
   label", with the app's rule that uppercase is reserved for exactly this. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--pine); font-weight: 650; font-size: 13px;
  letter-spacing: .065em; text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px; background: var(--pine); border-radius: 2px;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; cursor: pointer;
  background: var(--pine); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1;
  padding: 15px 26px; border-radius: 999px; text-decoration: none;
  min-height: var(--control-h);
  transition: background-color .14s ease, transform .14s ease;
}
.btn:hover { background: var(--pine-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { flex: none; }

.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--ghost);
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-2); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* The official-style App Store badge, used wherever the primary download CTA
   used to be a text button. Apple asks for a minimum height of 40px and clear
   space around the badge, and forbids stretching it — hence the fixed height
   and `width: auto` rather than letting the button rules size it. 48px is the
   resting height of a .btn (15 + 16 + 15 + 2), so the badge lines up with the
   ghost button it sits beside. */
.btn-appstore {
  display: inline-flex; align-items: center; text-decoration: none;
  border-radius: 10px; flex: none;
  height: var(--control-h);
  transition: transform .14s ease;
}
.btn-appstore img { display: block; height: 100%; width: auto; }
.btn-appstore:hover { transform: translateY(-1px); }
.btn-appstore:active { transform: none; }
.btn-appstore:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }

/* ---------------------------------------------------------------------- nav */

.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(241, 243, 238, .86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ghost);
}
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand img {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--ghost); background: var(--surface);
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-link {
  color: var(--ink-2); font-size: 15px; font-weight: 550;
  text-decoration: none; white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.lang-links {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.lang-links a {
  color: var(--ink-2);
  text-decoration: none;
}
.lang-links a:hover,
.lang-links a[aria-current="true"] {
  color: var(--ink);
  text-decoration: underline;
}
/* The nav CTA never goes full-width, whatever the small-screen button rules say. */
.site-nav .btn {
  padding: 11px 18px; font-size: 15px;
  width: auto !important; white-space: nowrap;
}
/* In the nav, controls sit at Apple's 40px minimum badge height — the smallest
   the badge is allowed to be, and near enough to the 39px text button it
   replaced that the 66px bar is unchanged. The badge cannot shrink below this
   on small screens, so the room has to come from the brand and the nav gap
   instead (see below). */
.site-nav { --control-h: 40px; }

/* The four section links only fit beside the language switcher and the CTA from
   about 780px up — measured on es, the widest locale. Below that they are hidden
   rather than allowed to push the CTA past the edge of the bar. (This used to be
   620px, which left 621-780px overflowing horizontally even with the old text
   button; the badge, which cannot shrink, made the gap worth closing.) */
@media (max-width: 800px) {
  .nav-links .nav-link { display: none; }
}
@media (max-width: 620px) {
  .lang-links { font-size: 13.5px; }
  .brand { font-size: 17px; }
  .site-nav .btn { padding: 10px 15px; font-size: 14.5px; }
}
@media (max-width: 430px) {
  .nav-links { gap: 14px; }
  .brand span { display: none; }   /* icon-only brand once the badge needs the room */
}
@media (max-width: 340px) {
  .lang-links { font-size: 12.5px; gap: 4px; }
}

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

.site-footer {
  border-top: 1px solid var(--ghost);
  margin-top: 8px;
  padding: 44px 0 64px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.site-footer .wrap {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 20px 40px;
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-note { font-size: 13.5px; }

/* -------------------------------------------------------------- prose block */

.prose { max-width: var(--measure); }
.prose p, .prose ul, .prose ol { margin: 0 0 15px; }
.prose h2 { font-size: 23px; margin: 42px 0 10px; }
.prose h3 { font-size: 17.5px; margin: 26px 0 4px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose strong { font-weight: 650; }