/* Hobbs — the public site at loghobbs.com.
 *
 * One stylesheet for every page (home, support, privacy, terms, brand, 404) so the site reads as
 * one thing. It replaces the two hand-typed :root blocks that used to live in index.html and
 * legal.css, which had already drifted from the app: --muted was #9a958c against the real
 * #9C958A, --border was an invented #2a2830, and the page background used the deepest brand
 * black instead of the app background one step up.
 *
 * Every value below is copied from frontend/src/screens/theme.ts and is held to it by
 * frontend/src/screens/__tests__/siteTokens.test.ts — if the app's palette moves and this file
 * does not, that test fails. Do not hand-edit a colour here; change theme.ts and follow the test.
 *
 * Constraints this file lives under, all from the apex Caddy block (deploy/Caddyfile):
 *   script-src 'none'  — no JavaScript anywhere on this site. Interactions are CSS only.
 *   font-src 'self'    — a Google Fonts <link> is BLOCKED. Fonts are self-hosted woff2, built
 *                        by scripts/site/build-fonts.mjs.
 *   img-src 'self'     — no hotlinked images, including Apple's App Store badge.
 */

/* ── Typefaces ────────────────────────────────────────────────────────────────────────────
 * Montserrat: wordmark and marketing headlines. Inter: UI and body. B612 Mono: technical
 * numerals ONLY (registrations, logbook figures) — never body copy. DESIGN_GUIDELINES.md §4.
 * Latin subsets, ~17KB each; `swap` so the copy is readable before the font lands. */
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* `optional`, not `swap`: a handful of numerals is not worth a reflow if the file is slow. */
@font-face { font-family: 'B612 Mono'; src: url('/fonts/B612Mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; }

/* ── Tokens ───────────────────────────────────────────────────────────────────────────────
 * Single-theme dark by intent, not omission. This is the brand layer, which theme.ts keeps
 * concrete in BOTH app themes (gold/metal/brandInk, theme.ts:91-94) — a light marketing site
 * would be a different brand from the one the app paints its own chrome with. */
:root {
  color-scheme: dark;

  /* ink — surfaces */
  --ink-950: #0a0b0d;  /* brand base black */
  --ink-900: #0d0c0f;  /* page background */
  --ink-850: #17161b;  /* cards, panels */
  --ink-800: #1e1c22;  /* insets, wells */
  --ink-700: #272329;  /* hover */

  /* zinc — text, warm */
  --heading: #f0ece4;
  --text:    #c9c4bc;
  --muted:   #9c958a;
  --placard: #877f74;

  /* gold — the accent. One element per view. */
  --gold-300: #e7c888;
  --gold-400: #d9b36c;
  --gold-500: #c9a15a;
  --gold-600: #a8823f;

  /* metal — the chrome layer the mark is drawn in */
  --metal-hi:  #edeff1;
  --metal-mid: #9aa1a6;
  --metal-edge: #23282d;

  /* hairlines — warm chrome, never a solid grey box */
  --hair:        rgba(240, 236, 228, 0.09);
  --hair-strong: rgba(240, 236, 228, 0.15);

  /* alerts — #CC3F0C only, always paired with a word */
  --alert:      #cc3f0c;
  --alert-text: #e8693b;
  --alert-bg:   rgba(204, 63, 12, 0.14);

  /* radii */
  --r-instrument: 4px;
  --r-strip: 8px;
  --r-control: 10px;
  --r-card: 16px;
  --r-card-lg: 20px;
  --r-pill: 999px;

  /* spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* elevation */
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.3);
  --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* type — the app scale, plus the display sizes the brand register sanctions for
     marketing headlines (the app's h1 is 26px, which is a caption on a hero) */
  --t-display: clamp(38px, 6.2vw, 64px);
  --t-h2: clamp(25px, 3.2vw, 34px);
  --t-h3: 17px;
  --t-lede: clamp(17px, 1.5vw, 20px);
  --t-body: 16px;
  --t-sm: 14px;
  --t-caption: 13px;
  --t-label: 12px;
  --t-micro: 11px;

  --measure: 68ch;
  --page: 1120px;
}

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

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

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The page must never scroll sideways; wide children get their own scroller. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--heading); text-wrap: balance; margin: 0; }

p { margin: 0 0 var(--s4); }

/* Links are NOT gold. Gold is the CTA, one per view — DESIGN_GUIDELINES.md §2.
   Painting every link gold turned /privacy into a field of it. */
a {
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--hair-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
a:hover { text-decoration-color: var(--gold-500); }

:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: var(--r-instrument);
}

/* ── Layout ───────────────────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s6);
}
@media (min-width: 720px) { .wrap { padding: 0 var(--s8); } }

/* Reading column for prose. The document pages set this on <main>; the home page uses it on
   individual blocks so the section furniture can still run full width. */
