/* Globetick site: landing, privacy, support, 404. Tokens mirror brand/colors.css (v2 "Night Passport").
   Fonts are bundled in fonts/ (SIL OFL, licences there). No CDN, no tracking. */
@font-face { font-family: "Archivo"; font-weight: 800; font-stretch: 125%; font-display: swap; src: url(/fonts/archivo-800-expanded.woff2) format("woff2"); } /* ponytail: one static instance (wght 800, wdth 125) of the v2 variable font: 14 kB, not 90 */
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap; src: url(/fonts/figtree-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url(/fonts/sora-latin-700-normal.woff2) format("woff2"); }
/* Mono + serif are accents: font-display optional, so a late file never shifts the layout (CLS 0). */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: optional; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: optional; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: optional; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); }

:root {
  --ground: #0B1F3A;
  --surface: #13345A;
  --surface-glass: rgba(19,52,90,0.72);
  --line: rgba(122,167,212,0.28);
  --divider: rgba(122,167,212,0.14);
  --text: #EEF3F8;
  --text-muted: #9FB2C8;
  --text-data: #7AA7D4;
  --gold: #F4A261;
  --gold-pressed: #E8894A;
  --gold-text: #F4A261;
  --on-gold: #0B1F3A;
  --teal-text: #8FE0D3;
  --shadow-glass: 0 12px 40px rgba(0,0,0,0.45);
  --radius: 14px;
  --radius-lg: 22px;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-logo: "Sora", "Segoe UI", system-ui, sans-serif;
  --mark-tick: #F4A261;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #EEF3F8;
    --surface: #FFFFFF;
    --surface-glass: rgba(255,255,255,0.72);
    --line: rgba(16,66,108,0.16);
    --divider: rgba(16,66,108,0.10);
    --text: #0B1F3A;
    --text-muted: #4D6782;
    --text-data: #2F5F8F;
    --gold-text: #A9561E;
    --teal-text: #1F7A6F;
    --shadow-glass: 0 12px 36px rgba(16,66,108,0.16);
    --mark-tick: #E8894A;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  padding: 0 20px calc(32px + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 720px; margin: 0 auto; }
.wide { max-width: 1120px; margin: 0 auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 9; background: var(--surface); color: var(--text); padding: 10px 16px; border-radius: var(--radius); }
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; border-radius: 4px; }

header.top { display: flex; align-items: center; gap: 10px; padding: 24px 0 8px; }
header.top svg { width: 40px; height: 40px; flex: none; color: var(--text); }
.wordmark {
  font-family: var(--font-logo); font-weight: 700; font-size: 24px; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.wordmark b { color: var(--gold-text); font-weight: 700; }
nav.site { font-size: 15px; margin-left: auto; display: flex; gap: 4px; }
nav.site a { color: var(--text-muted); text-decoration: none; padding: 10px 10px; }
nav.site a:hover { color: var(--text); }
nav.site a[aria-current] { color: var(--text); font-weight: 700; }

.overline {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-data); margin: 24px 0 4px;
}
h1 { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.25; margin: 36px 0 10px; letter-spacing: -0.01em; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p, li { color: var(--text); }
.muted { color: var(--text-muted); }
a { color: var(--teal-text); }
strong { font-weight: 700; }
em { font-style: italic; }
.fill { background: rgba(243,201,32,0.18); border-bottom: 1px dashed var(--gold-text); padding: 0 2px; }
.card {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  padding: 18px 20px;
  margin: 20px 0;
}
.card ul { margin: 0; padding-left: 20px; }
.card > :last-child { margin-bottom: 0; }
.card > :first-child { margin-top: 0; }
table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--divider); }
th { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-data); font-weight: 400; }
.faq dt { font-weight: 700; margin-top: 20px; }
.faq dd { margin: 6px 0 0; color: var(--text); }
kbd, .path { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-data); }

footer.site {
  margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--divider);
  font-size: 14px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
footer.site a { color: var(--text-muted); }
footer.site nav { display: flex; gap: 16px; }

/* Landing */
.hero { display: grid; gap: 32px; align-items: center; padding: 24px 0 8px; }
.hero h1 { font-size: clamp(38px, 9vw, 64px); line-height: 1.02; margin: 8px 0 14px; }
.hero h1 .gold { color: var(--gold-text); }
.lede { font-size: 19px; max-width: 34em; margin: 0 0 8px; }
.story { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; margin: 0 0 22px; }
.story em { color: var(--gold-text); }
.facts { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.facts li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--text-muted); }
.shot { border-radius: 28px; box-shadow: var(--shadow-glass); border: 1px solid var(--line); }
.hero .shot { width: min(300px, 78vw); margin: 0 auto; }

/* Store call-to-action. html[data-os] is set before first paint (head script): ios | android | desktop. */
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border-radius: 999px; background: var(--gold); color: var(--on-gold); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.01em;
}
a.store-btn:not([href]) { cursor: default; } /* no listing yet: a label, not a link */
.store-btn svg { width: 22px; height: 22px; flex: none; }
.store-qr, .store-android { display: none; }
html[data-os="desktop"] .store-qr { display: flex; align-items: center; gap: 12px; }
html[data-os="android"] .store-android { display: block; }
html[data-os="android"] .store-btn { display: none; }
.store-qr img { width: 84px; height: 84px; padding: 8px; background: #EEF3F8; border-radius: var(--radius); }
.store-qr p, .store-android { margin: 0; max-width: 15em; font-size: 15px; line-height: 1.4; color: var(--text-muted); }

.features { display: grid; gap: 16px; margin: 56px 0; padding: 0; list-style: none; }
.features li { margin: 0; }
.features h2 { margin: 0 0 6px; font-size: 18px; }
.features p { margin: 0; color: var(--text-muted); }
.screens { display: grid; gap: 40px; margin: 40px 0; }
.screens figure { margin: 0; }
.screens figcaption { margin-top: 12px; color: var(--text-muted); font-size: 15px; }
.screens .shot { border-radius: var(--radius-lg); }
.screens .phone img { width: min(300px, 78vw); border-radius: 28px; }
.close { text-align: left; margin: 64px 0 0; }
.close h2 { font-size: clamp(26px, 6vw, 40px); margin: 0 0 16px; }

@media (min-width: 760px) {
  .hero { grid-template-columns: 1.2fr 0.8fr; gap: 48px; padding-top: 48px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .screens { grid-template-columns: 2fr 1fr; align-items: start; }
  .screens .mac { grid-column: 1 / -1; }
}
@media (max-width: 420px) { h1 { font-size: 28px; } table { font-size: 15px; } nav.site a { padding: 10px 6px; } }