/* ============================================================
   CG General: website/
   Token system: ink/panel/teal/teal-deep/paper/iron, sampled from
   the real brand mark. Display: Big Shoulders. Body: Public Sans.
   Utility/data: Fragment Mono.
   ============================================================ */

:root {
  --ink:       #0B0B0C;
  --panel:     #121417;
  --line:      #1E2226;
  --line-lit:  #23272b;
  --teal:      #00B3A4;
  --teal-deep: #067A70;
  --paper:     #F2F1ED;
  --iron:      #6B7078;

  --rig-key:  #C9A15A;
  --rig-fill: #8C6A46;
  --rig-rim:  #6B4A36;

  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "Fragment Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --stencil: "Bespoke Stencil", var(--display);

  --max: 1360px;
  --measure: 66ch;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; --dur: 0.001s; }
}

* { box-sizing: border-box; }
/* Safety net for horizontal shift-on-scroll: the team-card entrance
   transforms below (translateX(-56px)/translateX(56px), pre-entrance,
   unclipped by any ancestor) extend the page's real scrollable width until
   the entrance fires and resets them to translateX(0) - the moment that
   happens is what reads as a sideways "shift" while scrolling. clip (not
   hidden) doesn't create a new scroll container, so it doesn't touch
   .nav's position:sticky. Re-verified after the nav/marker-panel/tab
   additions (nav open, marker tap, all 7 category tabs, and the entrance
   transition itself sampled at 40ms resolution): scrollWidth never
   exceeds the viewport in any of those states, so this is still doing its
   job - nothing is overflowing the document any more.
   The residual "scrolls right slightly, reveals a gap" on real touch
   devices despite scrollWidth == viewport is Chrome's own edge rubber-
   band/overscroll gesture, not reachable overflow content - overflow-x
   only governs whether overflowING content is scrollable, it doesn't
   disable the browser's own elastic bounce on a fast swipe past the true
   edge, which can fire even on a page with zero actual overflow.
   overscroll-behavior-x is the property that turns that gesture off. */
html { overflow-x: clip; overflow-y: visible; overscroll-behavior-x: none; }
body { overscroll-behavior-x: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.97;
  margin: 0 0 0.4em;
}
h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.6rem; letter-spacing: 0.02em; }
em { color: var(--paper); font-style: italic; }

p { margin: 0 0 1em; color: var(--paper); font-size: 1.05rem; }
/* .feature-copy p:not(.kicker) - a kicker is a <p>, so plain ".feature-copy
   p" (specificity 0,1,1) silently beat the standalone ".kicker" rule
   (0,1,0) for every kicker sitting inside a .feature-copy block ("The
   plan", "Render history", "Light sources", etc.), turning them this
   muted gray instead of the intended teal. Kickers inside a .section-head
   were never in a .feature-copy, so they were never affected - which is
   what made this read as one-off/inconsistent rather than a systemic bug. */
