/* ==========================================================================
   Zor — shared stylesheet for the static site (site/*.html)
   Dark-first, translated to light via prefers-color-scheme.
   Design language mirrors app/docs/design-system.md:
   near-black charcoal base, layered gray surfaces, one lime accent
   (#D5FF5F) always carrying dark ink, pill geometry, Poppins.
   No frameworks, no build step.
   ========================================================================== */

/* ----- Fonts (self-hosted, latin subset — no third-party requests) -----
   Poppins weights 400/500/700/800, woff2 in ./fonts/. Licensed under the
   SIL Open Font License 1.1 (see ./fonts/OFL.txt). local() is tried first so
   an installed copy is reused; font-display: swap avoids invisible text. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Poppins Regular"), local("Poppins-Regular"),
    url("./fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Poppins Medium"), local("Poppins-Medium"),
    url("./fonts/poppins-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Poppins Bold"), local("Poppins-Bold"),
    url("./fonts/poppins-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"),
    url("./fonts/poppins-800-latin.woff2") format("woff2");
}

/* ----- Tokens (dark is the hero) ----- */
:root {
  --bg: #0e0e10;
  --surface: #1a1a1e;
  --surface-2: #232329;
  --text: #f4f4f1;
  --text-secondary: #9c9ca4;
  --accent: #d5ff5f;
  --on-accent: #131705;
  --accent-muted: rgba(213, 255, 95, 0.12);
  --tint: #d5ff5f;               /* interactive text/icons */
  --border: rgba(255, 255, 255, 0.09);
  --warn: #ffb35c;
  --warn-wash: rgba(255, 179, 92, 0.1);
  --code-bg: rgba(255, 255, 255, 0.07);
  /* Photos are an always-dark micro-surface: ink over a photo is fixed white
     in BOTH schemes, so these tokens live outside the light media query. */
  --on-photo: #ffffff;
  --on-photo-muted: rgba(255, 255, 255, 0.74);
  color-scheme: dark;
}

/* Light: a tamer translation of the same roles — warm off-white surfaces,
   lime only ever as a fill with dark ink, tint darkened to olive so
   interactive text keeps contrast. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf9f6;
    --surface: #ffffff;
    --surface-2: #f0efe9;
    --text: #191914;
    --text-secondary: #61615a;
    --accent: #d5ff5f;
    --on-accent: #131705;
    --accent-muted: rgba(140, 173, 43, 0.14);
    --tint: #5f7317;
    --border: rgba(20, 20, 10, 0.12);
    --warn: #b06414;
    --warn-wash: rgba(176, 100, 20, 0.08);
    --code-bg: rgba(20, 20, 10, 0.06);
    color-scheme: light;
  }
}

/* ----- Base ----- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

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

img { max-width: 100%; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ----- Layout ----- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow { max-width: 720px; }

/* ----- Header / nav ----- */
.site-header {
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--accent); }
@media (prefers-color-scheme: light) {
  .wordmark .dot { color: var(--tint); }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* ----- Type ----- */
h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 800; }
h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tint);
  margin-bottom: 12px;
}

.lede {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 34em;
}

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

/* ----- Buttons & pills ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover { filter: brightness(1.05); }

.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn--secondary:hover { background: var(--surface-2); }

/* ----- Store badges (placeholders until the listings exist) ----- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Utility instead of an inline style attribute: the CSP (site/_headers)
   enforces style-src without 'unsafe-inline'. */
.store-badges--center {
  justify-content: center;
}

.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 8px 22px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--text-secondary);
  line-height: 1.25;
}
.store-badge .store-badge__pre { font-size: 11px; }
.store-badge .store-badge__name { font-size: 16px; font-weight: 700; color: var(--text); }
.store-badge .store-badge__soon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint);
}

/* ----- Hero (index) ----- */
.hero { padding: 72px 0 40px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Screenshot slot: a phone frame with a placeholder until a real
   product screenshot is dropped in. */
.phone-frame {
  aspect-ratio: 9 / 19;
  max-width: 300px;
  margin: 0 auto;
  width: 100%;
  border-radius: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px;
}

.phone-frame__screen {
  height: 100%;
  border-radius: 30px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.phone-frame__screen .big {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

/* ----- Feature cards ----- */
.features {
  padding: 40px 0 72px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}

.card .glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-muted);
  color: var(--tint);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
}

.card p { color: var(--text-secondary); font-size: 14.5px; margin-bottom: 0; }

/* Accent band (index closing CTA) */
.accent-band {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 28px;
  padding: 40px 32px;
  margin: 0 0 72px;
}
.accent-band h2 { color: var(--on-accent); }
.accent-band p { color: var(--on-accent); opacity: 0.75; max-width: 40em; }
.accent-band .btn--inverted {
  background: var(--on-accent);
  color: var(--accent);
}

/* ----- Prose pages (privacy / support / account deletion) ----- */
.prose { padding: 48px 0 72px; }

.prose h1 { font-size: clamp(30px, 5vw, 42px); margin-bottom: 0.75em; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--text); }
.prose li { margin-bottom: 0.35em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

.prose .table-wrap { overflow-x: auto; }
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  min-width: 540px;
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.prose th { background: var(--surface); }

/* Draft banner — must stay until publication (see site/README.md) */
.banner-draft {
  background: var(--warn-wash);
  border: 1px solid var(--warn);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 0 0 32px;
  font-size: 14.5px;
}
.banner-draft strong { color: var(--warn); }

.page-meta { color: var(--text-secondary); font-size: 14.5px; }

/* ----- Invite page ----- */
.invite { padding: 64px 0 72px; }

.invite-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 40px 32px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

/* Lime top-accent — CSS-only garnish (no inline style, no extra markup),
   clipped to the card's rounded corners by overflow: hidden above. */
.invite-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent);
}

