/*
 * Cinepass — glacialhex.com
 *
 * Values come from design/tokens.json; the font stacks are copied verbatim from
 * `typography.fontFamily`, which already names system fallbacks. Nothing here
 * fetches anything: no webfont, no analytics, no third-party CSS. That is
 * partly performance and partly consistency — a page whose whole argument is
 * "this app collects almost nothing about you" should not open a connection to
 * a font CDN to say it.
 */

:root {
  --bg-base: #000000;
  --bg-elevated: #080808;
  --bg-surface: #0f0f0f;
  --brand: #00534c;
  --brand-bright: #00a39a;
  --on-brand: #ffffff;
  --text: #ffffff;
  --text-muted: #8c8c8c;
  --text-subtle: #5c5c5c;
  --divider: #141414;

  --font-latin: Montserrat, "SF Pro Text", Roboto, system-ui, sans-serif;
  --font-arabic: Cairo, "SF Arabic", system-ui, sans-serif;

  --radius-button: 6px;
  --radius-card: 10px;
  --measure: 68ch;
}

/*
 * The brand is dark-first — near-black canvas, teal accent (BRAND.md). Light
 * mode uses the `$extensions.light` values from tokens.json rather than
 * inverting, because the teal is deliberately the same in both.
 */
@media (prefers-color-scheme: light) {
  :root {
    --bg-base: #ffffff;
    --bg-elevated: #f5f5f5;
    --bg-surface: #ebebeb;
    --brand-bright: #00897b;
    --text: #111111;
    --text-muted: #666666;
    --text-subtle: #999999;
    --divider: #e0e0e0;
  }
}

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

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

[lang="ar"] { font-family: var(--font-arabic); }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Language switch ──────────────────────────────────────────────────────
 * `data-lang` is set by JS on load and is deliberately absent from the markup.
 * With JS disabled the attribute never appears, no `display: none` rule
 * matches, and both languages render stacked — longer, but complete. An App
 * Store reviewer must be able to read this policy in a browser that blocks
 * scripts, so "the content is hidden until JS runs" is not an option.
 */
.langswitch { display: none; }
body[data-lang] .langswitch { display: flex; gap: 4px; }
body[data-lang="en"] [lang="ar"] { display: none; }
body[data-lang="ar"] [lang="en"] { display: none; }

.langswitch button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 6px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.langswitch button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.langswitch button:hover { border-color: var(--brand-bright); color: var(--text); }
.langswitch button[aria-pressed="true"]:hover { color: var(--on-brand); }

/* ── Masthead ─────────────────────────────────────────────────────────── */

header.top {
  border-bottom: 1px solid var(--divider);
  background: var(--bg-base);
}
header.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.wordmark {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.5px;
  color: var(--text);
  text-decoration: none;
}
.wordmark span { color: var(--brand-bright); }

/* ── Type ─────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 44px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}
h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 26px 0 6px;
}
p { margin: 0 0 14px; }
a { color: var(--brand-bright); }
ul { margin: 0 0 14px; padding-inline-start: 22px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }

.lede {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 54ch;
}
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin: 0 0 14px;
}
.updated {
  font-size: 14px;
  color: var(--text-subtle);
  margin-bottom: 32px;
}
[lang="ar"] .eyebrow { letter-spacing: 0; }
/* No inline `style` attributes anywhere on these pages — the CSP in _headers
 * sets `style-src 'self'`, which blocks them along with inline <style>. */
article > .eyebrow:first-child { margin-top: 44px; }

/* ── Blocks ───────────────────────────────────────────────────────────── */

section.hero { padding: 76px 0 60px; }

.status {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border: 1px solid var(--brand);
  color: var(--text);
  margin-bottom: 26px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 36px 0 0;
}
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: 20px;
}
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* The "we don't collect this" list is the most load-bearing claim on the page,
 * so it gets the only coloured panel in the policy. */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--divider);
  border-inline-start: 3px solid var(--brand-bright);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin: 20px 0;
}
.panel ul { margin-bottom: 0; }

main { padding-bottom: 72px; }

footer {
  border-top: 1px solid var(--divider);
  padding: 26px 0 60px;
  color: var(--text-subtle);
  font-size: 14px;
}
footer a { color: var(--text-muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

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