.section-sub, .team-card p, .price-card-desc, .faq-item p, .idea-card p, .for-card p,
.feature-copy p:not(.kicker), .prose p, .callout p { color: #C7C5BE; }

.wordmark {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1.1rem; text-decoration: none; color: var(--paper);
}

.kicker {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 0.9rem;
}

section { padding: clamp(4.5rem, 9vw, 9rem) 0; }
.section-head { max-width: var(--max); margin: 0 auto 3rem; padding: 0 clamp(1.5rem, 6vw, 4.5rem); }
.section-head--tight { margin-top: 4rem; margin-bottom: 2rem; }
.section-head h2, .section-head h3 { max-width: 30ch; }
/* .product-body already provides the same horizontal inset itself, so a
   nested .section-head must not add its own on top, or it drifts right
   of "Triage" / "The diagnostics" above it. */
.product-body .section-head { padding: 0; margin-left: 0; margin-right: 0; max-width: none; }
.section-sub { max-width: 62ch; font-size: 1.1rem; }
.caption { max-width: var(--max); margin: 1.25rem auto 0; padding: 0 clamp(1.5rem, 6vw, 4.5rem); font-size: 0.9rem; color: var(--iron); text-align: center; }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: var(--ink); padding: 0.75rem 1.25rem;
  font-family: var(--body); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- promo banner (temporary - Haris removes this whole block +
   its markup once the 10 discount redemptions are used) ---------- */
.promo-banner {
  position: relative; background: var(--panel); border-bottom: 1px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  padding: 0.65rem clamp(2.5rem, 6vw, 4.5rem);
}
.promo-banner-text {
  margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--paper);
  text-align: center; letter-spacing: 0.01em;
}
.promo-banner-text::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-right: 0.6rem; vertical-align: middle; }
.promo-banner-close {
  position: absolute; right: clamp(0.75rem, 3vw, 1.5rem); top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--iron); font-size: 1.2rem; line-height: 1;
  cursor: pointer; padding: 0.25rem 0.5rem; transition: color var(--dur) var(--ease);
}
.promo-banner-close:hover, .promo-banner-close:focus-visible { color: var(--paper); }
.promo-banner.is-dismissed { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  padding: 0.75rem 1.5rem; border-radius: 3px; border: 1px solid transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-primary { background: var(--teal); color: #04211d; }
.btn-primary:hover { background: #22c9ba; transform: translateY(-1px); }
.btn-outline { border-color: var(--line-lit); color: var(--paper); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

/* ============================== NAV ============================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,12,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Only where the checkerboard actually bleeds into what follows (the
   logo-led hero, see .hero-logo::before below) - every other page keeps
   the plain hard edge, since they have nothing to bleed into. */
.nav:has(+ main .hero-logo) { border-bottom: none; }
.nav-texture {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-lit) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-lit) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.32;
  mask-image: linear-gradient(90deg, black 0%, black 60%, transparent 100%);
}
.nav-inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: 0.75rem clamp(1.5rem, 6vw, 4.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav-logo { display: block; height: 55px; }
.nav-logo img { height: 100%; width: auto; display: block; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { text-decoration: none; color: #B7B5AE; font-size: 0.92rem; transition: color var(--dur) var(--ease); }
.nav-links a:hover { color: var(--teal); }

/* Mobile menu toggle: hidden on desktop, shown only inside the 900px
   breakpoint below, where .nav-links itself is hidden and reused as the
   dropdown content instead of duplicating the link list per page. */
.nav-toggle {
  display: none; background: none; border: none; padding: 0; cursor: pointer;
  width: 40px; height: 40px; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; flex-shrink: 0;
}
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; background: var(--paper);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav.is-menu-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================== HERO: logo-led ============================== */
.hero-logo {
  position: relative; overflow: hidden;
  min-height: 78vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 1.25rem;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 6vw, 4.5rem);
}
/* Nav's own checkerboard bleeding into the top of the hero, so the grid
   feels continuous instead of cutting off hard at the nav's bottom edge
   (which used to have its own border-bottom - removed, see .nav above).
   Same pattern/size/color/opacity as .nav-texture, just faded vertically
   instead of horizontally. */
.hero-logo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-lit) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-lit) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.32;
  mask-image: linear-gradient(180deg, black 0%, black 25%, transparent 65%);
}
/* TRIAL, one-class toggle (see the HTML comment above the section) - the
   image tag always exists but stays inert until .hero-logo--bg-experiment
   is present. Darkened/blurred for legibility of the paper-colored logo
   text sitting on top of it. */
.hero-logo-bg { display: none; }
.hero-logo--bg-experiment .hero-logo-bg {
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.6; filter: brightness(0.4) blur(1px);
}
.hero-logo > :not(.hero-logo-bg) { position: relative; z-index: 1; }
.hero-logo-eyebrow {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.24em;
  color: var(--iron); margin: 0;
}
.hero-logo-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.1875rem, 0.55vw, 0.4375rem);
}
.hero-logo-icon {
  width: auto; height: clamp(8.1rem, 26.4vw, 19.2rem); margin: 0;
  flex-shrink: 0;
}
.hero-logo-mark {
  font-family: var(--stencil); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 8rem); letter-spacing: 0.01em; line-height: 0.95;
  color: var(--paper); margin: 0;
}
@media (max-width: 640px) {
  .hero-logo-lockup { flex-direction: column; gap: 0.75rem; }
}
.hero-logo-tag {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: #C7C5BE; max-width: 30ch; margin: 0;
}
.hero-logo-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.75rem; }

/* ============================== INTRO / "WHAT IS CG GENERAL" ============================== */
.intro { border-top: 1px solid var(--line); }
[data-entrance-item] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-entrance-item].is-in { opacity: 1; transform: translateY(0); }
.idea-grid.is-in { transition-delay: 0.1s; }
.idea-note.is-in { transition-delay: 0.18s; }

/* Second (and only other) orchestrated entrance, same mechanism, own
   stagger - see [data-entrance-item] and orchestratedEntrance() above.
   The two team-cards carry the entrance-item attribute individually
   rather than as one .team-grid unit, converging from opposite sides for
   a "team assembling" beat instead of a generic uniform fade. */
