/* Kyha hero overlays: drop-in from kyha-hero-overlays.html (design handoff).
   Placed and sized per page via the --kyha-ov-* variables (landing-v3.css). */
.kyha-ov{
  --kyha-ov-width:340px; --kyha-ov-x:auto; --kyha-ov-y:50%; --kyha-ov-right:6%; --kyha-ov-speed:1;
  --kyha-ov-glass:rgba(34,36,34,.22); --kyha-ov-evernight:#275B50;
  position:absolute; left:var(--kyha-ov-x); right:var(--kyha-ov-right); top:var(--kyha-ov-y); transform:translateY(-50%);
  width:var(--kyha-ov-width); max-width:100%; container-type:inline-size; pointer-events:none; z-index:2;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif; font-synthesis:none;
}
.kyha-ov *{box-sizing:border-box}
.kyha-ov-stage{--u:calc(100cqw / 340);--s:var(--kyha-ov-speed);position:relative;width:100%;aspect-ratio:340/215}
.kyha-ov .sc{position:absolute;color:#fff;visibility:hidden}
.kyha-ov .sc.play{visibility:visible}
.kyha-ov .txt{text-shadow:0 0 calc(var(--u)*6) rgba(17,34,30,.45)}
.kyha-ov .serif{font-family:'Rozha One',Georgia,serif;font-weight:400}

/* cycle ring */
.kyha-ov .cycle{left:calc(var(--u)*150);top:calc(var(--u)*43);width:calc(var(--u)*130);height:calc(var(--u)*130)}
.kyha-ov .disc{position:absolute;inset:0;border-radius:50%;background:var(--kyha-ov-glass);-webkit-backdrop-filter:blur(calc(var(--u)*8));backdrop-filter:blur(calc(var(--u)*8))}
.kyha-ov svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kyha-ov .arc{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:88 12}
.kyha-ov .dot{fill:#fff;transform-box:fill-box;transform-origin:center}
.kyha-ov .cycle .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2)}
.kyha-ov .num{margin:0;display:flex;align-items:baseline;gap:.22em;font-size:calc(var(--u)*30);line-height:1}
.kyha-ov .roll{display:inline-block;height:1em;line-height:1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.kyha-ov .roll .col{display:flex;flex-direction:column;transform:translateY(-3em)}
.kyha-ov .roll .col span{height:1em;line-height:1;display:block}
.kyha-ov .sub{margin:0;font-size:calc(var(--u)*9);line-height:1.3}

/* symptom pills */
.kyha-ov .symptoms{left:0;top:calc(var(--u)*70);width:calc(var(--u)*340);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*8)}
.kyha-ov .pill{height:calc(var(--u)*30);padding:0 calc(var(--u)*14);border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(calc(var(--u)*6));backdrop-filter:blur(calc(var(--u)*6));color:#383835;font-size:calc(var(--u)*11.5);display:inline-flex;align-items:center;gap:0;white-space:nowrap;transition:background-color .35s ease,color .35s ease,gap .35s ease}
.kyha-ov .chk{width:0;height:calc(var(--u)*11);overflow:hidden;transition:width .35s ease}
.kyha-ov .symptoms.pick .sel{background:rgba(39,91,80,.92);color:#fff;gap:calc(var(--u)*5)}
.kyha-ov .symptoms.pick .sel .chk{width:calc(var(--u)*11)}

/* chat question */
.kyha-ov .chat{left:calc(var(--u)*82);top:calc(var(--u)*78);width:calc(var(--u)*225);height:calc(var(--u)*60)}
.kyha-ov .bubble{position:absolute;inset:0;border-radius:calc(var(--u)*14);background:var(--kyha-ov-glass);-webkit-backdrop-filter:blur(calc(var(--u)*8));backdrop-filter:blur(calc(var(--u)*8))}
.kyha-ov .chat .txt{position:absolute;inset:0;padding:0 calc(var(--u)*12);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*8)}
.kyha-ov .msg{margin:0;width:calc(var(--u)*169);font-size:calc(var(--u)*11.5);line-height:1.55}
.kyha-ov .msg .w{display:inline-block}
.kyha-ov .avatar{flex:none;width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;background:#fff;color:var(--kyha-ov-evernight);display:grid;place-items:center;font-size:calc(var(--u)*13);text-shadow:none}

/* plan card */
.kyha-ov .plan{left:calc(var(--u)*131);top:calc(var(--u)*8);width:calc(var(--u)*168);height:calc(var(--u)*199);font-size:calc(var(--u)*10);line-height:1.8}
.kyha-ov .glass{position:absolute;inset:calc(var(--u)*1) 0 0;border-radius:calc(var(--u)*19);background:var(--kyha-ov-glass);-webkit-backdrop-filter:blur(calc(var(--u)*8));backdrop-filter:blur(calc(var(--u)*8))}
.kyha-ov svg.frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kyha-ov svg.frame rect{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:100}
.kyha-ov .plan .txt{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--u)*36);display:flex;flex-direction:column}
.kyha-ov .plan h2{margin:0 0 calc(var(--u)*2);font-size:calc(var(--u)*12);font-weight:400;line-height:1.7}
.kyha-ov .plan h3{margin:calc(var(--u)*4) 0 0;font-size:calc(var(--u)*10);font-weight:600;line-height:2}
.kyha-ov .row{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*6)}
.kyha-ov .item,.kyha-ov .tag{display:flex;align-items:center;gap:calc(var(--u)*5);white-space:nowrap}
.kyha-ov .item svg{width:calc(var(--u)*12);height:calc(var(--u)*12);flex:none}
.kyha-ov .tag svg{width:calc(var(--u)*13);height:calc(var(--u)*13)}

