/*
  Skylight — marketing site.

  Colours are lifted verbatim from the app's palette (src/theme/palette.ts in the
  skylight repo), so the site and the product are the same object. Names match the app's
  primitives on purpose: if a colour changes there, the corresponding line here is
  obvious. Semantic aliases sit on top, exactly as the app layers themes over palette.

  Typography: Fraunces for headings, self-hosted; system sans for body.

  WHY FRAUNCES IS SELF-HOSTED AND NOT LOADED FROM GOOGLE
  Requesting a font from fonts.gstatic.com sends the visitor's IP address to Google
  before they have agreed to anything. On a site whose entire job is to host a privacy
  policy, that is an awkward thing to be doing in the page that promises it isn't. Two
  weights as woff2 cost 60KB total, served from the same origin as everything else.

  WHY INTER IS NOT SELF-HOSTED
  The app pairs Fraunces with Inter, but Inter's two weights are 670KB of TTF — ten times
  the serif, for text that is nearly indistinguishable from the system UI face on the
  Apple devices most visitors to an iOS app's site are using. The system stack gets the
  same feel for zero bytes and zero requests. Fraunces carries the identity; it is the
  distinctive one, and it is the one worth paying for.
*/

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces_400Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/Fraunces_600SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paper — the warm off-whites the app actually sits on. */
  --paper0: #fffdf8;
  --paper1: #faf6ef;
  --paper2: #f1ebe0;
  --paper3: #e3dacb;

  /* Warm greys. Cool slate text on a warm background reads as a colour mistake. */
  --sand0: #6b6255;
  --sand1: #8a8072;

  /* Twilight — the single deep accent the whole identity hangs on. */
  --twilight: #1c1f45;
  --indigo0: #2b2f77;
  --indigo1: #3b41a0;
  --indigo5: #dddffa;

  /* Starlight gold, used sparingly. */
  --gold1: #a87c1b;
  --gold2: #d9a227;
  --gold5: #fdf4df;

  --ink0: #0b1020;
  --ink2: #1d263f;
  --slate1: #8290ad;
  --slate3: #cbd3e3;
  --slate4: #e4e9f2;

  /* Semantic aliases — everything below this line uses these, not the primitives. */
  --bg: var(--paper1);
  --surface: var(--paper0);
  --surface-sunken: var(--paper2);
  --border: var(--paper3);
  --text: var(--twilight);
  --text-secondary: var(--sand0);
  --text-muted: var(--sand1);
  --link: var(--indigo1);
  --accent: var(--indigo0);
  --accent-soft: var(--indigo5);
  --note-bg: var(--gold5);
  --note-border: var(--gold2);
  --note-text: var(--gold1);

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --measure: 68ch;
  --page: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink0);
    --surface: var(--ink2);
    --surface-sunken: #151b2e;
    --border: #2a3552;
    --text: #f2f5fa;
    --text-secondary: var(--slate3);
    --text-muted: var(--slate1);
    --link: #a3a8ef;
    --accent: #7178e0;
    --accent-soft: #2a3552;
    --note-bg: #2a2313;
    --note-border: var(--gold2);
    --note-text: #efc15a;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Generous whitespace is the point of the layout, so it scales with the viewport. */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 40rem) {
  .wrap {
    padding: 0 2.5rem;
  }
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  padding: 2rem 0 1rem;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Typography --------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

