/* ====== /why-voice ======
   Built 2026-09-18 from the Figma frame 329:3663 with agreed creative
   freedom; loads after home.css for the .hero pattern. Every visual is made
   (SVG/CSS): no photography. Motion keys off .is-visible from main.js.    */

.why-pink { color: var(--c-accent-pink); }
.why-cyan { color: var(--c-accent-highlight); }
.why-sand { color: var(--c-accent-sand); }
.why-eyebrow { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }

/* ── 1 · Hero: the doorway of light ───────────────────────────────── */
/* The frame's vector at full intensity: the light is on the fact that the
   industry's "voice analytics" is voice turned to text. Desktop (329:3663):
   door left, copy right. Below 1024 the MOBILE frame (466:5798): the door at
   the far left edge mid-height, its beam sweeping up across the hero, the
   copy pushed right over the light.                                        */
.why-hero {
    min-height: 620px; align-items: center;          /* copy centred in the hero; the door rides at the same height */
    padding-block: var(--space-15);
    /* the export is the frame's 429x742 node plus the blur's 100px margin on
       each side (629x942); the frame places the node at (20,-69) in a 774-tall
       hero. Sized to the hero's HEIGHT (not the viewport width) so the door
       always sits beside the headline's lower lines, whatever the phone.   */
    /* plus a CSS light on top of the vector: the beam reaches the copy's right
       edge and reads brighter behind the right-aligned text (2026-09-18) */
    background:
        radial-gradient(ellipse 115% 46% at 8% 52%, rgba(214, 246, 250, .34) 0%, rgba(214, 246, 250, .16) 38%, rgba(214, 246, 250, .05) 62%, rgba(214, 246, 250, 0) 78%),
        url('../../images/why-pradhi/doorway-mobile.svg') left -52px center / auto 122% no-repeat,
        var(--primary-800);
}
.why-hero__inner { padding-left: 22%; }        /* the frame's copy starts at x=110 of 402 */
.why-hero__copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: var(--space-5); }   /* below 1024 the copy is ragged-left against the door: right-aligned it keeps its distance (2026-09-18) */
.why-hero h1 { max-width: 18ch; font-size: clamp(40px, 27px + 2.31vw, 60px); line-height: var(--lh-tight); }   /* the site's H1 curve with this page's floor at 40 (the mobile frame's size) instead of 36; Display from 1024. 18ch, not the 14 that suited the longer headline this replaced. NOTE this cap only binds BELOW 1024: from there .why-hero__copy's flex basis is narrower than 18ch and that is what wraps the headline (2026-10-08) */
.why-hero__body { max-width: 640px; font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text-muted); }
/* the struck word: pink, and the strike draws itself once the headline is in */
.why-strike { position: relative; color: var(--c-accent-pink); white-space: nowrap; }
.why-strike::after {
    content: ''; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .07em; border-radius: 2px;
    background: var(--c-accent-pink); box-shadow: 0 0 12px rgba(232, 182, 240, .8);
    transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1) .8s;
}
h1.is-visible .why-strike::after { transform: scaleX(1); }

/* ── Gloss for the page's DARK panels ──────────────────────────────
   The purple sense cards carry a strong sheen; the dark panels (the "Not
   Voice" panel, the Transcription / LLM cards, the outcome deck card) read
   flat beside them. Same recipe at lower strength: top sheen, corner light,
   darkened foot, bright top edge — and the diagonal reflection on hover. */
.why-sources__panel, .earcard, .outcome {
    position: relative; overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .22) 100%),
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(171, 235, 240, .12) 0%, rgba(171, 235, 240, 0) 60%),
        var(--c-bg-raised);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
}
.why-sources__panel::after, .earcard::after {          /* the reflection: once, on the way in; not on the deck cards */
    content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-60%); transition: none;
}
.why-sources__panel:hover::after, .earcard:hover::after { transform: translateX(60%); transition: transform .9s ease; }
.why-sources__panel > *, .earcard > *, .outcome > * { position: relative; z-index: 1; }

