/* Emulsen website — built from the approved website system.
   Sources: emulsen-brand-kit/assets/website/tokens/website-tokens.json,
            .../color/tokens/color-tokens.json, .../typography/tokens/…
   Solid fields only. No gradients, visible grids, frame marks, device
   mockups, decorative film strips, grain, or fake photographic effects. */

/* Fonts are self-hosted deliberately: the brand's privacy stance is a stated
   selling point, and a third-party font CDN would log every visitor's IP. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk_400Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk_500Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk_700Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono_500Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}

:root {
  --warm-white: #F4F0E8;
  --charcoal: #171713;
  --n25: #FBF9F4;
  --n100: #E5DFD3;
  --n200: #CEC6B8;
  --n400: #7B776E;
  --n500: #5C5952;
  --n600: #3E3D38;
  --n700: #272722;

  --camera: #65763B;   /* C-01 Field Olive */
  --camera-100: #DDE4BF;
  --film: #F3C05B;     /* F-02 Film Amber */
  --meter: #137B68;    /* M-03 Meter Teal */
  --negative: #7741B5; /* N-05 Negative Violet */

  --sans: 'Space Grotesk', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', SFMono-Regular, 'PT Mono', 'Courier New', monospace;

  --inset: 24px;
  --max: 1280px;
  --section: 96px;
}
@media (min-width: 900px) {
  :root { --inset: 80px; --section: 128px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--inset);
  padding-right: var(--inset);
}

/* ── Type roles ─────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(2.75rem, 7vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; max-width: 62ch; }

.label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n500);
  margin: 0 0 20px;
}
.data { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

a { color: inherit; }

/* ── Skip link ──────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--charcoal); color: var(--warm-white);
  padding: 12px 20px; z-index: 100;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--camera);
  outline-offset: 2px;
}
:where(input):focus-visible {
  outline: 3px solid var(--meter);
  outline-offset: 2px;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 24px; padding-top: 20px; padding-bottom: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { display: block; }
.brand-name {
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Always visible, wrapping rather than collapsing into a JS menu — the link
   sets are short, and on the document pages these are the only cross-page
   navigation there is. */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
