/* ============================================================
   AdPerch — Phase 1 landing page
   Visual identity: earthtone + grayscale, agent-color motif.
   No glassmorphism, no gradients, no decorative blur. Flat surfaces only.
   All colors via CSS variables (Task 2). Mobile-first responsive.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary: #f5f2ed;        /* warm off-white, matches logo line */
  --bg-secondary: #ebe6dd;       /* slightly darker section background */
  --bg-tertiary: #1a1a1a;        /* dark sections (footer, closing CTA) */

  /* Text */
  --text-primary: #2d2520;       /* brown-black */
  --text-secondary: #5a5048;     /* muted brown */
  --text-tertiary: #8a7e72;      /* further muted, captions */
  --text-on-dark: #f5f2ed;       /* light text on dark backgrounds */

  /* Accents */
  --accent-terracotta: #c65a36;  /* canonical brand terracotta — sampled from the logo bar; also the founder agent color */
  --accent-sage: #7d9471;        /* VC agent color */
  --accent-gold: #c4965a;        /* primary CTA highlight */
  --accent-charcoal: #2d2520;    /* secondary CTA / structural */

  /* Borders */
  --border-subtle: rgba(45, 37, 32, 0.12);
  --border-emphasis: rgba(45, 37, 32, 0.24);

  /* Type */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Layout */
  --content-max: 1100px;
}

/* ───────────────────────── Reset / base ───────────────────────── */

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

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

body {
  margin: 0;
  overflow-x: clip;           /* the zoomed hero scene may grow past the viewport
                                 sides; clip horizontally so it can't add scroll */
  font-family: var(--font-sans);
  font-size: 1rem;            /* 16px base, scales up at desktop */
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-2); }

a { color: var(--text-primary); }

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

em { font-style: italic; }

/* ───────────────────────── Layout primitives ───────────────────────── */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-8) 0;
}

