/* Reysko landing. Dark-first like the app; light palette via media query.
 * Contrast targets (AA): dark — #e2e8f0 on #0f172a 15.4:1, #fbbf24 on
 * #0f172a 10.7:1, #0f172a on #fbbf24 (buttons) 10.7:1; light — #0f172a on
 * #f8fafc 15.4:1, #b45309 (amber-700) on #f8fafc 5.6:1. */
/* Palette mirrors the mobile app (mobile/constants/Colors.ts) so the site and
 * the app read as one product: same slate backgrounds, same amber accent
 * (#fbbf24 dark / #b45309 light), same brand navy. Links deliberately differ
 * from the app's iOS control blue, because web links want the conventional
 * underlined blue. --border-control is web-only: form fields need a 3:1
 * boundary (WCAG 1.4.11) that the app's decorative border tint doesn't meet. */
:root {
  --bg: #0f172a; --bg-alt: #1e293b; --fg: #f1f5f9; --fg-muted: #94a3b8;
  --accent: #fbbf24; --accent-fg: #0f172a; --navy: #1e3a8a;
  --link: #93c5fd; --border: #334155; --border-control: #64748b;
  --live: #4ade80; --error: #fca5a5; --maxw: 42rem;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff; --bg-alt: #f8fafc; --fg: #0f172a; --fg-muted: #475569;
    --accent: #b45309; --accent-fg: #ffffff;
    --link: #1d4ed8; --border: #cbd5e1; --border-control: #64748b;
    --live: #15803d; --error: #b91c1c;
  }
}
/* Max-contrast theme, mirroring the app's High Contrast palette: pure black,
 * pure white text, hard white borders carrying the structure, bright amber
 * accents. Last in the cascade on purpose, so it wins over light OR dark, the
 * same way the app's High Contrast is a dark palette regardless of system mode. */
@media (prefers-contrast: more) {
  :root {
    --bg: #000000; --bg-alt: #000000; --fg: #ffffff; --fg-muted: #e5e5e5;
    --accent: #ffd60a; --accent-fg: #000000;
    --link: #ffd60a; --border: #ffffff; --border-control: #ffffff;
    --live: #5efc82; --error: #ff8a8a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6; font-size: 1.0625rem;
}
main, .site-footer { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--link); }
h2 { font-size: 1.5rem; margin: 0 0 .75rem; }
h3 { font-size: 1.125rem; margin: 0 0 .25rem; }
section { margin: 3rem 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--accent);
  color: var(--accent-fg); padding: .5rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

.site-header { max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.25rem 0; display: flex; align-items: baseline; gap: 1rem; }
.site-header nav { margin-left: auto; }        /* keeps the switcher right, with or without a home link */
.site-header .lang-switch { margin: 0; }
.site-header__home { font-size: 1.5rem; text-decoration: none; }

.legal-page h1 { font-size: clamp(1.6rem, 5vw, 2rem); margin: 1.5rem 0 .25rem; }
.legal-page h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
.legal-page section { margin: 1.5rem 0; }
.legal-meta { color: var(--fg-muted); margin: .15rem 0; }
.legal-list { padding-left: 1.25rem; }
.legal-list li { margin: .4rem 0; }

.wordmark {
  font-style: italic; font-weight: 800; color: var(--accent);
  letter-spacing: -0.02em; margin: 0;
}
.hero { text-align: center; padding-top: 3.5rem; }
.wordmark--hero { font-size: clamp(2.75rem, 8vw, 4rem); }
.tagline { font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 700; margin: .5rem 0 0; }
.hero-sub { color: var(--fg-muted); max-width: 36rem; margin: 1rem auto 0; }
.hero-ctas { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.btn {
  display: inline-block; padding: .65rem 1.25rem; border-radius: .5rem;
  border: 1px solid var(--border); color: var(--fg);
  text-decoration: none; font-weight: 600; background: var(--bg-alt);
}
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
/* One focus indicator for every focusable control, including form fields, so
   the appearance is ours rather than whatever each browser defaults to. 3px at
   5.02:1 (light) / 10.69:1 (dark) / 14.88:1 (high contrast) against the page,
   well over the 3:1 that SC 1.4.11 asks of a focus indicator. */
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  /* Two-tone ring. The accent outline alone is the same colour as an
     accent-filled button (.btn--primary), so on those it relies on whatever
     happens to sit in the offset gap. This shadow paints that gap in the page
     colour explicitly, giving a guaranteed full-contrast separator between the
     component and the ring, on any surface (page, card, dialog):
     --bg vs --accent is 5.02:1 light, 10.69:1 dark, 14.88:1 high contrast.
     The ring stays on `outline` rather than moving wholly into box-shadow,
     because Windows forced-colors mode drops box-shadow but keeps outline. */
  box-shadow: 0 0 0 2px var(--bg);
}
/* Anchor-nav and skip-link targets take focus programmatically (tabindex=-1)
   so iOS VoiceOver moves the cursor onto the section instead of resetting to
   the top of the page. They are not in the tab order, so suppress the
   full-width container outline that focus would otherwise draw. */
main:focus, section[tabindex="-1"]:focus { outline: none; }

.anchor-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0; justify-content: center; }

.steps { padding-left: 1.25rem; }
.steps li { margin: 1rem 0; }
.steps p, .news-list p { color: var(--fg-muted); margin: .25rem 0 0; }