@media (min-width: 860px) { .nav { gap: 0 28px; } }
.nav a {
  font-size: 0.88rem; text-decoration: none; color: var(--n500);
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (min-width: 860px) { .nav a { font-size: 0.92rem; } }
.nav a:hover { color: var(--charcoal); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 6px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  text-decoration: none; border: 2px solid var(--charcoal);
  background: var(--charcoal); color: var(--warm-white);
  cursor: pointer;
}
.btn:hover { opacity: 0.86; }
.btn--ghost { background: transparent; color: var(--charcoal); }
.btn--light { background: var(--warm-white); color: var(--charcoal); border-color: var(--warm-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Sections ───────────────────────────────────────────────── */
section { padding-top: var(--section); padding-bottom: var(--section); }
.band-dark { background: var(--charcoal); color: var(--warm-white); }
.band-dark .label { color: var(--film); }
.band-olive { background: var(--camera); color: var(--warm-white); }
/* White, not the pale tint: small mono on Field Olive needs 4.5:1. */
.band-olive .label { color: #FFFFFF; }

/* The one approved decorative device: a single shallow uneven line.
   Drawn as an SVG wave, never a gradient or a frame mark. */
.wave { display: block; width: 100%; height: 48px; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding-bottom: 48px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
}
.hero-sub {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700; color: var(--camera); margin: 20px 0 20px;
  letter-spacing: -0.01em;
}
.release-flag {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 24px; padding: 8px 12px 8px 14px;
  border: 1px solid var(--n200); border-left: 5px solid var(--film);
  border-radius: 4px; background: var(--n25);
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.release-flag span { color: var(--n500); }
.release-flag strong { color: var(--charcoal); }
.hero-art {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px 20px;
}
.shot {
  border-radius: 8px; border: 1px solid var(--n200);
  background: var(--n25); max-width: 100%; height: auto; display: block;
}

/* Generated from the approved store-campaign renders. Device lighting,
   hardware, perspective, and shadows live in the transparent image assets;
   the website only controls their placement. */
.phone-render { display: block; max-width: 100%; height: auto; }
.phone-render--hero-pair { width: min(100%, 560px); }
.phone-render--proof { width: min(100%, 470px); margin: 0 auto; }

@media (max-width: 620px) {
  .hero-art { padding-left: 2px; padding-right: 2px; }
}

/* ── Release status ─────────────────────────────────────────── */
.coming-soon { background: var(--film); color: var(--charcoal); }
.coming-soon .label { color: var(--n600); }
.coming-soon-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) {
  .coming-soon-grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
}
.coming-soon-lead {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700; line-height: 1.3; max-width: 34ch;
}
.signup-form {
  margin: 32px 0 40px; padding: 24px;
  border: 2px solid var(--charcoal); border-radius: 8px;
  background: rgba(244, 240, 232, 0.72);
}
.signup-form label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.signup-control { display: grid; gap: 10px; }
.signup-control input {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 2px solid var(--charcoal); border-radius: 6px;
  background: var(--n25); color: var(--charcoal);
  font: inherit;
}
.signup-control input::placeholder { color: var(--n400); }
.signup-control .btn { width: 100%; }
.signup-note {
  margin: 12px 0 0; max-width: 60ch;
  color: var(--n600); font-size: 0.82rem; line-height: 1.5;
}
@media (min-width: 620px) {
  .signup-control { grid-template-columns: minmax(0, 1fr) auto; }
  .signup-control .btn { width: auto; }
}
.release-facts { margin: 36px 0 0; border-bottom: 1px solid rgba(23, 23, 19, 0.34); }
.release-facts div {
  display: grid; grid-template-columns: minmax(112px, 0.7fr) 1.3fr;
  gap: 20px; align-items: baseline; padding: 14px 0;
  border-top: 1px solid rgba(23, 23, 19, 0.34);
}
.release-facts dt {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--n600);
}
.release-facts dd { margin: 0; font-weight: 700; text-align: right; }
@media (max-width: 480px) {
  .release-facts div { grid-template-columns: 1fr; gap: 2px; }
  .release-facts dd { text-align: left; }
}

/* ── Proof ──────────────────────────────────────────────────── */
.proof-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
/* Alternating side keeps the page from marching down one rail. Below the
   breakpoint both stack copy-first, so reading order never depends on layout. */
.proof-art { order: 2; }
@media (min-width: 1000px) { .proof-grid--flip .proof-art { order: 0; } }
.stat { margin-top: 40px; }
.stat-val { font-family: var(--mono); font-size: 2.5rem; font-weight: 500; letter-spacing: -0.02em; }

/* ── Workflow ───────────────────────────────────────────────── */
.flow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; margin: 0 0 24px;
}
.flow span[aria-hidden] { color: var(--film); }
.flow-codes {
  display: grid; gap: 12px; margin-top: 48px;
  grid-template-columns: repeat(2, 1fr);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--n200);
}
@media (min-width: 760px) { .flow-codes { grid-template-columns: repeat(4, 1fr); } }

/* ── Feature cards ──────────────────────────────────────────── */
.features { display: grid; gap: 20px; }
@media (min-width: 860px) { .features { grid-template-columns: repeat(3, 1fr); } }
/* Copy-only cards: solid fields, per the approved graphic language. The app is
   shown with real captures in the hero and the proof section; these carry the
   message rather than a screenshot. */
.feature { border-radius: 8px; padding: 28px 24px 32px; color: var(--charcoal); display: flex; flex-direction: column; }
.feature--film { background: var(--film); }
.feature--meter { background: var(--meter); color: #fff; }
.feature--negative { background: var(--negative); color: #fff; }
.feature .label { color: inherit; opacity: 0.72; margin-bottom: 14px; }
.feature h3 { font-size: 1.5rem; margin-bottom: 12px; }
.feature p { font-size: 0.95rem; opacity: 0.92; }
.feature p:last-child { margin-bottom: 0; }

/* ── Tap-to-open (olive band) ───────────────────────────────── */
.tap-url {
  font-family: var(--mono); font-size: clamp(1rem, 3.4vw, 1.6rem);
  letter-spacing: -0.01em; color: #fff; margin: 28px 0 20px;
  padding: 14px 18px; border: 1px solid rgba(255,255,255,0.4);
  border-radius: 8px; display: inline-block;
}
.tap-note { font-size: 0.95rem; color: var(--camera-100); max-width: 52ch; }

/* ── Darkroom (dark band, D-04 Safelight Red accent) ────────── */
.band-darkroom { background: var(--charcoal); color: var(--warm-white); }
/* D-04 darkText — the light salmon reads on charcoal; the 500 red does not. */
.band-darkroom .label { color: #F27A6A; }
.recipe {
  margin-top: 40px; border: 1px solid var(--n600); border-left: 5px solid #F27A6A;
  border-radius: 8px; padding: 22px 24px; background: var(--n700);
}
.recipe dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #A9A296; margin-bottom: 6px;
}
.recipe dd {
  font-family: var(--mono); font-size: 1.35rem; font-weight: 500;
  color: #fff; margin: 0 0 18px; font-variant-numeric: tabular-nums;
}
.recipe dd:last-child { margin-bottom: 0; }
.recipe .src { font-family: var(--sans); font-size: 0.8rem; color: #A9A296; }

/* ── Who it's for ───────────────────────────────────────────── */
.audience { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; }
.audience li {
  font-size: 1.1rem; padding: 20px 0; border-top: 1px solid var(--n200);
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
}
.audience li:last-child { border-bottom: 1px solid var(--n200); }
.audience .n {
  font-family: var(--mono); font-size: 0.9rem; color: var(--camera); font-weight: 500;
}

/* ── Roadmap (vertical timeline) ────────────────────────────── */
.roadmap { list-style: none; margin: 44px 0 0; padding: 0; max-width: 60ch; }
.roadmap-step {
  position: relative; display: grid; grid-template-columns: 22px 1fr;
  gap: 20px; padding-bottom: 34px;
}
.roadmap-step:last-child { padding-bottom: 0; }
/* connector line between dots */
.roadmap-step::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: -6px;
  width: 2px; background: var(--n200);
}
.roadmap-step:last-child::before { display: none; }
.roadmap-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--n300); background: var(--warm-white);
  margin-top: 3px; position: relative; z-index: 1;
}
.is-active .roadmap-dot { background: var(--camera); border-color: var(--camera); }
.is-next .roadmap-dot { background: var(--film); border-color: var(--film); }
.roadmap-when {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--n500); margin: 0 0 6px;
}
.roadmap-step h3 { font-size: 1.3rem; margin: 0 0 6px; }
.roadmap-note { color: var(--n600); margin: 0; font-size: 0.98rem; max-width: none; }
.roadmap-link { margin-top: 32px; }
/* Emulsen Lab band on /roadmap — N-05 Negative Violet, solid field */
.band-lab { background: var(--negative); color: #fff; }
.band-lab .label { color: #fff; opacity: 0.8; }
.band-lab p { color: #EDE6F6; }
.band-lab .roadmap { margin-top: 0; }
.band-lab .roadmap-step::before { background: rgba(255,255,255,0.35); }
.band-lab .roadmap-dot { background: transparent; border-color: rgba(255,255,255,0.6); }
.band-lab .is-active .roadmap-dot { background: #fff; border-color: #fff; }
.band-lab .roadmap-when { color: #D9CCEB; }
.band-lab .roadmap-note { color: #EDE6F6; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* ── Local-first ────────────────────────────────────────────── */
.local-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .local-grid { grid-template-columns: 1.1fr 0.9fr; gap: 72px; } }
.panel { background: var(--n700); border-radius: 8px; padding: 28px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  font-size: 1.05rem; font-weight: 500; padding: 14px 0;
  border-bottom: 1px solid var(--n600);
}
.panel li:last-child { border-bottom: 0; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-grid { display: grid; gap: 32px 56px; margin-top: 48px; }
@media (min-width: 860px) { .faq-grid { grid-template-columns: 1fr 1fr; } }
.faq h3 { margin-bottom: 8px; }
.faq p { font-size: 0.95rem; color: var(--n500); margin: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.foot-cta {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  padding-top: 40px; padding-bottom: 40px;
}
.foot-cta h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
.site-foot { padding: 40px 0 56px; font-size: 0.9rem; color: var(--n500); }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 16px; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ── Document pages (privacy / terms / support) ─────────────── */
.doc { max-width: 68ch; padding-top: 56px; padding-bottom: 96px; }
.doc h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 8px; }
.doc h2 {
  font-size: 1.35rem; text-transform: none; letter-spacing: -0.01em;
  margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--n200);
}
.doc h3 { margin: 28px 0 8px; }
.doc p, .doc li { color: var(--n600); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc .updated { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n500); }
.doc strong { color: var(--charcoal); }
.callout {
  background: var(--n25); border: 1px solid var(--n200);
  border-radius: 8px; padding: 20px 24px; margin: 28px 0;
}
.callout p:last-child { margin-bottom: 0; }