/* Voice agent project page. Light theme; identity colour is --sig (= --sig-voice). */
body::before {
  background:
    radial-gradient(900px 620px at 92% 4%, rgb(21 128 61 / 0.12), transparent 62%),
    radial-gradient(760px 560px at 0% 60%, rgb(42 60 255 / 0.07), transparent 62%),
    radial-gradient(640px 480px at 60% 100%, rgb(21 128 61 / 0.08), transparent 62%);
}
.grain { display: none; }
.pill-img { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 6px 20px -6px rgb(21 128 61 / 0.5); }
.pill-img::before { background-image: linear-gradient(110deg, #15803d 0%, #86efac 30%, #f4f3ee 50%, #15803d 70%, #0f766e 100%); }
.hero-title em { color: var(--sig); }
.cta-title em { color: var(--sig); }
.cta::before { background: radial-gradient(ellipse at center, rgb(21 128 61 / 0.14), transparent 65%); }
.nav-right .btn .i { width: 1em; height: 1em; }

/* ---------- hero ---------- */
.hero.vh { min-height: 0; padding-bottom: var(--space-9); }
.hero-copy { max-width: 76rem; }
.wave-card { margin: var(--space-8) 0 0 auto; width: min(100%, 62rem); }
.wave-frame {
  position: relative; height: clamp(240px, 26vw, 340px); border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); overflow: hidden;
  background: radial-gradient(520px 260px at 70% 100%, rgb(21 128 61 / 0.09), transparent 70%), rgb(255 255 255 / 0.85);
}
.wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave-card figcaption { margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); text-align: right; }

/* ---------- problem ---------- */
.problem-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.problem .chapter-title { font-size: clamp(2.25rem, 4.4vw, 4.25rem); letter-spacing: -0.035em; }
.problem-body { padding-top: var(--space-4); }
.problem-body p { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: 18px; max-width: 46ch; }
.stack-big { margin-top: var(--space-8); gap: var(--space-3); }
.stack-big li { font-size: 15px; padding: 8px 16px; background: var(--surface-raised); box-shadow: var(--shadow-sm); color: var(--text-primary); }

