/* ============================================================
   fyv.ai design system tokens, scoped by [data-variant].
   Variant A = dark-dominant (one-pager extension).
   Variant B = white-dominant (brand-colors.docx light-mode canon).
   ============================================================ */

/* Shared brand palette. locked, identical in both variants */
:root {
  --fyv-purple:       #7C3AED;
  --fyv-purple-deep:  #5B21B6;
  --fyv-violet:       #A78BFA;
  --fyv-indigo:       #6366F1;
  --fyv-blue:         #3B82F6;
  --fyv-gradient:         linear-gradient(135deg, #7C3AED, #6366F1, #3B82F6);
  --fyv-gradient-reverse: linear-gradient(135deg, #3B82F6, #6366F1, #7C3AED);
  --fyv-teal:   #22D3EE;
  --fyv-green:  #10B981;
  --fyv-amber:  #F59E0B;
  --fyv-red:    #EF4444;
}

/* ── Variant A: dark-dominant ───────────────────────────── */
[data-variant="dark"] {
  --bg:        #080c16;
  --surface:   #0f1629;
  --raised:    #162040;
  --border:    #1e2d4a;
  --border-2:  #2a3a5c;
  --text:      #F0F2F7;
  --text-body: #C9D1E0;
  --text-sec:  #8593A8;
  --text-dim:  #4A5A78;

  --pill-bg:     rgba(34,211,238,0.08);
  --pill-border: rgba(34,211,238,0.25);
  --pill-text:   #22D3EE;

  --atmosphere:
    radial-gradient(ellipse 55% 35% at 80% 6%,  rgba(124,58,237,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 5% 90%,  rgba(59,130,246,0.06) 0%, transparent 60%);

  --hairline-soft: rgba(255,255,255,0.04);
  --wave-mid:    rgba(124,58,237,0.55);
  --wave-tail:   rgba(124,58,237,0.10);
  --wave-bar:    rgba(167,139,250,0.65);
  --peak-glow:   0 0 12px rgba(245,158,11,0.55);
  --cta-text:    #FFFFFF;
}

/* ── Variant B: white-dominant ──────────────────────────── */
[data-variant="light"] {
  --bg:        #FFFFFF;
  --surface:   #F5F5F7;
  --raised:    #EEEEF0;
  --border:    #D1D5DB;
  --border-2:  #B5BAC4;
  --text:      #1A1A2E;
  --text-body: #374151;
  --text-sec:  #6B7280;
  --text-dim:  #9CA3AF;

  --pill-bg:     rgba(124,58,237,0.06);
  --pill-border: rgba(124,58,237,0.22);
  --pill-text:   #5B21B6;

  --atmosphere:
    radial-gradient(ellipse 55% 35% at 80% 6%, rgba(124,58,237,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 5% 90%, rgba(59,130,246,0.04) 0%, transparent 60%);

  --hairline-soft: rgba(15,22,41,0.04);
  --wave-mid:    rgba(91,33,182,0.85);
  --wave-tail:   rgba(91,33,182,0.10);
  --wave-bar:    rgba(91,33,182,0.55);
  --peak-glow:   0 1px 0 rgba(245,158,11,0.0);
  --cta-text:    #FFFFFF;
}

/* ============================================================
   Surface chrome. applied to the root .fyv-surface in each artboard
   ============================================================ */
.fyv-surface {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text-body);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  isolation: isolate;
}

.fyv-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--atmosphere);
  pointer-events: none;
  z-index: 0;
}

.fyv-surface > * { position: relative; z-index: 1; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 56px;
}

/* ============================================================
   Type system
   ============================================================ */
.serif       { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.serif-i     { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-style: italic; }
.mono        { font-family: 'JetBrains Mono', monospace; }

h1.display {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 24px;
  text-wrap: balance;
}
h1.display .grad {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
h2.section {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 12px;
}
h3.card-title {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.003em;
}
.body {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 62ch;
}
.subline {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 52ch;
}
.meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sec);
}

/* ============================================================
   Pill / chip
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pill-text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  font-family: 'Instrument Sans', sans-serif;
}
.pill .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.pill.dim {
  color: var(--text-sec);
  background: var(--hairline-soft);
  border-color: var(--border);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  letter-spacing: 0;
  text-decoration: none;
}
.btn .chev {
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn:hover .chev { transform: translateX(3px); }
.btn-primary {
  background: var(--fyv-purple);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 6px 18px rgba(124,58,237,0.25);
}
.btn-primary:hover { background: var(--fyv-purple-deep); }
.btn-secondary {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text);
}
[data-variant="light"] .btn-secondary { color: var(--text); }
.btn-secondary:hover { background: var(--raised); }
.btn-text {
  background: transparent;
  color: var(--text);
  padding: 6px 0;
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.topbar .left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar .logomark {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.topbar .anchor {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-sec);
  padding-left: 14px;
  border-left: 1px solid var(--border);
}
.topbar nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.topbar nav a {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text-body);
  text-decoration: none;
}
.topbar nav a.active {
  color: var(--text);
  font-weight: 500;
  position: relative;
}
.topbar nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--fyv-gradient);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding: 88px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.hero .pills-row {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}
.hero h1.display { max-width: 18ch; }

/* Signal preview card (hero right) */
.signal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--hairline-soft) inset;
}
.signal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(124,58,237,0.55), rgba(59,130,246,0.18) 60%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.signal-card .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 14px;
}
.signal-card .head .live {
  display: inline-flex; align-items: center; gap: 7px; color: var(--fyv-teal);
}
.signal-card .head .live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fyv-teal); box-shadow: 0 0 8px var(--fyv-teal);
  animation: signal-live-blink 1.5s ease-in-out infinite;
}
@keyframes signal-live-blink {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px var(--fyv-teal); }
  45%      { opacity: 0.25; box-shadow: 0 0 2px  var(--fyv-teal); }
  60%      { opacity: 0.25; box-shadow: 0 0 2px  var(--fyv-teal); }
}
@media (prefers-reduced-motion: reduce) {
  .signal-card .head .live .dot { animation: none; }
}
.signal-card .call {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 2px;
}
.signal-card .call .ticker {
  color: var(--fyv-violet);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; margin-right: 8px;
}
[data-variant="light"] .signal-card .call .ticker { color: var(--fyv-purple-deep); }
.signal-card .call-sub {
  font-size: 0.76rem;
  color: var(--text-sec);
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.signal-card .gauge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.signal-card .score {
  font-family: 'DM Serif Display', serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.signal-card .score-sub {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
}
.signal-card .meter-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--hairline-soft);
  overflow: hidden;
  margin-bottom: 8px;
}
[data-variant="light"] .signal-card .meter-track { background: var(--raised); }
.signal-card .meter-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 56%;
  background: var(--fyv-gradient);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.signal-card .score {
  font-family: 'DM Serif Display', serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.4s ease;
}
.signal-card .meter-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.64rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.signal-card .meter-labels .active { color: var(--fyv-amber); }
.signal-card .flags-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin: 6px 0 10px;
}
.signal-card .flag {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.signal-card .flag:last-child { border-bottom: none; }
.signal-card .flag.active {
  background: rgba(34,211,238,0.06);
  box-shadow: inset 2px 0 0 var(--fyv-teal);
  padding-left: 8px; margin-left: -8px;
}
[data-variant="light"] .signal-card .flag.active { background: rgba(34,211,238,0.10); }
.signal-card .flag .ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-sec);
}
.signal-card .flag .label { color: var(--text-body); }
.signal-card .flag .label b { color: var(--text); font-weight: 500; }
.signal-card .flag .sc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--fyv-amber);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Polish pass. Scroll reveal, hover enhancements, ambient motion
   ============================================================ */

