@import url("../tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.2em}
button,select{font:inherit}
.shell{width:min(74rem,calc(100% - 3rem));margin-inline:auto}
.skip-link{position:fixed;inset:1rem auto auto 1rem;z-index:30;padding:.7rem 1rem;background:var(--color-ink);color:#fff;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header{border-bottom:1px solid var(--color-rule)}
.nav{min-height:4.75rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.brand-mark{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:50%;background:var(--color-ink)}
.brand-mark span{display:block;width:2px;border-radius:2px;background:var(--color-paper)}
.brand-mark span:nth-child(1){height:.45rem}.brand-mark span:nth-child(2){height:.9rem}.brand-mark span:nth-child(3){height:1.2rem}.brand-mark span:nth-child(4){height:.65rem}
.nav-links,.footer-row div{display:flex;align-items:center;gap:1.4rem}
.nav-links a{font-size:var(--text-sm);font-weight:650;text-decoration:none}
.store-badge{height:2.5rem;display:inline-flex;line-height:0}.store-badge img{width:auto;height:100%}
.eyebrow,.section-label,.audio-kicker{margin:0 0 .8rem;color:var(--color-accent);font-size:var(--text-xs);font-weight:700;letter-spacing:.13em;text-transform:uppercase}
h1,h2{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:-.025em}
h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.94}
h2{font-size:clamp(2rem,4.5vw,3.45rem);line-height:1.04}
.hub-hero{padding-block:clamp(4.5rem,11vw,8.5rem)}
.hub-hero h1{max-width:15ch}.hub-hero h1 em{color:var(--color-accent);font-weight:400}
.hub-hero>p:last-child{max-width:43rem;margin:1.65rem 0 0;color:var(--color-ink-2);font-size:var(--text-xl)}
.interview-library{padding-block:4rem 7rem;border-top:1px solid var(--color-rule)}
.library-heading{display:grid;grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:1.75rem}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.library-filter{display:grid;gap:1.1rem;margin-bottom:2.25rem;padding-bottom:1.75rem;border-bottom:1px solid var(--color-rule)}
.filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem 1.5rem}
.filter-search{display:flex;align-items:center;gap:.55rem;flex:1 1 20rem;max-width:30rem;padding:0 .85rem;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper-3);transition:border-color var(--dur-short),box-shadow var(--dur-short)}
.filter-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 .18rem var(--color-accent-wash)}
.filter-search-icon{flex:none;width:1.05rem;height:1.05rem;color:var(--color-ink-2);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.filter-search input{flex:1 1 auto;min-width:0;padding:.72rem 0;border:0;background:transparent;color:inherit;font-size:var(--text-md)}
.filter-search input:focus{outline:none}
.filter-search input::-webkit-search-cancel-button,.filter-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.filter-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;background:var(--color-paper-2);color:var(--color-ink-2);cursor:pointer}
.filter-clear svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.filter-count{margin:0;color:var(--color-ink-2);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
.filter-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-2);font-size:var(--text-sm);font-weight:600;line-height:1.35;white-space:nowrap;cursor:pointer;transition:background var(--dur-short),border-color var(--dur-short),color var(--dur-short)}
.chip-count{font-size:var(--text-xs);font-variant-numeric:tabular-nums;opacity:.6}
.chip[aria-pressed=true]{border-color:var(--color-ink);background:var(--color-ink);color:var(--color-paper)}
.chip[aria-pressed=true] .chip-count{opacity:.75}
.chip:disabled{opacity:.4;cursor:default}
.chip:focus-visible,.filter-clear:focus-visible,.link-button:focus-visible{outline:2px solid var(--color-focus);outline-offset:.15rem}
.library-empty{max-width:40rem;margin:0;color:var(--color-ink-2)}
.link-button{padding:0;border:0;background:none;color:var(--color-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.interview-grid[hidden],.interview-card[hidden],.library-filter[hidden],.library-empty[hidden],.filter-clear[hidden]{display:none}
.interview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.interview-card{min-height:21rem;display:flex;flex-direction:column;padding:2rem;border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-3);text-decoration:none}
.interview-card:first-child{grid-column:span 2;background:var(--color-ink);color:var(--color-paper)}
.interview-card .card-top{display:flex;justify-content:space-between;gap:1rem;color:var(--color-accent);font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.interview-card:first-child .card-top{color:var(--color-accent-wash)}
.interview-card h3{max-width:17ch;margin:2.75rem 0 1rem;font-family:var(--font-display);font-size:clamp(2rem,4vw,3.15rem);font-weight:400;line-height:1.02}
.interview-card p{max-width:40rem;margin:0;color:var(--color-ink-2)}
.interview-card:first-child p{color:var(--color-paper-2)}
.interview-card .card-link{margin-top:auto;padding-top:1.5rem;font-weight:700}
.hub-boundary{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:4rem 7rem;border-top:1px solid var(--color-rule)}
.hub-boundary p{max-width:45rem;margin:0;color:var(--color-ink-2)}
.case-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(21rem,.88fr);gap:clamp(2rem,6vw,5rem);align-items:end;padding-block:clamp(3.5rem,8vw,6.5rem)}
.hero-copy h1{max-width:12ch}
.case-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--color-rule)}
.case-facts dt{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.case-facts dd{margin:.3rem 0 0;color:var(--color-ink-2);font-size:var(--text-sm)}
.audio-player{padding:1.5rem;border:1px solid #263c65;border-radius:var(--radius-card);background:#07101f;color:#f4f6fb;box-shadow:0 1.2rem 3rem rgba(7,16,31,.16)}
.audio-player .audio-kicker{color:#8eb2ff}
.audio-title-row{display:flex;justify-content:space-between;gap:1rem}.audio-title-row span{color:#b7c2d8;font-variant-numeric:tabular-nums}
.listen-challenge{display:grid;gap:.25rem;margin-top:1rem;padding:1rem;border:1px solid #34496c;border-radius:var(--radius-input);background:#101b2d}.listen-challenge span,.prediction-cue span{color:#8eb2ff;font-size:var(--text-xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase}.listen-challenge p{margin:0;color:#b7c2d8;font-size:var(--text-sm);line-height:1.5}
.wave{height:4.5rem;display:flex;align-items:center;justify-content:center;gap:.36rem;margin:1rem 0;background:linear-gradient(90deg,rgba(112,158,255,.04),rgba(112,158,255,.13),rgba(112,158,255,.04));border-radius:var(--radius-input)}
.wave span{width:.3rem;border-radius:999px;background:#8eb2ff;animation:pulse 1.25s ease-in-out infinite;animation-play-state:paused}
.wave span:nth-child(1),.wave span:nth-child(9){height:20%}.wave span:nth-child(2),.wave span:nth-child(8){height:42%;animation-delay:-.2s}.wave span:nth-child(3),.wave span:nth-child(7){height:70%;animation-delay:-.5s}.wave span:nth-child(4),.wave span:nth-child(6){height:48%;animation-delay:-.8s}.wave span:nth-child(5){height:88%;animation-delay:-1s}
.audio-player.is-playing .wave span{animation-play-state:running}
@keyframes pulse{50%{transform:scaleY(.38);opacity:.62}}
.audio-controls{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.play-button,.quiet-button{min-height:2.8rem;padding:.65rem .9rem;border:1px solid #8eb2ff;border-radius:var(--radius-input);cursor:pointer}
.play-button{display:inline-flex;align-items:center;gap:.55rem;background:#8eb2ff;color:#07101f;font-weight:750}.quiet-button{background:transparent;color:#f4f6fb}
.speed-control{display:flex;align-items:center;gap:.7rem;margin-top:1rem;color:#b7c2d8;font-size:var(--text-sm);cursor:pointer}
.speed-control>span:first-child{flex:none}
.speed-control input[type=range]{flex:1 1 auto;min-width:6rem;height:1.6rem;margin:0;accent-color:#8eb2ff;background:transparent;cursor:pointer}
.speed-control input[type=range]:focus-visible{outline:2px solid #8eb2ff;outline-offset:.35rem;border-radius:99px}
.speed-value{flex:none;min-width:3.6rem;text-align:right;color:#f4f6fb;font-variant-numeric:tabular-nums;font-weight:650}
.prediction-toggle{display:flex;align-items:flex-start;gap:.55rem;margin-top:.9rem;color:#dbe3f2;font-size:var(--text-sm);cursor:pointer}.prediction-toggle input{margin-top:.32rem;accent-color:#8eb2ff}
.progress-track{height:.25rem;margin-top:1rem;overflow:hidden;border-radius:99px;background:#26344b}.progress-track span{display:block;width:0;height:100%;background:#8eb2ff;transition:width .15s linear}
.audio-status{margin:.65rem 0 0;color:#b7c2d8;font-size:var(--text-sm)}
.prediction-cue{margin-top:1rem;padding:1rem;border:1px solid #8eb2ff;border-radius:var(--radius-input);background:#101b2d}.prediction-cue p{margin:.35rem 0;color:#fff;font-weight:650}.prediction-cue small{display:block;color:#b7c2d8}.continue-button{margin-top:.85rem;padding:.6rem .85rem;border:0;border-radius:var(--radius-input);background:#8eb2ff;color:#07101f;font-weight:750;cursor:pointer}
.recall-practice{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,7vw,7rem);align-items:start;padding-block:4.5rem}.recall-practice>div:first-child>p:last-child{max-width:32rem;color:var(--color-ink-2)}.recall-card{padding:clamp(1.5rem,4vw,2.25rem);border:1px solid var(--color-rule);border-radius:var(--radius-card);background:var(--color-paper-3)}.recall-speaker,.recall-answer span{color:var(--color-accent);font-size:var(--text-xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase}.recall-card blockquote{margin:1rem 0;font-family:var(--font-display);font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.2}.recall-cue{color:var(--color-ink-2)}.recall-button{padding:.7rem .9rem;border:1px solid var(--color-ink);border-radius:var(--radius-input);background:var(--color-ink);color:var(--color-paper);font-weight:700;cursor:pointer}.recall-answer{margin-top:1rem;padding:1rem;border-left:.25rem solid var(--color-accent);background:var(--color-accent-wash)}.recall-answer p{margin:.35rem 0 0;font-weight:650}
.conversation-section{padding-block:5rem 7rem;background:var(--color-paper-2);border-block:1px solid var(--color-rule)}
.conversation-shell{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:clamp(3rem,8vw,8rem);align-items:start}
.section-intro{position:sticky;top:2rem}.section-intro p:last-child{color:var(--color-ink-2)}
.transcript{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.turn{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1rem;padding:1.15rem 1.25rem;border:1px solid transparent;border-radius:var(--radius-card);transition:background var(--dur-short),border-color var(--dur-short),transform var(--dur-short)}
.turn.doctor{background:var(--color-paper-3)}.turn.patient,.turn.parent{background:color-mix(in oklch,var(--color-accent-wash) 50%,var(--color-paper-3))}
.turn .speaker{padding-top:.14rem;color:var(--color-accent);font-size:var(--text-xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase}.turn p{margin:0;font-size:var(--text-lg);line-height:1.6}
.turn.is-active{border-color:var(--color-accent);box-shadow:0 .7rem 1.8rem var(--color-shadow);transform:translateY(-1px)}
.closing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,7rem);padding-block:6rem}
.flow-list{display:grid;gap:0;margin:2rem 0 0;padding:0;list-style:none;counter-reset:flow}
.flow-list li{display:grid;grid-template-columns:3.25rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--color-rule);counter-increment:flow}
.flow-list li::before{content:counter(flow,decimal-leading-zero);color:var(--color-accent);font-size:var(--text-xs);font-weight:750;letter-spacing:.08em}
.do-not-miss{padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--radius-card);background:var(--color-ink);color:var(--color-paper)}
.do-not-miss .section-label{color:var(--color-accent-wash)}.do-not-miss ul{display:grid;gap:1rem;margin:2rem 0 0;padding-left:1.25rem}.do-not-miss li::marker{color:#8eb2ff}
.cta-panel{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(18rem,1.1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.5rem,4vw,3rem)!important;overflow:hidden;border:1px solid #1c2f55!important;border-radius:var(--radius-card);background:#07101f;color:#f4f6fb;box-shadow:0 1.5rem 3.5rem rgba(7,16,31,.18)}
.cta-panel::before{content:"";position:absolute;inset:auto auto -9rem -7rem;width:19rem;aspect-ratio:1;border-radius:50%;background:rgba(112,158,255,.16);filter:blur(1px);pointer-events:none}
.cta-copy{position:relative;z-index:1}
.cta-panel .section-label{color:#8eb2ff}
.cta-panel h2{font-size:clamp(2rem,4vw,3.35rem)}
.cta-panel p{max-width:37rem;color:#b7c2d8}
.cta-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.25rem;margin-top:1.75rem}
.cta-store{height:3.25rem}
.cta-visual{position:relative;display:block;overflow:hidden;border:1px solid rgba(142,178,255,.28);border-radius:calc(var(--radius-card) - .2rem);background:#0b1528;box-shadow:0 1.5rem 3rem rgba(0,0,0,.32);transform:rotate(1.25deg);transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.cta-visual::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.cta-visual img{display:block;width:100%;height:auto}
.text-link{color:#e8edf8;font-weight:650}
.source-section{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding-block:4rem;border-top:1px solid var(--color-rule)}
.source-section>div:last-child>p:first-child{max-width:46rem;margin-top:0;color:var(--color-ink-2)}
.source-list{display:grid;gap:.55rem;margin:1.5rem 0;padding-left:1.2rem}.review-date{font-size:var(--text-sm);color:var(--color-ink-2)}
.educational-note{margin-bottom:5rem;padding:1rem 1.2rem;background:var(--color-accent-wash);font-size:var(--text-sm)}
.site-footer{padding-block:2rem;border-top:1px solid var(--color-rule);font-size:var(--text-sm)}
.footer-row{display:flex;justify-content:space-between;gap:1.5rem}
@media (hover:hover){.chip:not(:disabled):not([aria-pressed=true]):hover{border-color:var(--color-rule-strong);color:var(--color-ink)}.filter-clear:hover{background:var(--color-rule);color:var(--color-ink)}.interview-card,.play-button,.quiet-button,.continue-button,.recall-button{transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}.interview-card:hover,.play-button:hover,.quiet-button:hover,.continue-button:hover,.recall-button:hover{transform:translateY(-2px);box-shadow:0 .75rem 2rem var(--color-shadow)}.cta-visual:hover{transform:rotate(0) translateY(-3px);box-shadow:0 2rem 3.5rem rgba(0,0,0,.4)}}
@media (max-width:54rem){.case-hero,.recall-practice,.conversation-shell,.closing-grid,.source-section,.cta-panel{grid-template-columns:1fr}.section-intro{position:static}.case-facts{grid-template-columns:1fr}.interview-grid{grid-template-columns:1fr}.interview-card:first-child{grid-column:auto}.library-heading,.hub-boundary{grid-template-columns:1fr}.cta-visual{transform:none}}
@media (max-width:40rem){.shell{width:min(100% - 2rem,74rem)}.filter-row{align-items:stretch;flex-direction:column;gap:.7rem}.filter-search{flex:0 0 auto;max-width:none}.filter-chips{flex-wrap:nowrap;margin-inline:-1rem;padding-inline:1rem;overflow-x:auto;overscroll-behavior-x:contain}.chip{flex:none}.nav{min-height:4.25rem}.nav-links>a:not(.store-badge){display:none}.store-badge{height:2.15rem}.turn{grid-template-columns:1fr;gap:.3rem;padding:1rem}.turn p{font-size:var(--text-md)}.audio-controls label{width:100%;margin-left:0}.footer-row{display:grid}.footer-row div{flex-wrap:wrap}.case-hero{padding-top:2.5rem}.cta-panel{margin-inline:-.25rem;padding:1.25rem!important}.cta-actions{align-items:flex-start;flex-direction:column}.cta-store{height:3rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* Landing launch badges; shared placement for Android and browser practice. */
.cta-panel .cta-actions{display:flex;flex-direction:column;align-items:flex-start}
.cta-launch{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);max-width:100%}
.cta-launch .store-badge{height:3.5rem;flex:0 0 auto}
.cta-launch .store-badge img{display:block;height:100%;width:auto}
.cta-launch .launch-web{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);height:3.5rem;padding:0 1.125rem;border:1px solid var(--color-rule-strong);border-radius:.375rem;background:var(--color-launch-bg);color:var(--color-paper-3);text-decoration:none;white-space:nowrap;font-family:var(--font-body);transition:background var(--dur-short) var(--ease-out)}
.cta-launch .launch-web:hover{background:var(--color-launch-hover)}
.cta-launch .launch-web:active{opacity:.85}
.cta-launch a:focus-visible{outline:3px solid var(--color-paper-3);outline-offset:4px}
.cta-launch .browser-icon{width:1.625rem;height:1.625rem;flex:0 0 auto}
.cta-launch .badge-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;line-height:1.15}
.cta-launch .badge-copy>span{font-size:.9375rem;font-weight:650;letter-spacing:-.02em}
.cta-launch .badge-copy small{font-size:.625rem;font-weight:500;letter-spacing:.015em;opacity:.8}
@media(max-width:450px){.cta-launch{gap:var(--space-2xs)}.cta-launch .store-badge,.cta-launch .launch-web{height:3rem}.cta-launch .launch-web{padding:0 var(--space-xs);gap:var(--space-2xs)}.cta-launch .badge-copy>span{font-size:.8125rem}.cta-launch .badge-copy small{font-size:.5625rem}.cta-launch .browser-icon{width:1.375rem;height:1.375rem}}
@media(max-width:22rem){.cta-launch .store-badge,.cta-launch .launch-web{height:2.75rem}.cta-launch .launch-web{padding:0 var(--space-2xs);gap:.375rem}.cta-launch .badge-copy>span{font-size:var(--text-xs)}.cta-launch .badge-copy small{font-size:.5rem}.cta-launch .browser-icon{width:1.25rem;height:1.25rem}}
@media(prefers-reduced-motion:reduce){.cta-launch .launch-web{transition:none}}

/* Keep both badges side by side inside a narrow CTA copy column. */
.cta-panel .cta-actions{container-type:inline-size;width:100%}
@container(max-width:26rem){.cta-launch{gap:var(--space-2xs)}.cta-launch .store-badge,.cta-launch .launch-web{height:2.75rem}.cta-launch .launch-web{padding:0 var(--space-2xs);gap:var(--space-2xs)}.cta-launch .badge-copy>span{font-size:.8125rem}.cta-launch .badge-copy small{font-size:.5625rem}.cta-launch .browser-icon{width:1.375rem;height:1.375rem}}