/* ============================================================
   OurSight — Marketing site styles
   Depends on tokens.css. Build order mirrors the design system:
   base → type → layout → cropframe → field → mockups → components.
   ============================================================ */

/* ---------------- Reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html.nav-open { overflow: hidden; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
::selection { background: var(--blue-100); color: var(--blue-700); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--primary); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------- Typography ---------------- */
h1, h2, .display { font-family: var(--font-sans); color: var(--text-strong); }
h3 { font-family: var(--font-sans); color: var(--text-strong); }
/* Weights and tracking were tuned for Instrument Serif at 400, which carries far
   more visual mass than Inter at the same number. Display sizes move to 700 and
   the tracking tightens -- Inter needs negative tracking above ~2rem or it reads
   loose and webby. */
h1 { font-size: var(--t-hero); font-weight: 700; line-height: 1.04; letter-spacing: -.022em; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
h1, h2 { text-wrap: balance; }
p { color: var(--text-body); }
strong { color: var(--text-strong); font-weight: 600; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--text-body); letter-spacing: -.005em; }
.measure { max-width: 68ch; }
.ink { color: var(--primary); }            /* the single blue emphasis word */
/* The italic that used to ride on top of .ink is gone with Instrument Serif. We
   ship Inter roman only (as the app does), so font-style:italic here would be a
   synthesised slant at 3-4rem, which looks broken rather than emphatic. Colour
   was always the actual emphasis mechanism -- "the single blue emphasis word". */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--t-eyebrow);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.section--dark .eyebrow { color: var(--muted-dark); }

.mono { font-family: var(--font-mono); font-size: var(--t-data); letter-spacing: .01em; }

/* ---------------- Layout ---------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide  { max-width: var(--container-wide); }
.container--prose { max-width: var(--container-prose); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt  { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--muted-dark); }
.section--dark h2, .section--dark h3, .section--dark .display { color: #fff; }
.section--dark p { color: var(--muted-dark); }
.section-head { max-width: 720px; }
.section-head .lead { margin-top: var(--s3); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.hairline { height: 1px; background: var(--border); border: 0; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--t-ui);
  line-height: 1; padding: 12px 24px; min-height: 44px; border-radius: var(--r-sm);
  transition: background .12s ease, color .12s ease, transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--gray-950); color: var(--paper); }
.btn-primary:hover { background: var(--gray-800); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }
.btn-primary .i-arrow { transition: transform .15s ease; }
.btn-primary:hover .i-arrow { transform: translateX(3px); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--bg-alt); border-color: var(--border-strong); transform: translateY(-1px); }
.btn-ghost:active { transform: scale(.98); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn[disabled] { background: var(--gray-200); color: var(--gray-400); transform: none; cursor: default; }

.section--dark .btn-ghost { border-color: rgba(255,255,255,.22); color: var(--paper); }
.section--dark .btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }

.btn-link { color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.btn-link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.btn-link:hover svg { transform: translateX(3px); }

/* ---------------- Header / nav ---------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
/* Scrolled blur lives on a pseudo-element, never on .header itself: a non-none
   backdrop-filter creates a new containing block for position:fixed descendants,
   and .nav (the mobile drawer) is one — that shrank the drawer to the header's
   own 64px box the moment the page scrolled past 8px, cutting off the menu. */
.header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  transition: background .2s ease, backdrop-filter .2s ease;
}
.header.is-scrolled {
  border-bottom-color: var(--border);
}
.header.is-scrolled::before {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
/* position:relative + z-index lifts the header's contents above .header::before.
   ::before is position:absolute, so it paints in the positioned-descendants layer,
   i.e. ON TOP of static children — that put the scrolled blur over .brand and
   .nav__cta while .nav__item (position:relative) stayed above it, so the wordmark
   and the CTA turned into ghosts the moment the page scrolled past 8px.
   relative is deliberate: it does NOT create a containing block for position:fixed
   descendants, so the mobile drawer (.nav) keeps resolving against the viewport. */
.header .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__name { font-family: var(--font-sans); font-weight: 600; font-size: 1.4rem; letter-spacing: -.018em; }

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__links { display: flex; align-items: center; gap: var(--s5); }
.nav__links a {
  position: relative; color: var(--text-body); font-size: var(--t-ui); font-weight: 500;
  padding: 6px 0; transition: color .15s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--primary); transition: right .2s ease;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--text-strong); }
.nav__links a:hover::after, .nav__links a.is-active::after { right: 0; }
.nav__cta { display: flex; align-items: center; gap: var(--s2); }

.nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-strong); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .i-close { display: none; }

/* video stage */
.stage { position: relative; background: var(--bg-stage); aspect-ratio: 16 / 9; overflow: hidden; }
.stage .field { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; filter: brightness(.62) saturate(.85); }
.stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  filter: brightness(.78) saturate(.92) contrast(1.02); }
.stage__crop { position: absolute; inset: 14% 18%; z-index: 2; }
.play-glyph {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: 56px; height: 56px; border-radius: 50%; background: var(--blue-500);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(37,99,235,.5);
}
.play-glyph svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }

/* live badge / rec dot — the ONLY place red (--live) is permitted: live/record/destructive.
   Intentionally NOT used in the current marketing markup (red stays dormant). Do NOT wire
   these to CTAs, links, headings, or branding — emphasis is always blue. */
.live-badge {
  position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(14,17,23,.7); border: 1px solid var(--live); border-radius: var(--r-sm);
  padding: 4px 9px;
}
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live-glow); }
@media (prefers-reduced-motion: no-preference) { .rec-dot { animation: rec-pulse 1.6s ease-in-out infinite; } }
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* transport bar */
.transport { padding: 12px 14px; background: var(--surface); display: grid; gap: 10px; }
.scrubber { position: relative; height: 5px; border-radius: 99px; background: var(--gray-200); }
.scrubber__played { position: absolute; inset: 0 62% 0 0; background: var(--blue-500); border-radius: 99px; }
.scrubber__head { position: absolute; left: 38%; top: 50%; transform: translate(-50%,-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--blue-500); border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.transport__row { display: flex; align-items: center; gap: 10px; }
.transport__row .tc { font-family: var(--font-mono); font-size: var(--t-tag); color: var(--muted); }
.transport__icons { display: inline-flex; gap: 6px; align-items: center; color: var(--gray-500); }
.transport__icons svg { width: 16px; height: 16px; }
.transport__icons .is-primary { color: var(--blue-500); }
.spacer { flex: 1; }

/* NOTE: .engage__row / .avatar / .bars below predate the feature-photo swap and are
   unrelated leftovers from an earlier design iteration (superseded by .cov). .avatar
   is still used on about.html — kept. */
.engage__row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 12px; }
.engage__who { display: flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--blue-50); color: var(--blue-700);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex: none; }
.engage__who span { font-size: var(--t-small); color: var(--text-body); }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.bars i { height: 18px; border-radius: 4px; background: var(--gray-150); transform-origin: left; }
.bars i.l1 { background: var(--blue-100); } .bars i.l2 { background: var(--blue-200); }
.bars i.l3 { background: var(--blue-400); } .bars i.l4 { background: var(--blue-500); }
.engage__row--cold .engage__who span { color: var(--muted); }