/* Scroll reveal: elements with [data-reveal] fade + rise into view */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Sticky-nav scroll indicator. Hairline gradient bar fades in once
   the user has scrolled past the hero. */
.site-nav-host {
  position: sticky;
  top: 0;
}
.site-nav-host::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--fyv-gradient);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.site-nav-host.scrolled-past::after { opacity: 0.55; }

/* "Find your Voice" gradient shimmer. Slow continuous gradient drift */
@keyframes brand-moment-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.brand-moment-text {
  background: linear-gradient(120deg, #7C3AED 0%, #6366F1 25%, #3B82F6 50%, #6366F1 75%, #7C3AED 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-moment-shimmer 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .brand-moment-text { animation: none; }
}

/* Prong card + inter-prong card hover glow. Soft brand-tinted shadow */
.prong { transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease; }
.prong:hover {
  box-shadow: 0 14px 32px rgba(124, 58, 237, 0.10), 0 4px 8px rgba(99, 102, 241, 0.06);
}
.interprong-card { transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease; }
.interprong-card:hover {
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.10), 0 4px 8px rgba(99, 102, 241, 0.06);
}

/* Pattern card hover. Gradient stripe reveal at top edge */
.pattern-grid.three-col .pattern-card {
  position: relative;
}
.pattern-grid.three-col .pattern-card .stripe-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fyv-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;
}
.pattern-grid.three-col .pattern-card:hover .stripe-accent { transform: scaleX(1); }