.team-photo-group.is-in { transition-delay: 0.08s; }
.team-section .team-card { transform: translateX(-56px); }
.team-section .team-card:nth-child(2) { transform: translateX(56px); }
.team-section .team-card.is-in { transform: translateX(0); }
.team-section .team-card:nth-child(1).is-in { transition-delay: 0.16s; }
.team-section .team-card:nth-child(2).is-in { transition-delay: 0.22s; }
.team-section .callout--wide.is-in { transition-delay: 0.3s; }

.intro-hero {
  max-width: var(--max); margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: 0 clamp(1.5rem, 6vw, 4.5rem);
}
.intro-hero h2 { font-size: clamp(3rem, 8vw, 6rem); max-width: none; }
.intro-hero-sub { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: #C7C5BE; max-width: 40ch; }

.idea-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.idea-card { border: 1px solid var(--line-lit); border-radius: 4px; padding: 2.25rem; background: var(--panel); }
.idea-card h3 { font-size: 1.5rem; }
.idea-note {
  max-width: var(--max); margin: 1.75rem auto 0; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  color: #C7C5BE; font-size: 1.1rem;
}
.idea-note strong { color: var(--teal); }

.who-block { border-top: 1px solid var(--line); }
.who-heading { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 18ch; }
.for-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.for-card { border: 1px solid var(--line-lit); border-radius: 4px; padding: 1.75rem; background: var(--panel); }
.for-card h3 { font-size: 1.2rem; }

/* ============================== PRODUCT SECTIONS (Triage / Lighting Doctor) ============================== */
.product { border-top: 1px solid var(--line); padding-top: 0; }
.product--alt { background: var(--panel); }

.product-title-card {
  background: #000; display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4.5rem);
}
.product-title-text {
  font-family: var(--stencil); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 7rem); letter-spacing: 0.02em; line-height: 1;
  color: var(--paper); margin: 0; text-align: center;
}

.product-body { max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4.5rem) 0; }

