/* ─── iskra landing page ─────────────────────────────────────────────
   Source of truth: iskra-branding/brand-style-guide.md
   Charcoal substrate, one molten amber accent, steel secondary.
   No gradients, no shadows, no 3D. Flat vector only.
   ─────────────────────────────────────────────────────────────────── */

:root {
  --charcoal: #1A1C1E;
  --charcoal-2: #262A2E;
  --amber: #F5A623;
  --amber-on-light: #C97E12;
  --steel: #70787E;
  --mist: #E8EAEB;
  --body: #3A4046;
  --paper: #F4F5F6;
  --card: #FFFFFF;
  --border: #DBDEE2;
  --success: #4F8A63;
  --alert: #D2433F;

  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --maxw: 1120px;
  --maxw-narrow: 720px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--body);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.xs { font-size: 11px; letter-spacing: 0.04em; }
.sm { font-size: 12px; }
.uppercase { text-transform: uppercase; letter-spacing: 0.18em; }

a { color: inherit; text-decoration: none; }

/* ── Layout ──────────────────────────────────────────────────────── */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-2xl); }
.narrow { max-width: var(--maxw-narrow); }

.section { padding: var(--space-5xl) var(--space-2xl); }
.paper { background: var(--paper); color: var(--body); }
.charcoal { background: var(--charcoal); color: var(--mist); }

.section-head { max-width: var(--maxw-narrow); margin-bottom: var(--space-3xl); }

/* ── Skip link ──────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: var(--amber); color: var(--charcoal);
  padding: 8px 16px; z-index: 200; font-weight: 600;
}
.skip-link:focus { top: 10px; }

/* ── Chip ────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Geist Mono", monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--steel); margin-bottom: var(--space-lg);
}
.chip .dot { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; display: inline-block; }
.chip.on-dark { color: var(--mist); }

/* ── Typography ─────────────────────────────────────────────────── */
h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--charcoal); margin-bottom: var(--space-xl);
}
h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--charcoal); margin-bottom: var(--space-lg);
}
h2.on-dark { color: var(--mist); }
h3 {
  font-size: 19px; font-weight: 600; line-height: 1.3;
  color: var(--charcoal); margin-bottom: var(--space-sm);
}
p { font-size: 16px; color: var(--body); margin-bottom: var(--space-lg); }
p.on-dark { color: var(--mist); }
p.on-dark-soft { color: #A8B0B5; }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--charcoal);
  border-bottom: 1px solid var(--charcoal-2);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xl); padding-top: var(--space-lg); padding-bottom: var(--space-lg);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.spark { width: 28px; height: 28px; display: block; }