.bg-primary   { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-dark      { background: var(--bg-tertiary); color: var(--text-on-dark); }

/* Section headings */
.section h2 {
  font-size: 1.875rem;        /* 30px mobile */
}

/* ───────────────────────── Buttons ───────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.9rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary[data-role="founder"] {
  background: var(--accent-gold);
  color: var(--text-primary);
}

.btn-primary[data-role="vc"] {
  background: var(--accent-charcoal);
  color: var(--text-on-dark);
}

/* Curious-lane submit button reuses charcoal styling */
.btn-primary[data-role="curious"] {
  background: var(--accent-charcoal);
  color: var(--text-on-dark);
}

/* "free to join" sub-line on the reserve CTAs. Wrap + full-basis span forces it onto its own
   line under the label (the button is a row flex). Color via opacity/inherit so it reads on
   both the gold founder button (dark text) and the charcoal VC/footer buttons (light text). */
/* Scoped to the OLD inline layout only — role CTAs (.btn-role) drive their own
   column body, so they must not inherit the wrap/gap meant for the inline sub. */
.btn-primary:not(.btn-role):has(.btn-sub) { flex-wrap: wrap; gap: 0.15em 0.35em; }
.btn-sub {
  flex-basis: 100%;
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.72;
  text-align: center;
}

/* Role-first CTAs: the role word leads (serif, large) + a non-color figure cue
   (person vs institution), so skimmers and color-blind users parse role before
   tapping — cuts founder→VC mis-taps. Role BG colors (:136/:141) untouched. */
.btn-role { justify-content: flex-start; text-align: left; gap: 12px; align-items: center; }
.btn-role-fig { flex: none; width: 26px; height: 26px; display: inline-flex; }
.btn-role-fig svg { width: 100%; height: 100%; }
.btn-role-body { display: flex; flex-direction: column; line-height: 1.15; }
.btn-role-word { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.btn-role-action { font-size: 0.82rem; margin-top: 3px; }
.btn-role .btn-sub { flex-basis: auto; text-align: left; margin-top: 2px; }  /* left-align inside the column body */
.btn-primary[data-role="founder"] .btn-role-word { color: #2d2520; }         /* ink on gold */
.btn-primary[data-role="vc"] .btn-role-word { color: #a9c48a; }              /* light sage on charcoal — ~7.8:1, AA/AAA */
.btn-primary[data-role="vc"] .btn-role-fig { color: #a9c48a; }
/* Co-founder = its own door: parchment + terracotta outline (not a gold/charcoal clone). The linked-rings
   mark carries its own stroke colors, so no currentColor dependency. Reads on cream hero + dark closer. */
.btn-role-cofounder { background: #efe7d8; border: 1.5px solid #c65a36; color: #2d2520; }
.btn-role-cofounder .btn-role-word { color: #2d2520; }
.btn-role-cofounder .btn-role-action { color: #8a5a3f; }
/* Modal submit for the co-founder path = terracotta (the co-founder identity). :not(.btn-role) targets the
   modal's plain submit button, NOT the door (which carries .btn-role) — so the door keeps its parchment fill. */
.btn-primary[data-role="cofounder"]:not(.btn-role) { background: #c65a36; color: #fff; }
/* Shared "free to join" line under each CTA group (replaces the per-button .btn-sub). Color per surface:
   muted-dark on the cream hero, muted-light on the dark closer. */
.cta-free { text-align: center; font-size: 0.8rem; color: var(--text-secondary); opacity: .85; margin: 4px auto 0; }
/* Beta-day framing eyebrow (2026-07-14) — sits above the h1 so "the beta is live" is the page's
   posture, not a footnote under the buttons. Sentence case ON PURPOSE: an uppercase letter-spaced
   eyebrow is the marketing register (#10), and this is meant to read like a founder stating a fact.
   Quiet by design — it states, it does not shout; the h1 stays the loudest thing in the hero.
   Terracotta ties it to the brand's one accent without adding a new colour. */
.hero-eyebrow { font-size: 0.85rem; font-weight: 600; color: var(--accent-terracotta); margin: 0 0 0.5rem; }
/* Beta status line under the hero CTAs — muted, rust link to the app (2026-07-09). */
.hero-beta-status { text-align: center; font-size: 0.8rem; color: var(--text-secondary); opacity: .85; margin: 10px auto 0; }
.hero-beta-status a { color: var(--accent-terracotta); font-weight: 600; text-decoration: none; }
.hero-beta-status a:hover { text-decoration: underline; }
.cta-closer .cta-free { color: var(--text-on-dark); opacity: .7; }

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 37, 32, 0.18);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-charcoal);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* ───────────────────────── Navigation ───────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 242, 237, 0.92);
  -webkit-backdrop-filter: saturate(120%);
  backdrop-filter: saturate(120%);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-logo { height: 32px; width: auto; }

/* Sign-in entry to the app (Phase 2c) — quiet text link, pushed right next to the CTA.
   Hidden on live until the public-surface re-audit (remove the `hidden` attr to expose). */
.nav-signin {
  margin-left: auto;
  margin-right: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-decoration: none;
}
.nav-signin:hover { color: var(--text-primary); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  background: var(--accent-charcoal);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 37, 32, 0.18);
}

.nav-cta:focus-visible {
  outline: 2px solid var(--accent-charcoal);
  outline-offset: 2px;
}

.nav-cta-full { display: inline-flex; }
.nav-cta-short { display: none; }

/* ───────────────────────── Hero ───────────────────────── */

.hero {
  text-align: center;
  /* Trimmed so H1 → both secondary links clear one laptop viewport: small shaves across
     several gaps (top pad, CTA pad, link gap) rather than one aggressive cut. */
  padding: 2rem 0 var(--space-6);
}

.hero h1 {
  font-size: 2.25rem;          /* 36px mobile */
  max-width: 16ch;
  margin: 0 auto var(--space-3);
}

.hero-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text-secondary);
  max-width: 38ch;
  margin: 0 auto var(--space-2);   /* tight to the Percy line — was space-4, which left a dead band */
  line-height: 1.4;
}

/* Percy/agent line — the differentiator beat: same serif family, a touch smaller so it
   reads as a distinct quieter beat under the answer (no accent color, earthtone only). */
.hero-percy {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 40ch;
  margin: 0 auto var(--space-3);   /* compressed so H1→CTAs fit one viewport */
  line-height: 1.45;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  max-width: 22rem;
  margin: 0 auto var(--space-2);
}
.hero-cta-group .btn-primary { padding-top: 0.7rem; padding-bottom: 0.7rem; }   /* shave CTA height to win viewport */

.hero-curious-link,
.footer-curious-link {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;          /* kill the <button> UA inset so both links share the left margin */
  margin: 0;
  font-family: var(--font-sans);
}

/* Hero secondary links: dark-brown body color (terracotta reads muddy as thin text on
   cream). No resting underline — the → arrow carries the affordance, and a resting
   underline fused the two links into one ruled block; underline appears on hover.
   The two are separated + tiered: the curious/waitlist button (primary) sits a step
   above the quieter, smaller "What's a perch?" explainer anchor. */
.hero-curious-link {
  color: var(--text-secondary);
  text-decoration: none;
}
button.hero-curious-link { margin-bottom: var(--space-2); }   /* mobile: tight, sits clear above the Safari toolbar (the desktop fold-drop is applied ≥768px only) */
a.hero-curious-link { font-size: 0.875rem; }                  /* explainer reads quieter than the waitlist CTA */

.hero-curious-link:hover,
.footer-curious-link:hover { text-decoration: underline; }

/* Hero two-pane: copy + animated isometric scene.
   Mobile: stacked (copy, then scene below, kept compact to stay above fold).
   Desktop (≥768): two columns, copy left-aligned. */
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.hero-sub-beat { display: inline-block; color: var(--text-primary); font-weight: 600; }

/* Hero sub three-tier hierarchy: question recedes (secondary), answer lands (primary +
   weight, payoff phrases emphasized), Percy pops (terracotta + mark). The eye reads
   STRUCTURE, not a flat paragraph. */
.hero-q { color: var(--text-secondary); }
.hero-a { color: var(--text-primary); font-weight: 500; }
.hero-percy-em { color: var(--accent-terracotta); font-weight: 500; }

/* Percy's mark, inline before "Percy" — a SELF-CONTAINED SVG (one element: terracotta
   head circle + charcoal perch rect) so the pieces can't separate the way the old
   pseudo-element version did. Sized to sit on the text line; head bobs gently (animating
   an SVG CHILD is safe — no orphaning), reduced-motion → static. */
.hero-percy-mark { height: 0.85em; width: auto; vertical-align: -0.1em; margin-right: 0.35em; overflow: visible; }
.hero-percy-mark .hpm-head { fill: var(--accent-terracotta); }
.hero-percy-mark .hpm-perch { fill: var(--accent-charcoal); }
@media (prefers-reduced-motion: no-preference) {
  .hero-percy-mark .hpm-head { animation: heroPercyBob 2s ease-in-out infinite; }
}
@keyframes heroPercyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }

/* Payoff clause set apart: drops to its own line (block) after the em-dash, italic and
   indented — Percy's matter-of-fact clause, then the elevated reward. The indent reads
   as deliberate styling, not an accidental wrap. */
.hero-percy-payoff { display: block; font-style: italic; padding-left: 1.75em; }

.hero-scene {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  overflow: visible;           /* don't clip the zoomed scene at the wrapper */
}

#iso-scene {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;           /* let the camera punch-in grow past the SVG frame
                                  instead of clipping against its own perimeter */
  --zoom: 1.4;                 /* single tunable: zoom factor on "Watch them meet" */
}
/* Camera group: scales around the meeting cluster (viewBox coords) so the
   punch-in frames the conversations instead of a corner. The origin (380,200)
   keeps all four meetings — rooftop (high) through fountain (low) — in frame at
   1.4x. Eases in on .is-zoomed and back out when the class is removed. */
#scene-cam {
  transform-box: view-box;
  transform-origin: 380px 200px;
  transition: transform 0.5s ease;
}
#iso-scene.is-zoomed #scene-cam { transform: scale(var(--zoom)); }

/* Headline accent: the single payoff word, in the founder terracotta token. */
.hl-accent { color: var(--accent-terracotta); }

/* ── Hero polish (2026-07-11): question / answer split ───────────────────────────
   The subtitle is two paragraphs — question, then bold answer — with ~12px of air
   between. That 12px is reclaimed from the answer→Percy gap (was space-2/16px, now
   4px), so the door row below does NOT move: height-neutral by construction. */
.hero-sub-q { margin-bottom: 0.75rem; }   /* 12px air below the question */
.hero-sub-a { margin-bottom: 0.25rem; }   /* 4px to Percy — the 12px reclaimed from 16 */

/* "Watch them meet" — a real, inviting button and the entry to the demo.
   Outlined terracotta so it's prominent but visually subordinate to the
   solid Reserve CTAs (which stay the conversion path). */
.scene-watch {
  display: block;
  margin: var(--space-3) auto 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--accent-terracotta);
  background: none;
  border: 1.5px solid var(--accent-terracotta);
  border-radius: var(--radius-md);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.scene-watch:hover {
  background: var(--accent-terracotta);
  color: var(--text-on-dark);
  transform: translateY(-1px);
}

.scene-watch:focus-visible {
  outline: 2px solid var(--accent-terracotta);
  outline-offset: 2px;
}

.scene-watch[hidden] { display: none; }

/* Animated scene pieces. Opacity is CSS-driven so JS only ever touches the
   SVG transform attribute (no transform/attr conflict). The inline opacity="0"
   on each element keeps them hidden when JS never runs. */
.chat-bubble { opacity: 0; transition: opacity 0.25s ease; }
.chat-bubble.is-on { opacity: 1; }

