/* Countdown and curved pill motion restored from voice-story.css, scoped to this section. */
.consultation-background { background: radial-gradient(ellipse at 90% 15%, #f8f0f5, transparent 65%), #f0ebf7; border-block: 1px solid #e7dfef; }
.consultation-story { padding-block: 58px 46px; }
.consultation-story .consultation-heading { text-align: center; padding: 16px 0 12px; }
.consultation-story .consultation-heading h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -.035em; }
.consultation-story .consultation-heading p { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.consultation-story .consultation-heading a { color: var(--deep); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.consultation-story .consultation-stage { position: relative; overflow: hidden; }
.consultation-story .consultation-caption { position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; max-width: calc(100vw - 56px); margin: 0; padding: 10px 18px; border: 1px solid #dfd2ed; border-radius: 999px; background: #ffffffed; color: var(--deep); box-shadow: 0 4px 15px #50309706; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; }
.consultation-story .consultation-caption::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 19px; transform: translateX(-50%); background: #c9b6e1; }
.consultation-story .consultation-caption .icon { width: 18px; height: 18px; }
.consultation-story .consultation-stage[data-view="outro"] .consultation-scene { animation: consultation-slide-away 650ms cubic-bezier(.65,0,.3,1) both; }
.consultation-story .healthbook-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(35px, 7vw, 100px); padding-block: 28px 20px; scroll-margin-top: 100px; }
.consultation-story .consultation-stage[data-view="healthbook"] .healthbook-section { animation: healthbook-arrive 650ms cubic-bezier(.2,.7,.25,1) both; }
.consultation-story .healthbook-visual { border-radius: 140px 140px 18px 18px; background: #f0eaf7; padding: 28px 38px 20px; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; }
.consultation-story .healthbook-visual img { width: 100%; max-width: 350px; mix-blend-mode: multiply; }
.consultation-story .healthbook-copy > h3 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
.consultation-story .healthbook-copy > h3 em { font-family: var(--serif); color: var(--purple); font-weight: 400; }
.consultation-story .healthbook-copy > p { color: var(--muted); font-size: 17px; margin-top: 20px; }
.consultation-story .consultation-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; margin-block: 28px; padding-top: 24px; border-top: 1px solid #dcd1e7; }
.consultation-story .consultation-fact > strong { font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -.045em; color: var(--deep); white-space: nowrap; }
.consultation-story .consultation-fact > strong span { font-size: 22px; font-weight: 400; letter-spacing: 0; }
.consultation-story .consultation-fact > strong .consultation-fact-prefix { display: block; margin-bottom: 7px; font-size: 18px; line-height: 1.3; }
.consultation-story .consultation-fact p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.consultation-story .consultation-fact a { color: var(--deep); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.consultation-story .consultation-scene { --minute-duration: 2.5s; position: relative; height: 360px; isolation: isolate; }
.consultation-story .consultation-scene::before { content: ''; position: absolute; inset: 5% 20%; background: radial-gradient(ellipse, #eee6f780, transparent 68%); pointer-events: none; }
.consultation-story .consultation-clock { position: absolute; width: 184px; height: 184px; left: 50%; top: 50%; margin: -92px; z-index: 2; border-radius: 50%; background: linear-gradient(150deg, #fff, #faf6fd); box-shadow: 0 0 0 9px #f2edf660, 0 18px 45px #5335750d, inset 0 0 0 1px #e5dbee; transition: transform 400ms ease; }
.consultation-story .clock-dial { display: block; width: 100%; height: 100%; fill: none; }
.consultation-story .clock-track { stroke: #e9dfef; stroke-width: 1; }
.consultation-story .clock-ticks { stroke: #b4a2c6; stroke-width: 5; stroke-dasharray: 1 41.41; transform-origin: 100px 100px; transform: rotate(-90deg); }
.consultation-story .clock-hand { transform-origin: 100px 100px; }
.consultation-story .consultation-scene:not([data-phase="next"]) .clock-hand { animation: clock-tick var(--minute-duration) steps(60, end) infinite; }
.consultation-story .clock-hand path { stroke: var(--pink); stroke-width: 2; stroke-linecap: round; }
.consultation-story .clock-hand circle { fill: var(--pink); }
.consultation-story .clock-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.consultation-story .clock-readout strong { display: block; color: var(--ink); font-size: 72px; font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: -.06em; padding-right: .06em; }
.consultation-story .clock-readout > span { margin-top: 4px; color: #897991; font-size: 13px; letter-spacing: .1em; }
.consultation-story .clock-readout strong.digit-arrives { animation: clock-number-in 480ms cubic-bezier(.22,.7,.25,1) both; }
.consultation-story .consultation-steps { list-style: none; margin: 0; padding: 0; }
.consultation-story .consultation-step { --x: -253px; --y: -74px; --tilt: -5deg; --bend: -95px; position: absolute; top: 50%; left: 50%; width: max-content; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid #e2d7ec; border-radius: 999px; background: #fffefd; box-shadow: 0 7px 18px #51356908; font-size: 19px; font-weight: 450; line-height: 1.3; letter-spacing: -.025em; white-space: nowrap; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--tilt)); }
.consultation-story .consultation-step .icon { width: 20px; height: 20px; color: var(--purple); }
.consultation-story .step-history { --x: 246px; --y: -74px; --tilt: 5deg; --bend: -90px; background: #f5eefb; border-color: #e8dcf2; }
.consultation-story .step-medicines { --y: 68px; --tilt: 4deg; --bend: 115px; background: #faf0f5; border-color: #eddde6; }
.consultation-story .step-questions { --x: 246px; --y: 68px; --tilt: -4deg; --bend: 120px; }
.consultation-story .step-plan { --x: 0px; --y: 142px; --tilt: -2deg; --bend: 70px; background: #eef4ef; border-color: #dce8dd; }
.consultation-story .step-plan .icon { color: #5b8565; }
.consultation-story .consultation-step[data-state="hidden"] { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
.consultation-story .consultation-step[data-state="visible"] { animation: consultation-step-out 1100ms both; }
.consultation-story .consultation-step[data-state="returning"] { animation: consultation-step-in 950ms both; }
.consultation-story .next-patient { position: absolute; top: 50%; left: 50%; width: max-content; max-width: 100%; transform: translate(-50%, -50%); text-align: center; font-size: clamp(48px, 7.5vw, 94px); font-weight: 550; letter-spacing: -.06em; line-height: 1.1; visibility: hidden; opacity: 0; }
.consultation-story .next-patient span { color: var(--pink); }
.consultation-story .consultation-scene[data-phase="next"] .consultation-clock { animation: clock-away 500ms both; }
.consultation-story .consultation-scene[data-phase="next"] .next-patient { visibility: visible; animation: next-patient-in 850ms cubic-bezier(.2,.75,.25,1.15) both; }
.consultation-story .scene-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; position: relative; z-index: 3; }
.consultation-story .motion-toggle, .consultation-story .story-replay, .consultation-story .story-skip { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--line); border-radius: 50px; min-height: 44px; padding: 8px 14px; color: var(--muted); font-size: 12px; }
.consultation-story .motion-toggle:hover, .consultation-story .story-replay:hover, .consultation-story .story-skip:hover { border-color: var(--purple); color: var(--deep); }
.consultation-story .story-skip { color: var(--deep); }
.consultation-story .motion-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.consultation-story .motion-toggle .play-symbol, .consultation-story .motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.consultation-story .motion-toggle[aria-pressed="true"] .play-symbol { display: block; }
.consultation-story .consultation-scene[data-static="true"] .consultation-step { opacity: 1; animation: none; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--tilt)); }
.consultation-story .consultation-scene[data-static="true"] .clock-hand { animation: none; }
.consultation-story[data-motion-visible="false"] *, .consultation-story[data-paused="true"] * { animation-play-state: paused; }
@keyframes clock-tick { to { transform: rotate(360deg); } }
@keyframes clock-number-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes consultation-step-out {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); animation-timing-function: ease-out; }
  35% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * .38), var(--bend)) rotate(calc(var(--tilt) * -2)) scale(.72); animation-timing-function: ease-out; }
  72% { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.04), calc(var(--y) * 1.05)) rotate(calc(var(--tilt) * 1.3)) scale(1.04); animation-timing-function: ease-in-out; }
  88% { transform: translate(-50%, -50%) translate(calc(var(--x) * .985), var(--y)) rotate(calc(var(--tilt) * .9)) scale(.985); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--tilt)) scale(1); }
}
@keyframes consultation-step-in {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--tilt)); animation-timing-function: ease-in; }
  28% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * 1.03), calc(var(--y) * 1.05)) rotate(calc(var(--tilt) * 1.4)); animation-timing-function: ease-in-out; }
  72% { opacity: .8; transform: translate(-50%, -50%) translate(calc(var(--x) * .35), var(--bend)) rotate(calc(var(--tilt) * -2)) scale(.65); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
}
@keyframes clock-away { to { opacity: 0; transform: scale(.6); } }
@keyframes next-patient-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes consultation-slide-away { to { transform: translateX(-100%); opacity: 0; } }
@keyframes healthbook-arrive { from { opacity: 0; transform: translateX(35px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 980px) {
  .consultation-story .consultation-step { --x: clamp(-210px, -25vw, -180px); --y: -90px; font-size: 14px; padding: 11px 16px; }
  .consultation-story .step-history, .consultation-story .step-questions { --x: clamp(180px, 25vw, 210px); }
  .consultation-story .step-medicines, .consultation-story .step-questions { --y: 90px; }
  .consultation-story .step-plan { --x: 0px; --y: 142px; }
}
@media (max-width: 650px) {
  .consultation-story { padding-block: 28px 32px; }
  .consultation-story .healthbook-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; }
  .consultation-story .healthbook-copy { grid-row: 1; }
  .consultation-story .healthbook-copy > p { font-size: 15px; margin-top: 16px; }
  .consultation-story .healthbook-visual { border-radius: 100px 100px 15px 15px; padding: 24px 25px 15px; max-width: 440px; width: 100%; margin-inline: auto; }
  .consultation-story .healthbook-visual img { max-width: 280px; }
  .consultation-story .consultation-fact { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-block: 22px; padding-top: 20px; }
  .consultation-story .consultation-fact > strong { font-size: 38px; }
  .consultation-story .consultation-heading h2 { font-size: clamp(26px, 6.7vw, 36px); }
  .consultation-story .consultation-heading p { font-size: 13px; max-width: 340px; margin-inline: auto; }
  .consultation-story .consultation-caption { font-size: 12px; padding: 9px 13px; gap: 7px; }
  .consultation-story .consultation-scene { height: 500px; }
  .consultation-story .consultation-scene::before { inset: 10% 0; }
  .consultation-story .consultation-clock { width: 138px; height: 138px; margin: -69px; top: 50%; }
  .consultation-story .clock-readout strong { font-size: 54px; }
  .consultation-story .clock-readout > span { font-size: 11px; margin-top: 2px; }
  .consultation-story .consultation-step { top: 50%; font-size: 15px; padding: 10px 16px; --x: -20px; --y: -205px; --bend: -65px; --tilt: -2deg; }
  .consultation-story .consultation-step .icon { width: 18px; height: 18px; }
  .consultation-story .step-history { --x: 20px; --y: -150px; --bend: -25px; --tilt: 2deg; }
  .consultation-story .step-medicines { --x: -20px; --y: 96px; --bend: 20px; --tilt: 2deg; }
  .consultation-story .step-questions { --x: 20px; --y: 152px; --bend: 70px; --tilt: -2deg; }
  .consultation-story .step-plan { --x: -10px; --y: 208px; --bend: 110px; --tilt: 1deg; }
  .consultation-story .next-patient { font-size: clamp(34px, 9vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .consultation-story *, .consultation-story *::before { animation: none !important; transition: none !important; }
}
