/*
 * The two legal pages, and only those.
 *
 * WHY THIS IS PLAIN CSS AND NOT PART OF THE REACT APP
 * ---------------------------------------------------
 * These two URLs are typed into a Google Play console form and an App Store
 * Connect form, and a reviewer opens them cold. They must load with no
 * JavaScript bundle, no router, no hydration and no chance of a white screen —
 * a marketing site that fails to render costs a visitor, a privacy policy that
 * fails to render costs the submission.
 *
 * They are also the pages most likely to be read by somebody on a bad
 * connection who is upset. Twelve kilobytes of hand-written CSS is the whole
 * dependency.
 *
 * The palette and typefaces mirror `apps/web/src/styles.css` so the pages look
 * like the studio rather than like a legal appendix. The values are duplicated
 * rather than imported, which is a real cost — if the brand changes these two
 * files must change too — and it is the price of the paragraph above.
 */

/* ---------------------------------------------------------------------------
   M172 — THE TYPEFACES, SERVED BY THIS STUDIO.

   These two pages loaded Cormorant and Manrope from Google's font CDN long
   after M160 self-hosted every other surface. Nothing covered them, so nothing
   caught it. A font request hands Google the reader's IP address and the page
   they are on, which is a poor thing to do anywhere and a contradiction on a
   privacy notice.

   Regular weights only: neither page sets `font-style: italic`, so the italic
   files are not declared and are never fetched.

   The metric-matched fallbacks are copied from `apps/web/src/fonts.css`, with
   the measured numbers that belong to them. They exist so the swap from the
   fallback to the real face moves nothing on the page — Georgia sets Cormorant's
   alphabet 11.9% wide, which is enough to reflow a heading. These are the same
   duplicated values the header note above already accepts as the price of these
   pages having no build step.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* `src: local(...)` only — these never download anything. If the system has no
   Georgia the face simply does not match and the stack carries on to the plain
   fallbacks listed after it, which is why those are still there. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 89.4%;
  ascent-override: 102.9%;
  descent-override: 32.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('Roboto');
  size-adjust: 103.73%;
  ascent-override: 103.15%;
  descent-override: 28.92%;
  line-gap-override: 0%;
}

:root {
  --linen: #f7f3ec;
  --paper: #fffdfa;
  --ink: #1c1f1d;
  --ink-soft: #4a514c;
  --ink-faint: #5f6862;
  --eucalyptus: #2f5d4c;
  --eucalyptus-deep: #21453a;
  --eucalyptus-tint: #e8efea;
  --sand-tint: #efe7d9;
  --amber: #8a5a12;
  --amber-tint: #fbf1de;
  --line: #e4dccf;
  /* The metric-matched fallback sits FIRST after the real face, so it is what
     paints while the woff2 is in flight. */
  --display:
    'Cormorant Garamond', 'Cormorant Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia,
    serif;
  --body:
    'Manrope', 'Manrope Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
}

/* First tab stop. A keyboard user should not tab the masthead to reach the text. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--eucalyptus);
  color: #fff;
  border-radius: 4px;
}

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.wrap {
  /* ~68 characters of running text at this size. Longer lines are where the
     eye loses its place returning to the left margin, and this is a page
     people read rather than skim. */
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.mark img {
  width: 34px;
  height: 34px;
  display: block;
}
.mark b {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
}

.masthead nav a {
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.masthead nav a:hover,
.masthead nav a:focus-visible {
  color: var(--eucalyptus-deep);
  border-bottom-color: currentColor;
}

main {
  padding: 3rem 0 5rem;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.stamp {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0 0 2.25rem;
}

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 2.75rem 0 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  text-wrap: balance;
}

h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1.75rem 0 0.35rem;
}

p,
li {
  color: var(--ink-soft);
}

ul {
  padding-left: 1.15rem;
}
li {
  margin: 0.3rem 0;
}
li > strong {
  color: var(--ink);
}

a {
  color: var(--eucalyptus-deep);
}

/* The one thing on the page that must be impossible to miss: a value the
   studio has not filled in yet. It is loud on purpose — a placeholder that
   looked like body text is a placeholder that ships. */
.todo {
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
}
.todo h2 {
  border: 0;
  padding: 0;
  margin: 0 0 0.35rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--amber);
}
.todo p,
.todo li {
  color: var(--ink);
  font-size: 0.9rem;
}
.blank {
  background: var(--amber-tint);
  border-bottom: 2px dotted var(--amber);
  color: var(--amber);
  font-weight: 600;
  font-style: normal;
}

.note {
  background: var(--eucalyptus-tint);
  border-left: 3px solid var(--eucalyptus);
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.15rem;
  margin: 1.5rem 0;
}
.note p {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.card h3:first-child {
  margin-top: 0;
}

/* Wide content scrolls inside its own box; the page body never does. */
.scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
th {
  color: var(--ink);
  font-weight: 700;
  background: var(--sand-tint);
  white-space: nowrap;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin: 1rem 0;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--eucalyptus);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.btn {
  display: inline-block;
  background: var(--eucalyptus);
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.92rem;
}
.btn:hover,
.btn:focus-visible {
  background: var(--eucalyptus-deep);
}

footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
footer a {
  color: var(--ink-faint);
}

:focus-visible {
  outline: 2px solid var(--eucalyptus);
  outline-offset: 2px;
}

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