.spark-sm { width: 22px; height: 22px; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1; }
.brand-text {
  font-size: 20px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--mist); text-transform: lowercase;
}
.brand-sub {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--steel); margin-top: 3px;
}
.site-nav { display: flex; gap: var(--space-xl); align-items: center; }
.site-nav a {
  font-size: 14px; color: #A8B0B5; transition: color 0.15s;
}
.site-nav a:hover { color: var(--amber); }
.header-cta { color: var(--charcoal); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-height: 44px; font-family: inherit; white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn-sm { padding: 8px 16px; font-size: 14px; min-height: 36px; }
.btn-primary { background: var(--amber); color: var(--charcoal); }
.btn-primary:hover { background: #E89A1B; }
.btn-secondary { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-secondary:hover { background: var(--charcoal); color: var(--mist); }
.btn-amber { background: var(--amber); color: var(--charcoal); }
.btn-amber:hover { background: #E89A1B; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  background: var(--charcoal);
  color: var(--mist);
  padding: var(--space-5xl) var(--space-2xl) var(--space-4xl);
}
.hero h1 { color: var(--mist); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-4xl); align-items: center;
}
.hero .chip { color: var(--mist); }
.subhead {
  font-size: clamp(17px, 1.8vw, 20px); color: #C9CFD3;
  margin-bottom: var(--space-2xl); max-width: 52ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.hero-cta .btn-secondary { color: var(--mist); border-color: var(--mist); }
.hero-cta .btn-secondary:hover { background: var(--mist); color: var(--charcoal); }
.hero-note { font-size: 14px; color: var(--steel); margin-bottom: 0; }

/* Hero illustration */
.hero-art {
  background: var(--charcoal-2);
  border: 1px solid #2E3337;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.flow-svg { width: 100%; height: auto; display: block; }
.flow-svg .grid line { stroke-dasharray: 2 4; }

/* ── Cards ───────────────────────────────────────────────────────── */
.cards {
  display: grid; gap: var(--space-xl);
}
.cards-three { grid-template-columns: repeat(3, 1fr); }
.cards-two { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.card-label {
  font-family: "Geist Mono", monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--steel);
}
.card h3 { margin-top: 4px; }
.card p { font-size: 15px; }
.card-list {
  list-style: none; margin-top: auto; padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.card-list li { color: var(--steel); }
.card-list li::before { content: "›  "; color: var(--amber); }

/* ── Steps ───────────────────────────────────────────────────────── */
.steps {
  list-style: none; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: var(--space-lg);
}
.step {
  border-top: 2px solid var(--border);
  padding-top: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.step.amber-step { border-top-color: var(--amber); }
.step-num { font-size: 14px; color: var(--steel); letter-spacing: 0.06em; }
.step-num.amber { color: var(--amber-on-light); }
.step h3 { font-size: 17px; }
.step p { font-size: 14px; }

/* ── Stat callout ────────────────────────────────────────────────── */
.stat { font-size: clamp(28px, 3vw, 36px); color: var(--amber-on-light); line-height: 1.1; margin-bottom: 2px; }
.stat-sub { color: var(--steel); }

/* ── Vendors (charcoal) ─────────────────────────────────────────── */
.charcoal .btn-amber { margin-top: var(--space-md); }

/* ── Signup ──────────────────────────────────────────────────────── */
.signup { padding-bottom: var(--space-5xl); }

/* Signup card: groups the role toggle and the form into one embedded unit
   so the toggle reads as the form's top row, not a detached set of buttons. */
.signup-card {
  margin: var(--space-2xl) 0 0;
  max-width: 460px;
  padding: var(--space-lg);
  background: var(--charcoal-2);
  border: 1px solid #3A4046;
  border-radius: var(--radius);
}
.role-toggle-label { color: #A8B0B5; margin: 0 0 8px; }

/* The form shell sits directly under the toggle inside the card. */
.hs-form-shell {
  margin: var(--space-md) 0 0;
  min-height: 120px;
}
.amber-link { color: var(--amber); }
.amber-link:hover { text-decoration: underline; }
.fallback-line { font-size: 14px; }

/* Native fallback form (shown when HubSpot is not configured) */
.signup-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 460px; }
.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-label { color: #A8B0B5; }
.signup-form button { align-self: flex-start; margin-top: var(--space-xs); }
.sf-note { font-size: 13px; margin: 4px  0 0; }

/* ── HubSpot embedded form (themed to match the native fallback) ───
   With css:'' passed to hbspt.forms.create, HubSpot ships no styles,
   so this block fully owns the embedded form's appearance. */
.hs-form-shell form {
  display: flex; flex-direction: column; gap: var(--space-md);
  max-width: 460px; margin: 0;
}
.hs-form-shell .hs-form-field,
.hs-form-shell .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.hs-form-shell .hs-form-field label,
.hs-form-shell .hs-field-desc { color: #A8B0B5; font-family: "Geist Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
.hs-form-shell input[type="email"],
.hs-form-shell input[type="text"],
.hs-form-shell input[type="tel"],
.hs-form-shell select,
.hs-form-shell textarea {
  background: var(--charcoal-2);
  border: 1px solid #3A4046;
  color: var(--mist);
  border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit; font-size: 15px; width: 100%;
}
.hs-form-shell input::placeholder,
.hs-form-shell textarea::placeholder { color: #6B7278; }
.hs-form-shell input:focus,
.hs-form-shell select:focus,
.hs-form-shell textarea:focus {
  outline: 2px solid var(--amber); outline-offset: 1px;
  border-color: var(--amber);
}
/* Submit button: same amber pill as the page CTAs */
.hs-form-shell .hs-button,
.hs-form-shell input[type="submit"] {
  background: var(--amber); color: var(--charcoal);
  border: none; border-radius: var(--radius);
  padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; align-self: flex-start; margin-top: var(--space-xs);
}
.hs-form-shell .hs-button:hover,
.hs-form-shell input[type="submit"]:hover { background: #E89A1B; }
.hs-form-shell .hs-error-msgs { color: var(--alert); list-style: none; margin-top: 6px; font-size: 13px; }
.hs-form-shell .hs-form-required,
.hs-form-shell .hs-required { color: var(--amber); }
/* Hide the contact_role field from the user — it's driven by the toggle */
.hs-form-shell .hs-form-field:has([name="contact_role"]),
.hs-form-shell .hs-field:has([name="contact_role"]) { display: none !important; }
/* Inline confirmation message after submit, themed to charcoal */
.hs-form-shell .hs-submit-message,
.hs-form-shell .submitted-message { color: var(--mist); background: var(--charcoal-2); border: 1px solid #3A4046; border-radius: var(--radius-sm); padding: var(--space-lg); }

/* ── Section chip icons ──────────────────────────────────────────── */
/* Small flat line glyph inside each chip. Steel stroke, no fill.
   The chip's amber dot stays the single amber moment. */
.chip-icon {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Problem stat row ────────────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
}
.stat-item .stat { color: var(--charcoal); margin-bottom: 4px; }
.stat-item .stat-sub { color: var(--steel); margin-bottom: 0; }

/* ── Before / after timeline (Problem) ───────────────────────────── */
.timeline {
  margin-top: var(--space-2xl);
  max-width: var(--maxw-narrow);
}
.timeline-svg { width: 100%; height: auto; display: block; }

/* Animated timeline: a highlight travels through the old-process steps while
   the rework loops flow, dramatizing the iterative email back and forth. */
.tl-ic, .tl-node { animation: tlStroke 8s linear infinite; }
.tl-label { animation: tlFill 8s linear infinite; }
.tl-s1 { animation-delay: 0s; }
.tl-s2 { animation-delay: 2s; }
.tl-s3 { animation-delay: 4s; }
.tl-s4 { animation-delay: 6s; }
.tl-loops path { animation: tlDash 1.1s linear infinite; }

@keyframes tlStroke {
  0%, 16%, 100% { stroke: #70787E; }
  5%, 10% { stroke: #F5A623; }
}
@keyframes tlFill {
  0%, 16%, 100% { fill: #70787E; }
  5%, 10% { fill: #C97E12; }
}
@keyframes tlDash { to { stroke-dashoffset: -12; } }

/* Animated hero flow: a highlight sweeps SIM → SPEC → MATCH → RFQ, the phase
   connectors flow toward PO, and the caption breathes. */
.hf-label { animation: hfFlash 8s linear infinite; }
.hf-label-amber { animation: hfPing 8s linear infinite; }
.hf-h1 { animation-delay: 0s; }
.hf-h2 { animation-delay: 2s; }
.hf-h3 { animation-delay: 4s; }
.hf-h4 { animation-delay: 6s; }
.hf-line { stroke-dasharray: 4 4; animation: hfFlow 1.1s linear infinite; }
.hf-caption { animation: hfBreathe 8s ease-in-out infinite; }

@keyframes hfFlash {
  0%, 18%, 100% { fill: #70787E; }
  5%, 11% { fill: #F5A623; }
}
@keyframes hfPing {
  0%, 18%, 100% { fill: #F5A623; }
  5%, 11% { fill: #FFD27A; }
}
@keyframes hfFlow { to { stroke-dashoffset: -8; } }
@keyframes hfBreathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Animated vendor handshake: RFQ in → model → results out, connectors flow,
   caption breathes. Delays sequence the stages left to right. */
.hs-stroke-mist  { animation: hsStrokeMist 8s linear infinite; }
.hs-stroke-steel { animation: hsStrokeSteel 8s linear infinite; }
.hs-dim-stroke   { animation: hsDimStroke 8s linear infinite; }
.hs-ping-stroke  { animation: hsPingStroke 8s linear infinite; }
.hs-fill-mist    { animation: hsFillMist 8s linear infinite; }
.hs-dim-fill     { animation: hsDimFill 8s linear infinite; }
.hs-ping-fill    { animation: hsPingFill 8s linear infinite; }
.hs-flow    { stroke-dasharray: 5 5; animation: hsFlow 1.1s linear infinite; }
.hs-breathe { animation: hfBreathe 8s ease-in-out infinite; }
.hs-d0 { animation-delay: 0s; }
.hs-d1 { animation-delay: 1.6s; }
.hs-d2 { animation-delay: 3.2s; }

@keyframes hsStrokeMist  { 0%, 20%, 100% { stroke: #E8EAEB; } 5%, 11% { stroke: #F5A623; } }
@keyframes hsStrokeSteel { 0%, 20%, 100% { stroke: #70787E; } 5%, 11% { stroke: #F5A623; } }
@keyframes hsDimStroke   { 0%, 20%, 100% { stroke: #3A4046; } 5%, 11% { stroke: #70787E; } }
@keyframes hsPingStroke  { 0%, 20%, 100% { stroke: #F5A623; } 5%, 11% { stroke: #FFD27A; } }
@keyframes hsFillMist    { 0%, 20%, 100% { fill: #E8EAEB; } 5%, 11% { fill: #F5A623; } }
@keyframes hsDimFill     { 0%, 20%, 100% { fill: #70787E; } 5%, 11% { fill: #A8B0B5; } }
@keyframes hsPingFill    { 0%, 20%, 100% { fill: #F5A623; } 5%, 11% { fill: #FFD27A; } }
@keyframes hsFlow { to { stroke-dashoffset: -10; } }

/* Animated solution flow: highlight sweeps design → match → po, connectors
   flow. Reuses tlStroke/tlFill (steel→amber) and hsPingStroke (amber→pale). */
.sf-stroke      { animation: tlStroke 8s linear infinite; }
.sf-fill        { animation: tlFill 8s linear infinite; }
.sf-ping-stroke { animation: hsPingStroke 8s linear infinite; }
.sf-match-fill  { animation: sfMatchFill 8s linear infinite; }
.sf-flow { stroke-dasharray: 5 5; animation: hsFlow 1.1s linear infinite; }
.sf-d0 { animation-delay: 0s; }
.sf-d1 { animation-delay: 2s; }
.sf-d2 { animation-delay: 4s; }

@keyframes sfMatchFill { 0%, 16%, 100% { fill: #C97E12; } 5%, 10% { fill: #F5A623; } }

/* ── Person cards (Team) ─────────────────────────────────────────── */
.person-head {
  display: flex; align-items: center; gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.person-monogram {
  width: 48px; height: 48px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--charcoal); color: var(--amber);
  border-radius: var(--radius);
  font-size: 16px; font-weight: 600; letter-spacing: 0.04em;
}
.person-photo {
  width: 120px; height: 160px; flex: none;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius);
  background: var(--charcoal-2);
}
.person-head h3 { margin: 0; }
.person-head .card-label { display: block; margin-top: 3px; }
.person-card p { margin-bottom: var(--space-sm); }

/* ── Solution flow (Design → Match → PO) ─────────────────────────── */
.solution-flow { max-width: 620px; margin: 0 auto var(--space-3xl); }
.solution-svg { width: 100%; height: auto; display: block; }

/* ── Vendor compatibility-handshake diagram ──────────────────────── */
.handshake {
  margin-top: var(--space-2xl);
  background: var(--charcoal-2);
  border: 1px solid #2E3337;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: var(--maxw-narrow);
}
.handshake-svg { width: 100%; height: auto; display: block; }

/* ── Signup role toggle ──────────────────────────────────────────── */
/* Segmented control: the three roles read as one connected switch that
   belongs to the form below it. */
.role-toggle {
  display: flex; margin: 0;
  background: var(--charcoal); border: 1px solid #3A4046;
  border-radius: var(--radius); overflow: hidden;
}
.role-btn {
  flex: 1 1 0; min-height: 44px;
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  color: #A8B0B5; background: transparent;
  border: none; border-left: 1px solid #3A4046; border-radius: 0;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.role-btn:first-child { border-left: none; }
.role-btn:hover { color: var(--mist); }
.role-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.role-btn[aria-pressed="true"] {
  background: var(--amber); color: var(--charcoal); border-color: var(--amber);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--charcoal);
  border-top: 1px solid var(--charcoal-2);
  padding: var(--space-2xl) 0;
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xl); flex-wrap: wrap;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-meta { color: var(--steel); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .cards-three { grid-template-columns: 1fr; }
  .cards-two { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .section { padding: var(--space-4xl) var(--space-lg); }
  .hero { padding: var(--space-4xl) var(--space-lg); }
  .container { padding: 0 var(--space-lg); }
  .site-nav { display: none; }
  .header-cta { display: inline-flex; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .role-toggle { flex-direction: column; }
  .role-btn { flex: 1 1 100%; border-left: none; border-top: 1px solid #3A4046; }
  .role-btn:first-child { border-top: none; }
  .stat-row { grid-template-columns: 1fr; gap: var(--space-lg); }
  .data-spine-set { grid-template-columns: 1fr; }
}

/* ── Hero proof strip ────────────────────────────────────────────── */
.proof-strip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: var(--space-md) 0 0; color: var(--amber);
}
.proof-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  display: inline-block; animation: proofPulse 2.6s ease-in-out infinite;
}
@keyframes proofPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* ── Founder pull-quote (Problem) ────────────────────────────────── */
.pull-quote {
  margin: var(--space-2xl) 0 0; max-width: var(--maxw-narrow);
  border-top: 2px solid var(--amber); padding-top: var(--space-lg);
}
.pull-quote-text {
  font-size: clamp(19px, 2.4vw, 24px); font-weight: 600;
  color: var(--charcoal); line-height: 1.3; margin-bottom: var(--space-sm);
}
.pull-quote-cite { color: var(--steel); }

/* ── Solution "learns" glyph + 4th step ──────────────────────────── */
.sf-d3 { animation-delay: 6s; }
.sf-learn use {
  stroke: var(--steel);
  transform-box: fill-box; transform-origin: center;
  animation: spinLearn 6s linear infinite;
}
.sf-learn-amber use { stroke: var(--amber-on-light); }
.sf-learn-txt { font-size: 8px; letter-spacing: 0.1em; }
.sf-learn-txt-amber { font-weight: 600; }
@keyframes spinLearn { to { transform: rotate(-360deg); } }

/* ── Data spine (Solution) ───────────────────────────────────────── */
.data-spine {
  max-width: 760px; margin: 0 auto var(--space-3xl);
  background: var(--card); border: 1px solid var(--border);
  border-top: 2px solid var(--amber); border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl);
}
.data-spine-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-md); }
.data-spine-glyph svg {
  width: 16px; height: 16px; display: block;
  transform-box: fill-box; transform-origin: center;
  animation: spinLearn 6s linear infinite;
}
.data-spine-title { color: var(--amber-on-light); margin: 0; }
.data-spine-set { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.data-spine-item { display: flex; flex-direction: column; gap: 4px; }
.data-spine-k { color: var(--charcoal); }
.data-spine-v { font-size: 13px; color: var(--steel); }

/* ── Vendor flywheel ─────────────────────────────────────────────── */
.flywheel {
  margin-top: var(--space-2xl); max-width: var(--maxw-narrow);
  background: var(--charcoal-2); border: 1px solid #2E3337;
  border-radius: var(--radius-lg); padding: var(--space-xl);
}
.flywheel-svg { width: 100%; height: auto; display: block; }
.flywheel-note { font-size: 14px; margin: var(--space-lg) 0 0; }
.fw-node rect { animation: hsStrokeMist 8s linear infinite; }
.fw-node text { animation: hsFillMist 8s linear infinite; }
.fw-node-amber rect { animation: hsPingStroke 8s linear infinite; }
.fw-node-amber text { animation: hsPingFill 8s linear infinite; }
.fw-flow { stroke-dasharray: 5 5; animation: hsFlow 1.1s linear infinite; }
.fw-d0 rect, .fw-d0 text { animation-delay: 0s; }
.fw-d1 rect, .fw-d1 text { animation-delay: 1.3s; }
.fw-d2 rect, .fw-d2 text { animation-delay: 2.6s; }
.fw-d3 rect, .fw-d3 text { animation-delay: 3.9s; }

/* ── Founder photos: reveal on load, gentle hover ────────────────── */
.person-photo {
  animation: photoReveal 0.8s ease-out both;
  transition: transform 0.3s ease;
}
.person-photo:hover { transform: scale(1.03); }
@keyframes photoReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}