.product-lede-open { font-size: 1.2rem !important; color: #C7C5BE; margin-top: 1.25rem; }
.product-lede-close { color: var(--paper) !important; font-weight: 600; font-size: 1.1rem !important; }

/* Mascot + feature-box: the avatar overlaps the box it's presenting,
   matching the Superhive listing's composition - not just avatar art
   floating beside unrelated copy. --triage puts the avatar on the left
   bleeding right into the box; --ld mirrors it (box left, avatar right,
   bleeding left) so Lighting Doctor's flashlight has something to land on. */
.mascot-row {
  display: grid; grid-template-columns: 1fr minmax(0, 340px); gap: 0;
  align-items: center; margin: clamp(2rem, 4vw, 3rem) 0;
}
.mascot-row-box {
  background: var(--ink); border: 1px solid var(--line-lit); border-left: 3px solid var(--teal);
  border-radius: 6px; padding: clamp(1.75rem, 3vw, 2.4rem);
  position: relative; z-index: 1;
}
.product--alt .mascot-row-box { background: var(--panel); }
/* :not(.kicker) - same recurring bug as .feature-copy p: the Lighting
   Doctor mascot-row-box's kicker ("Lighting Doctor") is a <p>, so this
   rule was silently overriding its font-size to 1.1rem instead of the
   intended 0.8rem, same as the .feature-copy instances. */
.mascot-row-box p:not(.kicker) { font-size: 1.1rem; }
.mascot-row-figure { max-width: 340px; position: relative; z-index: 2; }
.mascot-row-figure img { width: 100%; height: auto; display: block; }

/* The figure's own grid track is sized to its content (minmax(0,340px)),
   not a flexible fr unit, so there's no leftover invisible track space
   before the box even starts. justify-self, not margin:auto, pins the
   figure to its edge within that track. The actual overlap onto the box
   uses transform, not a negative margin - grid clips an item's rendered
   box to its own track regardless of margin, so margin alone never lets
   it bleed across the column boundary the way transform does. */
.mascot-row--triage { grid-template-columns: minmax(0, 340px) 1fr; }
.mascot-row--triage .mascot-row-figure { order: 1; justify-self: start; transform: translateX(clamp(2rem, 4vw, 4rem)); }
.mascot-row--triage .mascot-row-box { order: 2; }

.mascot-row--ld .mascot-row-box { order: 1; }
.mascot-row--ld .mascot-row-figure { order: 2; justify-self: end; transform: translateX(clamp(-4rem, -4vw, -2rem)); }

.example-findings { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.example-findings li {
  padding-left: 1.2rem; position: relative; color: #C7C5BE; font-size: 1.02rem;
}
.example-findings li::before { content: "•"; position: absolute; left: 0; color: var(--teal-deep); }

.callout {
  border: 1px solid var(--line-lit); border-left: 3px solid var(--teal);
  border-radius: 4px; padding: 1.4rem 1.6rem; background: var(--ink);
  margin: 1.75rem 0 0;
}
.callout p { margin: 0; color: var(--paper) !important; font-weight: 600; font-size: 1.02rem; }
.callout p + p { margin-top: 0.75rem; }
.callout--wide { max-width: var(--max); margin: clamp(2.5rem, 5vw, 4rem) auto 2.5rem; background: var(--panel); }

/* Embeds: real interactive demos, self-hosted under embeds/ (see that
   folder's README) - not Netlify iframes any more, all four migrated. */
.embed { width: 100%; max-width: 340px; margin: 0 auto; }
.embed--wide { max-width: none; }
.embed--inline { max-width: none; }
.embed iframe {
  display: block; width: 100%; border: none; border-radius: 6px; background: var(--panel);
}
.embed--portrait iframe { aspect-ratio: 1000 / 1280; }
.embed--wide iframe { aspect-ratio: 16 / 9; }
.embed--gap { margin-top: clamp(3rem, 6vw, 4.5rem); }
.embed-caption { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iron); margin: 0.7rem 0 0; text-align: center; }
.embed-caption--center { max-width: var(--max); margin: 0.75rem auto 0; padding: 0 clamp(1.5rem, 6vw, 4.5rem); }
/* Short, one-line captions (e.g. under the Triage panel screenshots) read
   oversized at the base caption size once they're this brief. */
.embed-caption--sm { font-size: 0.66rem; }

/* Findings hotspots: the image runs the full width of the section, and
   each marker carries its own tooltip that appears on hover/focus rather
   than syncing to a separate list beside it. */
.findings-media {
  position: relative; border: 1px solid var(--line-lit); border-radius: 6px;
  overflow: hidden; background: var(--panel); margin-bottom: 1rem;
}
.findings-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.findings-layer { position: absolute; inset: 0; }
.finding-dot {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11,11,12,0.7); border: 2px solid var(--teal); color: var(--teal);
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.finding-dot::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(0,179,164,0.18);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.finding-dot:hover, .finding-dot:focus-visible {
  background: var(--teal); color: var(--ink); transform: translate(-50%, -50%) scale(1.15);
}
.finding-dot:hover::before, .finding-dot:focus-visible::before { opacity: 1; }

.finding-tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: min(280px, 70vw); background: var(--ink); border: 1px solid var(--line-lit);
  border-radius: 6px; padding: 1rem 1.15rem; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.7);
}
/* Markers near the top of the image render their tooltip below instead of
   above, so it never clips past the image's own top edge. Set on the dot
   via data-tip-below in script.js, not guessed from position in CSS alone. */
.finding-dot[data-tip-below] .finding-tip { bottom: auto; top: calc(100% + 14px); }
/* Markers near the right edge pop their tooltip to the left instead,
   vertically centered on the dot, so it never hangs off the image edge or
   crowds a neighboring marker's tooltip. Set via data-tip-left. */