/* Hero graphic slow drift. 30s rotation on the wrappers,
   layered with the existing breathing transform on the img. */
@keyframes hero-graphic-drift {
  0%, 100% { rotate: -0.7deg; }
  50%      { rotate: 0.7deg; }
}
.agent-silhouette,
.works-blueprint {
  animation: hero-graphic-drift 30s ease-in-out infinite;
  will-change: rotate;
}
@media (prefers-reduced-motion: reduce) {
  .agent-silhouette,
  .works-blueprint { animation: none; rotate: 0deg; }
}

/* Pillar number-badge entrance pulse. Fires once when section is revealed */
@keyframes pillar-num-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
}
.pillar .pill-num {
  border-radius: 999px;
  padding: 4px 10px 4px 0;
}
[data-reveal].is-visible .pillars > .pillar:nth-child(1) .pill-num { animation: pillar-num-pulse 1.4s ease-out 0.25s 1 both; }
[data-reveal].is-visible .pillars > .pillar:nth-child(2) .pill-num { animation: pillar-num-pulse 1.4s ease-out 0.45s 1 both; }
[data-reveal].is-visible .pillars > .pillar:nth-child(3) .pill-num { animation: pillar-num-pulse 1.4s ease-out 0.65s 1 both; }
[data-reveal].is-visible .pillars > .pillar:nth-child(4) .pill-num { animation: pillar-num-pulse 1.4s ease-out 0.85s 1 both; }

/* Closing CTA gradient sweep entry */
.early-access { position: relative; }
.cta-sweep-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fyv-gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(0.42, 0, 0.58, 1) 0.2s;
  pointer-events: none;
  border-radius: 18px 18px 0 0;
}
[data-reveal].is-visible .cta-sweep-bar { transform: scaleX(1); }

/* Hero headline subline kerning tighten at display scale */
.home-hero .hero-display-2,
.home-hero h1.hero-display {
  letter-spacing: -0.022em;
}

/* AgentSilhouette. Static constellation graphic for the fyvAgents hero.
   Embeds the externally-authored agent-silhouette.svg asset large in
   the right column. No motion, no overlay. Composition only. The
   parent .prong-hero-agents widens the right column from the default
   1.2fr/1fr split so the image has room to grow. */
.prong-hero.prong-hero-agents {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
}
.prong-hero.prong-hero-works {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 48px;
}

/* WorksBlueprint. Same composition slot pattern as .agent-silhouette
   on the fyvAgents hero. SVG carries its own draw-on + travelling
   amber pulses; the wrapper handles position + breathing. */
.works-blueprint {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 0;
}
.works-blueprint img {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  animation: works-blueprint-breathe 5.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes works-blueprint-breathe {
  0%, 100% { transform: translate(28px, -40px) scale(1); }
  50%      { transform: translate(28px, -40px) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .works-blueprint img {
    animation: none;
    transform: translate(28px, -40px);
  }
}
.agent-silhouette {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 0;
  gap: 14px;
}
.agent-silhouette img {
  width: 100%;
  max-width: 760px;
  height: auto;
  display: block;
  /* Compose translate (column position) with a very subtle breathing
     scale on a 5.5s eased loop. The figure feels alive without
     announcing motion. */
  animation: agent-silhouette-breathe 5.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes agent-silhouette-breathe {
  0%, 100% { transform: translate(28px, -40px) scale(1); }
  50%      { transform: translate(28px, -40px) scale(1.012); }
}
.agent-silhouette-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-sec);
  opacity: 0.72;
  transform: translate(28px, -32px);
}
@media (prefers-reduced-motion: reduce) {
  .agent-silhouette img {
    animation: none;
    transform: translate(28px, -40px);
  }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .prong-hero.prong-hero-agents {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 40px;
  }
  @keyframes agent-silhouette-breathe-md {
    0%, 100% { transform: translate(20px, -28px) scale(1); }
    50%      { transform: translate(20px, -28px) scale(1.012); }
  }
  .agent-silhouette img {
    animation: agent-silhouette-breathe-md 5.5s ease-in-out infinite;
  }
  .agent-silhouette-caption { transform: translate(20px, -24px); }
}
@media (max-width: 980px) {
  .prong-hero.prong-hero-agents {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .agent-silhouette { padding: 0; }
  .agent-silhouette img {
    max-width: 420px;
    animation: none;
    transform: none;
  }
  .agent-silhouette-caption { transform: none; }
}

/* ============================================================
   Waveform band (under hero)
   ============================================================ */
.waveband {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.waveband .topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.waveband .lead {
  font-size: 0.98rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.waveband .lead .topic {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
}
.waveband .right-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-sec);
  letter-spacing: 0.04em;
}
.waveband .right-meta b { color: var(--fyv-amber); font-weight: 600; }
.waveband .canvas,
.brand-band .canvas {
  position: relative;
  height: 132px;
  border-radius: 10px;
  overflow: visible;
}
.waveband svg,
.brand-band svg { width: 100%; height: 100%; display: block; }
.waveband .caption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-sec);
  font-style: italic;
  max-width: 64ch;
  line-height: 1.5;
}