.outcome-badge { opacity: 0; transition: opacity 0.4s ease; }
.outcome-badge.is-on { opacity: 1; }

/* Steam rising from the café cup sign (opacity-only, staggered per squiggle). */
@keyframes steamRise {
  0%   { opacity: 0; }
  35%  { opacity: 0.7; }
  70%  { opacity: 0.4; }
  100% { opacity: 0; }
}
.steam { animation: steamRise 2.6s ease-in-out infinite; }

/* ───────────────────────── Rant ───────────────────────── */

.rant h2 {
  font-size: 1.875rem;
  max-width: 18ch;
}

.rant-body {
  max-width: 68ch;
}

.rant-body p {
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

.rant-punchline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--accent-terracotta);
  margin-top: var(--space-3);
}

/* ───────────────────────── What AdPerch is ───────────────────────── */

.what-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 40ch;
  margin-bottom: var(--space-6);
}

.what-trio {
  display: grid;
  gap: var(--space-6);
}

.what-item h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.what-item p {
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}

.what-closer {
  margin-top: var(--space-6);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
}

/* ───────────────────────── How it works ───────────────────────── */

/* ===== How it works — illustrated convergence ===== */
.how-illus{ position:relative; max-width:760px; margin:0 auto;
  background:radial-gradient(120% 80% at 50% 42%, #fbf8f2 0%, #efe7da 60%, #e7ddcb 100%);
  border:0.5px solid rgba(45,37,32,0.12); border-radius:14px; overflow:hidden;
  color:var(--accent-charcoal); padding:clamp(20px,4vw,30px) clamp(16px,3vw,28px); }
.how-illus-grid{ position:absolute; inset:0; width:100%; height:100%; opacity:0.05; pointer-events:none; }
.how-illus-title{ position:relative; font-family:var(--font-serif); font-weight:700;
  font-size:clamp(1.5rem,4.5vw,1.75rem); text-align:center; margin:0 0 1.15rem; }

.how-illus-stage{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hi-col{ flex:1; min-width:0; text-align:center; position:relative; z-index:2; }
.hi-col-center{ flex:0.95; z-index:3; }

.hi-figure{ width:32px; height:38px; }
.hi-role{ font-family:var(--font-serif); font-weight:700; font-size:1.45rem; line-height:1; margin-top:2px; }
.hi-role-founder{ color:var(--accent-terracotta); }
.hi-role-vc{ color:var(--accent-sage); }

.hi-steps{ margin-top:14px; display:inline-block; text-align:left; }
.hi-step{ display:flex; align-items:center; gap:9px; }
.hi-step + .hi-step{ margin-top:11px; }
.hi-icon{ width:22px; height:22px; flex:none; }
.hi-spawn-slot{ display:inline-block; width:22px; height:20px; flex:none; }
.hi-step-label{ font-size:0.75rem; color:var(--text-secondary); }

.hi-markglow{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:165px; height:165px; border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,0) 66%);
  animation:hiGlow 6.5s ease-in-out infinite; }
.hi-mark{ position:relative; width:118px; height:auto; display:inline-block; }
.hi-match{ position:relative; font-size:0.72rem; font-weight:700; letter-spacing:0.07em; margin-top:4px; }
.hi-match-sub{ position:relative; font-size:0.66rem; color:var(--text-tertiary); }

.hi-connect{ position:relative; text-align:center; margin:1rem 0 0; padding-top:0.9rem;
  border-top:1px solid rgba(45,37,32,0.1); font-family:var(--font-serif); font-size:1rem; }
.hi-connect em{ font-style:italic; color:var(--text-tertiary); }   /* same size, grey italic */
.hi-connect strong{ color:var(--text-primary); }
/* quiet footnote under the diagram — sits below + lighter than the "get funded" line */
.hi-mode{ text-align:center; margin:0.5rem 0 0; font-size:0.8rem; font-weight:400;
  color:var(--text-tertiary); }