h1 {
  font-size: clamp(2.25rem, 7vw, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.1875rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

p {
  margin: 0 0 1.125rem;
  max-width: var(--measure);
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

.lede {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 34ch;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding: 3rem 0 1rem;
}

@media (min-width: 48rem) {
  .hero {
    padding: 5rem 0 2rem;
  }
}

.hero h1 {
  max-width: 16ch;
}

.hero .lede {
  margin-top: 1.25rem;
}

/*
  The App Store badge is a PLACEHOLDER — the app is not on the store yet. Deliberately
  styled as an obviously-inert outline rather than a convincing black badge: a realistic
  one invites a tap that goes nowhere, and shipping Apple's real artwork before the app
  exists is both a broken promise and a trademark problem.
*/
.badge-placeholder {
  display: inline-flex;
  /* Stacked, not inline. Side by side it wraps into two ragged columns on a 375px
     screen with the separator stranded between them, which reads as a layout bug
     rather than as a deliberate placeholder. */
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 2rem;
  padding: 0.875rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.badge-placeholder strong {
  display: block;
  color: var(--text-secondary);
  font-weight: 600;
}

/* --- Feature grid ------------------------------------------------------- */

.features {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 1rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

.features li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding: 1.5rem;
}

.features h3 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
}

.features p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9688rem;
}

/* A pulled-out statement of the product's whole position. */
.pull {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.5rem;
  margin: 2.5rem 0;
  max-width: var(--measure);
}

.pull p {
  font-family: var(--font-serif);
  font-size: clamp(1.1875rem, 3vw, 1.5rem);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

/* --- Legal / prose pages ------------------------------------------------ */

.prose {
  padding: 1rem 0 2rem;
}

.prose h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.prose ul,
.prose ol {
  max-width: var(--measure);
  padding-left: 1.25rem;
  margin: 0 0 1.125rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose dl {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}

.prose dt {
  font-weight: 600;
  margin-top: 1rem;
}

.prose dd {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
}

.meta {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

/*
  The draft banner. Loud on purpose — these documents are not reviewed and must not be
  mistaken for the published policy while they are still being edited.
*/
.draft {
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
  max-width: var(--measure);
}

.draft p {
  margin: 0;
  color: var(--note-text);
  font-size: 0.9688rem;
}

.draft p + p {
  margin-top: 0.625rem;
}

.draft strong {
  font-weight: 600;
}

/* Marks a value the operator must fill in before publishing. */
.todo {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 0.25rem;
  padding: 0.0625rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  white-space: nowrap;
}

/*
  A PROVISIONAL POSITION: prose that is legally load-bearing, reads as settled, and is
  NOT settled.

  Deliberately styled unlike both neighbours it could be confused with. `.todo` marks an
  empty field — obviously missing. `.draft` warns about the whole page. This marks
  finished-looking sentences that a reader would otherwise take as final, which is the
  most dangerous of the three to mistake, so it carries an explicit uppercase label
  rather than relying on colour alone. The dashed outline separates it from the solid
  `.draft` card at the top of the page.
*/
.provisional {
  border: 1px dashed var(--note-border);
  border-left: 3px solid var(--note-border);
  background: var(--note-bg);
  border-radius: 0.5rem;
  padding: 1.125rem 1.375rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}

.provisional p {
  margin: 0;
  color: var(--note-text);
  font-size: 0.9688rem;
}

.provisional p + p {
  margin-top: 0.75rem;
}

/* Specificity beats `.provisional p` above, so the label keeps its own spacing. */
.provisional .provisional-label {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--note-border);
  border-radius: 0.25rem;
  padding: 0.1875rem 0.5rem;
  margin-bottom: 0.75rem;
}

.callout {
  background: var(--surface-sunken);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}

.callout p:last-child {
  margin-bottom: 0;
}

/* --- Tables -------------------------------------------------------------- */

/*
  ADDITIVE ONLY. No selector above this block is modified — these rules introduce styling
  for elements the site did not previously contain, so index.html and support.html cannot
  shift as a result.

  The legal pages carry comparison tables (legal bases, retention periods) that genuinely
  need columns to be read. A table cannot reflow to 375px without becoming unreadable, so
  it scrolls inside its own container rather than forcing the whole page sideways —
  `min-width` guarantees the columns stay legible and hands the overflow to the wrapper.
*/
.table-wrap {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
}

.prose th {
  color: var(--text);
  background: var(--surface-sunken);
  font-weight: 600;
}

.prose td {
  color: var(--text-secondary);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  max-width: var(--measure);
  margin-top: 1rem;
}

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-muted);
  line-height: 1;
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq details p {
  margin: 0.75rem 0 0;
  color: var(--text-secondary);
}

/* --- Contact ------------------------------------------------------------ */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  padding: 1.75rem;
  max-width: var(--measure);
  margin: 1.5rem 0 1rem;
}

.contact-card a {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}

.contact-card a:hover,
.contact-card a:focus-visible {
  text-decoration: underline;
}

.contact-card p {
  margin: 0.5rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9688rem;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  margin-top: 5rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.footer-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  text-decoration: underline;
}

.site-footer p {
  margin: 0 0 0.625rem;
  max-width: var(--measure);
}

/* CC BY 4.0 obliges us to credit GeoNames wherever the data is used. */
.attribution {
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* --- Accessibility ------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 0 0 0.5rem 0;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

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