/* ---------------- Hero ---------------- */
.hero { position: relative; padding-top: calc(var(--header-h) + clamp(56px, 9vw, 128px)); padding-bottom: var(--section-y); overflow: hidden; text-align: center; }
.hero::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 0; width: min(900px, 90%); height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--blue-glow), transparent 72%); filter: blur(8px); pointer-events: none;
}
.hero__top { position: relative; z-index: 1; max-width: 940px; margin-inline: auto; }
.hero__eyebrow { margin-bottom: var(--s4); justify-content: center; }
.hero h1 { margin-bottom: var(--s4); text-wrap: balance; }
.hero__chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-size: var(--t-small); font-weight: 500; color: var(--text-body);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 16px; background: var(--surface); }
.hero__chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.hero__chip a { color: var(--text-strong); font-weight: 500; }
.hero__br { display: none; }                 /* let text-wrap:balance set the lines */
.hero__sub { max-width: 56ch; margin: 0 auto var(--s6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
/* Full-bleed photo hero — one dominant visual, centered compact text (Legora pattern) */
.hero--photo { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-top: var(--header-h); padding-bottom: clamp(56px, 12vh, 128px); overflow: hidden; text-align: center; }
.hero--photo::before { display: none; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; z-index: 0; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(0deg, rgba(8,10,14,.92) 0%, rgba(8,10,14,.55) 40%, rgba(8,10,14,.28) 70%, rgba(8,10,14,.4) 100%); }
.hero__inner { position: relative; z-index: 2; max-width: 880px; width: 100%; margin-inline: auto; }
.hero--photo h1 { color: #fff; margin-bottom: var(--s4); text-wrap: balance; }
.hero--photo .hero__sub { color: rgba(255,255,255,.86); margin: 0 auto var(--s6); max-width: 46ch; }
.hero--photo .hero__cta { justify-content: center; align-items: center; }
.hero--photo .btn-primary { background: #fff; color: #10141d; }
.hero--photo .btn-primary:hover { background: #eef0f3; }
@media (max-width: 700px) { .hero__bg { object-position: 30% 32%; } }

/* Cycling video hero (cover page). The <img class="hero__bg"> stays underneath
   as poster, LCP element and fallback; clips crossfade in over it. Two buffers
   alternate so the next clip can preload while the current one plays. */
.hero__vid { opacity: 0; transition: opacity 900ms ease; will-change: opacity; }
.hero__vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__vid { display: none; } }
/* Light nav while the header floats over the dark photo hero (reverts to dark once scrolled).
   Guarded with html:not(.nav-open) on the elements that live INSIDE the mobile drawer
   (nav__link, theme-toggle, the header's btn-primary): the drawer is its own opaque white
   sheet, unrelated to the hero photo behind it, so the white-on-photo treatment must not
   follow those elements in there -- it was rendering white text/buttons on the drawer's
   white background (invisible nav links, an invisible "Get early access" button shape). */
.has-hero-photo .header:not(.is-scrolled) .brand,
.has-hero-photo .header:not(.is-scrolled) .brand__name { color: #fff; }
html:not(.nav-open) .has-hero-photo .header:not(.is-scrolled) .nav__link,
html:not(.nav-open) .has-hero-photo .header:not(.is-scrolled) .theme-toggle { color: #fff; }
html:not(.nav-open) .has-hero-photo .header:not(.is-scrolled) .nav__link:hover { color: rgba(255,255,255,.75); background: transparent; }
.has-hero-photo .header:not(.is-scrolled) .nav-toggle { color: #fff; border-color: rgba(255,255,255,.35); }
html:not(.nav-open) .has-hero-photo .header:not(.is-scrolled) .btn-primary { background: #fff; color: #10141d; }
html:not(.nav-open) .has-hero-photo .header:not(.is-scrolled) .btn-primary:hover { background: #eef0f3; }

/* ---------------- Manifesto statement band ---------------- */
.manifesto { padding-block: clamp(96px, 14vw, 190px); text-align: center; }
.manifesto__line { font-family: var(--font-sans); font-weight: 600; color: var(--text-strong);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.2; letter-spacing: -.022em;
  max-width: 21ch; margin-inline: auto; text-wrap: balance; }
.manifesto__line .ink { font-weight: 700; }   /* was italic — see the .ink note above */
.manifesto__sub { margin-top: var(--s4); color: var(--muted); font-size: var(--t-lead); max-width: 46ch; margin-inline: auto; }


/* ---------------- Three-step ---------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s7); }
.step { position: relative; padding-top: var(--s4); border-top: 1px solid var(--border-strong); }
.step__num { display: block; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.5rem);
  line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--muted); margin-bottom: var(--s3); }
.step__shot { aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; position: relative;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  transform: perspective(900px) rotateX(6deg) rotateY(-11deg); transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.22,.61,.21,1); margin-bottom: var(--s4); }
.step:hover .step__shot { transform: perspective(900px) rotateX(2deg) rotateY(-4deg); }
.step__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step h3 { font-size: 1.3rem; margin: 0 0 6px; }
/* Process arrows between the three steps (owner 2026-08-22, "put process arrows").
   Decorative: .step__num already carries the order for assistive tech, so these are
   aria-hidden in the markup and never announced. Centred in the grid gap; the third
   step has none because nothing follows it. */
.step__arrow { position: absolute; top: 50%; left: 100%; margin-left: calc(var(--s6) / 2);
  transform: translate(-50%, -50%); width: 20px; height: 20px; color: var(--gray-400); pointer-events: none; }
.step:last-child .step__arrow { display: none; }

/* ---------------- Immersive "whole field" band ---------------- */
.action-band { position: relative; overflow: hidden; min-height: clamp(440px, 62vh, 640px);
  display: flex; align-items: center; padding-block: var(--section-y); }
.action-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.action-band::after { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(14,17,23,.94) 0%, rgba(14,17,23,.74) 40%, rgba(14,17,23,.22) 100%),
  linear-gradient(0deg, rgba(14,17,23,.7), rgba(14,17,23,0) 55%); }
.action-band > .container { position: relative; z-index: 2; }
.action-band__copy { max-width: 620px; }
.action-band__copy .lead { color: var(--paper); margin-top: var(--s4); }
/* mirrored variant: copy on the right, scrim heavier on the right */
.action-band--right .action-band__copy { margin-left: auto; }
.action-band--right::after { background:
  linear-gradient(270deg, rgba(14,17,23,.94) 0%, rgba(14,17,23,.72) 42%, rgba(14,17,23,.2) 100%),
  linear-gradient(0deg, rgba(14,17,23,.7), rgba(14,17,23,0) 55%); }
/* the virtual-camera crop, framing a slice of the real footage */
.action-band__crop { position: absolute; right: 7%; top: 46%; transform: translateY(-50%);
  width: clamp(180px, 22vw, 280px); aspect-ratio: 16 / 10; z-index: 2; }
.action-band__crop .cf-tl, .action-band__crop .cf-tr, .action-band__crop .cf-bl, .action-band__crop .cf-br { border-color: var(--reticle-dark); }
.action-band__chip { position: absolute; top: 9px; left: 9px; font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--reticle-dark);
  background: rgba(14,17,23,.66); padding: 3px 7px; border-radius: var(--r-xs); }

/* ---------------- Comparison table ---------------- */
.compare-frame { margin-top: var(--s7); position: relative; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* scroll-hint fade lives on the NON-scrolling frame so it stays pinned to the viewport edge */
@media (max-width: 760px) {
  .compare-frame::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    pointer-events: none; background: linear-gradient(to right, transparent, var(--bg-alt)); }
}
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { text-align: left; padding: 18px 20px; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare thead th { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--text-strong); border-bottom: 1px solid var(--border-strong); }
.compare tbody th { font-weight: 500; color: var(--text-body); font-family: var(--font-sans); font-size: var(--t-small); width: 130px; }
.compare td { font-family: var(--font-mono); font-size: var(--t-data); line-height: 1.5; color: var(--text-body); }
.compare .col-them { color: var(--text-body); } /* real comparison content — kept at 7.95:1, not muted */
.compare .col-us { background: var(--blue-50); color: var(--blue-700); position: relative; }
.compare .col-us-head { color: var(--blue-700); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare .us-head-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.compare .i-win { color: var(--primary); width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }
.compare .i-gap { color: var(--gray-400); width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.compare-foot { margin-top: var(--s4); font-size: var(--t-small); color: var(--muted); max-width: 80ch; }

/* ---------------- Feature blocks (alternating) ---------------- */
.feature { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.feature + .feature { margin-top: var(--s9); }
.feature__media { grid-column: 1; position: relative; padding: clamp(16px, 2.4vw, 34px);
  border-radius: var(--r-lg); background: linear-gradient(160deg, #f4f6fa, #e7ebf3); border: 1px solid var(--border); }
.feature__media::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: var(--r-lg);
  background: radial-gradient(80% 70% at 72% 18%, var(--blue-glow), transparent 70%); pointer-events: none; }
/* photo variant: real image fills the media, no gradient frame */
.feature__media--photo { padding: 0; background: none; border: 0; }
.feature__media--photo::before { display: none; }
.feature__shot { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.feature__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 42%; }
.feature__shot figcaption { position: absolute; left: 16px; bottom: 14px; color: #fff;
  font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .06em; text-transform: uppercase; }
.feature__shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(0deg, rgba(8,10,14,.72), transparent); pointer-events: none; }
.feature__body  { grid-column: 2; }
.feature--flip .feature__media { grid-column: 2; }
.feature--flip .feature__body  { grid-column: 1; grid-row: 1; }
.feature__body h3 { margin: var(--s3) 0 var(--s3); }
.feature__bullets { display: grid; gap: 12px; margin-top: var(--s4); }
.feature__bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-small); color: var(--text-body); }
.feature__bullets svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 1px; }

/* phase label — plain text, no chip/box */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-700);
}
.tag--assisted { color: #8a5a00; } /* #8a5a00 = AA (4.9:1) on light surfaces */
:root[data-theme="dark"] .tag--assisted { color: #e6b350; } /* AA on dark */
.tag--assisted::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.section--dark .tag { color: var(--blue-400); }

/* secondary-feature list — hairline rows, not a card wall */
.flist { margin-top: var(--s7); border-top: 1px solid var(--border-strong); }
.frow { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.frow h3 { font-size: var(--t-title); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 10px; }
.frow h3 svg { width: 19px; height: 19px; color: var(--blue-600); flex: none; }
.frow p { font-size: var(--t-small); max-width: 62ch; }
.frow__shot { margin-top: var(--s3); width: 220px; max-width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.frow__shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------------- The OurSight stack (layered-surface product render) ----------------
   A full-bleed, pinned product render: a laminated frosted-glass slab on a
   neutral studio backdrop, scrubbed by scroll. main.js adds .is-scrolly only
   when motion is allowed; the base state is a static exploded stack with
   every caption listed below the scene (no-JS / reduced-motion view). */
.osx { position: relative; }
.osx__intro { text-align: center; padding-block: clamp(48px, 7vw, 84px) clamp(20px, 3vw, 36px); }

/* ---------- Stack 3D: a real CSS 3D scene (perspective + preserve-3d) ----------
   Every slab, its screen, and its label live in the same 3D coordinate system,
   so alignment is correct by construction — no separately-rendered image to
   register by hand, no scroll/frame dependency. It's an illustration (like a
   product photo), so its colors are fixed rather than theme-token-driven. */
.stack3d { padding-bottom: clamp(48px, 7vw, 88px); }
.stack3d__wrap { width: min(100%, 1700px); margin: 0 auto; overflow: hidden; position: relative; }
.stack3d__stage { position: absolute; left: 50%; top: 0; width: 1400px; height: 1010px; margin-left: -700px; transform-origin: top center; }

.stack3d__shadow { position: absolute; left: 50%; top: 792px; width: 860px; height: 150px;
  transform: translateX(-50%); pointer-events: none; filter: blur(7px);
  background: radial-gradient(ellipse at center, rgba(16,19,26,.28) 0%, rgba(16,19,26,.14) 38%, rgba(16,19,26,0) 72%); }

.stack3d__scene { position: absolute; inset: 0; perspective: 2500px; perspective-origin: 50% 34%; }
.stack3d__rig { position: absolute; left: 50%; top: 575px; width: 0; height: 0;
  --W: 720px; --D: 470px; --T: 40px; transform-style: preserve-3d; transform: rotateX(49deg) rotateZ(-33deg); }

.stack3d__slab { position: absolute; width: var(--W); height: var(--D);
  left: calc(var(--W) / -2); top: calc(var(--D) / -2);
  transform-style: preserve-3d; transform: translate3d(0, 0, var(--z)); }
/* Draw a face only when it points at the camera. At this rotation the visible
   sides are the bottom edge and the LEFT edge; the right and back faces are turned
   away and never read as surfaces — all they ever did was poke a few pixels past
   the silhouette at each corner, which is the ragged bottom-right edge. Letting the
   browser cull them fixes that, and keeps the box honest if the rotation changes. */
.stack3d__face,
.stack3d__slab::before,
.stack3d__slab::after { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stack3d__face { position: absolute; }

.stack3d__face.top { inset: 0; transform: translateZ(calc(var(--T) / 2)); background: var(--top, #fff);
  border: 1px solid rgba(22,26,35,.09); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
  backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05); overflow: hidden; }
/* The stack's top plate shows the sport in discussion. Sport pages override --screen
   inline (declared in the HTML, so its url() resolves against that page, not this file). */
.stack3d__face.top.screen { background-image: var(--screen, url('stack3d/filmroom.webp?v=154b3100')); background-size: cover; background-position: center;
  border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

.stack3d__face.front { left: 0; top: 100%; width: 100%; height: var(--T); transform-origin: top center;
  transform: translateZ(calc(var(--T) / 2)) rotateX(-90deg); background: var(--front, #333);
  box-shadow: inset 0 6px 8px -7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 14px; padding: 0 28px; }
.stack3d__face.side { left: 100%; top: 0; width: var(--T); height: 100%; transform-origin: left center;
  transform: translateZ(calc(var(--T) / -2)) rotateY(90deg); background: var(--front, #333); filter: brightness(.76); }

/* Each slab was an OPEN box: top, bottom edge and right edge only. From the left
   you therefore looked straight through the gap between one plate and the next, and
   every layer read as a thickness-less sheet — the bottom one worst of all, since
   nothing sat under its left edge at all. These two close it: ::before is the left
   face, ::after the back. Pseudo-elements rather than markup because the slabs are
   hand-written in 13 pages x 6 slabs, and a pseudo-element inherits the parent's
   preserve-3d context just as a child div would.
   Shading: the bottom edge stays at full --front because it carries the label and
   the text contrast is measured against it. The left face is stepped down enough to
   read as a separate plane — at .88 the two were close enough in value that the
   corner between them went soft and the slab looked bevelled rather than solid. */
.stack3d__slab::before,
.stack3d__slab::after { content: ""; position: absolute; background: var(--front, #333); }
/* Each is the MIRROR of the face opposite it, rather than a hand-derived rotation:
   ::before mirrors .side (right edge) across to the left, ::after mirrors .front
   (bottom edge) up to the back. Deriving the angles by hand produced faces that sat
   in the right place but pointed the wrong way, so backface culling deleted the one
   face that actually needed to be there. */
/* translateZ is POSITIVE here, unlike .side. Mirroring a face flips its rotation,
   and the offset has to flip with it: rotateY(-90deg) sweeps this strip to z ∈
   [-T, 0], so it needs +T/2 to land on the slab's own [-T/2, +T/2]. Carrying .side's
   -T/2 across put the left face a full thickness BEHIND its own plate — the faces
   were all present and correctly shaded, just displaced, which reads as edges that
   don't line up rather than as a missing face. */
.stack3d__slab::before { right: 100%; top: 0; width: var(--T); height: 100%; transform-origin: right center;
  transform: translateZ(calc(var(--T) / 2)) rotateY(-90deg); filter: brightness(.78); }
.stack3d__slab::after { left: 0; bottom: 100%; width: 100%; height: var(--T); transform-origin: bottom center;
  transform: translateZ(calc(var(--T) / 2)) rotateX(90deg); filter: brightness(.6); }

/* The 01-06 counter stays mono with tabular figures — it is an identifier, which
   is the one job the app reserves mono for. The layer name is a section label, so
   it follows the app's rule for those: uppercase, 600, tracking-wide, in Inter. */
.stack3d__index { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.4); flex: none; }
.stack3d__label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.96); text-shadow: 0 1px 3px rgba(0,0,0,.45); white-space: nowrap; flex: none; }
.stack3d__slab--accent .stack3d__label, .stack3d__slab--accent .stack3d__index { color: #fff; }

/* ---- Phones ----
   The scene used to be clipped by 36% at 390px and 41% at 360px: the fit scale
   floored at 0.65 while the artwork needed ~0.40, and overflow:hidden ate the
   difference — including the app screenshot and the sidebar, sliced mid-word.

   Rotation is NOT the lever. Measured across 20 rotateX/rotateZ combinations the
   artwork stays 845-966px wide, so any angle needs ~0.40 scale on a phone, which
   renders a 17px label at under 7px. What actually decides legibility is the ratio
   of label size to plate size, so the plate shrinks here and the type grows.

   --z is set inline per slab in the HTML (13 pages x 6 slabs), so the pitch is
   re-declared here with !important rather than edited in every file. */
@media (max-width: 700px) {
  .stack3d__rig { --W: 430px; --D: 280px; --T: 34px; }
  .stack3d__slab:nth-child(1) { --z: 0px    !important; }
  .stack3d__slab:nth-child(2) { --z: 38px   !important; }
  .stack3d__slab:nth-child(3) { --z: 76px   !important; }
  .stack3d__slab:nth-child(4) { --z: 114px  !important; }
  .stack3d__slab:nth-child(5) { --z: 152px  !important; }
  .stack3d__slab:nth-child(6) { --z: 190px  !important; }
  .stack3d__face.front { gap: 9px; padding: 0 16px; }
  .stack3d__index { font-size: 12px; letter-spacing: .1em; }
  .stack3d__label { font-size: 21px; letter-spacing: .06em; }
  /* The shadow is sized to the desktop plate; keep it proportional to the smaller
     one or it reads as a puddle spreading well past the stack. */
  .stack3d__shadow { width: 515px; height: 96px; top: 742px; }
}

/* readable glossary below the visual — the six layers' real benefit copy,
   always visible and accessible (the 3D graphic above is decorative/illustrative) */
.stack3d__glossary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s6);
  max-width: 1100px; margin: clamp(32px, 5vw, 56px) auto 0; padding-inline: var(--gutter); }
.stack3d__glossary .frow { border: 0; padding: 0; }
.stack3d__glossary h3 { font-size: var(--t-small); margin-bottom: 4px; }
.stack3d__glossary p { font-size: .8125rem; max-width: none; }
@media (max-width: 860px) { .stack3d__glossary { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stack3d__glossary { grid-template-columns: 1fr; } }

/* ---------------- Film-room split (light) ---------------- */
.filmroom { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.filmroom__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.filmroom__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) { .filmroom { grid-template-columns: 1fr; } }

/* ---------------- AI analysis: de-carded three-up + trust line ---------------- */
.engine-three { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: var(--s7); }
.engine-three > div { border-top: 1px solid var(--border-strong); padding-top: var(--s4); }
.engine-three .eyebrow { margin-bottom: var(--s3); }
.engine-three h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -.018em; margin-bottom: 8px; }
.engine-three p { font-size: var(--t-small); color: var(--text-body); max-width: 34ch; }
.engine__trust { margin-top: var(--s6); display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 880px; margin-inline: auto; }
.engine__trust li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); color: var(--text-body); }
.engine__trust svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 1px; }

/* ---------------- Who it's for: persona grid ---------------- */
.persona-grid { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.4vw, 32px); margin-top: var(--s7); }
/* Three-up variant: the product cards, not the five personas. */
.persona-grid--trio { grid-template-columns: repeat(3, 1fr); }
.container > .persona-grid:first-child { margin-top: 0; }
.persona-card { border-top: 1px solid var(--border-strong); padding-top: var(--s4); }
.persona-card svg { width: 22px; height: 22px; color: var(--blue-600); margin-bottom: 12px; }
.persona-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.014em; margin-bottom: 8px; }
.persona-card p { font-size: var(--t-small); color: var(--text-body); }
/* Short points inside a persona-card (the product trio). Owner 2026-08-22 turned the prose
   sentences into bullets. Sized to match .persona-card p exactly so the trio keeps reading
   as three cards rather than three lists. role="list" is on the markup because
   list-style:none drops list semantics in Safari/VoiceOver. */
.card-points { list-style: none; display: grid; gap: 7px; margin: 0; padding: 0; }
.card-points li { position: relative; padding-left: 16px; font-size: var(--t-small);
  color: var(--text-body); line-height: 1.45; }
.card-points li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px;
  border-radius: 999px; background: var(--blue-600, #2563eb); }
/* A persona-card that is itself a link (the sports picker on the multi-sport home).
   Border-colour + arrow-less affordance keeps it calm; the whole card is the hit area. */
/* Disclosure rows (platform layers, personas). <details>/<summary> is the native
   primitive: keyboard and screen-reader correct with no JS, and the content stays in
   the DOM so in-page search still finds it. Only detail and reassurance collapse —
   the sports grid is a reason to choose us and deliberately stays open. */
details.frow, details.persona-card { }
details.frow > summary, details.persona-card > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 2px 0; }
details.frow > summary::-webkit-details-marker,
details.persona-card > summary::-webkit-details-marker { display: none; }
details.frow > summary h3, details.persona-card > summary h3 { margin: 0; flex: 1; }
/* the chevron doubles as the affordance and the state */
details.frow > summary::after, details.persona-card > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: auto;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
details[open].frow > summary::after, details[open].persona-card > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px); }
details.frow > summary:hover::after, details.persona-card > summary:hover::after { border-color: var(--primary); }
details.frow > summary:focus-visible, details.persona-card > summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-xs); }
details.frow > p, details.persona-card > p { margin-top: 8px; }
details.persona-card > summary svg { width: 22px; height: 22px; color: var(--blue-600); flex: none; }
details.persona-card > summary h3 { margin-bottom: 0; }

/* Sports section. Twelve description cards were 261 words — 36% of the home page —
   re-listing an axis already resolved into twelve real pages. Lacrosse keeps a full
   card because it is a different offer; the rest become links, which is what every
   comparable site does with breadth. The sentences are not lost: each is already its
   own sport page's hero subhead. */
.sport-lead { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(24px, 4vw, 56px);
  align-items: start; margin-top: var(--s7); }
.sport-lead__card { border-top-color: var(--blue-500); }
.sport-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px;
  align-content: start; padding-top: var(--s4); border-top: 1px solid var(--border-strong); }
.sport-tiles__note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--muted); margin-bottom: 10px; }
.sport-tile { display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 0; border-radius: var(--r-xs);
  text-decoration: none; color: var(--text-strong); font-size: .95rem; }