/* flying agents */
.hi-anim{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hi-agent{ position:absolute; width:26px; height:24px; }
.hi-agent svg{ display:block; width:100%; height:100%; }
.hi-scan{ position:absolute; left:50%; top:46%; width:26px; height:26px; border-radius:50%; border:1.5px solid currentColor; }
.hi-agent-f{ color:#70b5df; animation:hiFlyF 6.5s ease-in-out infinite; }
.hi-agent-v{ color:#5bb85f; animation:hiFlyV 6.5s ease-in-out infinite; }
.hi-agent-f .hi-scan{ animation:hiScan 1.5s ease-out infinite; }
.hi-agent-v .hi-scan{ animation:hiScan 1.5s ease-out infinite 0.5s; }

@keyframes hiFlyF{
  0%{ left:6%; top:75%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  8%{ left:6%; top:75%; opacity:1; transform:translate(-50%,-50%) scale(1); }
  58%{ left:46%; top:50%; opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  72%{ left:49%; top:51%; opacity:0; transform:translate(-50%,-50%) scale(.45); }
  100%{ left:6%; top:75%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
}
@keyframes hiFlyV{
  0%{ left:72%; top:75%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
  8%{ left:72%; top:75%; opacity:1; transform:translate(-50%,-50%) scale(1); }
  58%{ left:54%; top:50%; opacity:1; transform:translate(-50%,-50%) scale(1.12); }
  72%{ left:51%; top:51%; opacity:0; transform:translate(-50%,-50%) scale(.45); }
  100%{ left:72%; top:75%; opacity:0; transform:translate(-50%,-50%) scale(.9); }
}
@keyframes hiScan{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:.6; } 100%{ transform:translate(-50%,-50%) scale(2); opacity:0; } }
@keyframes hiGlow{ 0%,38%{ opacity:.4; } 60%{ opacity:1; } 82%,100%{ opacity:.5; } }

/* mini-mark agent pixels — color-cycle like the main mark */
.hi-pix { animation: hiPix 3.2s steps(1) infinite; }  /* per-rect stagger via inline animation-delay */
@keyframes hiPix {
  0%   { fill: #d96d5a; }
  25%  { fill: #e8a04f; }
  50%  { fill: #7d9b6a; }
  75%  { fill: #5a7a8a; }
  100% { fill: #d96d5a; }
}

/* reduced motion: no flight, agents rest at their spots */
@media (prefers-reduced-motion: reduce){
  .hi-agent-f,.hi-agent-v,.hi-scan,.hi-markglow{ animation:none !important; }
  .hi-pix { animation: none !important; }
  .hi-agent-f{ left:6%; top:75%; opacity:1; transform:translate(-50%,-50%); }
  .hi-agent-v{ left:72%; top:75%; opacity:1; transform:translate(-50%,-50%); }
  .hi-markglow{ opacity:.55; }
}

/* mobile: stack, drop the cross-flight, show resting agents at the slots */
@media (max-width:600px){
  .how-illus-stage{ flex-direction:column; gap:18px; }
  /* Keep the flying layer visible, but kill the horizontal CSS keyframe flight —
     JS (initConvergence) drives a rect-based vertical convergence in the column.
     Deleting display:none alone would let hiFlyF/hiFlyV fling the agents sideways
     for a beat before JS takes over. */
  .hi-anim{ display:block; }
  .hi-agent-f, .hi-agent-v{ animation:none; }
  .hi-spawn-founder, .hi-spawn-vc{
    width:22px; height:20px;
    background:no-repeat center/contain;
  }
  /* Static mini-mark: outline triangle + 10-pixel pyramid (no cycle on mobile),
     mirroring the flying agent SVG, so "Spawn agent" still shows the agent. */
  .hi-spawn-founder, .hi-spawn-vc{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M22 5 L39 35 H5 Z' fill='none' stroke='%232d2520' stroke-width='2.5' stroke-linejoin='round'/%3E%3Crect x='20.35' y='13' width='3' height='3' fill='%23d96d5a'/%3E%3Crect x='18.7' y='17.5' width='3' height='3' fill='%23e8a04f'/%3E%3Crect x='22' y='17.5' width='3' height='3' fill='%237d9b6a'/%3E%3Crect x='17.05' y='22' width='3' height='3' fill='%235a7a8a'/%3E%3Crect x='20.35' y='22' width='3' height='3' fill='%23d96d5a'/%3E%3Crect x='23.65' y='22' width='3' height='3' fill='%23e8a04f'/%3E%3Crect x='15.4' y='26.5' width='3' height='3' fill='%237d9b6a'/%3E%3Crect x='18.7' y='26.5' width='3' height='3' fill='%235a7a8a'/%3E%3Crect x='22' y='26.5' width='3' height='3' fill='%23d96d5a'/%3E%3Crect x='25.3' y='26.5' width='3' height='3' fill='%23e8a04f'/%3E%3C/svg%3E"); }

  /* Hero copy: balance the line wraps so no word/phrase strands on its own line.
     Percy line — un-force the payoff block (it's display:block at :384, which forces
     part-1 to wrap to 2 → 3 lines total) so the sentence flows and balances to a
     clean 2 lines, no lone "legwork —". Subtitle — balance each side of the <br> so
     no orphaned "found?". text-wrap:balance degrades gracefully where unsupported. */
  .hero-percy-payoff{ display:inline; padding-left:0; }
  .hero-percy{ text-wrap:balance; }
  /* Subtitle → 2 lines, no lone "found?". balance must live on the block <p> (.hero-sub);
     the prior rule was on .hero-q/.hero-a INLINE spans = no-op. Effective mobile size is
     the BASE 1.25rem — the 1.5rem override is @min-width:768px, so it never applies on a
     phone — so 1.2rem is a genuine reduction (going toward 1.3+ would ADD lines, not drop).
     Tune DOWN (1.1–1.2rem) on device to land 2 lines. */
  .hero-sub{ text-wrap:balance; font-size:1.2rem; }
}

/* mobile + reduced-motion: JS bails and the CSS resting positions are horizontal
   (left:6%/72%), which float wrong in the column — so hide the flying layer and
   let the static step-icons carry it, as they did before the flight was enabled. */
@media (max-width:600px) and (prefers-reduced-motion: reduce){
  .hi-anim{ display:none; }
}

/* ───────────────────────── Unified application / After ───────────────────────── */

.unified p,
.after p {
  max-width: 64ch;
  color: var(--text-secondary);
}

.unified-closer,
.after-closer {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin-top: var(--space-4);
}

/* ───────────────────────── Where this goes (vision) ───────────────────────── */

.vision p {
  max-width: 66ch;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.vision-closer {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: var(--space-4);
}

/* ───────────────────────── Live in the Playground (activity feed) ───────────────────────── */

.playground-live { text-align: center; }

.activity-feed {
  max-width: 600px;
  margin: var(--space-4) auto 0;
  text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  overflow: hidden;
}

.bg-secondary .activity-feed { background: var(--bg-primary); }

.activity-entry {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9375rem;
}

.activity-entry:last-child { border-bottom: 0; }

.activity-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  top: 0.35em;
  background: var(--text-tertiary);
}

.activity-entry[data-role="founder"] .activity-dot { background: var(--accent-terracotta); }
.activity-entry[data-role="vc"] .activity-dot      { background: var(--accent-sage); }
.activity-entry[data-role="mixed"] .activity-dot   { background: var(--accent-gold); }

.activity-text { flex: 1; color: var(--text-primary); }

.activity-time {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.activity-caption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.activity-entry.entering { animation: slideIn 400ms ease-out; }
.activity-entry.leaving  { animation: fadeOut 300ms ease forwards; }

/* ───────────────────────── FAQ ───────────────────────── */

.faq-list {
  margin: var(--space-4) 0 0;
  max-width: 70ch;
}

.faq-item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.faq-item:first-child { border-top: 0; }

.faq-item dt {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.faq-item dd {
  margin: 0;
  color: var(--text-secondary);
}

/* ───────────────────────── Closing CTA ───────────────────────── */

.cta-closer {
  text-align: center;
}

.cta-closer h2 { font-size: 2rem; color: var(--text-on-dark); }

.cta-closer p {
  color: var(--text-on-dark);
  opacity: 0.85;
  margin-bottom: var(--space-4);
}

.cta-closer .hero-cta-group { margin-bottom: 0; }

/* ───────────────────────── Footer ───────────────────────── */

footer.site-footer {
  background: var(--bg-tertiary);
  color: var(--text-on-dark);
  padding: var(--space-6) 0;
  text-align: center;
}

.footer-slogan {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--accent-terracotta);
  max-width: 40ch;
  margin: 0 auto var(--space-4);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.footer-links a {
  color: var(--text-on-dark);
  opacity: 0.8;
  font-size: 0.95rem;
  text-decoration: none;
}

.footer-links a:hover { opacity: 1; text-decoration: underline; }

.footer-curious-link { color: var(--text-on-dark); opacity: 0.8; }

/* "Learn more" crawl-path group — reuses .footer-links anchor styling; adds a quiet
   label and sits above the utility links. Site-wide, so every page links the three landers. */
.footer-learn { align-items: center; margin-bottom: var(--space-2); }
.footer-learn-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-tertiary);
  opacity: 0.9;
}

/* Landing-page cross-links (founder ↔ VC ↔ how-it-works). Body-color anchors read
   cleanly on cream; the → arrow carries the affordance, underline on hover. */
.lander-cross { text-align: center; }
.lander-cross p { margin: 0; color: var(--text-secondary); }
.lander-cross a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.lander-cross a:hover { text-decoration: underline; }
/* Cross-links sitting below other copy in a shared section need top breathing room. */
.lander-cross-spaced { margin-top: var(--space-4); }

.footer-meta {
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

/* ───────────────────────── Modal ───────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}

.modal-overlay[hidden] { display: none; }

.modal-overlay.open { opacity: 1; }

.modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  /* dvh, not vh: the iOS keyboard shrinks the visual viewport but not the layout
     viewport, so vh would let lower fields sit behind the keyboard. */
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(20px);
  transition: transform 300ms ease-out;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.modal-overlay.open .modal { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }

.modal h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
  padding-right: 2rem;
}

.modal-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.modal-form { display: block; }

.modal-form input[type="email"],
.modal-form input[type="text"],
.q-group textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-3);
}
.q-group textarea { resize: vertical; min-height: 4.5rem; margin-bottom: 0; }

/* Location capture: country / state / city on one row (wraps on narrow screens). */
.loc-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.loc-row input[type="text"] { flex: 1 1 7rem; width: auto; margin-bottom: 0; }

.modal-form input:focus,
.q-group textarea:focus {
  outline: none;
  border-color: var(--border-emphasis);
  box-shadow: 0 0 0 3px rgba(45, 37, 32, 0.08);
}

/* Helper line under an opt-in checkbox (e.g. Percy intro) */
.q-help {
  margin: 5px 0 0 24px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-tertiary);
}

.modal-questions { margin-bottom: var(--space-3); }

.q-group { margin-bottom: var(--space-3); }
.q-group[hidden] { display: none; }

/* Single opt-in checkbox (e.g. cofounder match) */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1.4;
}
.check-row input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent-terracotta); }

.q-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.q-hint {
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

/* Pill-style single/multi select groups */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.pill {
  position: relative;
}

.pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill label {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.pill label:hover { border-color: var(--border-emphasis); }

.pill input:checked + label {
  background: var(--accent-charcoal);
  color: var(--text-on-dark);
  border-color: var(--accent-charcoal);
}

.pill input:focus-visible + label {
  outline: 2px solid var(--accent-charcoal);
  outline-offset: 2px;
}

.modal-form .btn-primary { width: 100%; margin-top: var(--space-1); }

.modal-error {
  margin: var(--space-2) 0 0;
  color: var(--accent-terracotta);
  font-size: 0.9rem;
}

.modal-success { text-align: center; padding: var(--space-2) 0; }
.modal-success h3 { font-size: 1.5rem; margin-bottom: var(--space-1); }
.modal-success p { color: var(--text-secondary); margin: 0; }

/* ───────────────────────── Reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary,
  .modal,
  .modal-overlay,
  .activity-entry.entering,
  .activity-entry.leaving,
  .chat-bubble,
  .outcome-badge,
  #scene-cam,
  .steam {
    transition: none !important;
    animation: none !important;
  }
}

/* ───────────────────────── Responsive: tablet (≥640px) ───────────────────────── */

@media (min-width: 640px) {
  .hero-cta-group {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: none;
  }
  .hero-cta-group .btn-primary { flex: 0 1 auto; }
  .nav-cta-short { display: none; }
}

/* ───────────────────────── Responsive: desktop (≥768px) ───────────────────────── */

@media (min-width: 768px) {
  body { font-size: 1.0625rem; }

  .container { padding: 0 var(--space-6); }

  .section { padding: var(--space-16) 0; }

  .section h2 { font-size: 2.5rem; }

  .hero { padding: 2.5rem 0 var(--space-8); }   /* tightened to fit one viewport (this override wins ≥768px) */
  .hero h1 { font-size: 4rem; }       /* ~64px */
  .hero-sub { font-size: 1.5rem; }
  .hero-percy { font-size: 1.25rem; }

  /* Two-column hero: copy left, scene right. */
  .hero-grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
  }
  /* z-index keeps the copy above the scene's leftward overflow when zoomed
     (the scene is a later sibling, so it would otherwise paint over the copy). */
  .hero-copy { flex: 1 1 48%; text-align: left; position: relative; z-index: 1; }
  .hero-copy h1 { font-size: 3rem; max-width: 20ch; margin-left: 0; margin-right: 0; }
  .hero-copy .hero-sub, .hero-copy .hero-percy { margin-left: 0; margin-right: 0; max-width: none; }
  .hero-copy .hero-cta-group { margin-left: 0; margin-right: 0; justify-content: center; flex-wrap: wrap; }   /* center the wrapped 2+1 (Co-founder door centers under Founder/VC), matching the closer group */
  /* Raise the scene to the top of the row so it fills its column and the dead band
     above it is gone. align-self only (grid stays centred) → the copy column, and
     therefore the door row, is untouched. */
  .hero-scene { flex: 1 1 52%; max-width: 560px; align-self: flex-start; }

  /* Desktop-only: drop the two curious links a line below the beta line as one tight
     block so they clear the laptop fold together (mobile keeps its toolbar-safe spacing). */
  .hero-copy button.hero-curious-link { margin-top: var(--space-3); margin-bottom: var(--space-1); }

  .rant h2 { font-size: 2.5rem; }
  .rant-punchline { font-size: 1.75rem; }

  .what-lead { font-size: 1.625rem; }

  .vision-closer { font-size: 2rem; }

  .cta-closer h2 { font-size: 2.5rem; }
}

/* ───────────────────────── Responsive: small phones ───────────────────────── */

@media (max-width: 420px) {
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline-flex; }
  .modal { padding: var(--space-4); }
}

/* Hero scene — mobile-only legibility bump. The outcome labels, chat bubbles, and
   the $ check are tiny on a phone even at the zoomed state; the conversations are
   the whole payoff of "Watch them meet", so make them comfortably readable.
   Desktop sizing is unchanged. (Badge pills auto-size to the bigger text via JS.) */
@media (max-width: 767px) {
  .outcome-badge text { font-size: 22px; }
  .chat-bubble .cb-scale,
  .fig-check {
    transform-box: fill-box;
    transform-origin: center;
  }
  .chat-bubble .cb-scale { transform: scale(1.2); }   /* dots/bubble bigger (was ~0.85) */
  .fig-check { transform: scale(1.4); }                /* the $ check bigger */
}

/* ===== /share page ===== */
.share-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) 0;
}
/* /share: full-height column so footer pins to the viewport bottom
   and content centers in the space between nav and footer */
.page-share { min-height: 100vh; display: flex; flex-direction: column; }
.page-share .share-section { flex: 1 0 auto; }
.page-share .site-footer { flex: 0 0 auto; }
.share-wrap { max-width: 860px; margin: 0 auto; text-align: center; }
.share-mark { display: block; width: 100px; height: auto; margin: 0 auto var(--space-3); }
.share-h1 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.6vw, 1.95rem); line-height: 1.15; color: var(--text-primary); margin: 0 0 var(--space-2); }
@media (min-width: 700px) { .share-h1 { white-space: nowrap; } }
.share-sub { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.55; color: var(--text-secondary); max-width: 70ch; margin: 0 auto var(--space-4); }
.share-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.share-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--border-emphasis); border-radius: 50%; color: var(--text-primary); background: transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.share-ico svg { width: 20px; height: 20px; display: block; }
.share-ico:hover { color: var(--accent-terracotta); border-color: var(--accent-terracotta); transform: translateY(-2px); }
.share-status { min-height: 1.2em; margin: 0 0 var(--space-2); font: 0.9rem var(--font-sans); color: var(--accent-sage); }
.share-copy-wrap { display: flex; justify-content: center; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; color: var(--text-primary); background: transparent; border: 1.5px solid var(--border-emphasis); border-radius: var(--radius-md); padding: 0.7rem 1.2rem; text-decoration: none; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }

/* ===== legal pages (privacy) ===== */
.legal { padding: var(--space-12) 0; }
.legal-wrap { max-width: 680px; margin: 0 auto; }
.legal-wrap h1 { font-family: var(--font-serif); font-size: 2rem; line-height: 1.15; color: var(--text-primary); margin: 0 0 var(--space-1); }
.legal-updated { font: 0.9rem var(--font-sans); color: var(--text-tertiary); margin: 0 0 var(--space-5); }
.legal-wrap h2 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text-primary); margin: var(--space-5) 0 var(--space-1); }
.legal-wrap p { font: 1rem/1.6 var(--font-sans); color: var(--text-secondary); margin: 0 0 var(--space-2); }
.legal-wrap a { color: var(--accent-terracotta); }