.finding-dot[data-tip-left] .finding-tip {
  left: auto; right: calc(100% + 14px); bottom: auto; top: 50%;
  transform: translateY(-50%);
}
.finding-dot:hover .finding-tip, .finding-dot:focus-visible .finding-tip { opacity: 1; }
.finding-tip h4 {
  font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.78rem; color: var(--teal); margin: 0 0 0.5rem;
}
.finding-tip p { font-family: var(--body); font-size: 0.85rem; color: #C7C5BE; margin: 0; }

/* Touch: an overlay tip (even a shared bottom-sheet one) covers part of
   the image and needs its own dismiss mechanism - a real dead end without
   one. Placed below the image instead, in normal document flow, so the
   markers themselves are never covered and there's nothing to dismiss:
   it's always present, showing a neutral placeholder until a marker is
   tapped, and replaces .caption's own instruction text at this
   breakpoint (see .findings-media + .caption below). */
.findings-shared-tip {
  margin: 1rem 0 0;
  border: 1px solid var(--line-lit); border-left: 3px solid var(--teal); border-radius: 6px;
  padding: 1rem 1.15rem; background: var(--ink); text-align: left;
}
.findings-shared-tip h4 {
  font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.78rem; color: var(--teal); margin: 0 0 0.5rem;
}
.findings-shared-tip p { font-family: var(--body); font-size: 0.85rem; color: #C7C5BE; margin: 0; }
.findings-shared-tip-placeholder {
  font-family: var(--mono); font-size: 0.85rem; color: var(--iron); text-align: center; margin: 0;
}
@media (pointer: coarse) {
  .finding-tip { display: none; }
  .findings-media + .caption { display: none; }
}

/* Lighting Doctor's real finding-card pattern: full width. */
.finding-card {
  max-width: none; border: 1px solid var(--line-lit); border-radius: 6px;
  padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--ink); margin: 1rem 0 0.9rem;
}
.product--alt .finding-card { background: var(--panel); }
.finding-card-scene { font-style: italic; color: #C7C5BE; font-size: 1rem; margin-bottom: 1.5rem; max-width: 70ch; }
.finding-card-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
.finding-card-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--iron); margin: 0 0 0.6rem; }
.finding-card-line { font-size: 1rem; color: #C7C5BE; margin: 0 0 0.5rem; }
.proposal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.proposal { border: 1px solid var(--line-lit); border-left: 3px solid var(--teal); border-radius: 6px; padding: 1.25rem 1.4rem; background: var(--panel); }
.product--alt .proposal { background: var(--ink); }
.proposal-title { font-weight: 600; color: var(--paper); margin: 0 0 0.6rem; font-size: 1rem; }
.proposal-body { color: #C7C5BE; font-size: 0.92rem; margin: 0 0 0.7rem; }
.proposal-actions { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--iron); margin: 0; }

/* Alternating feature rows. */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center; margin: clamp(3rem, 6vw, 5rem) 0;
}
.feature-row--reverse .feature-media { order: 2; }
.feature-media img { border-radius: 6px; }
.feature-media-img--80 { width: 80%; margin: 0 auto; }
/* :not(.kicker) for the same reason as the color rule near the top of this
   file - a kicker is a <p>, so plain ".feature-copy p" (0,1,1) silently
   beat ".kicker"'s own font-size (0,1,0) for every kicker sitting inside a
   .feature-copy, rendering them at 1.1rem instead of the intended 0.8rem.
   Missed this one when fixing the color version of the same bug. */
.feature-copy p:not(.kicker) { font-size: 1.1rem; }
.feature-copy h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }

.feature-media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1rem; align-items: start; }
.feature-media-pair figure { margin: 0; }
/* Shared fixed-ratio frame so both screenshots render at identical box
   dimensions regardless of their own native aspect ratio - see the HTML
   comment above this pair for why (real content, can't crop to match).
   Letterbox fill matches .product--alt's own --panel background (the
   section these sit in), not --ink, so the letterboxed edges blend into
   the section instead of reading as visible black bars. */
.feature-media-pair-frame {
  aspect-ratio: 4 / 3; background: var(--panel); border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Rounding the img itself (previous pass) rounded its own box, but
   object-fit:contain at width/height:100% stretches that box to the full
   frame regardless of the image's real rendered size - for the letterboxed
   image, the actual visible pixels sit smaller than that box, with their
   own genuinely square corners untouched, so the rounding landed on
   invisible letterbox area instead of the real edge. Sizing the img by
   its natural aspect ratio instead (max-width/max-height + auto, no
   object-fit) shrinks the element's own box to match the real rendered
   content exactly, centered in the frame by the flex properties above -
   border-radius on that box now rounds the actual visible edge. */
.feature-media-pair-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; border-radius: 6px;
}
.feature-media-pair figcaption {
  font-family: var(--mono); font-size: 0.78rem; color: var(--iron); text-align: center; margin-top: 0.5rem;
}

/* Obvious, unmissable stand-in for a real in-Blender screenshot Haris
   will supply later - deliberately not styled to look like a finished
   asset, so it can't be mistaken for one and is a one-step swap (replace
   this whole block with an <img>) once the real capture exists. */
.screenshot-placeholder {
  aspect-ratio: 16 / 10; border: 2px dashed var(--line-lit); border-radius: 6px;
  background: var(--panel); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 0.5rem; padding: 2rem;
}
.screenshot-placeholder-label {
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--iron); margin: 0;
}
.screenshot-placeholder-note {
  font-family: var(--mono); font-size: 0.78rem; color: var(--iron); opacity: 0.7; margin: 0; max-width: 30ch;
}