/* motion: in */
.kyha-ov .sc.play{animation:kyhaCardIn calc(900ms*var(--s)) cubic-bezier(.2,.8,.2,1) calc(200ms*var(--s)) both}
.kyha-ov .plan.play .glass,.kyha-ov .cycle.play .disc,.kyha-ov .chat.play .bubble{animation:kyhaGlassIn calc(700ms*var(--s)) ease-out calc(450ms*var(--s)) both}
.kyha-ov .plan.play svg.frame rect{animation:kyhaDraw calc(1000ms*var(--s)) cubic-bezier(.6,0,.2,1) calc(200ms*var(--s)) both}
.kyha-ov .cycle.play .arc{animation:kyhaArcDraw calc(1100ms*var(--s)) cubic-bezier(.6,0,.2,1) calc(200ms*var(--s)) both}
.kyha-ov .cycle.play .dot,.kyha-ov .play .pop{animation:kyhaPop calc(460ms*var(--s)) cubic-bezier(.3,1.6,.5,1) calc(var(--d)*var(--s)) both}
.kyha-ov .cycle.play .roll .col{animation:kyhaRoll calc(1500ms*var(--s)) cubic-bezier(.22,.9,.24,1) calc(1000ms*var(--s)) both}
.kyha-ov .play .a{animation:kyhaRise calc(520ms*var(--s)) cubic-bezier(.2,.8,.2,1) calc(var(--d)*var(--s)) both}
.kyha-ov .symptoms.play .pill{animation:kyhaPillIn calc(680ms*var(--s)) cubic-bezier(.34,1.56,.64,1) calc(var(--d)*var(--s)) both}
.kyha-ov .sc.play.float{animation:kyhaFloat calc(4200ms*var(--s)) ease-in-out infinite alternate}
/* motion: out (the build in reverse) */
.kyha-ov .sc.play.out{animation:kyhaSettle calc(700ms*var(--s)) ease-in calc(900ms*var(--s)) both}
.kyha-ov .play.out .a,.kyha-ov .play.out .pop{animation:kyhaRiseOut calc(360ms*var(--s)) cubic-bezier(.5,0,.8,.4) calc(var(--o)*var(--s)) both}
.kyha-ov .cycle.play.out .dot{animation:kyhaFadeOut calc(300ms*var(--s)) ease-in calc(var(--o)*var(--s)) both}
.kyha-ov .symptoms.play.out .pill{animation:kyhaPillOut calc(380ms*var(--s)) cubic-bezier(.5,0,.8,.4) calc(var(--o)*var(--s)) both}
.kyha-ov .plan.play.out .glass,.kyha-ov .cycle.play.out .disc,.kyha-ov .chat.play.out .bubble{animation:kyhaGlassOut calc(500ms*var(--s)) ease-in calc(750ms*var(--s)) both}
.kyha-ov .plan.play.out svg.frame rect{animation:kyhaUndraw calc(800ms*var(--s)) cubic-bezier(.6,0,.2,1) calc(700ms*var(--s)) both}
.kyha-ov .cycle.play.out .arc{animation:kyhaArcUndraw calc(800ms*var(--s)) cubic-bezier(.6,0,.2,1) calc(700ms*var(--s)) both}

@keyframes kyhaCardIn{from{transform:translateY(calc(var(--u)*14)) scale(.96)}to{transform:none}}
@keyframes kyhaGlassIn{from{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{opacity:1}}
@keyframes kyhaDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes kyhaArcDraw{from{stroke-dasharray:0 100}to{stroke-dasharray:88 12}}
@keyframes kyhaRise{from{opacity:0;transform:translateY(calc(var(--u)*6))}to{opacity:1;transform:none}}
@keyframes kyhaPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes kyhaRoll{from{transform:translateY(0);filter:blur(0)}15%{filter:blur(calc(var(--u)*.6))}80%{filter:blur(0)}to{transform:translateY(-3em)}}
@keyframes kyhaPillIn{0%{opacity:0;transform:translate(calc(var(--u)*var(--x)),calc(var(--u)*12)) scale(.4) rotate(var(--r))}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes kyhaFloat{from{transform:translateY(0)}to{transform:translateY(calc(var(--u)*-5))}}
@keyframes kyhaSettle{from{transform:none}to{transform:translateY(calc(var(--u)*14)) scale(.96)}}
@keyframes kyhaRiseOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--u)*6))}}
@keyframes kyhaFadeOut{from{opacity:1}to{opacity:0}}
@keyframes kyhaPillOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--u)*6)) scale(.6)}}
@keyframes kyhaGlassOut{from{opacity:1}to{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}
@keyframes kyhaUndraw{from{stroke-dashoffset:0}to{stroke-dashoffset:100}}
@keyframes kyhaArcUndraw{from{stroke-dasharray:88 12}to{stroke-dasharray:0 100}}

@media (prefers-reduced-motion: reduce){.kyha-ov *{animation:none!important;transition:none!important}.kyha-ov .plan{visibility:visible}}