/* reservation modal fine print */
.modal-fineprint { font: 0.8125rem/1.45 var(--font-sans); color: var(--text-tertiary); text-align: center; margin: var(--space-2) 0 0; }
.modal-fineprint a { color: var(--text-secondary); text-decoration: underline; }
.share-btn:hover { border-color: var(--accent-terracotta); transform: translateY(-1px); }
.share-copy.is-copied { border-color: var(--accent-sage); color: var(--accent-sage); }

/* ════════════════════════════════════════════════════════════════════
   SEE PERCY WORK — auto-playing product tour (real Percy UI replica)
   Markup/classes mirror the app (app/site). Everything scoped under
   .percy-tour. Earthtone, flat — no glass (AdPerch visual system).
   ════════════════════════════════════════════════════════════════════ */
/* Demo section trim — tighter than the global 8rem section pad + compressed internal
   gaps so the demo (near-)fits one viewport WITHOUT shrinking the board (readable cards
   win over forcing fit; a content-heavy demo may scroll a hair). */
.percy-tour.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.percy-tour .tour-head { max-width: 720px; margin: 0 auto 10px; text-align: center; }
.percy-tour .tour-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-terracotta); }
.percy-tour .tour-head h2 { margin: 0 0 6px; font-size: 1.9rem; }
.percy-tour .tour-sub { color: var(--text-secondary); font-size: 16px; line-height: 1.6; margin: 0 auto; }
.percy-tour .tour-sub strong { color: var(--text-primary); }
.percy-tour .tour-demo-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 11px; }
/* "See Percy work" lead-in — pays off the Meet-Percy intro above, introduces the proof. */
.percy-tour .tour-leadin { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto 10px; }
.percy-tour .tour-leadin-label { font-family: var(--font-serif); font-size: 17px; color: var(--text-primary); }
.percy-tour .tour-leadin-label::after { content: " \2193"; color: var(--accent-terracotta); }