/* ---------- latency race ---------- */
.race { display: grid; gap: var(--space-6); padding: var(--space-7); background: rgb(255 255 255 / 0.75); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px); background-size: 100% 48px, 12.5% 100%; background-position: 0 -1px, -1px 0; background-color: rgb(255 255 255 / 0.85); }
.fig { margin: 0; }
.fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-weight: 600; font-size: 17px; margin-bottom: var(--space-4); }
.fig figcaption b { color: var(--text-muted); font-weight: 400; margin-right: var(--space-2); }
.fig .val { color: var(--text-primary); font-weight: 500; }
.fig-fast .val { color: var(--sig); font-weight: 600; }
.fig-note { margin: var(--space-3) 0 0; font-size: 14px; color: var(--text-secondary); max-width: 52ch; }
.track { position: relative; height: 64px; margin-top: 28px; }
.seg-row { display: flex; height: 100%; width: 100%; transform-origin: 0 50%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.seg { display: grid; place-items: center; flex: 1; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.seg em { font-style: normal; }
.s1 { background: #cfd3de; color: #0d1017; } .s2 { background: #aab0c2; color: #0d1017; } .s3 { background: #8e96ad; color: #0d1017; }
.seg-fast { width: 12.5%; }
.sf { background: var(--sig); color: #fff; font-size: 13px; }
.range-mark { position: absolute; left: 50%; top: -22px; bottom: 0; z-index: 2; pointer-events: none; }
.range-mark i { position: absolute; top: 18px; bottom: 0; width: 0; border-left: 2px dashed var(--text-primary); }
.range-mark span { position: absolute; left: 6px; top: 0; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.axis { display: grid; grid-template-columns: repeat(9, 1fr); font-size: 11px; color: var(--text-muted); }
.axis span:first-child { text-align: left; } .axis span { text-align: left; }
.axis { margin-right: -0%; }

/* ---------- pipeline split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.split-left { position: sticky; top: 120px; }
.split-left .chapter-title { font-size: clamp(2.25rem, 3.8vw, 3.75rem); margin-bottom: var(--space-7); }
.rail { list-style: none; margin: 0; padding: 0 0 0 var(--space-5); display: grid; gap: var(--space-4); border-left: 1px solid var(--border-strong); }
.rail li { position: relative; display: flex; gap: var(--space-4); align-items: baseline; font-size: 18px; color: var(--text-muted); transition: color var(--motion-base) var(--ease-out); }
.rail li span { font-size: 13px; }
.rail li::before { content: ''; position: absolute; left: calc(-1 * var(--space-5) - 3px); top: 0.6em; width: 5px; height: 5px; border-radius: 9px; background: var(--border-strong); transition: background-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); }
.rail li.is-active { color: var(--text-primary); font-weight: 600; }
.rail li.is-active span { color: var(--sig); }
.rail li.is-active::before { background: var(--sig); transform: scale(2); }
.steps { display: grid; gap: var(--space-6); }
.step {
  padding: var(--space-6) var(--space-7); min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}
.step.is-active { border-color: color-mix(in oklab, var(--sig) 45%, var(--border-subtle)); box-shadow: var(--shadow-md); }
.step h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.025em; }
.step p { margin: 0; color: var(--text-secondary); max-width: 48ch; font-size: 17px; }
.viz { width: min(100%, 300px); height: auto; margin-bottom: auto; overflow: visible; }
.viz .s { fill: none; stroke: var(--sig); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.viz .s.alt { stroke: var(--text-secondary); }
.viz .s.dash { stroke-dasharray: 4 6; stroke: var(--text-muted); }
.viz .f { fill: var(--sig); }
.viz .m { fill: var(--border-strong); }
.viz .q { fill: color-mix(in oklab, var(--sig) 14%, white); stroke: var(--sig); stroke-width: 1.5; }
.viz .q.alt { fill: var(--surface-overlay); stroke: var(--text-muted); }
.viz .fillbar { fill: var(--sig); opacity: 0.85; }
.viz .ghost { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }

/* ---------- bento: 4 cols x 2 rows, dense ----------
   a: c1-2 r1-2 (4 cells) | b: c3-4 r1 (2 cells) | c: c3 r2 (1) | d: c4 r2 (1)
   4 + 2 + 1 + 1 = 8 cells = 4 cols x 2 rows, every cell owned, no gaps. */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); grid-auto-flow: dense; gap: var(--space-4); }
.bento .cell { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); padding: var(--space-6);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(21 128 61 / var(--spot, 0)), transparent 60%), var(--surface-raised);
  transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.bento .cell:hover { --spot: 0.1; transform: translateY(-3px); }
.bento .cell-a { grid-column: span 2; grid-row: span 2; }
.bento .cell-b { grid-column: span 2; grid-row: span 1; }
.bento .cell-c, .bento .cell-d { grid-column: span 1; grid-row: span 1; }
.bento .cell-a h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.bento .cell p { margin-top: 0; font-size: 15px; }
.mini-wave { width: 100%; height: 45%; margin-bottom: auto; overflow: visible; }
.mini-wave .s { fill: none; stroke: var(--sig); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-wave .cut { stroke: var(--state-danger); stroke-width: 2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.code { margin: 0 0 auto; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); background: var(--surface-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); overflow: hidden; white-space: pre; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; margin-bottom: auto; }
.bars i { flex: 1; border-radius: 3px; background: var(--sig); height: 30%; transform-origin: 50% 100%; animation: bar 1.4s var(--ease-in-out) infinite alternate; }
.bars i:nth-child(2) { height: 70%; animation-delay: -0.3s; } .bars i:nth-child(3) { height: 45%; animation-delay: -0.6s; }
.bars i:nth-child(4) { height: 90%; animation-delay: -0.2s; } .bars i:nth-child(5) { height: 55%; animation-delay: -0.9s; }
.bars i:nth-child(6) { height: 80%; animation-delay: -0.5s; } .bars i:nth-child(7) { height: 35%; animation-delay: -0.8s; }
@keyframes bar { to { transform: scaleY(0.45); } }
.mini-loss { width: 100%; margin-bottom: auto; overflow: visible; }
.mini-loss .f { fill: var(--sig); } .mini-loss .ghost { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }

/* ---------- value statement ---------- */
.chapter-center .scrub { max-width: 66rem; font-size: clamp(1.9rem, 3.6vw, 3.4rem); }
.chapter-center { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.cta { padding-top: var(--space-9); }

@media (max-width: 1024px) {
  .problem-grid, .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .split-left { position: static; }
  .rail { display: none; }
  .split-left .chapter-title { margin-bottom: 0; }
  .race { padding: var(--space-5); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .cell-a { grid-column: span 2; grid-row: span 1; min-height: 340px; }
  .bento .cell-b { grid-column: span 2; }
}
@media (max-width: 640px) {
  .hero-title { font-size: 2.15rem; }
  .wave-card { width: 100%; }
  .step { padding: var(--space-5); min-height: 280px; }
  .axis span:nth-child(even) { visibility: hidden; }
  .axis { font-size: 10px; }
  .fig figcaption { font-size: 15px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .cell-a, .bento .cell-b, .bento .cell-c, .bento .cell-d { grid-column: span 1; }
  .race { background-size: 100% 48px, 12.5% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bars i { animation: none; }
  .bento .cell:hover { transform: none; }
}

.pill-img { margin-right: 0.3em; }