/* Open, floating introduction. The remaining turns are revealed on request. */
.home .header .identity>.monogram{display:block}
.home .hero{padding:32px 0 48px}
.home .hero h1.animated-name{font-size:clamp(38px,5.6vw,76px);margin:6px 0 4px;justify-content:center;flex-wrap:nowrap}
.home .hero .hero-meta{align-items:center;font-size:18px}
.hero .voice-signal{width:100%;max-width:1000px;margin:8px auto 14px;padding:0}
.hero .voice-signal svg{height:64px}
.conversation-transcript{max-width:690px;margin:0 auto;display:flex;flex-direction:column;gap:14px;text-align:left}
.intro-turn{position:relative;isolation:isolate;max-width:85%;padding:14px 22px 17px;border-radius:24px}
.intro-question{align-self:flex-end;margin-right:24px;background:#e5edf4;color:var(--navy);min-width:180px}
.intro-answer{align-self:flex-start;background:#2762b2;color:white}
.intro-speaker{display:block;font-size:12px;font-weight:600;line-height:1.4;margin-bottom:7px;opacity:.85}
.intro-turn p{font-size:20px;line-height:1.5}
.intro-turn::after{content:"";position:absolute;bottom:0;width:18px;height:20px;background:inherit;z-index:-1}
.intro-question::after{right:-8px;clip-path:polygon(0 0,35% 30%,65% 72%,100% 100%,15% 80%)}
.intro-answer::after{left:-8px;clip-path:polygon(100% 0,65% 30%,35% 72%,0 100%,85% 80%)}
.hero .voice-signal .waveform-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--aqua);color:var(--navy);box-shadow:0 0 0 9px var(--navy);padding:0;cursor:pointer}
.hero .voice-signal .waveform-play svg{width:24px;height:24px}
.waveform-play:hover{background:white!important}
.conversation-pair{display:flex;flex-direction:column;gap:14px;min-width:0}
.conversation-transcript.is-ready{display:grid}
/* Overlapping grid cells reserve the tallest exchange; only opacity and transform animate. */
.is-ready .conversation-pair{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity 120ms ease-out,visibility 0s 120ms,transform 0s 120ms;align-self:start}
.is-ready .conversation-pair.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 200ms ease-out 120ms,transform 200ms ease-out 120ms,visibility 0s 120ms}
.recording-note{font-size:13px;color:#d3e1ed;margin:8px auto 0}
.recording-note:empty{display:none}
.intro-turn .current-word{background:var(--aqua);color:var(--navy);border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.intro-question .current-word{background:var(--navy);color:white}
#conversation-audio{display:block;width:min(100%,360px);margin:16px auto}
@media(prefers-reduced-motion:reduce){.is-ready .conversation-pair,.is-ready .conversation-pair.is-active{transition:none;transform:none}}
.intro-hiring{margin:18px auto 0}
.intro-actions{display:flex;align-items:center;justify-content:flex-start;gap:24px;margin-top:0}
.hero .intro-actions .primary{margin:0;padding:11px 22px;min-width:120px}
.intro-resume{font-size:14px;text-decoration:underline;text-underline-offset:5px}
/* Align the portrait with the full greeting, conversation, and actions. */
.portrait-conversation{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,560px);align-items:stretch;gap:clamp(32px,5vw,64px);max-width:964px;margin:0 auto}
.portrait-conversation-content{min-width:0;text-align:left}
.hero-portrait img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px;transform:scaleX(-1)}
.portrait-conversation .conversation-transcript{margin:0;max-width:none}
/* A3 mobile: larger portrait above the name and conversation player. */
@media(max-width:700px){
 .home .header{padding-block:12px}
 .home .hero{padding:20px 0 40px}
 .home .hero>.inner{padding-inline:24px}
 .portrait-conversation{grid-template-columns:1fr;gap:20px;max-width:420px}
 .hero-portrait{width:clamp(170px,52vw,220px);justify-self:center}
 .hero-portrait img{aspect-ratio:1;object-position:center 30%;border-radius:20px}
 .portrait-conversation-content{text-align:center}
 .home .hero .hero-meta{align-items:center;font-size:16px}
 .home .hero h1.animated-name{font-size:clamp(32px,10.5vw,52px);justify-content:center;margin:6px 0 4px}
 .hero .voice-signal{margin:8px auto 14px}
 .hero .voice-signal svg{height:48px}
 .conversation-transcript,.conversation-pair{gap:14px}
 .intro-turn{max-width:94%;padding:12px 16px 14px;border-radius:22px}
 .intro-turn p{font-size:17px;line-height:1.45}
 .intro-question{min-width:170px;margin-right:12px}
 .intro-hiring{margin-top:18px}
 .intro-actions{flex-direction:column;gap:14px;align-items:stretch;margin-top:0}
 .hero .intro-actions .primary{width:100%;padding-block:14px}
 .intro-resume{align-self:center}
}