/* ── 2 · See · Speak · Hear ───────────────────────────────────────── */
.why-senses { background: var(--neutral-black); }
.why-senses__grid { display: flex; flex-direction: column; gap: var(--space-10); }
.why-senses__copy { display: flex; flex-direction: column; gap: var(--space-5); }
.why-senses__copy h2 { max-width: none; }   /* stacked, the copy column IS the page: a 14ch cap left the heading in a narrow ribbon with empty space beside it. Capped again at 1024, where the column is 40% wide. */
.why-senses__copy p { max-width: var(--measure); }
/* below 768: a swipe row (Home's carousel vocabulary) that also advances itself */
.why-senses__cards {
    display: flex; gap: var(--space-5);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter); scroll-padding-inline: var(--page-gutter);
}
.why-senses__cards::-webkit-scrollbar { display: none; }
.why-senses__cards > li { flex: 0 0 auto; width: min(319px, calc(100vw - var(--page-gutter) - var(--space-5) - 28px)); scroll-snap-align: start; }   /* the next card peeks 28px, as Home */
.why-senses__dots { color: var(--c-text); }
.sense {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--space-3);
    min-height: 200px; padding: var(--space-6);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-card);
    /* the frame's #765480 under a stronger gloss than the dark panels need:
       a top sheen, a corner light, a darkened foot, a bright top edge      */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .18) 100%),
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%),
        var(--primary-300);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .4);
    color: var(--c-text);
    transition: transform .3s ease, box-shadow .3s ease;
}
.sense::after {                                        /* a diagonal reflection that slides across on hover — once, on the way in */
    content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-60%); transition: none;
}
.sense:hover::after { transform: translateX(60%); transition: transform .9s ease; }
.sense:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 24px 48px rgba(0, 0, 0, .45), var(--gloss-glow); }
.sense__tag  { align-self: flex-start; min-height: 2.6em; font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: rgba(255, 249, 245, .7); }
.sense__word { margin-top: 72px; font-size: var(--t-h2); line-height: var(--lh-heading); }   /* a fixed band below the tag, so the words sit level whatever the text does */
.sense__text { font-size: var(--t-p2); color: rgba(255, 249, 245, .85); }
/* the third card: the point of the section */
.sense--lit {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .12) 100%),
        linear-gradient(180deg, var(--c-accent-cyan) 0%, rgba(94, 55, 110, .3) 100%),   /* the frame's Background/gradient 2 */
        var(--primary-300);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 44px rgba(171, 235, 240, .4), 0 16px 40px rgba(0, 0, 0, .35);
}
.sense--lit .sense__tag { color: var(--c-primary-dark); font-weight: var(--fw-medium); }
.sense--lit .sense__word { color: var(--c-primary-dark); }
.sense--lit .sense__text { color: rgba(21, 0, 27, .85); }