.measure { max-width: var(--measure); }

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section + .section { border-top: 1px solid var(--hair); }

/* ── Site header ──────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Opaque ink-950, not a translucent panel. The chrome-H lockup is a PNG with its own
     background baked in at exactly #0A0B0D (sampled, not assumed), so any other header colour
     draws a visible plate around the mark. The mark is enhance-only — we match the header to
     it rather than touching the artwork. */
  background: var(--ink-950);
  border-bottom: 1px solid var(--hair);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: 68px;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}
/* The chrome-H lockup. It was 44px, at which the "SMART PILOTS LOG BOOK" line under the
   wordmark is unreadable mud — the mark's own minimum is ~40px for the roundel ALONE. */
.site-header .mark { flex: 0 0 auto; text-decoration: none; display: block; }
.site-header .mark img { height: 40px; width: auto; }
@media (min-width: 720px) { .site-header .mark img { height: 48px; } }

.site-nav { display: none; margin-left: auto; align-items: center; gap: var(--s6); }
@media (min-width: 720px) { .site-nav { display: flex; } }
.site-nav a {
  color: var(--muted);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { color: var(--heading); }

.site-header .btn { margin-left: auto; }
@media (min-width: 720px) { .site-header .btn { margin-left: 0; } }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;            /* the a11y floor — DESIGN_GUIDELINES §9 */
  padding: 0 var(--s5);
  border-radius: var(--r-control);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--ink-950);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); }

.btn-secondary {
  background: transparent;
  color: var(--heading);
  border: 1px solid var(--hair-strong);
}
.btn-secondary:hover { border-color: var(--metal-mid); background: rgba(240, 236, 228, 0.04); }

.btn-lg { min-height: 52px; padding: 0 var(--s7); font-size: var(--t-body); }

/* ── Cards ────────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s6);
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s2); }
.card p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ── Type helpers ─────────────────────────────────────────────────────────────────────── */
.display {
  font-family: Montserrat, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.h2 {
  font-family: Montserrat, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s4);
}
.lede { font-size: var(--t-lede); color: var(--muted); line-height: 1.55; }
.small { font-size: var(--t-sm); }
.caption { font-size: var(--t-caption); color: var(--muted); }
.muted { color: var(--muted); }

/* Section label. Used ONCE per page region, never as an eyebrow on every block —
   hobbs-design SKILL.md calls the eyebrow-on-everything pattern out by name. */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--placard);
  margin: 0 0 var(--s3);
}

/* Technical numerals only: registrations, logbook hours, identifiers. */
.tech {
  font-family: 'B612 Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
/* Big figures are Inter with tabular figures, NOT mono — theme.ts `stat` is explicit
   about this ("Apple-Health style, NOT mono"). */
.stat {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  color: var(--heading);
}

/* ── Document pages (/privacy, /terms, /support) ────────────────────────────────────────
 * CENTRED in the container, not just narrowed inside it. A reading column pinned to the left
 * edge of a 1120px wrap leaves a third of a desktop screen empty on the right — the exact
 * fault the old homepage had. */
.doc { max-width: var(--measure); margin-inline: auto; padding: var(--s10) 0 var(--s12); }
.doc h1 {
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s2);
}
.doc h2 {
  font-size: var(--t-h3);
  font-weight: 600;
  margin: var(--s10) 0 var(--s2);
  padding-top: var(--s5);
  border-top: 1px solid var(--hair);
}
.doc h3 { font-size: var(--t-body); font-weight: 600; margin: var(--s6) 0 var(--s2); }
/* The "Last updated" line is metadata, not prose. Keyed on the class, NOT `h1 + p` — the
   positional form also caught the support page's opening paragraph and painted it gold. */
.doc p.updated {
  color: var(--placard);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s6);
}
.doc p { color: var(--text); }
.doc strong { color: var(--heading); font-weight: 600; }
.doc ul { color: var(--text); padding-left: var(--s5); margin: 0 0 var(--s4); }
.doc li { margin: var(--s2) 0; }
.doc .lede { margin: 0 0 var(--s7); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--hair);
  padding: var(--s10) 0 var(--s12);
  color: var(--muted);
  font-size: var(--t-sm);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { color: var(--heading); text-decoration: underline; text-decoration-color: var(--gold-500); }
/* The fine print is 13px; run it the full 1120px and it becomes a single unreadable line. */
.site-footer p { margin: 0 0 var(--s2); max-width: var(--measure); }
.site-footer .fine { color: var(--placard); font-size: var(--t-caption); }

/* ── Skip link ────────────────────────────────────────────────────────────────────────── */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--ink-850);
  color: var(--heading);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-control);
  border: 1px solid var(--hair-strong);
  z-index: 20;
}
.skip:focus { left: var(--s4); }