/* Count-up banner: the one other numeric "moment" on the page. Uses
   --display (Big Shoulders), same as every other large number/headline -
   --stencil (Bespoke Stencil) is reserved for the CG General wordmark
   itself (hero mark, product title cards), never body numerals. More
   breathing room top and bottom than a regular feature-row gets, since
   this is meant to read as its own beat, not another row in the list.
   Panel-tinted backdrop that fades out via mask-image (same masking
   technique as the nav/hero checkerboard bleed elsewhere in this file).
   Revised narrower than the previous pass (which matched the full image
   width above it, plus a bleed) - now 75% of the column, with a much
   larger/softer fade zone (35% of the box on each side, not a fixed
   80px) so the falloff itself reads as gradual rather than a near-edge
   cutoff. If this still doesn't look right, the fallback is stretching
   it the full section width instead, like the site's other dividers. */
.count-banner { position: relative; text-align: center; margin: clamp(5.5rem, 10vw, 9rem) 0; }
.count-banner::before {
  content: ""; position: absolute; z-index: -1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 75%; height: 150%;
  background: var(--panel);
  mask-image: linear-gradient(90deg, transparent 0%, black 35%, black 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 35%, black 65%, transparent 100%);
}
.count-num {
  font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 13vw, 8rem);
  line-height: 1; color: var(--paper); margin: 0 0 1rem;
}
.count-caption { font-size: 1.05rem; color: #C7C5BE; max-width: 46ch; margin: 0 auto; }

/* ============================== MEET THE TEAM ============================== */
.team-section { border-top: 1px solid var(--line); }
.team-photo { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem); }
.team-photo img { width: 100%; height: auto; }
.team-photo-caption {
  text-align: center; font-family: var(--mono); font-size: 0.95rem; color: var(--iron);
  margin: 1.25rem 0 3rem;
}

.team-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.team-card {
  border: 1px solid var(--line-lit); border-radius: 4px; padding: 2.25rem;
  background: var(--panel);
  /* opacity included here (not left to [data-entrance-item]'s own
     transition rule) because this later, equal-specificity declaration
     would otherwise replace that one outright rather than merge with it,
     leaving the entrance fade-in untransitioned. */
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Scoped with .team-section (not bare .team-card) so this ties, rather
   than loses, the specificity fight with .team-section .team-card.is-in's
   permanent transform: translateX(0) (round 2's per-card entrance) - a
   bare .team-card:hover here is equal-or-lower specificity than that rule
   and would never win once a card has been revealed, which is exactly
   what broke this hover after that entrance was added. Being later in the
   file settles the tie in hover's favor. */
.team-section .team-card:hover,
.team-section .team-card:focus-visible,
.team-section .team-card.is-touched {
  transform: translateY(-6px);
  border-color: var(--teal);
  box-shadow: 0 24px 60px -28px rgba(0,179,164,0.4);
}

/* ============================== PRICING ============================== */
.pricing { border-top: 1px solid var(--line); }
.pricing-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.price-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-lit); border-radius: 4px; padding: 2.5rem;
  background: var(--panel);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Same hover glow as the "Lighting Doctor" team-card in the roadmap
   section (lift + teal border + soft teal box-shadow) - the pricing cards
   are the page's conversion point and didn't have an equivalent. */
.price-card:hover, .price-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--teal);
  box-shadow: 0 24px 60px -28px rgba(0,179,164,0.4);
}
.price-card--feature { border-color: var(--teal); }
.price-card h3 { font-size: 1.6rem; margin-bottom: 0.75rem; }
.price-card-desc { margin-bottom: 1.5rem; }
.price-num {
  font-family: var(--mono); font-weight: 500; font-size: 2.6rem; color: var(--paper);
  margin: 0 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.price-num span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.85rem; color: var(--iron); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.4rem; }
.price-badge {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--line-lit); color: #C7C5BE;
  padding: 0.45rem 0.8rem; border-radius: 3px; width: fit-content;
}
.price-badge--feature { background: var(--teal); border-color: var(--teal); color: #04211d; }

/* Checklist replacing the old stacked badges/description-only layout -
   structural pattern only (price up top, checkmarked list, button at the
   bottom), not a copy of any specific visual reference. */
.price-checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.price-checklist li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  color: #C7C5BE; font-size: 0.98rem; line-height: 1.4;
}
.price-checklist li::before {
  content: "\2713"; color: var(--teal); font-weight: 700; flex-shrink: 0; font-family: var(--mono);
}
.price-lock-note {
  font-size: 0.88rem; color: var(--iron); line-height: 1.5;
  margin: 0 0 1.5rem; padding-left: 0.75rem; border-left: 2px solid var(--teal);
}
/* margin-top:auto pins this to the bottom of the card regardless of how
   long the checklist/lock-note above it runs - .pricing-grid's default
   CSS Grid stretch already makes both cards the same height, so this is
   what keeps both buy buttons level with each other. */