/* Waveform HTML axis (labels positioned below SVG so they don't stretch) */
.wave-axis {
  position: relative;
  height: 22px;
  margin-top: 6px;
}
.wave-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.wave-axis-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-sec);
  white-space: nowrap;
  display: inline-block;
  padding-top: 2px;
}

/* Animated waveform: the recording itself scrolls left-to-right as if
   playing back. Two identical tiles side-by-side translate by exactly
   one viewBox width and snap back, looping seamlessly. Peak markers
   ride along with the wave (they're part of the recording) and glow
   gently so they stay legible as they pass through. */
@keyframes wf-scroll-translate {
  from { transform: translateX(0); }
  to   { transform: translateX(-1000px); }
}
.canvas-scroll .wf-scroll {
  animation-name: wf-scroll-translate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  will-change: transform;
}
@keyframes wf-marker-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(245,158,11,0.35)); }
  50%      { filter: drop-shadow(0 0 5px rgba(245,158,11,0.65)); }
}
.canvas-scroll .wf-marker {
  animation: wf-marker-glow 2.4s ease-in-out infinite;
  transform-box: fill-box;
}
@media (prefers-reduced-motion: reduce) {
  .canvas-scroll .wf-scroll,
  .canvas-scroll .wf-marker { animation: none; }
}

/* ============================================================
   Prong cards (homepage row of three)
   ============================================================ */
.prongs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.prong {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  min-height: 320px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  color: inherit;
}
.prong::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fyv-gradient);
  opacity: 0.9;
}
.prong:hover {
  background: var(--raised);
  transform: translateY(-2px);
  border-color: var(--border-2);
}
.prong .name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem;
  color: var(--text);
  line-height: 1;
}
.prong .name .accent {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.prong .descriptor {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.45;
  font-weight: 500;
  flex: 1;
}
.prong .subline-s {
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.5;
}
.prong .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.prong .cta .arrow {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.prong .mini-motif {
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  opacity: 0.85;
}
.prong .mini-motif span {
  display: block;
  width: 3px;
  border-radius: 1px;
  background: var(--wave-bar);
}

/* Animated bar wave: each bar pulses on its own delay/duration, staggered
   left-to-right so the row reads as a moving sound wave. Hovering a
   prong card accelerates the pulse for a small interactive payoff. */
@keyframes fyv-motif-pulse {
  0%   { transform: scaleY(0.30); opacity: 0.55; }
  50%  { transform: scaleY(1);    opacity: 1; }
  100% { transform: scaleY(0.30); opacity: 0.55; }
}
.mini-motif-anim span {
  transform-origin: bottom;
  animation-name: fyv-motif-pulse;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  will-change: transform, opacity;
}
.prong:hover .mini-motif-anim span,
.varcard:hover .mini-motif-anim span {
  animation-duration: 0.85s !important;
}
@media (prefers-reduced-motion: reduce) {
  .mini-motif-anim span {
    animation: none;
    transform: scaleY(1);
    opacity: 0.85;
  }
}

/* ============================================================
   Six-variable grid
   ============================================================ */
.vargrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.varcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 22px 22px;
  overflow: hidden;
}
.varcard .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
}
.varcard .motif {
  height: 28px; margin: 10px 0 12px;
  display: flex; align-items: flex-end; gap: 3px;
}
.varcard .motif span {
  display: block; width: 3px; border-radius: 1px;
  background: var(--wave-bar); opacity: 0.85;
}

/* ============================================================
   Evidence layer mock
   ============================================================ */
.evidence-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 30px 24px;
  position: relative;
}
.evidence-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}
.evidence-head .title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-sec);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.evidence-head .title b { color: var(--text); font-weight: 500; }
.evidence-head .label {
  font-size: 0.72rem;
  color: var(--fyv-amber);
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace;
}
.evidence-rows { display: flex; flex-direction: column; gap: 3px; }
.ev-row {
  display: grid;
  grid-template-columns: 92px 1.4fr 70px 2.4fr;
  gap: 14px;
  padding: 11px 12px;
  border-left: 2px solid var(--fyv-teal);
  background: rgba(34,211,238,0.04);
  font-size: 0.86rem;
  align-items: center;
  border-radius: 0 4px 4px 0;
}
[data-variant="light"] .ev-row { background: rgba(34,211,238,0.07); }
.ev-row .ts { font-family: 'JetBrains Mono', monospace; color: var(--text-sec); font-size: 0.8rem; }
.ev-row .sig { color: var(--text); font-weight: 500; }
.ev-row .sc { color: var(--fyv-amber); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }
.ev-row .reason { color: var(--text-body); font-size: 0.84rem; }