.sport-tile svg { width: 17px; height: 17px; color: var(--blue-600); flex: none; }
.sport-tile:hover { color: var(--primary); }
.sport-tile:hover svg { color: var(--primary); }
/* Sports other than lacrosse are LISTED but not LINKED (owner 2026-08-29): those pages exist
   but have not been reviewed, so the site shows them as coming rather than offering them.
   They are <span>, not <a> — so they are not focusable, not in the tab order, and cannot be
   activated by keyboard either; aria-disabled states it for anyone who lands on one. Restoring
   a sport is a one-line swap back to <a href>. */
.sport-tile.is-soon, .mega__link.is-soon, .nav__link.is-soon { color: var(--muted); cursor: default; }
/* .nav__link.is-soon is a <span>, so it takes no hover/focus styling of its own. */
.nav__link.is-soon:hover { color: var(--muted); background: none; }
.sport-tile.is-soon svg { color: var(--gray-400); }
.sport-tile.is-soon:hover, .mega__link.is-soon:hover { color: var(--muted); background: none; }
.sport-tile.is-soon:hover svg { color: var(--gray-400); }
@media (max-width: 820px) {
  .sport-lead { grid-template-columns: 1fr; }
}
.persona-card--link { display: block; text-decoration: none; color: inherit;
  border-top-color: var(--border-strong); transition: border-top-color .18s ease, transform .18s ease; }