.price-card-buy { margin-top: auto; padding-top: 0.5rem; }
.price-trust { font-size: 0.78rem; color: var(--iron); opacity: 0.4; text-align: center; margin: 1rem 0 -1.5rem; }

/* Corner promo ribbon - temporary, same lifespan as .promo-banner. Haris
   removes the two .price-ribbon divs (and this block) once the 10
   redemptions are used. Deliberately a sticker, not body copy - see the
   plain-badge treatment above for the permanent "Includes N Consultations"
   equivalent still used on consultations.html. */
.price-ribbon {
  position: absolute; top: 28px; right: -56px; width: 220px;
  transform: rotate(45deg); z-index: 2; pointer-events: none;
  background: var(--teal); color: #04211d;
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
  text-align: center; line-height: 1.35; padding: 0.5rem 0;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.pricing-note { max-width: var(--max); margin: 2.25rem auto 0; padding: 0 clamp(1.5rem, 6vw, 4.5rem); color: #C7C5BE; }
.topup-link {
  max-width: var(--max); margin: 1.5rem auto 0; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  font-size: 0.95rem; color: var(--iron);
}
.topup-link a { color: var(--iron); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
.topup-link a:hover { color: var(--teal); }

/* ============================== PULL-QUOTE (metallic, closing device) ============================== */
.pull-quote { text-align: center; border-top: 1px solid var(--line); }
.pull-quote blockquote {
  margin: 0 auto; max-width: 820px; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.25;
  background: linear-gradient(115deg, #7d8a89 0%, #eef4f2 22%, #9fb5b1 38%, #eef4f2 55%, #6f807e 72%, #cfe0dc 88%, #7d8a89 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pull-quote-mark { font-family: var(--display); opacity: 0.6; }
.pull-quote-attr {
  margin-top: 1.5rem; font-family: var(--mono); font-size: 0.85rem; color: var(--iron);
}
.pull-quote-attr a { color: var(--teal); text-decoration: none; }
.pull-quote-attr a:hover { text-decoration: underline; }

/* ============================== FAQ ============================== */
.faq-list { max-width: 900px; margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem); }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.4rem 0; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; font-family: var(--body); font-weight: 600; font-size: 1.1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--teal); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.faq-icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-icon::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item p { margin-top: 0.9rem; max-width: 65ch; }
.faq-item p + p { margin-top: 0.6rem; }

/* ============================== ABOUT PAGE ============================== */
.about-hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 6vw, 4.5rem) 3rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem;
}
.about-hero-photo {
  width: 160px; height: 160px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--line-lit);
}
.about-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-heading {
  font-size: clamp(2.8rem, 7vw, 5rem); margin: 0.5rem 0 0;
}
.about-hero-tag { font-size: 1.2rem; color: #C7C5BE; margin: 0; }
.about-hero-name { font-family: var(--mono); font-size: 0.9rem; color: var(--iron); margin: 0.25rem 0 0; }
.about-body {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line); text-align: center;
}