/* ============================================================
   Team / founder cards
   ============================================================ */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.founder {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 26px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.founder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fyv-gradient);
  opacity: 0.85;
}
.founder .portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--raised);
  margin-bottom: 18px;
}
.founder .portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(0.95) contrast(1.02);
}
[data-variant="dark"] .founder .portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,12,22,0.55));
  pointer-events: none;
}
.founder .name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
}
.founder .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fyv-teal);
  margin-bottom: 14px;
  white-space: nowrap;
}
[data-variant="light"] .founder .role { color: var(--fyv-purple-deep); }
.founder .bio {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 0;
}
.founder .link {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

/* Bottom-aligns the {school, LinkedIn} row across all founder cards so a
   longer bio doesn't push the LinkedIn icon down on one card alone. */
.founder-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding: 40px 0 24px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr;
  gap: 40px;
}
.footer .col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin: 0 0 14px;
  font-weight: 600;
}
.footer .col p, .footer .col a {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 6px;
  text-decoration: none;
  display: block;
}
.footer .disclaimer {
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.55;
}
.footer-base {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 18px 36px;
  padding-top: 22px;
  margin-top: 28px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.footer-base .privacy-note {
  grid-column: 1 / -1;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-sec);
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  max-width: none;
  white-space: nowrap;
  margin: 0 0 28px;
}
@media (max-width: 920px) {
  .footer-base .privacy-note { white-space: normal; }
}
@media (max-width: 720px) {
  .footer-base { grid-template-columns: 1fr; }
}

/* ============================================================
   Token strip (the brand-canon section in each artboard)
   ============================================================ */
.tokens {
  padding: 56px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.tokens .group h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
  font-weight: 600;
  margin: 0 0 14px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.swatch {
  position: relative;
  height: 86px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.swatch .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.swatch .hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.swatch.surface {
  background: var(--surface);
}
.swatch.surface .name, .swatch.surface .hex {
  color: var(--text);
  text-shadow: none;
}

.type-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.type-row:last-child { border-bottom: none; }
.type-row .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-sec);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.type-row .sample { color: var(--text); }

.button-row { display: flex; gap: 12px; flex-wrap: wrap; }

.gradient-bar {
  height: 18px;
  border-radius: 999px;
  background: var(--fyv-gradient);
}
.gradient-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--text-sec);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ============================================================
   Variant header strip. the bar at the top of each artboard
   ============================================================ */
.variant-header {
  padding: 38px 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.variant-header h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 2.4rem;
  color: var(--text);
  line-height: 1;
  margin: 0;
}
.variant-header .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sec);
  margin-bottom: 6px;
}
.variant-header .summary {
  font-size: 0.94rem;
  color: var(--text-body);
  max-width: 46ch;
  text-align: right;
}

/* ============================================================
   Section spacing helpers
   ============================================================ */
.section {
  padding: 64px 0;
  border-top: 1px solid var(--border);
}
.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  margin-bottom: 36px;
  align-items: start;
}
.section-head .num {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section-head .num .big {
  font-family: 'DM Serif Display', serif;
  font-size: 4.2rem;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.section-head .num .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  margin-top: 10px;
}
.section-head .num .rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--fyv-gradient);
  border-radius: 1px;
  margin-top: 6px;
}
.section-head .kicker {
  font-size: 1.02rem;
  color: var(--text-body);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   Compare row (text vs voice). short version
   ============================================================ */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.compare .col {
  padding: 28px;
  position: relative;
  border-right: 1px solid var(--border);
}
.compare .col:last-child { border-right: none; }
.compare .col h3 {
  margin: 0 0 6px;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-sec);
}
.compare .col .what {
  font-family: 'DM Serif Display', serif;
  font-size: 1.3rem;
  color: var(--text);
  margin: 4px 0 18px;
  line-height: 1.25;
}
.compare .col .what .grad {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.compare .transcript {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-sec);
}
.compare .transcript .hl {
  color: var(--text);
  background: rgba(124,58,237,0.14);
  padding: 1px 2px;
  border-radius: 2px;
}
[data-variant="light"] .compare .transcript .hl { background: rgba(124,58,237,0.10); }
.compare .markers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare .markers li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 0.88rem;
}
.compare .markers .ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--fyv-teal);
  letter-spacing: 0.04em;
}
[data-variant="light"] .compare .markers .ts { color: var(--fyv-purple-deep); }
.compare .markers .sig { color: var(--text-body); }
.compare .markers .sig b { color: var(--text); font-weight: 600; }