.persona-card--link:hover, .persona-card--link:focus-visible { border-top-color: var(--primary); transform: translateY(-2px); }
.persona-card--link:hover h3, .persona-card--link:focus-visible h3 { color: var(--primary); }
.persona-card--link .tag { vertical-align: middle; margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .persona-card--link, .persona-card--link:hover { transform: none; transition: border-top-color .18s ease; } }
@media (max-width: 1100px) { .persona-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .persona-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .persona-grid { grid-template-columns: 1fr; } }

/* ---------------- Camera section ---------------- */
.camera { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.camera__photo { position: relative; }
.camera__photo img, .camera__media { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.camera__overlay { position: absolute; left: 12px; bottom: 12px; z-index: 4; font-family: var(--font-mono);
  font-size: var(--t-tag); letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: rgba(14,17,23,.66); border: 1px solid rgba(91,139,247,.5); padding: 5px 9px; border-radius: var(--r-xs); }
.kit { margin-top: var(--s5); display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.kit li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: var(--t-small); }
.kit li:last-child { border-bottom: 0; }
.kit svg { width: 18px; height: 18px; color: var(--gray-400); }
.kit b { color: var(--text-strong); font-weight: 600; }
.kit .price { font-family: var(--font-mono); font-size: var(--t-data); color: var(--primary); }
.kit li.kit--total { background: var(--blue-50); }
.kit li.kit--total .price { color: var(--blue-700); }

/* ---------------- Ownership dark band ---------------- */
.ownership { position: relative; overflow: hidden; }
.ownership__bg { position: absolute; inset: 0; z-index: 0; object-fit: cover; width: 100%; height: 100%; opacity: .22; }
.ownership::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% -10%, rgba(26,34,54,.4) 0%, var(--bg-dark) 68%); }
.ownership .container { position: relative; z-index: 2; }
.own-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,72px); align-items: center; }
.own-points { display: grid; gap: 16px; margin-top: var(--s5); }
.own-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-body); font-size: var(--t-small); }
.own-points svg { width: 19px; height: 19px; color: var(--primary); flex: none; margin-top: 1px; }
.section--dark .own-points li { color: var(--paper); }
.section--dark .own-points svg { color: var(--blue-400); }