/* The "app window" — board on a light panel, sitting on the section's bg-secondary. */
.percy-tour .tour-stage { position: relative; max-width: 1120px; margin: 0 auto; }
.percy-tour .tour-ui { display: flex; gap: 0; background: var(--bg-primary); border: 1px solid var(--border-emphasis);
  border-radius: 12px; overflow: hidden; min-height: 360px; transition: opacity .3s ease; }
.percy-tour .tour-board-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.percy-tour .tour-founderbar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.percy-tour .tour-fb-name { font-family: var(--font-serif); font-size: 18px; font-weight: 500; }
.percy-tour .tour-fb-co { font-size: 13px; color: var(--text-secondary); }
.percy-tour .tour-fb-raise { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-terracotta); margin-left: auto; }

/* Board + columns + cards (mirror app .board/.col/.card). */
.percy-tour .board { display: flex; gap: 12px; padding: 16px 18px 20px; overflow-x: auto; flex: 1 1 auto; }
.percy-tour .col { flex: 0 0 150px; min-width: 150px; display: flex; flex-direction: column; background: var(--bg-secondary); border-radius: 8px; padding: 11px 9px 9px; }
.percy-tour .col-head { display: flex; align-items: baseline; gap: 8px; padding: 0 5px 9px; }
.percy-tour .col-head .name { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.percy-tour .col-head .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.percy-tour .col-cards { display: flex; flex-direction: column; gap: 8px; }
.percy-tour .col-empty { border: 1px dashed var(--border-subtle); border-radius: 4px; padding: 14px 8px; text-align: center; color: var(--text-tertiary); font-size: 12px; }
.percy-tour .card { background: #fff; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-sage); border-radius: 4px;
  padding: 10px 11px 9px; text-align: left; width: 100%; transition: box-shadow .18s, border-color .18s, transform .18s; }
.percy-tour .card .firm { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.percy-tour .card .check { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.percy-tour .card .last-event { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-subtle); font-size: 11.5px; color: var(--text-tertiary);
  display: flex; justify-content: space-between; gap: 8px; }
.percy-tour .card .last-event .when { font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; }
/* THE highlight — a chip lights its source card. */
.percy-tour .card.lit { border-color: var(--accent-terracotta); border-left-color: var(--accent-terracotta);
  box-shadow: 0 0 0 3px var(--accent-terracotta-soft, rgba(198,90,54,0.10)); transform: translateY(-1px); }

/* Percy panel (mirror app .percy-side). */
.percy-tour .tour-percy { flex: 0 0 332px; display: flex; flex-direction: column; background: var(--bg-primary); border-left: 1px solid var(--border-emphasis); }
.percy-tour .percy-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 13px; border-bottom: 1px solid var(--border-subtle); }
.percy-tour .percy-name { font-family: var(--font-serif); font-size: 19px; font-weight: 500; }
.percy-tour .badge-beta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--text-tertiary);
  border: 1px solid var(--border-emphasis); border-radius: 4px; padding: 2px 7px; margin-left: auto; }
