/* ============================================================
   Farlens public site — shared design system.
   Same brand tokens as the product dashboard (one visual system).
   No build step, no dependencies. Served as-is.
   ============================================================ */

:root {
  --bg: #0B0E14;
  --bg-raise: #0E121A;
  --panel: #12151C;
  --panel-2: #161B24;
  --border: #232833;
  --border-hi: #2E3542;
  --text: #E8EAED;
  --dim: #8B93A1;
  /* --faint was #5C6474 = 3.25:1 on --bg, which fails WCAG AA for normal text.
     It carries the compliance caveats ("not predictions or recommendations") and
     the "as of" timestamps — the two things that must stay legible. This value
     clears 4.5:1 against all three surface colours, including --panel-2 which
     backs .status-block. Do not darken it again without re-checking all three. */
  --faint: #7F8796;
  --accent: #4C6FFF;
  /* Brand accent is 4.62:1 on --bg (fine for links and labels sitting directly
     on the page) but only 4.37:1 once it's on a raised panel. Small accent text
     over a panel uses this lighter tint instead — 6.4:1 on every surface. The
     brand colour itself is unchanged; this is a text-legibility variant. */
  --accent-text: #7E97FF;
  --accent-soft: rgba(76, 111, 255, 0.14);
  --accent-glow: rgba(76, 111, 255, 0.35);
  --bull: #26A65B;
  --bear: #E5484D;
  --radius: 12px;
  --radius-lg: 18px;
  /* "Inter" is kept first on purpose but is NO LONGER FETCHED. The Google Fonts
     link was removed from all 30 pages on 2026-08-10: it was the site's only
     third-party request and sent every visitor's IP to Google LLC (US) with no
     consent and no processor disclosure. Naming Inter first still honours it for
     the minority who have it installed locally; everyone else gets system-ui
     (Segoe UI on Windows, SF Pro on macOS), which this chain was always written
     to survive. Do not re-add the remote link — self-host if Inter is required. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient backdrop: faint grid + accent glow. Pure CSS, no images. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, var(--accent-glow), transparent 65%),
    linear-gradient(rgba(232, 234, 237, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 234, 237, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  pointer-events: none;
}

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

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

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

/* Skip link — WCAG 2.4.1. Off-screen until focused, so a keyboard user can jump
   past the nav instead of tabbing through six links on every page. Uses left
   offset rather than display:none so it stays focusable. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 14, 20, 0.78);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--text);
}
.nav-brand:hover { text-decoration: none; }
.nav-brand svg { display: block; }
.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.active { color: var(--text); }
.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(76, 111, 255, 0.4), 0 4px 18px -6px var(--accent-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(76, 111, 255, 0.6), 0 8px 24px -6px var(--accent-glow);
}

/* Mobile nav.
   This previously did `.nav-links a:not(.nav-cta) { display: none }`, which left
   a phone visitor with no way to reach any section from the header — on a
   product whose audience arrives on a phone. Instead the links become a
   horizontally scrollable strip under the brand row, with the CTA kept beside
   the brand. No markup change, no JS, nothing hidden. */
@media (max-width: 720px) {
  /* Two rows via wrapping, not grid: the CTA is a child of .nav-links, so it
     can't be grid-placed into .nav-inner — it stays in the scrolling strip and
     is pinned to the right edge with position:sticky instead, so it never
     scrolls out of reach. */
  .nav-inner { flex-wrap: wrap; row-gap: 8px; padding: 10px 0 8px; gap: 0; }
  .nav-brand { flex: 0 0 100%; font-size: 15px; }
  .nav-links {
    width: 100%;
    margin-left: 0;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a:not(.nav-cta) {
    font-size: 13.5px;
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 4px 0;          /* taller tap target without taller nav */
  }
  .nav-cta {
    position: sticky;
    right: 0;
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 12.5px;
    /* Opaque so links scrolling underneath don't bleed through the pinned CTA. */
    box-shadow: 0 0 0 1px rgba(76, 111, 255, 0.4), -10px 0 12px 6px rgba(11, 14, 20, 0.9);
  }
}

/* Compliance caveat text. A single class rather than repeated inline styles, so
   the size and colour of every "not a recommendation" line is controlled in one
   place — these are the lines that must stay legible. */
.caveat {
  font-size: 13px;
  color: var(--faint);
  margin-top: 12px;
}

/* ---------------------------------------------------------- hero */
.hero { padding: 96px 0 64px; text-align: center; position: relative; }

/* Photographic backdrop on the home hero only. Applied as a background layer
   rather than an <img> so it can never push text around during load, and masked
   under a gradient so the headline keeps its contrast ratio regardless of what
   the image is doing underneath. Served as WebP at two widths (53 KB / 18 KB). */
.hero-bg {
  position: absolute;
  inset: -40px 0 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: image-set(
    url("/assets/img/hero-orbit-900.webp") 1x,
    url("/assets/img/hero-orbit-1600.webp") 2x);
  background-image: -webkit-image-set(
    url("/assets/img/hero-orbit-900.webp") 1x,
    url("/assets/img/hero-orbit-1600.webp") 2x);
  background-size: cover;
  background-position: 50% 32%;
  opacity: 0.5;
}
/* Fade the image out toward the text and the section boundary, so the headline
   sits on near-solid brand background and the join below is invisible. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 70% at 50% 38%, rgba(11, 14, 20, 0.86), transparent 70%),
    linear-gradient(180deg, rgba(11, 14, 20, 0.55) 0%, rgba(11, 14, 20, 0.2) 40%, var(--bg) 92%);
}
@media (min-width: 1000px) {
  .hero-bg::before {
    background-image: image-set(url("/assets/img/hero-orbit-1600.webp") 1x);
    background-image: -webkit-image-set(url("/assets/img/hero-orbit-1600.webp") 1x);
  }
}
.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 20px;
}
.hero h1 .grad {
  background: linear-gradient(92deg, var(--text) 0%, var(--accent) 55%, #8FA8FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .sub {
  color: var(--dim);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 640px;
  margin: 0 auto 36px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid rgba(76, 111, 255, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  55% { box-shadow: 0 0 0 7px transparent; }
}

/* Hero A/B variants. Default hidden so that if the inline assignment script
   fails entirely, no headline renders twice; the [data-hero] rule below then
   reveals exactly one. The `:not([data-hero])` fallback shows the control for
   any client where the attribute never got stamped. */
.hero-variant { display: none; }
:root[data-hero="a"] .hero-variant[data-variant="a"],
:root[data-hero="b"] .hero-variant[data-variant="b"],
:root:not([data-hero]) .hero-variant[data-variant="a"] { display: block; }

/* ---------------------------------------------------------- signup */
/* `hidden` has to beat component display rules. The browser's own [hidden] rule
   is `display:none` at the lowest specificity, so any class setting `display`
   silently defeats it — `.signup { display:flex }` below left the waitlist form
   fully visible and submittable while the gate was closed. Anything relying on
   the hidden attribute needs this. */
[hidden] { display: none !important; }

.signup { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.signup input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup input::placeholder { color: var(--faint); }
.signup input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.signup button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 20px -6px var(--accent-glow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.signup button:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -6px var(--accent-glow); }
.signup button:disabled { opacity: 0.5; cursor: default; transform: none; }
.form-msg { text-align: center; font-size: 13.5px; margin-top: 14px; min-height: 20px; }
.form-msg.ok { color: var(--bull); }
.form-msg.err { color: var(--bear); }

/* ---------------------------------------------------------- sections */
section { padding: 72px 0; }
section.bordered { border-top: 1px solid var(--border); }
.section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.section-sub { color: var(--dim); max-width: 620px; margin-bottom: 40px; }

/* ---------------------------------------------------------- cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.6);
}
.card .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(76, 111, 255, 0.3);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { font-size: 14px; color: var(--dim); }

/* ---------------------------------------------------------- both-sides visual */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .sides { grid-template-columns: 1fr; } }
.side {
  border-radius: var(--radius-lg);
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.side.bull { border-left: 3px solid var(--bull); }
.side.bear { border-left: 3px solid var(--bear); }
.side .side-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.side.bull .side-tag { color: var(--bull); }
.side.bear .side-tag { color: var(--bear); }
.side p { font-size: 14px; color: var(--dim); }

/* Event-guide header imagery. Background layer rather than an <img> so it can
   never push the heading around during load, and veiled so the title keeps its
   measured contrast regardless of what the photograph is doing underneath.
   Deployed as WebP at two widths (~15-70 KB), never the 5-7 MB masters. */
.guide-bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 560px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.guide-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--guide-img-900);
  background-size: cover;
  background-position: 50% 42%;
  opacity: 0.42;
}
@media (min-width: 900px) {
  .guide-bg::before { background-image: var(--guide-img-1600); }
}
.guide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,14,20,0.62) 0%, rgba(11,14,20,0.55) 30%, var(--bg) 94%);
}