.prose { max-width: 66ch; margin: 0 auto; }
.prose p { font-size: 1.08rem; line-height: 1.8; color: #C7C5BE; }
.prose-strong { color: var(--paper) !important; font-weight: 600; font-size: 1.15rem !important; }
.prose a { color: var(--teal); }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.4rem; color: #C7C5BE; }
.prose li { font-size: 1.02rem; line-height: 1.75; margin-bottom: 0.5rem; }
.prose li::marker { color: var(--teal); }
.prose h2 { font-size: 1.7rem; margin: 2.5rem 0 1rem; text-align: left; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 0.75rem; text-align: left; }
.prose h4 {
  font-family: var(--body); font-weight: 700; font-size: 1.02rem;
  color: var(--paper); margin: 1.5rem 0 0.6rem; text-transform: none; letter-spacing: normal;
}
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.94rem; }
.prose th { text-align: left; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iron); padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--line-lit); }
.prose td { padding: 0.65rem 0.9rem 0.65rem 0; border-bottom: 1px solid var(--line); color: #C7C5BE; vertical-align: top; }
.prose td:first-child, .prose th:first-child { color: var(--paper); }
.prose details { border: 1px solid var(--line); border-radius: 4px; padding: 0.9rem 1.1rem; margin: 0 0 0.75rem; }
.prose summary { cursor: pointer; font-weight: 600; color: var(--paper); }
.prose details p { margin-top: 0.6rem; margin-bottom: 0; }

/* Long-form legal/reference pages (Documentation, Privacy, Terms,
   Support) - left-aligned prose, unlike the About page's centered essay,
   since dense structured text reads badly centered. */
.doc-hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 9vw, 7rem) clamp(1.5rem, 6vw, 4.5rem) 2.5rem;
  text-align: center;
}
.doc-hero .kicker { justify-content: center; display: flex; }
.doc-meta { font-family: var(--mono); font-size: 0.85rem; color: var(--iron); margin: 0 0 2rem; }
.doc-body {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.doc-body:first-of-type { border-top: none; }
/* A .section-head already carries its own top gap (see the rule below), so
   a .doc-body that opens with one doesn't need this padding on top of it -
   that would double the gap under the divider it sits right against. */
.doc-body:has(> .section-head) { padding-top: 0; }
.doc-body .prose { text-align: left; }
.doc-body .section-head { text-align: left; padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; margin: 0; max-width: none; }
.doc-toc { max-width: 66ch; margin: 0 auto 2rem; }
.doc-toc a { color: var(--teal); text-decoration: none; }
.doc-toc a:hover { text-decoration: underline; }

/* Informational, not urgent - same section-divider weight as .about-body/
   .doc-body elsewhere, not the heavier teal accent this used to carry over
   from the Superhive source's "read before buying" warning treatment.
   Ink, not panel: the ink/panel alternation is reserved for contrasting
   Triage against Lighting Doctor specifically (the two product sections),
   not continued indefinitely - everything from here on (Consultations,
   Team, Pricing, the pull-quote, and after) shares the site's baseline
   ink, one step past Lighting Doctor's panel shade. */
.consultations-info { border-top: 1px solid var(--line); }
.consultations-inner { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem); }
.consultations-info .section-head { padding: 0; margin-left: 0; margin-right: 0; max-width: none; }
/* The intro line otherwise runs to .section-sub's generic 62ch, which is
   wider than the feature-row column beneath it (1fr of a 1fr/1fr grid) -
   matching that column's actual width exactly, not just approximating it
   in ch units, so it never reads as wider than the text column it sits
   above. */
.consultations-info .section-head .section-sub {
  max-width: calc((100% - clamp(2rem, 5vw, 3.5rem)) / 2);
}
/* Sits with the paragraph it illustrates instead of centered against the
   full (taller) text column, which left a gap above it. */
#consultations .feature-media { align-self: start; }
/* The image/text row's top edge already matched .feature-copy's own first
   line (align-self:start above), but that line itself sat well below the
   section's actual opening line (.section-sub) - the standard
   section-head-to-content gap used everywhere else on the site is too
   wide here specifically. Tightened just for this section so the image
   reads as sitting with the section's opening line, not floating a full
   section-head's worth of space below it. */
#consultations .section-head { margin-bottom: 1rem; }
#consultations .feature-row { margin-top: 0.5rem; }
.about-body .section-head { text-align: center; }
.about-body .section-head h2 { margin-left: auto; margin-right: auto; }

/* ============================== FOOTER ============================== */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0; }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.5rem, 6vw, 4.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center;
}
.footer-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a { text-decoration: none; color: #B7B5AE; font-size: 0.9rem; }
.footer-nav a:hover { color: var(--teal); }
.footer-credit { font-size: 0.82rem; color: var(--iron); margin: 0; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 900px) {
  .nav-inner { flex-wrap: wrap; }
  .nav-toggle { display: flex; order: 3; }
  .nav-links { display: none; order: 4; flex-basis: 100%; }
  .nav.is-menu-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    margin-top: 1rem; border-top: 1px solid var(--line);
  }
  .nav.is-menu-open .nav-links a { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .idea-grid { grid-template-columns: 1fr; }
  .for-grid { grid-template-columns: 1fr; }
  .mascot-row, .mascot-row--triage { grid-template-columns: 1fr; }
  .mascot-row-figure { order: -1 !important; max-width: 260px; margin: 0 auto !important; transform: none !important; }
  .finding-card-cols { grid-template-columns: 1fr; }
  .proposal-row { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row--reverse .feature-media { order: 0; }
  .feature-media-pair { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  /* This one's own max-width formula computes half of the desktop 2-column
     feature-row beneath it (see the rule itself further up this file) so
     the section's opening line matches that row's real column width - but
     .feature-row above is now single-column at this width too, so the
     formula was still halving this paragraph against a column that no
     longer exists, leaving it visibly narrower than every paragraph after
     it with awkward mid-word wraps. */
  .consultations-info .section-head .section-sub { max-width: none; }
}