.percy-tour .percy-scroll { flex: 1 1 auto; padding: 18px 20px; min-height: 200px; }
.percy-tour .tour-idle { font-size: 13.5px; color: var(--text-tertiary); font-style: italic; }
.percy-tour .asked { font-size: 12.5px; color: var(--text-tertiary); margin: 0 0 13px; }
.percy-tour .asked strong { color: var(--text-secondary); font-weight: 600; }
.percy-tour .stmt { margin-bottom: 16px; animation: tourRise .4s ease both; }
.percy-tour .stmt p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.percy-tour .stmt p em { font-style: normal; color: var(--accent-terracotta); font-weight: 600; }
.percy-tour .stmt.inference p { color: var(--text-secondary); }
.percy-tour .infer-note { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; border-left: 2px dashed var(--border-emphasis); padding: 1px 0 1px 9px; margin-top: 4px; }

/* ── 'agents' beat — agent-to-agent exchange. Agent-color motif: founder-agent
   terracotta, VC-agent sage (CLAUDE.md #11). Flat, no glass. ── */
.percy-tour .tour-agents { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.percy-tour .agent-line { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.percy-tour .agent-line.from-founder { align-self: flex-end; align-items: flex-end; }
.percy-tour .agent-line.from-vc { align-self: flex-start; align-items: flex-start; }
.percy-tour .agent-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--text-tertiary); }
.percy-tour .agent-bubble { font-size: 13px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--border-subtle); }
.percy-tour .from-founder .agent-bubble { background: var(--accent-terracotta-soft, rgba(198,90,54,0.10)); border-color: rgba(198,90,54,0.30); border-bottom-right-radius: 3px; }
.percy-tour .from-vc .agent-bubble { background: var(--accent-sage-soft, rgba(125,148,113,0.14)); border-color: rgba(125,148,113,0.34); border-bottom-left-radius: 3px; }

/* ── 'briefing' beat — the morning digest card. ── */
.percy-tour .tour-briefing { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); padding: 15px 16px 13px; }
.percy-tour .tb-head { font-family: var(--font-serif); font-size: 16px; line-height: 1.35; margin-bottom: 11px; }
.percy-tour .tb-item { display: flex; gap: 9px; align-items: baseline; font-size: 13px; line-height: 1.5; padding: 4px 0; }
.percy-tour .tb-item .tb-text em { font-style: normal; color: var(--accent-terracotta); font-weight: 600; }
.percy-tour .tb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; align-self: center; background: var(--text-tertiary); }
.percy-tour .tone-fit .tb-dot { background: var(--accent-sage); }
.percy-tour .tone-maybe .tb-dot { background: var(--accent-gold); }
.percy-tour .tone-pass .tb-dot { background: var(--text-tertiary); }
.percy-tour .tb-foot { font-size: 11.5px; color: var(--text-tertiary); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }

/* ── 'apply' beat — invite + the Apply action; the card lands on the board. ── */
.percy-tour .tour-invite { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 92%; }
.percy-tour .tour-apply-actions { margin-top: 16px; }
.percy-tour .tour-apply-btn { font-size: 14px; padding: 11px 22px; transition: background .2s, color .2s; }
.percy-tour .tour-apply-btn.applied { background: var(--accent-sage); color: var(--text-on-dark, #f5f2ed); cursor: default; }
.percy-tour .card-landing { animation: cardLand .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cardLand { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
.percy-tour .cites { display: flex; flex-wrap: wrap; gap: 6px; }
.percy-tour .chip { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.percy-tour .chip .sep { opacity: .5; padding: 0 3px; }
.percy-tour .chip.static { cursor: default; }
.percy-tour .chip:hover, .percy-tour .chip.on { color: var(--accent-terracotta); border-color: var(--accent-terracotta); background: var(--accent-terracotta-soft, rgba(198,90,54,0.10)); }

/* Percy mark (dot perched on a bar) — ported from the app. */
.percy-tour .percy-mark { width: 24px; height: 24px; position: relative; flex: 0 0 24px; }
.percy-tour .percy-mark::before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-terracotta); left: 50%; transform: translateX(-50%); top: 3px; }
.percy-tour .percy-mark::after { content: ""; position: absolute; width: 20px; height: 3px; border-radius: 2px; background: var(--accent-charcoal); left: 50%; transform: translateX(-50%); bottom: 4px; }

/* ── Micro-animations (terracotta only, CLAUDE.md #11). Gated to no-preference so
   reduced-motion gets the static end-state — still dot, statically-lit card. The JS
   also no-ops the class toggles under reduce (belt + suspenders). ── */
@media (prefers-reduced-motion: no-preference) {
  /* Percy "thinking" — the dot breathes (not blinks) while the answer settles. */
  .percy-tour .percy-mark.thinking::before { animation: percyThink 1s ease-in-out infinite; }
  /* Source card — a soft terracotta halo pulses 3 breaths when it lights, then rests on .lit. */
  .percy-tour .card.lit.pulse { animation: cardPulse 1.2s ease-in-out 3; }
}
@keyframes percyThink {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198, 90, 54, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(198, 90, 54, 0.18); }
}

/* Live composition — Percy's answer types out word-by-word (opacity-only so wrapping is
   natural; <em> emphasis preserved), with a blinking text caret while composing. */
@media (prefers-reduced-motion: no-preference) {
  .percy-tour .stmt .w, .percy-tour .asked .w { opacity: 0; animation: wordFade .26s ease forwards; }
  .percy-tour .caret { animation: caretBlink 1.05s step-end infinite; }
  /* The citation chip stays hidden until the answer settles, then fades in with it. */
  .percy-tour .chip { transition: opacity .3s ease; }
  .percy-tour .chip.pending { opacity: 0; pointer-events: none; }
}
@keyframes wordFade { to { opacity: 1; } }
.percy-tour .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent-terracotta); border-radius: 1px; }
@keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Focus spotlight — while Percy cites a card, that card stays sharp + lit; the rest of the
   board dims (~45% opacity, still visible — secondary, not blacked out) and softly blurs,
   so the eye lands on the active card. Replaces the old zoom (which scaled the frame
   without directing focus). The static dim applies under reduced-motion too; only the
   transition (the glide as focus moves card→card) is motion-gated. */
.percy-tour .board.has-focus .card:not(.lit),
.percy-tour .board.has-focus .col-head,
.percy-tour .board.has-focus .col-empty { opacity: .45; filter: blur(1.5px); }
@media (prefers-reduced-motion: no-preference) {
  .percy-tour .board .card,
  .percy-tour .board .col-head,
  .percy-tour .board .col-empty { transition: opacity .4s ease, filter .4s ease; }
}

/* Card slide — the cited card re-enters its column from the left (progress direction) on
   a "moved" beat. Ease-out, no overshoot — it lands, doesn't bounce. */