.invite-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  letter-spacing: 0.14em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 26px;
  margin: 20px 0 6px;
  overflow-wrap: anywhere;
}

.invite-card .actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
}

.invite-steps {
  text-align: left;
  color: var(--text-secondary);
  font-size: 14.5px;
  max-width: 26em;
  margin: 0 auto;
}

.hidden { display: none; }

/* ----- Footer ----- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 48px;
  font-size: 14px;
  color: var(--text-secondary);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--text); }

/* ==========================================================================
   Redesign components (photo-led landing) — added 2026-07-07.
   Photo surfaces carry fixed white ink (--on-photo*) in both schemes.
   ========================================================================== */

/* ----- Landing nav overlay (index only, via body.landing) -----
   The header floats transparently over the hero photo and scrolls away with
   it. Inner pages have no .landing class, so they keep the solid header. */
.landing .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: transparent;
  border-bottom: none;
}
.landing .site-header .wordmark { color: var(--on-photo); }
.landing .site-header .wordmark .dot { color: var(--accent); }
.landing .site-nav a { color: var(--on-photo-muted); }
.landing .site-nav a:hover { color: var(--on-photo); }

/* ----- Photo hero (full-bleed) ----- */
.photo-hero {
  position: relative;
  min-height: min(88vh, 780px);
  overflow: hidden;
}
@media (max-width: 820px) {
  /* Keep eyebrow + H1 + lede + wrapped badges on-screen at 375px width. */
  .photo-hero { min-height: clamp(620px, 92vh, 760px); }
}

.photo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* keeps her torso/face in frame */
}

/* Two layered scrims in one element: a top scrim so the overlaid nav stays
   legible, and a heavier bottom scrim under the hero copy. */
.photo-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 30%),
    linear-gradient(to top,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.45) 38%,
      rgba(0, 0, 0, 0) 72%);
}

/* Fade the photo's bottom edge into the themed content below it.
   References var(--bg), so it is automatically scheme-aware. */
.photo-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.photo-hero__content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 96px;    /* clear the absolute nav */
  padding-bottom: 56px;
}

/* Eyebrow stays lime on the always-dark photo (--tint goes olive in light). */
.photo-hero .eyebrow { color: var(--accent); }
.photo-hero h1 { color: var(--on-photo); }
.photo-hero .lede { color: var(--on-photo-muted); max-width: 30em; }

.photo-hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Store badges sitting on the photo: darkened glass so they read as legible
   over any part of the image, ink fixed to the photo tokens. */
.photo-hero .store-badge {
  background: rgba(0, 0, 0, 0.42);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  color: var(--on-photo-muted);
}
.photo-hero .store-badge .store-badge__pre { color: var(--on-photo-muted); }
.photo-hero .store-badge .store-badge__name { color: var(--on-photo); }
.photo-hero .store-badge .store-badge__soon { color: var(--accent); }

/* ----- Split (two-column science band) ----- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: 64px 0;
}
.split__body p { color: var(--text-secondary); }
.split__body p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; padding: 48px 0; }
  /* Photo stacks above the text on mobile. */
  .split__media { order: -1; }
}

/* ----- Photo frame (framed portrait) ----- */
.photo-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.photo-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional lime accent-ring garnish (design-system §10): one thin ring,
   partially off the frame's corner. Decorative only (aria-hidden). */
.photo-frame__ring {
  position: absolute;
  width: 200px;
  height: 200px;
  right: -64px;
  top: -64px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}

/* ----- Name-story band (index brand moment) -----
   Centered etymology aside. The زور · zor lockup is the display garnish,
   coloured with --tint so it stays lime on the dark hero scheme and darkens
   to olive in light (raw lime fails contrast on the off-white surface). */
.name-band {
  padding: 8px 0 72px;
}

.name-band__inner {
  max-width: 40em;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}

.name-band__lockup {
  color: var(--tint);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

/* Arabic token: isolate its bidi run and hand it a system Arabic face —
   Poppins is latin-only, and all of these ship with the OS (no web request,
   so the site's zero-external-request CSP is untouched). */
.name-band__ar {
  unicode-bidi: isolate;
  font-family: "Geeza Pro", "Segoe UI Arabic", "Noto Naskh Arabic",
    "Noto Sans Arabic", serif;
  font-weight: 600;
  /* Arabic script sits optically smaller than Latin caps; nudge it up so the
     lockup reads as one balanced unit. */
  font-size: 1.1em;
}

.name-band__dot {
  /* The middle dot as a quiet lime pivot between the two scripts. */
  color: var(--accent);
  font-weight: 400;
}
@media (prefers-color-scheme: light) {
  .name-band__dot { color: var(--tint); }
}

.name-band__story {
  color: var(--text-secondary);
  font-size: 18px;
  margin: 0;
}

.name-band__lead {
  color: var(--text);
  font-weight: 500;
}

.name-band__story em {
  color: var(--text);
  font-style: italic;
}