/* ---------------- Privacy / consent ledger ---------------- */
.ledger { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); margin-top: var(--s6); }
.ledger__head, .ledger__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 13px 18px; }
.ledger__head { background: var(--gray-50); border-bottom: 1px solid var(--border); font-family: var(--font-mono);
  font-size: var(--t-tag); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ledger__row { border-bottom: 1px solid var(--border); font-size: var(--t-small); }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row .who { color: var(--text-strong); font-weight: 500; }
.ledger__row .who small { display: block; font-family: var(--font-mono); font-size: var(--t-tag); color: var(--muted); font-weight: 400; }
.ledger .yes { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-family: var(--font-mono); font-size: var(--t-data); }
.ledger .yes svg { width: 15px; height: 15px; }
.ledger .shield { color: var(--primary); }

/* ---------------- Pricing ---------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s7); align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--shadow-sm); position: relative; }
.price-card--rec { border-color: var(--blue-200); box-shadow: 0 0 0 1px var(--blue-200), var(--shadow-md); }
.price-card__rec-pill { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-xs); }
.price-card h3 { font-size: 1.35rem; }
.price-card__for { font-size: var(--t-small); color: var(--muted); min-height: 40px; }
.price-card__price { font-family: var(--font-mono); font-size: var(--t-data); color: var(--text-strong);
  padding: 12px 0; border-block: 1px solid var(--border); }
.price-card__price b { color: var(--primary); }
.price-card ul { display: grid; gap: 10px; flex: 1; }
.price-card li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); color: var(--text-body); }
.price-card li svg { width: 17px; height: 17px; color: var(--primary); flex: none; margin-top: 1px; }
.price-card li .tag { margin-left: 4px; }
.price-card .btn { margin-top: var(--s2); }
.pricing-note { margin-top: var(--s5); text-align: center; font-size: var(--t-small); color: var(--muted); }

/* ---------------- Founder ---------------- */
.founder { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px,5vw,64px); align-items: center; }
.founder__photo { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); aspect-ratio: 1/1;
  transform: perspective(1100px) rotateX(3deg) rotateY(7deg); transition: transform .3s cubic-bezier(.22,.61,.21,1); }