/* ============================================================
   Small atoms
   ============================================================ */
.hr-soft {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
  border: 0;
}

/* ============================================================
   Pillar grid. 4-cell column pattern (Pulse §3 + §4, Works phases)
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pillars.two-col { grid-template-columns: repeat(2, 1fr); }
.pillars.three-col { grid-template-columns: repeat(3, 1fr); }
.pillar {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

/* Subtle wiggle on hover. Three small rotational beats that settle to
   neutral; combined with a soft lift so the card feels physically
   responsive without becoming a feature. */
@keyframes pillar-wiggle {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(-3px) rotate(-0.55deg); }
  45%  { transform: translateY(-3px) rotate(0.55deg); }
  70%  { transform: translateY(-3px) rotate(-0.25deg); }
  100% { transform: translateY(-3px) rotate(0); }
}
.pillar:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
  animation: pillar-wiggle 0.55s cubic-bezier(0.42, 0, 0.58, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .pillar:hover { animation: none; transform: translateY(-2px); }
}
.pillar .pill-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--pill-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pillar .pill-num::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--fyv-gradient);
  border-radius: 1px;
}
.pillar h4 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.pillar p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-body);
}

/* ============================================================
   Case-study bridge slot
   ============================================================ */
.case-bridge {
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: 14px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  align-items: center;
}
.case-bridge .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.case-bridge .copy {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}
.case-bridge.case-bridge-compact {
  padding: 22px 28px;
  grid-template-columns: 1fr;
  gap: 10px;
}
.case-bridge .copy em {
  font-style: italic;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-bridge.case-bridge-compact .label { display: none; }
.pattern-frame-tagline {
  margin-top: 32px;
  text-align: center;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.12em;
}
.case-bridge.case-bridge-compact .copy {
  font-family: 'Instrument Sans', sans-serif;
}

/* Tighter section padding when a PatternFrame leads the page. */
.section:has(.case-bridge-compact) {
  padding: 36px 0 40px;
}
.section:has(.case-bridge-compact) .section-head {
  margin-bottom: 20px;
}

/* ============================================================
   Early-access form section (fyvPulse bottom of page)
   ============================================================ */
.early-access {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 56px 56px 48px;
  overflow: hidden;
}
.early-access::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fyv-gradient);
}
.early-access .lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.early-access .lead h2 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  max-width: 18ch;
}
.early-access .lead h2 .grad {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.early-access .lead p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.early-access form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.early-access label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-sec);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.early-access input,
.early-access textarea,
.early-access select {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-transform: none;
  letter-spacing: 0;
}
.early-access input:focus,
.early-access textarea:focus,
.early-access select:focus {
  border-color: var(--fyv-purple);
  background: #fff;
}
.early-access textarea { min-height: 84px; resize: vertical; }
.early-access .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.early-access .submit { margin-top: 8px; align-self: flex-start; }
.early-access .note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.early-access .success {
  display: none;
  padding: 16px 18px;
  border-radius: 10px;
  background: rgba(34,211,238,0.10);
  border: 1px solid rgba(34,211,238,0.30);
  color: var(--text);
  font-size: 0.95rem;
}
.early-access.submitted form { display: none; }
.early-access.submitted .success { display: block; }

/* Google Form iframe slot. sits inside the fyv-branded wrapper.
   Google's iframe contents can't be restyled cross-origin, so the
   wrapper carries the brand chrome and the iframe carries the form. */
.form-embed {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}
.form-embed iframe {
  flex: 1;
  background: transparent;
}

/* ============================================================
   Prong-page hero (Pulse / Works / Agents share this rhythm)
   ============================================================ */