/* ── 3 · Five sources: the lit bar with a travelling pulse ─────────── */
.why-sources { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.why-sources__grid { display: flex; flex-direction: column; gap: var(--space-6); }
.why-sources__title { order: 1; }
.why-sources__bar   { order: 2; }
/* MOCK: the verb said once, above the row, instead of five times inside it */
.why-sources__reveals { order: 2; font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
/* MOCK: voice's contrast, carried above its attribute list */
.source__lead { margin-top: var(--space-2); font-size: var(--t-p1); line-height: var(--lh-heading); color: var(--c-text); }
.why-sources__list  { order: 3; }
.why-sources__panel { order: 4; margin-top: var(--space-4); }
/* Below the panel, not inside it: the panel asks the question and lists what
   voice makes possible; this is the answer underneath, so it reads as the
   section's closing line rather than a fourth bullet.                      */
.why-sources__close { order: 5; font-size: var(--t-h5); line-height: var(--lh-heading); color: var(--c-text); }
.why-sources__panel {                                 /* Home's AVI panel: lines on fading hairlines (gloss: shared rule above) */
    padding: var(--space-6);
    border-radius: var(--radius-card);
    border: 1px solid rgba(171, 235, 240, .14);
}
.why-sources__lead { font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-regular); margin-bottom: var(--space-3); }
.why-sources__lines { display: flex; flex-direction: column; }
.why-sources__lines li { padding-block: var(--space-4); font-size: var(--t-h5); line-height: var(--lh-heading); border-bottom: .5px solid rgba(235, 230, 236, .6); }
.why-sources__lines li:nth-child(2) { border-bottom-color: rgba(235, 230, 236, .45); }
.why-sources__lines li:last-child   { border-bottom: 0; padding-bottom: 0; }
.why-sources__bar {
    position: relative; height: 3px; margin-top: var(--space-4); border-radius: 2px;
    background: linear-gradient(90deg, rgba(171, 235, 240, .35) 0%, rgba(171, 235, 240, .55) 60%, var(--c-accent-cyan) 80%, #FFFFFF 100%);   /* the light gathers toward Voice */
    box-shadow: 0 0 24px rgba(171, 235, 240, .35), 0 0 60px rgba(171, 235, 240, .15);
}
.why-sources__pulse {                            /* a bright bead running the bar and settling on Voice */
    position: absolute; top: -5px; width: 60px; height: 13px; border-radius: 999px; left: 0;
    background: radial-gradient(ellipse at center, #fff 0%, rgba(255, 255, 255, .7) 30%, rgba(171, 235, 240, 0) 70%);
    opacity: 0;
}
/* Once, on first entering the viewport, not on a loop. Looping read as a
   progress bar — something still loading — rather than as the light
   gathering toward Voice, which is the one thing it is meant to say. The
   reveal observer adds .is-visible a single time, so this fires once and
   'forwards' holds the end state instead of snapping back (2026-10-08). */
.why-sources__bar.is-visible .why-sources__pulse { animation: why-bead 6s cubic-bezier(.4, 0, .2, 1) 1.2s 1 forwards; }
@keyframes why-bead {
    0%   { left: 0; opacity: 0; }
    8%   { opacity: 1; }
    70%  { left: calc(100% - 60px); opacity: 1; }
    82%  { opacity: 1; }
    100% { left: calc(100% - 60px); opacity: 0; }
}
.why-sources__list { display: grid; gap: var(--space-6); }
.source { padding: var(--space-5) var(--space-4); border-left: 1px solid rgba(255, 255, 255, .35); opacity: .72; }   /* the four are dimmed; Voice is the one lit. Same top padding as the Voice card so the names sit level */
.source__name { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); }
.source__text { margin-top: var(--space-2); color: var(--c-text-muted); }
/* Voice: the only one that matters here — the same column as the other four
   (its own hairline, so the row still reads as five dividers) but lit: cyan
   hairline, a glow pooled behind it that swells each time the bead arrives
   (same 6s clock), cream text, and a live waveform under the copy.        */
.source--lit {
    position: relative; opacity: 1;
    border-left-color: var(--c-accent-cyan);
    background: radial-gradient(ellipse 90% 80% at 20% 30%, rgba(171, 235, 240, .14) 0%, rgba(171, 235, 240, 0) 70%);
}
.source--lit::before {                             /* the pooled glow, animated on opacity only */
    content: ''; position: absolute; inset: -12px -8px; z-index: -1; border-radius: var(--radius-card);
    background: radial-gradient(ellipse 80% 70% at 30% 40%, rgba(171, 235, 240, .28) 0%, rgba(171, 235, 240, 0) 70%);
    opacity: .4;
}
.source--lit.is-visible::before { animation: why-voice-swell 6s ease-in-out 1.2s infinite; }
@keyframes why-voice-swell { 0%, 60% { opacity: .4; } 74%, 82% { opacity: 1; } 100% { opacity: .4; } }
.source--lit .source__name { color: var(--c-accent-highlight); text-shadow: 0 0 16px rgba(152, 235, 239, .45); }
.source--lit .source__text { color: var(--c-text); }
/* ── the four finished sources ─────────────────────────────────────────
   Same 22px band as Voice's waveform and the same place in the flow, so the
   five read as one row. Muted cream, never cyan: Voice is the lit column and
   the colour is part of why. Each draws ONCE and holds — iteration 1 with
   forwards — because four loops beside Voice's would read as four things
   still loading. The global prefers-reduced-motion rule collapses these to
   0.01ms, and since they hold their end state that degrades to the finished
   drawing rather than to nothing.                                        */
.source__art { display: block; margin-top: var(--space-4); }
.source__art svg { display: block; width: 80px; height: 22px; overflow: visible; }
/* Paint per drawing, not across all of them: a blanket fill AND stroke gave the
   text rules an outline on top of a fill and turned the video frames into one
   solid block. Each shape is one or the other.                              */
.source__art--spark svg  { stroke: rgba(255, 249, 245, .5); stroke-width: 1.6; fill: none; }
.source__art--spark circle { fill: rgba(255, 249, 245, .5); stroke: none; }
.source__art--lines rect { fill: rgba(255, 249, 245, .45); stroke: none; }
.source__art--box svg    { stroke: rgba(255, 249, 245, .55); stroke-width: 1.6; }
.source__art--frames svg { stroke: rgba(255, 249, 245, .5); stroke-width: 1.4; }

/* numbers: the trend draws left to right, then the last point lands */
.source__art--spark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.source__art--spark circle { opacity: 0; }
.source.is-visible .source__art--spark path   { animation: why-draw .9s ease-out .15s 1 forwards; }
.source.is-visible .source__art--spark circle { animation: why-pop .3s ease-out 1.0s 1 forwards; }

/* text: the lines arrive one after another, like a paragraph setting */
.source__art--lines rect { opacity: 0; }
.source.is-visible .source__art--lines rect:nth-child(1) { animation: why-fade .3s ease-out .15s 1 forwards; }
.source.is-visible .source__art--lines rect:nth-child(2) { animation: why-fade .3s ease-out .28s 1 forwards; }
.source.is-visible .source__art--lines rect:nth-child(3) { animation: why-fade .3s ease-out .41s 1 forwards; }

/* images: the corner brackets snap to the subject */
.source__art--box path { stroke-dasharray: 14; stroke-dashoffset: 14; }
.source.is-visible .source__art--box path:nth-child(1) { animation: why-snap .35s ease-out .15s 1 forwards; }
.source.is-visible .source__art--box path:nth-child(2) { animation: why-snap .35s ease-out .25s 1 forwards; }
.source.is-visible .source__art--box path:nth-child(3) { animation: why-snap .35s ease-out .35s 1 forwards; }
.source.is-visible .source__art--box path:nth-child(4) { animation: why-snap .35s ease-out .45s 1 forwards; }

/* video: frame after frame after frame, each one fainter than the last */
.source__art--frames rect { opacity: 0; }
.source.is-visible .source__art--frames rect:nth-child(1) { animation: why-frame .35s ease-out .15s 1 forwards; --o: .70; }
.source.is-visible .source__art--frames rect:nth-child(2) { animation: why-frame .35s ease-out .28s 1 forwards; --o: .45; }
.source.is-visible .source__art--frames rect:nth-child(3) { animation: why-frame .35s ease-out .41s 1 forwards; --o: .25; }

@keyframes why-draw  { to { stroke-dashoffset: 0; } }
@keyframes why-snap  { to { stroke-dashoffset: 0; } }
@keyframes why-fade  { to { opacity: 1; } }
@keyframes why-pop   { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes why-frame { to { opacity: var(--o); } }

.source__wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-top: var(--space-4); }   /* under the copy, in flow: never over the name */
.source__wave i { display: block; width: 2px; height: 6px; border-radius: 1px; background: var(--c-accent-cyan); box-shadow: 0 0 6px rgba(171, 235, 240, .7); }
.source--lit.is-visible .source__wave i { animation: why-wave 1.1s ease-in-out calc(var(--k) * -.13s) infinite alternate; }
@keyframes why-wave { from { height: 4px; opacity: .5; } to { height: 22px; opacity: 1; } }

/* ── 4 · Mouths vs ears ───────────────────────────────────────────── */
.why-ears { background: var(--primary-800); overflow: hidden; }
.why-ears h2 { max-width: none; }                     /* full width; wraps naturally on small screens */
.why-ears__lead { margin-top: var(--space-4); font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text-muted); }   /* the belief line under the heading, H4 (was H5) */
.why-field {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
    margin: var(--space-10) auto 0; padding-inline: var(--page-gutter); max-width: var(--page-max);
}
.why-field span { display: block; aspect-ratio: 1; }
.why-field span:nth-child(-n + 21) { display: none; }   /* phones show the last 20 glyphs (4 rows of 5); the ear is among them */
.why-field svg { width: 100%; height: 100%; }
.why-field__mouth { color: rgba(255, 249, 245, .12); transition: color .3s ease; }
.why-field.is-visible .why-field__mouth { animation: why-mouth-in .6s ease both; }
@keyframes why-mouth-in { from { opacity: 0; transform: scale(.8); } }
.why-field__ear {
    position: relative; color: var(--c-accent-cyan);
    filter: drop-shadow(0 0 10px rgba(171, 235, 240, .7));
}
.why-field__ear::before, .why-field__ear::after {     /* the ear listens: two rings ripple out */
    content: ''; position: absolute; inset: 10%; border-radius: 50%;
    border: 1.5px solid rgba(171, 235, 240, .6); opacity: 0;
}
.why-field.is-visible .why-field__ear::before { animation: why-listen 2.4s ease-out 1s infinite; }
.why-field.is-visible .why-field__ear::after  { animation: why-listen 2.4s ease-out 2.2s infinite; }
@keyframes why-listen { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.why-ears__cards { display: grid; gap: var(--space-4); margin-top: var(--space-15); }
.earcard { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-3); min-height: 220px; padding-top: 96px; }   /* names anchored at one height, text under them */
.earcard__name { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--c-accent-cyan); }
.earcard__text { color: var(--c-text-muted); }
.earcard--lit {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .12) 100%),
        linear-gradient(180deg, var(--c-accent-cyan) 0%, rgba(94, 55, 110, .3) 100%),
        var(--c-bg-raised);
    border-color: rgba(255, 255, 255, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 44px rgba(171, 235, 240, .4), 0 16px 40px rgba(0, 0, 0, .35);
}
/* the copy sits at the card's foot, where the gradient has gone purple: cream, not dark */
.earcard--lit .earcard__name { color: #FFF9F5; text-shadow: 0 1px 8px rgba(21, 0, 27, .5); }
.earcard--lit .earcard__text { color: rgba(255, 249, 245, .92); text-shadow: 0 1px 6px rgba(21, 0, 27, .5); }
.why-ears__line { margin-top: var(--space-8); max-width: none; font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text-muted); }   /* full width, H4 — as the belief line above */

