/* ============================================================
   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; }
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; }
.section-sub, .team-card p, .price-card-desc, .faq-item p, .idea-card p, .for-card p,
.feature-copy p, .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); }

/* ---------- 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.16;
  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: 34px; }
.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); }

/* ============================== 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.16;
  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; }

.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); }
.mascot-row-box p { 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: 0 auto 2.5rem; background: var(--panel); }

/* Embeds: the real interactive Netlify demos, used directly. */
.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); }

/* 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; }

/* 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%; }
.feature-copy p { font-size: 1.1rem; }
.feature-copy h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }

/* 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;
}

/* ============================== MEET THE TEAM ============================== */
.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);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-card:hover, .team-card:focus-visible, .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-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;
}
.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.8rem; color: var(--iron); margin: 0.65rem 0 0; }

/* 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; }
.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: 0 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; }
.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. */
.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; }
.consultations-info .prose { margin: 1.75rem 0; }
.consultations-info .prose:first-of-type { margin-top: 0; }
.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-links { display: none; }
  .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; }
  .team-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}