.prong-hero {
  padding: 88px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.prong-hero.single { grid-template-columns: 1fr; }
.prong-hero .pills-row {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.prong-hero h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 48px;
  max-width: 20ch;
  text-wrap: balance;
  padding-bottom: 0.18em;
}
.prong-hero h1 .grad {
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.prong-hero .positioning {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 56ch;
  margin: 0 0 28px;
}
.prong-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .prong-hero { grid-template-columns: 1fr; padding: 56px 0 36px; }
}

/* ============================================================
   "Meet the team" anchor. small standalone block
   ============================================================ */
.team-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.team-anchor .copy {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
  max-width: 50ch;
}
.team-anchor .copy em {
  font-style: italic;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 720px) {
  .team-anchor { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Engagement-pattern cards (Works) and Use-case product cards (Agents)
   ============================================================ */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pattern-grid.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: stretch;
  margin-bottom: 96px;
}
.pattern-grid.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: stretch;
}
.pattern-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

/* Subtle wiggle on hover. Three small rotational beats that settle to
   neutral; combined with a soft lift so the card feels physically
   responsive. Scoped to the three-col grid so the open-invite card
   below it stays calm. */
@keyframes pattern-card-wiggle {
  0%   { transform: translateY(0) rotate(0); }
  20%  { transform: translateY(-3px) rotate(-0.55deg); }
  45%  { transform: translateY(-3px) rotate(0.55deg); }
  70%  { transform: translateY(-3px) rotate(-0.25deg); }
  100% { transform: translateY(-3px) rotate(0); }
}
.pattern-grid.three-col .pattern-card:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
  animation: pattern-card-wiggle 0.55s cubic-bezier(0.42, 0, 0.58, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .pattern-grid.three-col .pattern-card:hover {
    animation: none;
    transform: translateY(-2px);
  }
}
.pattern-card p {
  flex: 1;
}
.pattern-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; bottom: 0;
  background: var(--fyv-gradient);
  opacity: 0.85;
}
.pattern-card .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sec);
}
.pattern-card h4 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}
.pattern-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-body);
}
.pattern-card.open-invite {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-2);
}
.pattern-card.open-invite::before { display: none; }