/* ── Motion ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ Home page ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────
 * Warm black with a single soft glow behind the copy — the SkyGlow motif, which the design
 * system describes as "the whole atmosphere; don't add more". No gradient blobs, no stock photo. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 112px);
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(201, 161, 90, 0.09), transparent 60%),
    radial-gradient(90% 70% at 85% 20%, rgba(240, 236, 228, 0.045), transparent 65%),
    var(--ink-950);
  border-bottom: 1px solid var(--hair);
}

/* The one ambient one-shot MOTION.md allows, and only on this hero: a champagne sweep that
 * crosses once and settles. It never loops — an in-app looping animation would fail WCAG 2.2.2,
 * and the marketing site holds the same line. */
.hero-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(231, 200, 136, 0.10) 50%, transparent 62%);
  transform: translateX(-60%);
  animation: sweep 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s 1 forwards;
}
@keyframes sweep { to { transform: translateX(60%); opacity: 0; } }

.hero-inner { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; } }

.hero-copy .lede { margin: var(--s6) 0 var(--s8); max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cta-note { margin: var(--s5) 0 0; }

.hero-shot { margin: 0; justify-self: center; max-width: 300px; }
@media (min-width: 900px) { .hero-shot { max-width: 340px; } }

/* ── Device mock ──────────────────────────────────────────────────────────────────────────
 * The brief asks for real screenshots in chrome device mocks rather than bare rectangles. The
 * bezel is the metal edge token, so the frame is the same chrome the mark is drawn in. */
.device {
  border: 1px solid var(--metal-edge);
  border-radius: var(--r-card-lg);
  padding: 6px;
  background: linear-gradient(160deg, rgba(237, 239, 241, 0.14), rgba(64, 69, 74, 0.1));
  box-shadow: var(--shadow-floating);
}
.device img { border-radius: 14px; display: block; }

/* ── Steps ────────────────────────────────────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: var(--s8) 0 0; }
.step-n { color: var(--placard); font-size: var(--t-label); letter-spacing: 1.1px; margin: 0 0 var(--s3); }

/* ── The reconciliation claim ─────────────────────────────────────────────────────────────
 * Gold appears here as a single keyline — one element, not a fill. */
.trust {
  margin-top: var(--s10);
  padding: var(--s6) 0 var(--s6) var(--s6);
  border-left: 2px solid var(--gold-500);
}
.trust h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s3); }

.recon { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0; }
.recon > div {
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--r-strip);
  padding: var(--s3) var(--s4);
  min-width: 150px;
}
.recon dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--placard); }
.recon dd { margin: var(--s1) 0 0; font-size: 22px; color: var(--heading); }
/* "OK" is a quiet chrome state paired with a word — never a loud green, never colour alone. */
.recon .ok dd { font-size: var(--t-sm); color: var(--text); }

/* ── Feature shots ────────────────────────────────────────────────────────────────────────── */
.shots { margin-top: var(--s8); align-items: start; }
.shots figure { margin: 0; }
.shots figcaption { padding-top: var(--s5); }
.shots figcaption h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s2); }
.shots .device { max-width: 300px; margin-inline: auto; }

.also { list-style: none; padding: 0; margin: var(--s10) 0 0; }
.also li {
  padding: var(--s4) 0;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: var(--t-sm);
}
.also strong { color: var(--heading); font-weight: 600; }

/* ── Pricing ──────────────────────────────────────────────────────────────────────────────
 * The sanctioned place for gold to appear a little more generously (REBRAND_ROLLOUT_BRIEF §44):
 * one keyline and one badge on the tier being recommended. Still not a fill. */
.tiers { margin: var(--s8) 0 var(--s6); align-items: start; }
.tier {
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: var(--s6);
  box-shadow: var(--shadow-card);
}
.tier-best { border-color: var(--gold-600); }
.tier-badge {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 var(--s2);
}
.tier h3 { font-size: var(--t-h3); font-weight: 600; margin: 0 0 var(--s2); }
.tier-price { font-size: 30px; margin: 0 0 var(--s1); }
.tier-tagline { margin: 0 0 var(--s5); }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li {
  position: relative;
  padding: var(--s2) 0 var(--s2) var(--s5);
  font-size: var(--t-sm);
  color: var(--text);
  border-top: 1px solid var(--hair);
}
.tier li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--metal-mid);
}

/* ── Closing ──────────────────────────────────────────────────────────────────────────────── */
.closing .lede { margin: var(--s4) 0 var(--s8); }

/* ── 404 ──────────────────────────────────────────────────────────────────────────────────── */
.notfound .cta-row { margin-top: var(--s8); }