/* OxyScore website — shared styles. Self-contained, system fonts only,
   no external resources (matches the app's privacy stance and the dark,
   clinical, cool brand). Palette pulled from AppColor.swift.

   Two audiences share this file: the legal pages (privacy/terms/support)
   and the landing page. Everything up to the "Landing" banner is used by
   the legal pages — change it only with those pages open. Landing-only
   rules are scoped under `.landing` or landing-only class names. */

:root {
  --bg: #000000;
  --surface: #131518;
  --surface-elevated: #1A1D21;
  /* Opaque, exactly `AppColor.hairline` — a translucent white hairline drifts
     off the app's value as soon as it sits over a card instead of the page. */
  --hairline: #262B31;
  --text-primary: #F0F3F6;
  --text-secondary: #9BA3AD;
  --text-tertiary: #646C76;
  /* One accent, one meaning: sky blue is the only brand colour on this site.
     `--ember` is the deep royal that pairs with it in gradients (the app's
     `accentEmber`); `--green` is the privacy dot, borrowed from the app's
     success token, and is the only non-brand hue here. */
  --accent: #38BDF8;
  --ember: #2563EB;
  --green: #22C55E;
  --maxw: 760px;
  --maxw-wide: 1080px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Header / wordmark */
.site-header {
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: rgba(9, 10, 12, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  z-index: 10;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand .word {
  background: linear-gradient(100deg, var(--accent), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav {
  display: flex;
  gap: 20px;
  font-size: 15px;
}
.nav a { color: var(--text-secondary); }
.nav a:hover { color: var(--text-primary); text-decoration: none; }

/* Content (legal pages read these sizes — the landing overrides its own) */
main { padding: 44px 0 8px; }

h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 14px;
}
.updated {
  color: var(--text-tertiary);
  font-size: 14px;
  margin: 0 0 34px;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 40px 0 10px;
  padding-top: 6px;
}
h3 { font-size: 17px; margin: 24px 0 6px; }
p, li { color: #DDE3E8; }
.lead { font-size: 19px; color: var(--text-primary); }
.muted { color: var(--text-secondary); }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }
strong { color: var(--text-primary); }

/* Callout card */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 22px 0;
}
.card.accent { border-color: rgba(56, 189, 248, 0.35); }
.card .card-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; margin: 0 0 6px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; }

hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 60px;
  padding: 30px 0 46px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer .links { display: flex; gap: 18px; }
.site-footer a { color: var(--text-secondary); }

@media (max-width: 620px) {
  h1 { font-size: 28px; }
  .nav { gap: 14px; font-size: 14px; }
}

/* =====================================================================
   Landing — everything below is index.html only.

   The design rule, learned the hard way: screenshots must be RAW app
   screens shown large enough to read, with the selling line as real HTML
   text beside them. The first cut put App Store composites (caption text
   baked into the pixels) three-across, which rendered the type at a third
   of its size — unreadable on desktop, worse on phones. No decorative
   glow: flat black field, the screen is the colour.
   ===================================================================== */

.wrap-wide {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 0 22px;
}

.landing { padding: 0 0 8px; }

/* --- Hero --- */
.hero {
  padding: 84px 0 24px;
  text-align: center;
}
.hero-title {
  font-size: clamp(42px, 7vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}
.hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto 28px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,0.03);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.status-pill .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(56,189,248,0.18);
}
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--hairline); border-radius: 12px;
  padding: 10px 18px; color: var(--text-primary); font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.store-badge small { display: block; color: var(--text-tertiary); font-weight: 400; font-size: 11px; }

/* The phone: a raw screenshot dressed as a device purely in CSS — screen
   radius, a dark bezel ring, a hairline, a grounding shadow. Same recipe as
   the App Store composites, so the two surfaces read as one campaign. */
.hero-phone {
  margin: 56px auto 0;
  max-width: 400px;
}
.hero-phone img,
.feature-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 46px;
  border: 1px solid #2A2F36;
  box-shadow:
    0 0 0 10px #101216,
    0 0 0 11px #262B31,
    0 32px 80px rgba(0, 0, 0, 0.55);
  background: var(--surface);
}

/* --- Feature rows: text one side, readable screen the other --- */
.feature-row { padding: 88px 0 0; }
.feature-row:last-of-type { padding-bottom: 8px; }

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.feature-grid.rev .feature-copy  { order: 2; }
.feature-grid.rev .feature-phone { order: 1; }

.feature-copy .eyebrow { margin-bottom: 10px; }
.landing .feature-copy h2 {
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  padding: 0;
}
.feature-copy p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 46ch;
}

.feature-phone {
  margin: 0;
  max-width: 380px;
  justify-self: center;
  width: 100%;
}

/* --- Closing cards: wrist + privacy --- */
.closing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 88px;
}
.closing-cards .card { margin: 0; }
.watch-card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.watch-shot {
  width: 116px;
  height: auto;
  flex: none;
  border-radius: 26px;
  border: 1px solid #2A2F36;
  box-shadow: 0 0 0 6px #101216, 0 0 0 7px #262B31;
  background: var(--surface);
}

/* --- Small screens: one column, copy above its screen, everything centred.
   The phone caps at 320px so the in-screen type stays at a readable size
   rather than shrinking with the viewport. --- */
@media (max-width: 760px) {
  .hero { padding-top: 56px; }
  .hero-phone { max-width: 320px; margin-top: 44px; }
  .hero-phone img, .feature-phone img {
    border-radius: 38px;
    box-shadow:
      0 0 0 8px #101216,
      0 0 0 9px #262B31,
      0 22px 56px rgba(0, 0, 0, 0.55);
  }

  .feature-row { padding: 64px 0 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Copy first on every row, mirrored or not. */
  .feature-grid.rev .feature-copy  { order: 1; }
  .feature-grid.rev .feature-phone { order: 2; }
  .feature-copy { text-align: center; }
  .feature-copy p { margin: 0 auto; }
  .feature-phone { max-width: 320px; }

  .closing-cards { grid-template-columns: 1fr; margin-top: 64px; }
}