.city-list { list-style: none; padding: 0; }
.city-list li { margin: .5rem 0; font-size: 1.125rem; }

.a11y-list { list-style: none; padding: 0; }
.a11y-list li { margin: .5rem 0; }
.badge {
  display: inline-block; font-size: .8rem; font-weight: 700; padding: .1rem .5rem;
  border-radius: 999px; border: 1px solid currentColor; margin-right: .35rem;
}
.badge--live { color: var(--live); }
.badge--soon { color: var(--fg-muted); }

.store-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.store-btn {
  display: inline-block; padding: .65rem 1.25rem; border-radius: .5rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--fg); text-decoration: none; font-weight: 600;
}
.store-btn--soon { color: var(--fg-muted); font-style: italic; }
.news-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .35rem; font-weight: 600; }
.store-badge { display: inline-flex; border-radius: .5rem; }
.store-badge img { height: 3.25rem; width: auto; display: block; }
/* Google's asset carries its own clear space; Apple's is tight. Nudge the
   Apple badge down slightly so the two read as the same visual size. */
.store-badge--apple img { height: 2.9rem; }

.video-wrap { position: relative; aspect-ratio: 16 / 9; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: .5rem; }
.placeholder {
  border: 1px dashed var(--border); border-radius: .5rem; padding: 2rem 1rem;
  text-align: center; color: var(--fg-muted);
}

.news-list { list-style: none; padding: 0; }
.news-list li { border-top: 1px solid var(--border); padding: 1rem 0; }
.news-list time { color: var(--fg-muted); font-size: .9rem; }

.contact-form label { display: block; font-weight: 600; margin-bottom: .25rem; }
/* Control boundaries use --border-control, not the softer divider --border:
   WCAG 1.4.11 wants 3:1 for the edge that identifies an input. */
/* The exclusions sit in :where() so they add no specificity. Written as plain
   :not() they outranked the [aria-invalid] rule below, which silently killed
   its border-color. */
.contact-form input:where(:not(.hp):not([type=checkbox])), .contact-form select, .contact-form textarea {
  width: 100%; padding: .6rem .75rem; border-radius: .5rem;
  border: 1px solid var(--border-control); background: var(--bg-alt); color: var(--fg);
  font: inherit;
}
.contact-form button { font: inherit; cursor: pointer; }
.contact-form ::placeholder { color: var(--fg-muted); opacity: 1; }
.contact-form .consent { display: flex; gap: .5rem; align-items: flex-start; }
.contact-form .consent input { width: auto; flex: none; margin-top: .35rem; }
.contact-form .consent label { display: inline; font-weight: 400; margin: 0; }
.hp { position: absolute; left: -999px; height: 0; width: 0; opacity: 0; }
.form-status:not(:empty) { font-weight: 600; }

/* Field errors: text (never colour alone), announced via aria-describedby. */
.field-error { display: block; color: var(--error); font-weight: 600; margin-top: .3rem; }
.field-error:empty { display: none; }
/* Validity is drawn with border + ring shadow, never `outline`. An author
   outline here overrides the focus ring, which left the field form.js focuses
   after a validation error looking identical focused and unfocused (SC 2.4.7).
   Keeping `outline` reserved for focus means both states can show at once. */
.contact-form [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.sent-dialog {
  max-width: 30rem; width: calc(100% - 2rem);
  border: 1px solid var(--border); border-radius: .75rem;
  background: var(--bg-alt); color: var(--fg); padding: 1.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.sent-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.sent-dialog h2 { margin: 0 0 .5rem; }
.sent-dialog p { margin: 0 0 1.25rem; }
.sent-dialog form { margin: 0; display: flex; justify-content: flex-end; }

.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.5rem; padding-bottom: 2rem; color: var(--fg-muted); }
.legal, .lang-switch { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.lang-switch [aria-current] { font-weight: 700; color: var(--fg); }
.notfound { text-align: center; padding-top: 4rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* High contrast: the store badges carry their own artwork background, which can
   blend into pure black, so delineate them with the same hard white edge the
   app's High Contrast theme uses for cards. (The badge art itself is untouched,
   per Apple's and Google's brand rules.) */
@media (prefers-contrast: more) {
  .store-badge { border: 2px solid var(--border); padding: .25rem .5rem; }
}

/* Windows High Contrast, which is a different mechanism from prefers-contrast:
   the browser REPLACES author colours with the user's system palette and drops
   box-shadow entirely. So anything that carried meaning through colour or
   shadow needs a shape-based fallback here. Focus needs nothing: outline
   survives (its colour forced to the system highlight), which is exactly why
   the focus ring lives on outline rather than box-shadow. */
@media (forced-colors: active) {
  /* Badge artwork keeps its own colours (browsers don't recolour <img> content,
     and Apple/Google require the badges unmodified), so the black App Store
     badge can sit on a black canvas with no visible edge. System colour keeps
     it delineated whatever palette the user picked. */
  .store-badge { border: 2px solid CanvasText; padding: .25rem .5rem; }

  /* --error is forced to the system text colour and the error ring is a
     box-shadow, so it is discarded: an invalid field would look identical to a
     valid one. border-style survives the forced palette, so carry the state
     with shape instead. The message under the field still carries the meaning. */
  .contact-form [aria-invalid="true"] { border-style: dashed; border-width: 2px; }
}