/* ── 5 · SPINS: the Venn ──────────────────────────────────────────── */
.why-spins { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.why-spins__grid { display: flex; flex-direction: column; gap: var(--space-10); }
.why-spins__copy { display: flex; flex-direction: column; gap: var(--space-3); }
.why-spins__copy h2 { max-width: none; font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-regular); color: var(--c-text-muted); }   /* the lead-in steps down to H3; SPINS carries the weight */
.why-spins__name { font-size: var(--t-display-1); line-height: var(--lh-tight); letter-spacing: .02em; color: var(--c-accent-pink); text-shadow: 0 0 24px rgba(232, 182, 240, .35); }
.why-spins__expand { font-size: var(--t-p1); color: var(--c-accent-cyan); }
.why-spins__copy p:last-child { max-width: var(--measure); margin-top: var(--space-3); }
.why-venn { width: 100%; max-width: 640px; margin-inline: auto; }
.why-venn svg { width: 100%; height: auto; overflow: hidden; }   /* hidden: the pre-reveal drift must never widen the page (it did, on phones) */
.why-venn__c { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.why-venn__c--sp { transform: translateX(-40px); }
.why-venn__c--ns { transform: translateX(40px); }
.why-venn.is-visible .why-venn__c { transform: none; }        /* the circles drift together; the I appears where they meet */
.why-venn__halo { opacity: .8; }
.why-venn.is-visible .why-venn__c--sp .why-venn__halo { animation: why-halo 6s ease-in-out infinite; }
.why-venn.is-visible .why-venn__c--ns .why-venn__halo { animation: why-halo 6s ease-in-out -3s infinite; }
@keyframes why-halo { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.why-venn__abbr  { font-family: var(--font-primary); font-size: 48px; fill: var(--c-accent-cyan); text-anchor: middle; }
.why-venn__abbr--ns { fill: var(--c-accent-cyan); }
.why-venn__label { font-family: var(--font-primary); font-size: 15px; fill: rgba(255, 249, 245, .85); text-anchor: middle; }
.why-venn__i { opacity: 0; transition: opacity .8s ease 1.2s; }
.why-venn.is-visible .why-venn__i { opacity: 1; }
.why-venn__mark { filter: drop-shadow(0 0 6px rgba(255, 249, 245, .6)); }
.why-venn__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why-venn.is-visible .why-venn__mark path { animation: why-draw 1.4s ease-out 1.6s both; }   /* the orbit and arrows draw themselves once the discs have met */

/* ── 6 · Science bento ────────────────────────────────────────────── */
.why-science { background: var(--c-surface-1); }
.why-science__top { display: flex; flex-direction: column; gap: var(--space-4); }
.why-science__top h2 { max-width: none; }
.why-science__top p { max-width: none; font-size: var(--t-h4); line-height: var(--lh-heading); }   /* full width, H4 — as section 4 */
.why-bento { display: grid; gap: var(--space-5); margin-top: var(--space-10); }
.why-bento__big, .why-bento__card {
    position: relative; overflow: hidden; contain: paint; border-radius: var(--radius-card);
    border: 1px solid rgba(171, 235, 240, .16);
    box-shadow: var(--gloss-edge), 0 20px 60px rgba(0, 0, 0, .35);
}
.why-bento__big { min-height: 420px; display: flex; align-items: flex-end; padding: var(--space-8); background: linear-gradient(-36deg, rgba(171, 235, 240, .9) 0%, var(--primary-500) 60%, var(--primary-900) 100%); }
.why-bento__text { position: relative; z-index: 1; max-width: 520px; display: flex; flex-direction: column; gap: var(--space-4); }
.why-bento__text h3, .why-bento__card h3 { font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--c-accent-cyan); }
.why-bento__text p, .why-bento__card p { font-size: var(--t-h5); line-height: var(--lh-heading); color: var(--c-text); }
.why-resolve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }   /* the SVG clips itself: the ring animation scales 5x and iOS counted the overflow into the page width */
.why-resolve__line { stroke: rgba(255, 249, 245, .55); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.why-bento__big.is-visible .why-resolve__line { animation: why-draw 2.4s ease-out calc(.3s + var(--k) * .12s) both; }
@keyframes why-draw { to { stroke-dashoffset: 0; } }
.why-resolve__dot  { fill: #FFF9F5; opacity: 0; }
.why-resolve__ring { fill: none; stroke: #FFF9F5; stroke-width: 1.5; opacity: 0; }
.why-bento__big.is-visible .why-resolve__dot  { animation: why-dot-in .4s ease-out 2.6s both, why-dot-glow 3s ease-in-out 3s infinite; }
.why-bento__big.is-visible .why-resolve__ring { animation: why-ring-out 2.4s ease-out 3s infinite; }
@keyframes why-dot-in   { from { opacity: 0; transform: scale(.4); transform-origin: 560px 250px; } to { opacity: 1; } }
@keyframes why-dot-glow { 0%, 100% { filter: drop-shadow(0 0 4px #fff); } 50% { filter: drop-shadow(0 0 12px #fff); } }
@keyframes why-ring-out { 0% { opacity: .8; transform: scale(1); transform-origin: 560px 250px; } 100% { opacity: 0; transform: scale(5); transform-origin: 560px 250px; } }
.why-bento__card { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); min-height: 220px; padding: var(--space-6); }
.why-bento__card--sp { background: var(--gloss-sheen), linear-gradient(223deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .7) 97%), var(--c-accent-pink); }
.why-bento__card--i  { background: var(--gloss-sheen), linear-gradient(47deg, var(--primary-900) 0%, var(--c-accent-highlight) 100%); }
.why-bento__card--ns { background: var(--gloss-sheen), linear-gradient(222deg, var(--cream-600) 0%, var(--primary-900) 100%); }
.why-bento__card--ns h3 { color: var(--c-accent-cyan); }
.why-ticks { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 40px; margin-bottom: auto; align-self: flex-end; }   /* the Signal Processing card: 2932 features from a few seconds */
.why-ticks i { display: block; width: 2px; height: 8px; border-radius: 1px; background: rgba(255, 249, 245, .8); opacity: .35; }
.why-bento__card--sp.is-visible .why-ticks i { animation: why-tick 1.6s ease-in-out calc(var(--k) * .06s) infinite alternate; }
@keyframes why-tick { from { height: 6px; opacity: .3; } to { height: 26px; opacity: 1; } }
/* NeuroScience: the links fire in sequence, the nodes flash as a pulse reaches them */
.why-neurons { width: 200px; max-width: 100%; height: 56px; margin-bottom: auto; align-self: flex-end; overflow: visible; }
.why-neurons__links path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why-neurons__nodes circle { opacity: .45; }
.why-bento__card--ns.is-visible .why-neurons__links path { animation: why-fire 3.6s ease-in-out calc(var(--k) * .4s) infinite; }
.why-bento__card--ns.is-visible .why-neurons__nodes circle { animation: why-node 3.6s ease-in-out calc(var(--k) * .4s) infinite; }
@keyframes why-fire { 0% { stroke-dashoffset: 1; } 20%, 60% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: 1; } }
@keyframes why-node { 0%, 100% { opacity: .45; filter: none; } 15%, 35% { opacity: 1; filter: drop-shadow(0 0 6px #ABEBF0); } }
/* Intelligence: eight bars fill to their level in turn, then settle */
.why-levels { display: flex; align-items: flex-end; gap: 6px; height: 40px; margin-bottom: auto; align-self: flex-end; }
.why-levels i { display: block; width: 10px; height: calc(40px * var(--lv)); border-radius: 3px 3px 1px 1px; background: rgba(255, 249, 245, .85); transform: scaleY(0); transform-origin: bottom; }
.why-bento__card--i.is-visible .why-levels i { animation: why-level 5s ease-out calc(var(--k) * .15s) infinite; }
@keyframes why-level { 0% { transform: scaleY(0); } 25%, 80% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } }

/* ── 7 · The payoff: the deck ─────────────────────────────────────── */
.why-outcomes { background: var(--primary-800); }
.why-outcomes__grid { display: flex; flex-direction: column; gap: var(--space-10); }
.why-outcomes__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.why-outcomes__title { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.why-outcomes__note { color: var(--c-text-muted); }
.why-deck { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4); align-items: center; user-select: none; -webkit-user-select: none; }
.why-deck__dots { display: flex; flex-direction: column; gap: 8px; }
.why-deck__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c-accent-pink); opacity: .5; transition: height .3s ease, opacity .3s ease, background-color .3s ease; }
.why-deck__dot[aria-selected="true"] { height: 33px; opacity: 1; background: var(--primary-400); box-shadow: var(--gloss-edge); }
.why-deck__stage { position: relative; height: 280px; cursor: pointer; }
.outcome {
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-5);                          /* narrow phones (≈360px) need the room; desktop restores 32 */
    opacity: 0; transform: translateY(40px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
}
.outcome.is-active { opacity: 1; transform: none; pointer-events: auto; }
.outcome.is-entering-up   { transition: none; transform: translateY(60px); }
.outcome.is-entering-down { transition: none; transform: translateY(-60px); }
.outcome.is-leaving-up   { opacity: 0; transform: translateY(-60px); }
.outcome.is-leaving-down { opacity: 0; transform: translateY(60px); }
.why-deck.is-held .outcome.is-active { transform: scale(.985); }   /* the hold is acknowledged */
.outcome__icon { position: relative; flex: 0 0 72px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; color: #FFF9F5; filter: drop-shadow(0 0 12px rgba(171, 235, 240, .35)); }
.outcome__icon::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(171, 235, 240, .22) 0%, rgba(171, 235, 240, 0) 70%); z-index: -1; }
.outcome__icon svg { width: 100%; height: 100%; max-height: 96px; }
.outcome > div { min-width: 0; }
.outcome__name { font-size: var(--t-h4); line-height: var(--lh-heading); }
.outcome__text { margin-top: var(--space-2); color: var(--c-text-muted); }

/* ── 8 · Not trained on text: the ring of bars (the logo mark) ─────── */
.why-engine { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.why-engine__grid { display: flex; flex-direction: column; gap: var(--space-10); }
.why-engine__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

.why-engine__visual { width: 100%; max-width: 560px; margin-inline: auto; }
.why-engine__visual svg { width: 100%; height: auto; overflow: visible; }
/* in: two periods of each line drawn; scrolling one period (-360) seams. The
   lines fade as they approach the ring, so the ring appears to take them in. */
.why-engine__tangle { animation: why-eng-in 12s linear infinite; }
@keyframes why-eng-in { from { transform: translateX(-360px); } to { transform: translateX(0); } }   /* rightward: INTO the ring */
.why-engine__in { opacity: .7; }
/* the ring: the logo mark (as on the earlier cut), turning once a minute, bars breathing */
.why-ring__bars { transform-origin: 0 0; animation: why-turn 60s linear infinite; }
.why-ring__bars line { stroke: var(--c-accent-cyan); stroke-width: 3; stroke-linecap: round; transform-origin: 0 0; animation: why-bar 3s ease-in-out calc(var(--k) * -.075s) infinite alternate; }
@keyframes why-turn { to { transform: rotate(360deg); } }
@keyframes why-bar  { from { opacity: .45; } to { opacity: 1; } }
.why-ring__core { fill: rgba(0, 150, 136, .15); stroke: rgba(171, 235, 240, .35); stroke-width: 1; }
/* out: the clean line draws once, the point glows and rings on a 4s beat */
.why-engine__outline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why-engine__visual.is-visible .why-engine__outline { animation: why-draw 1.2s ease-out .8s both; }
.why-engine__point { fill: #FFF9F5; opacity: 0; }
.why-engine__pulse { fill: none; stroke: #FFF9F5; stroke-width: 1.5; opacity: 0; transform-origin: 524px 140px; }
.why-engine__visual.is-visible .why-engine__point { animation: why-dot-in .4s ease-out 1.9s both, why-eng-glow 4s ease-in-out 2.2s infinite; }
.why-engine__visual.is-visible .why-engine__pulse { animation: why-eng-ring 4s ease-out 2.2s infinite; }
@keyframes why-eng-glow { 0%, 100% { filter: drop-shadow(0 0 4px #fff); } 12% { filter: drop-shadow(0 0 14px #fff); } }
@keyframes why-eng-ring { 0% { opacity: .8; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(4); } }

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* tablet: the DESKTOP doorway at the size it has at 1024 (90% of 1024 = 922px),
       same luminance, no extra CSS light (2026-09-18); the copy keeps
       the mobile arrangement                                                  */
    .why-hero { min-height: 700px; background: url('../../images/why-pradhi/doorway.svg') left center / 922px auto no-repeat, var(--primary-800); }
    .why-hero__inner { padding-left: 36%; }   /* clear of the door's face (ends ~270px in) */
    /* tablet: the swipe row stays (3-up only fits from 1024) */
    .why-sources__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
    .why-field { grid-template-columns: repeat(10, 1fr); }
    .why-field span:nth-child(-n + 21) { display: block; }
    /* tablet: the three ear cards stay stacked (3-up only fits from 1024) */
    .why-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-bento__big { grid-column: 1 / -1; }
    .why-bento__card--i { grid-column: 1 / -1; }   /* tablet: the third row's card runs full width */
    .why-deck__stage { height: 260px; }
    .outcome { gap: var(--space-8); padding: var(--space-8); }
    .outcome__icon { flex-basis: 96px; width: 96px; height: 96px; }
}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .why-hero { min-height: 774px; align-items: center; padding-block: var(--space-15); background: url('../../images/why-pradhi/doorway.svg') left center / 90% auto no-repeat, var(--primary-800); }
    .why-hero__inner { padding-left: var(--page-gutter); }
    .why-hero__copy { align-items: flex-start; text-align: left; }
    .why-hero h1 { font-size: var(--t-display-1); line-height: var(--lh-tight); }
    .why-hero__inner { flex-direction: row; justify-content: flex-end; align-items: center; }
    .why-hero__copy { flex: 0 0 58%; }   /* 50 until 2026-10-08. From 1024 this, not the h1's ch cap, is what bounds the headline, and at 50% the shorter headline broke to four and five lines with 'voice.' stranded. 58 gives three at every band and still clears the doorway art on the left. */

    .why-senses__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .why-senses__copy { flex: 0 0 40%; }
    .why-senses__copy h2 { max-width: 14ch; }
    .why-senses__cards { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
    .why-senses__cards > li { width: auto; }
    .why-senses__dots { display: none; }
    .sense { min-height: 342px; }
    .sense--lit { transform: translateY(-8px); }

    .why-ears__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }


    /* one column from 1024 as well (2026-09-23): the heading runs the
       full width, the five sources sit under it, and the question about them comes
       last, so the reader meets the sources before being asked to choose between them */
    .why-sources__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "bar" "reveals" "list" "panel" "close"; row-gap: var(--space-8); }
    .why-sources__title { grid-area: title; }   /* full width now that nothing sits beside it */
    .why-sources__panel { grid-area: panel; margin-top: var(--space-6); padding: var(--space-8); }
    .why-sources__close { grid-area: close; }
    .why-sources__bar   { grid-area: bar; margin-top: var(--space-4); }
    .why-sources__reveals { grid-area: reveals; margin-top: calc(var(--space-6) * -1); }
    .why-sources__list  { grid-area: list; }

    .why-field { grid-template-columns: repeat(20, 1fr); gap: var(--space-3); }

    .why-spins__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .why-spins__copy { align-self: center; }
    .why-spins__copy { flex: 0 0 48%; }
    .why-venn { flex: 1; }

    .why-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
    .why-bento__big { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 543px; }
    .why-bento__card--sp { grid-column: 3; grid-row: 1; }
    .why-bento__card--ns { grid-column: 3; grid-row: 2; }
    .why-bento__card--i  { grid-column: 1 / 4; grid-row: 3; min-height: 180px; }

    .why-outcomes__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .why-outcomes__copy { flex: 0 0 46%; }
    .why-outcomes__title { max-width: 14ch; }   /* the caps only when the deck sits beside the copy; stacked, the copy runs full width */
    .why-outcomes__note { max-width: 560px; }
    .why-deck { flex: 1; }

    .why-engine__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .why-engine__visual { flex: 0 0 48%; margin: 0; }
    .why-engine__copy h2 { max-width: none; }   /* 14ch was cut for "The Human Signal Engine."; the heading that replaced it is 38 characters and took three lines in that width (2026-10-03) */
    .why-engine__copy p { max-width: var(--measure); }
}

/* ── FAQ ground, overriding home.css ──────────────────────────────────
   The .faq rules come from home.css, which is loaded on this page, and all
   of them are right here except the background. On Home the band sits under
   .why, which ENDS on primary-900, so starting at primary-800 is a step
   lighter and the seam reads. Here it sits under .why-engine, which ends on
   primary-800 — reusing Home's value would put the same colour on both sides
   of the join and the two sections would read as one surface with a lopsided
   gap in the middle. That is exactly the bug found on Home section 6 on
   2026-10-09.
   So it starts a step lighter again, at primary-700, and still lands on
   primary-900 for the CTA band's dark art below.
   why-voice.css loads after home.css, so the later rule wins on equal
   specificity; the override is scoped by living in this file.          */
.faq { background: linear-gradient(180deg, var(--primary-700) 0%, var(--primary-900) 100%); }