/* Standalone pages for /privacy/, /terms/ and /support/.
   These exist because index.html is a bundled single-page artifact with no URL
   routing at all -- no pushState, no hash -- so its Privacy and Support views
   cannot be linked to directly. App Store Connect requires URLs that load the
   policy on their own, hence real files at real paths.

   Tokens mirror the main site so the two read as one property. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --accent-500: #ff563c;
  --accent-900: #4d170e;
  --neutral-100: #f8f4f4;
  --neutral-200: #eae7e7;
  --neutral-300: #d7d3d3;
  --neutral-400: #bab6b6;
  --neutral-600: #7d7979;
  --accent-400: #ff9783;
  --accent-800: #7c1405;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --gutter: 32px;
  --measure: 62ch;
}

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

body {
  margin: 0;
  background: var(--accent-900);
  color: var(--neutral-200);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-500); }
a:hover { color: var(--neutral-100); }

/* --- header ------------------------------------------------------------- *
 * The home page's bar: 76px tall, 2px rule under it, wordmark left, nav right
 * with the Contact button on the end. Tap targets are the one deliberate
 * difference -- the bundle's nav items are ~34px, and Apple asks for 44pt, so
 * the links carry a 44px box that fits inside the taller bar unnoticed.
 */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--accent-900);
  border-bottom: 2px solid var(--neutral-400);
}
.bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--neutral-100);
  min-height: 44px;
}
/* The bundle runs its logo through the same filter; without it the mark reads
   noticeably darker here than it does one page away. */
.brand img, .mark img {
  object-fit: contain;
  display: block;
  filter: brightness(1.35) saturate(1.2);
}
.brand img { width: 30px; height: 30px; }
.brand span {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
header nav { display: flex; align-items: center; gap: var(--space-1); }
header nav a {
  color: var(--neutral-300);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  /* Apple asks for a 44pt minimum tap target. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
header nav a:hover { color: var(--neutral-100); background: var(--accent-800); }
header nav a[aria-current='page'] { color: var(--neutral-100); }
header nav a.cta {
  margin-left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-500);
  color: var(--accent-900);
  font-weight: 700;
}
header nav a.cta:hover { background: var(--accent-400); color: var(--accent-900); }

/* The same no-JavaScript dropdown the bundle gets from overrides.css: a
   visually-hidden checkbox plus its label, siblings of nav so `:checked ~ nav`
   can reveal it. The checkbox keeps focus, so Space still toggles the menu. */
.ll-nav-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.ll-nav-btn { display: none; }

@media (max-width: 820px) {
  .bar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .ll-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    cursor: pointer;
    color: var(--neutral-100);
    border: 1px solid var(--neutral-600);
  }
  .ll-nav-cb:focus-visible + .ll-nav-btn {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
  }
  header nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
  }
  .ll-nav-cb:checked ~ nav { display: flex; }
  /* .cta carries an inline-row margin-left that indents it once stacked, and
     it is the more specific selector -- so it is named here too. */
  header nav a, header nav a.cta {
    width: 100%;
    justify-content: flex-start;
    min-height: 48px;
    font-size: 14px;
    letter-spacing: 0.08em;
    padding: var(--space-3) var(--space-2);
    margin: 0;
    border-top: 1px solid var(--neutral-600);
  }
}

/* --- content ------------------------------------------------------------ */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px var(--gutter) 64px;
}
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: var(--space-3);
}
h1 {
  font-weight: 800;
  font-size: clamp(38px, 9vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--neutral-100);
  margin: 0 0 var(--space-3);
}
.updated {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin: 0 0 var(--space-8);
}
hr { border: 0; border-top: 1px solid var(--neutral-600); margin: 0 0 var(--space-8); }
h2 {
  font-weight: 800;
  font-size: 21px;
  color: var(--neutral-100);
  margin: 40px 0 var(--space-3);
  max-width: var(--measure);
}
p { margin: 0 0 var(--space-6); max-width: var(--measure); }
.lede { font-size: 19px; color: var(--neutral-100); }

/* Prominent contact block -- App Store reviewers look for a clear way to
   reach support, so it should not be buried in a paragraph. */
.contact {
  border: 2px solid var(--accent-500);
  padding: var(--space-6);
  margin: 0 0 var(--space-8);
  max-width: var(--measure);
}
.contact .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin: 0 0 var(--space-2);
}
.contact a {
  font-weight: 800;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: -0.01em;
  text-decoration: none;
  word-break: break-word;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- footer ------------------------------------------------------------- *
 * The home page's footer: identity column, then one column per link group,
 * over a bordered copyright bar. auto-fit means the columns collapse to one
 * on a phone exactly as they do there.
 */

footer {
  border-top: 2px solid var(--neutral-400);
  margin-top: 64px;
}
.foot {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}
.mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mark img { width: 24px; height: 24px; }
.mark span {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--neutral-100);
}
.ident p {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--neutral-300);
}
.ident p a { text-decoration: none; }
.ident p a:hover { color: var(--accent-400); }
.foot nav { display: flex; flex-direction: column; }
.foot .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin-bottom: var(--space-1);
}
.foot nav a {
  font-size: 14px;
  /* The page's 1.7 body leading would space these rows half again as far
     apart as the home page's; its footer links sit on 1.25. */
  line-height: 1.25;
  color: var(--neutral-200);
  text-decoration: none;
  width: max-content;
  transition: color 140ms ease;
}
.foot nav a:hover { color: var(--accent-400); }

/* Apple asks for a 44pt minimum tap target, but the home page's footer rows
   are 14px tall and this footer is meant to read as that one. So the tap box
   appears only where the target is actually a finger; on a pointer device the
   rows stay as tight as they are one page away. */
@media (max-width: 820px), (pointer: coarse) {
  .foot nav a, .ident p a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
.copy {
  border-top: 2px solid var(--neutral-400);
}
.copy span {
  display: block;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  main { padding-top: 32px; }
}