/* ---------------------------------------------------------- prose pages */
.prose { padding: 64px 0 80px; }
.prose h1 { font-size: clamp(30px, 4.5vw, 42px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.prose .lede { color: var(--dim); font-size: 17px; margin-bottom: 40px; max-width: 640px; }
.prose h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; margin: 44px 0 14px; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 30px 0 10px; }
.prose p { margin-bottom: 16px; color: #C7CCD4; font-size: 15.5px; }
.prose ul, .prose ol { margin: 0 0 16px 22px; color: #C7CCD4; font-size: 15.5px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
}
.prose th {
  text-align: left;
  color: var(--dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-hi);
}
.prose td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: #C7CCD4; }
.prose .table-scroll { overflow-x: auto; }

/* Small qualifier beside a table row, e.g. "crypto" or "US equities" — marks a
   measurement that only applies to some assets, so the table can't overclaim. */
.tag-note {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid rgba(76, 111, 255, 0.3);
  border-radius: 5px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.callout {
  background: var(--accent-soft);
  border: 1px solid rgba(76, 111, 255, 0.3);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 14.5px;
  color: #C7CCD4;
  margin: 24px 0;
}
.callout strong { color: var(--text); }

/* live-status block on event pages */
.status-block {
  background: var(--panel-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin: 28px 0;
}
.status-block .status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.status-block .asof { color: var(--faint); font-size: 12px; margin-top: 10px; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.stat .k { font-size: 12.5px; color: var(--dim); margin-top: 4px; }

/* ---------------------------------------------------------- disclaimer + footer */
.disclaimer {
  border-top: 1px solid var(--border);
  padding: 26px 0;
  background: var(--bg-raise);
}
.disclaimer p {
  font-size: 12px;
  color: var(--dim);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
footer.site {
  border-top: 1px solid var(--border);
  padding: 30px 0 44px;
}
footer.site .foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faint);
}
footer.site a { color: var(--dim); margin-right: 18px; }
footer.site a:hover { color: var(--text); }

/* ---------------------------------------------------------- calculators */
.calc {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin: 28px 0;
}
.calc label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  margin: 14px 0 6px;
}
.calc input[type="number"], .calc select, .calc textarea {
  width: 100%;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14.5px;
}
.calc textarea { min-height: 96px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.calc input:focus, .calc select:focus, .calc textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.calc .calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .calc .calc-row { grid-template-columns: 1fr; } }
.calc button {
  margin-top: 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.calc button:hover { filter: brightness(1.08); }
.calc .result {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(76, 111, 255, 0.3);
  font-size: 14.5px;
  display: none;
}
.calc .result.show { display: block; }
.calc .result .big { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; display: block; margin-bottom: 4px; }
.calc .result.err { background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.4); }

/* ---------------------------------------------------------- scroll reveal (progressive) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .eyebrow .pulse { animation: none; }
  html { scroll-behavior: auto; }
}