.founder__photo:hover { transform: perspective(1100px) rotateX(1deg) rotateY(2.5deg); }
/* The source JPEG itself ends mid-wrist — no styling can reveal more image than the
   file holds (owner reported the 'crop' three times; the file was the crop). A 1:1
   frame anchored to the top ends at mid-forearm, above the hands, so the edge reads
   as a deliberate portrait crop instead of a severed photo. Swap in a taller original
   and this can loosen again. */
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* No italic: we ship only Inter's roman variable file, matching the app, so
   font-style:italic would be a browser-synthesised oblique -- a mechanical slant
   that looks visibly wrong at 2rem. Weight carries the emphasis instead. */
.founder blockquote { font-family: var(--font-sans); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.4;
  letter-spacing: -.018em; color: var(--text-strong); font-weight: 600; }
.founder__sig { margin-top: var(--s4); display: flex; align-items: center; gap: 12px; }
.founder__sig .who { font-size: var(--t-small); }
.founder__sig .who b { display: block; color: var(--text-strong); }

/* ---------------- FAQ ---------------- */
.faq { margin-top: var(--s6); border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
/* Structural only: the heading exists to give the accordion a level (WAI-ARIA APG).
   All appearance stays on .faq__trigger, so the page looks identical. */
.faq__q { margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: initial; }
.faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--s4) 0; text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: var(--t-title); color: var(--text-strong); }
.faq__trigger svg { width: 20px; height: 20px; color: var(--gray-400); flex: none; transition: transform .2s ease; }
.faq__trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--primary); }
.faq__panel p { padding-bottom: var(--s4); color: var(--text-body); }

/* ---------------- Final CTA ---------------- */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% -20%, rgba(37,99,235,.22) 0%, var(--bg-dark) 62%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { max-width: 16ch; margin-inline: auto; }
.cta-band .lead { max-width: 56ch; margin: var(--s4) auto var(--s6); }
/* The early-access block as a PANEL inside the consolidated platform section, rather than
   its own full-bleed band (owner 2026-08-24, four sections into one). It deliberately keeps
   .section--dark: .waitlist input is white on rgba(255,255,255,.06) and would vanish on a
   light ground, and .section--dark also carries the dark-theme --paper remap that keeps
   .btn-ghost legible. This only supplies the panel geometry. */
.cta-panel { margin-top: var(--s8); border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 76px) var(--s5); border-block: 0; }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel .eyebrow { justify-content: center; }
.cta-panel h3 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1;
  letter-spacing: -.02em; max-width: 18ch; margin-inline: auto; }