@media (prefers-reduced-motion: no-preference) {
  .percy-tour .card.card-moved { animation: cardMove .55s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes cardMove { from { opacity: .35; transform: translateX(-34px); } to { opacity: 1; transform: none; } }

/* Sequenced agent chat — each bubble slides in from its own side (founder right, VC left),
   one after another (~750ms apart), like a live conversation. */
@media (prefers-reduced-motion: no-preference) {
  .percy-tour .agent-line.agent-in { opacity: 0; }
  .percy-tour .agent-line.agent-in.from-founder { animation: agentInRight .42s ease forwards; }
  .percy-tour .agent-line.agent-in.from-vc { animation: agentInLeft .42s ease forwards; }
}
@keyframes agentInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes agentInLeft { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* Beat narration + progress + controls. */
.percy-tour .tour-kicker { text-align: center; font-family: var(--font-serif); font-size: 19px; color: var(--text-primary); min-height: 1.6em; margin: 12px 0 4px; transition: opacity .2s; }
.percy-tour .tour-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.percy-tour .tour-dots { display: flex; gap: 7px; }
.percy-tour .tour-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--border-emphasis); transition: width .2s, background .2s; }
.percy-tour .tour-dot.on { width: 20px; background: var(--accent-terracotta); }
.percy-tour .tour-ctrl { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  background: none; border: 1px solid var(--border-emphasis); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.percy-tour .tour-ctrl:hover { border-color: var(--accent-charcoal); color: var(--text-primary); }

/* ── Close = Percy's final answer. The board recedes (dim + scale + light blur) to a
   living backdrop; Percy's answer card pushes forward with the pitch + a receipt chip.
   GPU-friendly: opacity/transform are animated; blur is a small static end-state. ── */
.percy-tour.tour-finished .tour-ui { opacity: .45; transform: scale(.97); filter: blur(3px);
  transition: opacity .5s ease, transform .5s ease, filter .5s ease; pointer-events: none; }
/* Hide the play/dots foot at the close (the in-card Replay takes over) so it doesn't
   show through the scrim. */
.percy-tour.tour-finished .tour-foot { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.percy-tour .tour-stage .tour-close:not([hidden]) { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(245, 242, 237, 0.40); border-radius: 12px; }
/* The forward answer card — solid, elevated (shadow ≠ glass), camera-push-in. */
.percy-tour .tour-final-answer { width: 100%; max-width: 480px; text-align: left; background: var(--bg-primary);
  border: 1px solid var(--border-emphasis); border-radius: 12px; padding: 20px 24px 18px;
  box-shadow: 0 16px 48px rgba(45, 37, 32, 0.20); animation: tourPush .5s cubic-bezier(.2, .7, .2, 1) both; }
.percy-tour .tour-final-answer .percy-head { padding: 0 0 12px; margin-bottom: 14px; }
.percy-tour .tour-final-answer .stmt { animation: none; margin-bottom: 16px; }
.percy-tour .tour-final-headline { font-family: var(--font-serif); font-size: 25px; line-height: 1.25; margin: 0 0 8px; }
.percy-tour .tour-final-headline em { font-style: normal; color: var(--accent-terracotta); }
.percy-tour .tour-final-sub { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 11px; }
.percy-tour .tour-final-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.percy-tour .tour-close-cta { font-size: 15.5px; padding: 13px 26px; }
.percy-tour .tour-close-foot { font-size: 12.5px; color: var(--text-tertiary); margin: 2px 0 0; }
.percy-tour .tour-vc-link { background: none; border: none; color: var(--accent-terracotta); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 0; }
/* Persistent replay — a circular-arrow icon-button in the panel's top-right corner (the
   universal restart affordance; available anytime, incl. mid-tour and over the close).
   Not an X — there's nothing behind the demo to dismiss to. */
.percy-tour .tour-replay-corner { position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--accent-terracotta);
  background: rgba(198, 90, 54, 0.10); border: 1px solid var(--accent-terracotta); border-radius: 999px;
  cursor: pointer; box-shadow: 0 1px 3px rgba(45, 37, 32, 0.10);
  transition: background-color .15s, color .15s, transform .15s; }
.percy-tour .tour-replay-corner:hover { background: var(--accent-terracotta); color: var(--bg-primary); transform: scale(1.06); }
/* The display:flex above overrides the UA [hidden] rule, so the JS gate (hidden until the
   close beat) had no visual effect — the ↻ showed the whole tour. Honour [hidden] explicitly
   (same companion pattern as .scene-watch[hidden] / .modal-overlay[hidden] / .q-group[hidden]). */
.percy-tour .tour-replay-corner[hidden] { display: none; }
@keyframes tourPush { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }

@keyframes tourRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Founder / VC perspective toggle (tab pair above the demo). Neutral charcoal pill for the
   active tab — deliberately NOT terracotta/sage, which carry the agent-color meaning. ── */
.percy-tour .tour-toggle { display: flex; gap: 0; width: max-content; margin: 0 auto 16px; padding: 3px;
  background: var(--bg-primary); border: 1px solid var(--border-emphasis); border-radius: 999px; }
.percy-tour .tour-tab { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-secondary);
  background: none; border: none; border-radius: 999px; padding: 7px 22px; cursor: pointer; transition: background-color .18s, color .18s; }
.percy-tour .tour-tab:hover { color: var(--text-primary); }
.percy-tour .tour-tab.is-active { color: var(--bg-primary); background: var(--accent-charcoal); }
.percy-tour .tour-tab:focus-visible { outline: 2px solid var(--accent-terracotta); outline-offset: 2px; }

/* Close copy is perspective-specific: two variants live in the DOM, the active one shown via
   the section's data-persp (set by demo-tour mount). Default (no attr) → founder. */
.percy-tour .tour-close-variant { display: none; }
.percy-tour[data-persp="vc"] .tour-close-variant.cv-vc { display: block; }
.percy-tour[data-persp="founder"] .tour-close-variant.cv-founder,
.percy-tour:not([data-persp]) .tour-close-variant.cv-founder { display: block; }
.percy-tour .tour-final-sub em { font-style: normal; color: var(--accent-terracotta); font-weight: 600; }

/* Responsive — stack the panel under the board on narrow screens. */
@media (max-width: 920px) {
  .percy-tour .tour-ui { flex-direction: column; }
  .percy-tour .tour-percy { flex: none; border-left: none; border-top: 1px solid var(--border-emphasis); }
  .percy-tour .percy-scroll { min-height: 150px; }
  /* Phone: the stacked board behind is busier — dim it harder + lighter blur so it
     recedes cleanly and Percy's answer + CTA stay legible. */
  .percy-tour.tour-finished .tour-ui { opacity: .3; filter: blur(2px); }
  .percy-tour .tour-final-headline { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .percy-tour .card, .percy-tour .stmt, .percy-tour .tour-dot,
  .percy-tour .agent-line, .percy-tour .tb-item, .percy-tour .card-landing, .percy-tour .tour-apply-btn { transition: none; animation: none; }
  /* Same final composition (board receded, Percy forward), no motion/blur. */
  .percy-tour.tour-finished .tour-ui { transition: none; filter: none; opacity: .4; }
  .percy-tour .tour-final-answer { animation: none; }
}