.bridge-line {
  font-family: 'DM Serif Display', serif;
  font-size: 1.18rem;
  color: var(--text);
  line-height: 1.4;
  margin: 28px 0 16px;
  text-align: center;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Story callout. "We built one for ourselves first" (Agents)
   ============================================================ */
.story-callout {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 52px 56px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
  overflow: hidden;
}
.story-callout.has-loop {
  grid-template-columns: 1fr 1.25fr 1.25fr;
  gap: 36px;
  align-items: start;
}
.story-callout.has-loop .deputy-loop {
  align-self: center;
  justify-self: center;
}

/* DeputyLoop. Interactive constellation graphic for the fyvDeputy
   callout. Orbit ring + 6 glyphs + checkmarks + memory band. */
.deputy-loop {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.deputy-loop svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Orbit rotation. Parent group rotates clockwise; each glyph
   counter-rotates around its own centre so it remains upright. */
@keyframes deputy-orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes deputy-glyph-counter {
  to { transform: rotate(-360deg); }
}
.deputy-orbit {
  animation: deputy-orbit-spin 21s linear infinite;
  will-change: transform;
}
.deputy-glyph {
  transform-box: fill-box;
  transform-origin: center;
  animation: deputy-glyph-counter 21s linear infinite;
  will-change: transform;
}
.deputy-loop.is-paused .deputy-orbit,
.deputy-loop.is-paused .deputy-glyph,
.deputy-loop.is-static .deputy-orbit,
.deputy-loop.is-static .deputy-glyph {
  animation-play-state: paused;
}
.deputy-loop.is-static .deputy-orbit,
.deputy-loop.is-static .deputy-glyph {
  animation: none;
}

/* Active beat: glyph scales up briefly. */
@keyframes deputy-glyph-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.deputy-glyph.is-active {
  /* Compose with the counter-rotation: keep counter, layer pulse via
     a child-element pseudo isn't possible in SVG, so just override
     animation to combine. Tricky. Pulse for short duration then
     return to counter-rotation. */
}

/* Checkmark draws on via stroke-dashoffset. */
@keyframes deputy-check-draw {
  from { stroke-dashoffset: 9; opacity: 0; }
  20%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
.deputy-check path {
  stroke-dasharray: 9;
  stroke-dashoffset: 9;
  animation: deputy-check-draw 0.4s ease-out 0.05s forwards;
}
.deputy-loop.is-static .deputy-check path {
  animation: none;
  stroke-dashoffset: 0;
  opacity: 1;
}

/* Beat label fades in. */
@keyframes deputy-label-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.deputy-label {
  transform-box: fill-box;
  transform-origin: center;
  animation: deputy-label-in 0.3s ease-out both;
}
.deputy-loop.is-static .deputy-label { animation: none; opacity: 1; }

/* Memory dot drop. Outer wrapper transitions to new band position;
   inner element animates from the focus point to (0,0) on mount. */
.deputy-mem-wrap {
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes deputy-mem-drop {
  0%   { transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
.deputy-mem-dot {
  animation: deputy-mem-drop 0.6s cubic-bezier(0.55, 0.05, 0.5, 1) both;
  transform-box: fill-box;
}
.deputy-loop.is-static .deputy-mem-dot {
  animation: none;
}

@media (max-width: 980px) {
  .story-callout.has-loop {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .deputy-loop { max-width: 380px; margin: 0 auto; }
}
.story-callout::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 90% 100%, rgba(124,58,237,0.06), transparent);
  pointer-events: none;
}
.story-callout > * { position: relative; z-index: 1; }
.story-callout h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.15;
}
.story-callout h3 em {
  font-style: italic;
  background: var(--fyv-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.story-callout .body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.story-callout .body strong {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  font-size: 1.15em;
}

@media (max-width: 980px) {
  .story-callout { grid-template-columns: 1fr; padding: 36px 28px; gap: 20px; }
  .pattern-grid, .pattern-grid.three-col, .pattern-grid.four-col { grid-template-columns: 1fr; }
}

/* ============================================================
   Consolidated mobile responsive block.
   All rules here only activate at ≤980px — desktop is untouched.
   Subpages (Pulse / Works / Agents) rely on these collapses.
   Added 2026-05.
   ============================================================ */
@media (max-width: 980px) {
  /* Section heads. The big 220px number column squeezes the title.
     Stack: number+label row on top, title+kicker block below. */
  .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }
  .section-head .num { gap: 10px; }

  /* Case-bridge (non-compact). Same 220px+1fr problem. */
  .case-bridge {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px 24px;
  }

  /* Compare table. Two-column side-by-side becomes stacked. */
  .compare {
    grid-template-columns: 1fr;
  }

  /* Pillars. All variants collapse. */
  .pillars,
  .pillars.two-col,
  .pillars.three-col {
    grid-template-columns: 1fr;
  }

  /* Pulse hero block. */
  .pulse-block {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0 36px;
  }

  /* Works prong hero — needed because .prong-hero.prong-hero-works
     (two-class specificity) overrides the generic .prong-hero rule.
     The agents equivalent already exists earlier in this file. */
  .prong-hero.prong-hero-works {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Variable grid (SoM signals on Pulse). */
  .vargrid {
    grid-template-columns: 1fr;
  }

  /* Early-access section (Pulse signup). */
  .early-access .lead,
  .early-access .row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Signal card flag rows. */
  .signal-card .flag {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Styleguide bits — keep usable but don't bend over backwards. */
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .type-row { grid-template-columns: 1fr; gap: 6px; }
  .compare .markers li { grid-template-columns: 1fr; gap: 4px; }

  /* ─────────────────────────────────────────────────────────
     Evidence rows — restack into vertical cards.
     Desktop: 4-col grid (time · signal · score · reason).
     Mobile : stacked. Row 1 = timestamp + score (split).
              Row 2 = signal name (bold).
              Row 3 = reason text.
     ───────────────────────────────────────────────────────── */
  .ev-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "ts sc"
      "sig sig"
      "reason reason";
    gap: 6px 12px;
    padding: 14px 14px;
    align-items: baseline;
  }
  .ev-row .ts     { grid-area: ts; }
  .ev-row .sc     { grid-area: sc; text-align: right; }
  .ev-row .sig    { grid-area: sig; font-size: 0.95rem; }
  .ev-row .reason { grid-area: reason; font-size: 0.86rem; line-height: 1.45; }

  /* ─────────────────────────────────────────────────────────
     Hero subhead "nudge down" — inline fontSize overrides.
     Inline styles win on specificity, so !important is required.
     Scoped tightly to each prong hero's positioning paragraph.
     ───────────────────────────────────────────────────────── */
  .prong-hero-works .positioning {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
  .prong-hero-agents .positioning {
    font-size: 1.08rem !important;
    line-height: 1.4 !important;
  }
  /* Agents pattern-frame intro copy (inside case-bridge-compact). */
  .case-bridge-compact .copy {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* Hero h1's that use raw rem fall back nicely; the ones using
     clamp() already self-scale. Belt-and-braces tightening below 640px. */
}

@media (max-width: 640px) {
  /* Tighten hero typography on small phones. */
  .prong-hero h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.1;
  }
  .prong-hero-works .positioning,
  .prong-hero-agents .positioning {
    font-size: 1.02rem !important;
  }

  /* Pulse signal card padding tightens up. */
  .signal-card { padding: 22px 20px; }

  /* Section-head big numerals shrink. */
  .section-head .num .big {
    font-size: 2.4rem;
  }

  /* Evidence row content sizing. */
  .ev-row { padding: 12px 12px; }
  .ev-row .sig { font-size: 0.9rem; }
}