.cta-band__micro { margin-top: var(--s5); font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted-dark); }

/* waitlist form */
.waitlist { max-width: 460px; margin: var(--s6) auto 0; display: grid; gap: 10px; }
.waitlist__row { display: flex; gap: 10px; }
.waitlist input { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #fff;
  border-radius: var(--r-sm); padding: 13px 15px; font-size: var(--t-body); }
.waitlist input::placeholder { color: rgba(255,255,255,.5); }
.waitlist input:focus { outline: 2px solid var(--blue-400); outline-offset: 1px; border-color: transparent; }
.waitlist [data-form-msg] { font-size: var(--t-small); color: var(--blue-400); min-height: 1.2em; text-align: center; }
.waitlist.is-sent [data-form-msg] { color: #7fd6a8; }

/* ---------------- Footer ---------------- */
.footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-block: var(--s8) var(--s5); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s5); }
.footer__brand .brand { margin-bottom: var(--s3); }
.footer__brand p { font-size: var(--t-small); color: var(--muted); max-width: 32ch; }
.footer__col h3 { font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: var(--s3); }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a { color: var(--text-body); font-size: var(--t-small); display: inline-block; padding-block: 4px; }
.footer__col a:hover { color: var(--text-strong); }
/* generated content, not a real text node — decorative watermark, exempt from text-contrast checks */
/* The wordmark is a flourish, not content. It was set at up to 15rem with an --s8 gap
   above it, which left a large empty band between the link columns and the bottom rule.
   Roughly halved, and the gap tightened. */
.footer__word { display: block; text-align: center; user-select: none; pointer-events: none;
  margin-top: var(--s5); margin-bottom: calc(clamp(3rem, 9vw, 8rem) * -0.16); overflow: hidden; }
.footer__word::before { content: "OurSight"; font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(3rem, 9vw, 8rem); line-height: .9; letter-spacing: -.035em;
  color: var(--text-strong); opacity: .07; white-space: nowrap; }
.footer__bottom { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.footer__bottom .legalnote { font-size: var(--t-small); color: var(--muted); max-width: 70ch; }
.footer__bottom .copy { font-family: var(--font-mono); font-size: var(--t-tag); color: var(--muted); letter-spacing: .03em; }
/* The AI-imagery disclosure. It sits with the copyright line rather than in a
   legal page because it has to be seen: the hero is generated game footage on a
   site that sells real game film. Given its own row so it is never squeezed onto
   the end of the copyright line by the flex layout. */
/* flex-basis alone is not enough: the item still shrinks under space-between and
   ends up beside the copyright. min-width pins it to its own row. */
.footer__bottom .copy--ai { flex: 0 0 100%; min-width: 100%; letter-spacing: 0; text-transform: none; }

/* ---------------- Reveal / motion ---------------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.21,1), transform .7s cubic-bezier(.22,.61,.21,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: 2; }
  .camera, .founder { grid-template-columns: 1fr; }
  /* Single column: the photo was a full-width 4/5 box — 821px tall at a 730px
     viewport, taller than the screen, so it always LOOKED cut off even though no
     pixel was cropped (owner, twice, 2026-08-29). Match the box to the image's
     own 857/1000 ratio (cover then crops nothing) and cap its width so the whole
     portrait fits within ~72vh and is seen entire, centered. */
  .founder__photo { aspect-ratio: 1/1; height: auto; width: min(100%, 72vh); margin-inline: auto; }
  .own-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--white); flex-direction: column;
    justify-content: flex-start; gap: 0; padding: var(--s5) var(--gutter) var(--s7); transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,.61,.21,1), visibility .3s; border-top: 1px solid var(--border); overflow-y: auto;
    visibility: hidden; }                 /* keep off-canvas links out of the tab order while closed */
  html.nav-open .nav { transform: none; visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__links a { padding: 18px 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-sans); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.15; }
  .nav__links a::after { display: none; }
  .nav__cta { flex-direction: column; align-items: stretch; width: 100%; margin-top: var(--s4); }
  .nav__cta .btn { width: 100%; }
  .nav-toggle { display: inline-flex; }
  html.nav-open .nav-toggle .i-menu { display: none; }
  html.nav-open .nav-toggle .i-close { display: block; }
  .steps, .pricing-grid { grid-template-columns: 1fr; }
  .engine-three { grid-template-columns: 1fr; }
  .engine__trust { grid-template-columns: 1fr; }
  .price-card__for { min-height: 0; }
  .steps { gap: var(--s5); }
  .step__arrow { top: auto; bottom: 0; left: 50%; margin-left: 0;
    transform: translate(-50%, calc(50% + var(--s5) / 2)) rotate(90deg); }
  .action-band__crop { display: none; }
  .action-band { min-height: 360px; }
  .action-band::after, .action-band--right::after { background: linear-gradient(0deg, rgba(14,17,23,.88), rgba(14,17,23,.5)); }
  .action-band--right .action-band__copy { margin-left: 0; }
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature__media, .feature--flip .feature__media { grid-column: 1; }
  .feature__body, .feature--flip .feature__body { grid-column: 1; grid-row: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .footer__top { grid-template-columns: 1fr; }
  .waitlist__row { flex-direction: column; }
  .price-card { padding: var(--s5) var(--s4); }
}

/* ---- Mobile: restack the comparison table into per-capability cards ---- */
@media (max-width: 640px) {
  .compare-wrap { overflow-x: visible; }
  .compare-frame::after { display: none; }
  .compare { min-width: 0; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .compare tbody, .compare tbody tr, .compare th, .compare td { display: block; width: auto; }
  .compare tbody tr { border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 16px 14px; margin-bottom: 14px; }
  .compare tbody th[scope="row"] { width: auto; font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; color: var(--text-strong); padding: 12px 0 10px; border-bottom: 1px solid var(--border); }
  .compare td { border-bottom: 0; padding: 9px 0 0; display: flex; gap: 10px; align-items: baseline; }
  .compare td::before { content: attr(data-label); flex: 0 0 72px; font-family: var(--font-sans); font-weight: 600; font-size: var(--t-small); color: var(--muted); }
  .compare td.col-us { background: var(--blue-50); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 8px; }
  .compare td.col-us::before { color: var(--blue-700); }
  .compare .i-win, .compare .i-gap { margin-right: 4px; }



  /* Feature mockups: let grid items shrink so the app-ui mockup fits narrow phones (no h-scroll) */
  .feature__media, .feature__body { min-width: 0; }
  .feature__media { padding: 14px; }
  .app-ui { max-width: 100%; }
}

/* ---- Subpage hero (multi-page) ---- */
.page-hero { padding: calc(var(--header-h) + clamp(56px,9vw,120px)) 0 clamp(44px,6vw,80px); text-align: center; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.5rem,6vw,4rem); letter-spacing: -.025em; margin-top: 8px; }
.page-hero p { color: var(--text-body); max-width: 58ch; margin: 16px auto 0; font-size: var(--t-lead); line-height: 1.5; }

/* ===== Mega-menu nav (GDIT-style) ===== */
.nav__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; font-size: .95rem; font-weight: 500; color: var(--text-body); border-radius: var(--r-sm); text-decoration: none; }
.nav__link:hover, .nav__link:focus-visible { color: var(--text-strong); background: var(--gray-50); }
.nav__caret { width: 15px; height: 15px; transition: transform .2s ease; }
.nav__item--mega:hover .nav__caret, .nav__item--mega.is-open .nav__caret { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 200; }
/* .is-open replaces :focus-within, which had no way to release: a click left focus on the
   trigger, pinning that panel open on top of its neighbours until the page reloaded.
   :hover stays, so pointer users are unaffected if main.js fails to load. */
.nav__item--mega:hover .mega, .nav__item--mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__link { display: block; padding: 10px 12px; border-radius: var(--r-xs); text-decoration: none; }
.mega__link:hover { background: var(--gray-50); }
.mega__t { display: block; font-weight: 600; color: var(--text-strong); font-size: .95rem; }
.mega__d { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
/* The Sports menu lists every sport, so it outgrew one column — a single stack of them
   runs taller than a short laptop viewport. Two columns on desktop only; the mobile rule
   below resets it, since the drawer scrolls and a single stack reads better there. */
/* One sport is live, so the Sports mega is a single column again. The two-column
   420px grid was sized for twelve entries; with one it left a large empty half. */
.mega--sports { grid-template-columns: 1fr; min-width: 260px; }
@media (max-width: 880px) {
  .mega--sports { grid-template-columns: 1fr; min-width: 0; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav__link { width: 100%; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-sans); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-strong); line-height: 1.15; border-radius: 0; }
  .nav__link:hover, .nav__link:focus-visible { background: transparent; }
  .nav__item--mega .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 2px 0 12px 12px; min-width: 0; }
  .mega__link { padding: 11px 0; }
  .mega__d { display: none; }
  /* The drawer listed all twelve sports inline, so a phone showed twelve rows of sports
     before it reached About (owner 2026-08-28: "the sports are too much currently"). The
     parent "Sports" link already points at the homepage's #sports picker from every page
     — the same twelve, with icons — so on mobile this is simply a link, not a menu. Also
     removes twelve focusable nodes from the drawer's focus trap. */
  .nav__item--mega .mega { display: none; }
  .nav__caret { display: none; }
}

/* ---- Insights ---- */
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ins-card { display: block; padding: 26px; border: 1px solid transparent; border-radius: var(--r-lg); background: var(--surface-sunk); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, background .2s ease, border-color .2s ease; }
.ins-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); background: var(--surface); border-color: var(--border); }
.ins-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600, #2563eb); }
.ins-card h2 { font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: -.01em; margin: 10px 0 8px; color: var(--text-strong); }
.ins-card p { color: var(--text-body); font-size: .96rem; line-height: 1.5; }
.ins-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--blue-600, #2563eb); font-size: .9rem; }
.ins-card__more svg { width: 15px; height: 15px; }
.article-title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 14px 0 14px; }
.article-byline { font-family: var(--font-mono); font-size: var(--t-tag); letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); padding-bottom: var(--s4); border-bottom: 1px solid var(--border); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-family: var(--font-sans); font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; margin-top: 2.2rem; color: var(--text-strong); }
.prose p { color: var(--text-body); line-height: 1.75; }
.prose .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--text-strong); }
.prose ul { padding-left: 1.1em; }
.prose ul li { list-style: disc; color: var(--text-body); line-height: 1.65; margin-top: .5rem; }
.prose ul li::marker { color: var(--blue-400); }
.prose a:not(.btn), .prose td a:not(.btn),
/* Inline links in body copy outside .prose (feature bodies, note lines under a section)
   need the same underline — colour alone fails WCAG "link in text block".
   :not(.btn) because a button is not a link in a text block: it already carries its own
   affordance, and the underline made the CTA read as broken. */
.feature__body p a:not(.btn), p.measure a:not(.btn) {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--blue-200); }
.prose a:not(.btn):hover, .feature__body p a:not(.btn):hover, p.measure a:not(.btn):hover { text-decoration-color: currentColor; }
.ins-grid > .ins-card:first-child { grid-column: 1 / -1; padding: clamp(28px, 4vw, 44px); }
.ins-grid > .ins-card:first-child h2 { font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -.022em; max-width: 22ch; }
.ins-grid > .ins-card:first-child p { max-width: 58ch; font-size: var(--t-body); }
@media (max-width: 700px){ .ins-grid { grid-template-columns: 1fr; } }

/* ---------------- Theme toggle ---------------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-pill); color: var(--text-body); border: 1px solid transparent; transition: background .15s ease, color .15s ease; }
.theme-toggle:hover { background: var(--surface-sunk); color: var(--text-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }

/* ---------------- Dark theme surface overrides ---------------- */
/* --primary is brightened in dark for link/.ink legibility on dark bg, but that
   is too light behind white button text — give buttons a darker, AA-safe blue. */
:root[data-theme="dark"] .btn-primary { background: #f5f7fb; color: #10141d; }
:root[data-theme="dark"] .btn-primary:hover { background: #ffffff; color: #10141d; }
:root[data-theme="dark"] .header.is-scrolled { border-bottom-color: var(--border); }
:root[data-theme="dark"] .header.is-scrolled::before { background: rgba(13,16,23,.82); }
/* .section--dark bands are dark in BOTH themes, so their "paper" foreground must
   stay light — but --paper inverts to dark globally. Re-map it locally here so
   every var(--paper) text inside a dark band (own-points, action-band lead,
   btn-ghost) stays legible. */
:root[data-theme="dark"] .section--dark { border-block: 1px solid var(--border); --paper: #e9ecf3; }
:root[data-theme="dark"] ::selection { background: var(--blue-100); color: var(--blue-700); }
:root[data-theme="dark"] .hero::before { opacity: .5; }