/* HearFlow iPhone — persistent device, desk → paper, then four reading levels.
   Source choreography: 543ed038…; site motion reference: e90a7602….
   The actual app pixels are separate from the device and never reconstructed. */
.ios-story{position:relative;z-index:3;margin-top:-48px;background:var(--pink);border-radius:44px;isolation:isolate;scroll-margin-top:60px}
.ios-track{position:relative;height:360svh;min-height:2100px}
.ios-stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;border-radius:44px;contain:layout paint;isolation:isolate}
.ios-desk{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.ios-desk picture{position:absolute;inset:0}
.ios-desk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media(max-aspect-ratio:4/3){.ios-desk img{object-position:center top}}
.ios-desk-soft{filter:blur(14px);transform:scale(1.045);opacity:0}
.ios-desk-tint{position:absolute;inset:0;background:rgba(244,240,231,.27)}
.ios-paper{position:absolute;inset:0;background:var(--card);border-radius:44px;transform:scale(.001);will-change:transform;transform-origin:50% 50%}
.ios-story-flow{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--accent);stroke-width:18;opacity:.15;pointer-events:none;vector-effect:non-scaling-stroke}
.ios-stage>.ios-story-flow{stroke:var(--cream-1);opacity:.35}
.ios-paper .ios-story-flow{stroke:var(--pink);opacity:.72;stroke-width:20}
.ios-intro{position:absolute;left:clamp(28px,4.2vw,82px);top:calc(50% + 90px);width:calc(50% - min(20svh,180px) - 5vw);max-width:390px;transform:translate3d(0,-50%,0);will-change:transform,opacity;z-index:4}
.ios-story .sec-eyebrow{text-align:left;font-size:12px;margin-bottom:16px}
.ios-intro h2{font:600 clamp(34px,3.7vw,60px)/1.04 var(--font-serif);letter-spacing:-.035em;text-wrap:balance;margin:0 0 22px;color:var(--ink)}
.ios-intro p{font-size:15px;font-weight:500;line-height:1.55;margin:0 0 25px;color:var(--ink);text-wrap:pretty}
.ios-store{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;min-height:46px;background:var(--ink);color:var(--cream-1);border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-size:13px;font-weight:650;transition:transform .5s cubic-bezier(.18,1.35,.3,1),background-color .2s}
.ios-store:hover{transform:translate3d(0,-3px,0)}
.ios-store:active{transform:scale(.97)}
.ios-store svg{width:17px;height:19px;fill:currentColor;flex-shrink:0}
.ios-story a:focus-visible,.ios-story button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.ios-phone-anchor{position:absolute;z-index:6;top:50%;left:50%;height:min(80svh,720px);aspect-ratio:1222/2638;transform:translate3d(-50%,-50%,0);will-change:transform}
.ios-device{position:relative;width:100%;height:100%;padding:7px;border-radius:clamp(34px,4.1svh,48px);background:linear-gradient(110deg,#7c7873 0%,#242320 8%,#141516 43%,#504e4a 94%,#99958f 100%);box-shadow:inset 0 0 0 1px #c6c3be,inset 0 0 0 3px #262522,0 1px 2px rgba(20,21,22,.36),0 28px 50px -26px rgba(20,21,22,.43)}
.ios-device::before,.ios-device::after{content:"";position:absolute;left:-2px;top:22%;width:3px;height:6%;background:#44433f;border-radius:2px}
.ios-device::after{top:31%;height:7%}
.ios-display{position:relative;width:100%;height:100%;border-radius:calc(clamp(34px,4.1svh,48px) - 7px);overflow:hidden;background:#fff;isolation:isolate}
.ios-display img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;opacity:0;will-change:opacity}
.ios-display img:first-child{opacity:1}
.ios-island{position:absolute;z-index:2;left:50%;top:1.8%;width:27%;height:3.4%;background:#080809;border-radius:999px;transform:translateX(-50%);pointer-events:none}
.ios-island::after{content:"";position:absolute;right:11%;top:34%;height:31%;aspect-ratio:1;border-radius:50%;background:#111825;box-shadow:inset 0 0 2px rgba(76,86,110,.3)}
.ios-split{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;will-change:opacity,transform}
.ios-split-heading{margin:0;position:absolute;inset:0;font:600 clamp(36px,4.7vw,82px)/1.05 var(--font-serif);letter-spacing:-.04em}
.ios-split-left,.ios-split-right{position:absolute;top:43%;width:calc(50% - min(20svh,180px) - 4.5vw);max-width:420px;will-change:transform}
.ios-split-left{right:calc(50% + min(20svh,180px));text-align:right}
.ios-split-right{left:calc(50% + min(20svh,180px));text-align:left}
.ios-split-detail{position:absolute;top:calc(43% + clamp(105px,11vw,185px));max-width:280px;width:calc(50% - min(20svh,180px) - 6vw);font-size:15px;line-height:1.55;font-weight:500;letter-spacing:0;color:var(--ink-soft);margin:0}
.ios-split-detail.left{right:calc(50% + min(20svh,180px));text-align:right}
.ios-split-detail.right{left:calc(50% + min(20svh,180px))}
.ios-orbit{position:absolute;left:50%;top:50%;height:min(80svh,720px);aspect-ratio:1222/2638;transform:translate(-50%,-50%);z-index:5;pointer-events:none;perspective:900px}
.ios-object{position:absolute;width:clamp(60px,7.1vw,110px);aspect-ratio:1;border-radius:27%;background:var(--cream-1);box-shadow:inset 0 0 0 1px rgba(20,21,22,.09),0 12px 24px -14px rgba(20,21,22,.26);display:grid;place-items:center;opacity:0;will-change:transform,opacity}
.ios-object svg{width:61%;height:61%;fill:none;stroke:var(--ink);stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.ios-object img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ios-object:nth-child(1){top:7%;left:-30%;background:var(--pink)}
.ios-object:nth-child(2){top:11%;right:-31%;background:var(--cream-1)}
.ios-object:nth-child(3){bottom:6%;left:-32%;background:var(--accent-soft)}
.ios-object:nth-child(4){bottom:4%;right:-31%;background:var(--pink)}
.ios-reading{position:absolute;z-index:4;inset:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.ios-reading-side{position:absolute;top:35%;width:calc(50% - min(20svh,180px) - 6vw);max-width:350px}
.ios-reading-side.left{right:calc(50% + min(20svh,180px));text-align:right}
.ios-reading-side.right{left:calc(50% + min(20svh,180px));text-align:left}
.ios-reading h3{font:600 clamp(28px,3.2vw,54px)/1.08 var(--font-serif);letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance}
.ios-reading p{font-size:15px;line-height:1.55;font-weight:500;color:var(--ink-soft);margin:0 0 20px;text-wrap:pretty}
.ios-levels{position:absolute;z-index:8;left:50%;bottom:18px;transform:translateX(-50%);padding:5px;border:1px solid var(--hair);border-radius:999px;display:flex;align-items:center;background:var(--card);gap:2px;opacity:0;pointer-events:none;box-shadow:var(--shadow-1);max-width:calc(100% - 28px)}
.ios-levels button{border:0;background:transparent;color:var(--ink-soft);border-radius:999px;padding:9px 12px;font-family:var(--font-sans);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background-color .24s,color .24s}
.ios-levels button[aria-pressed=true]{background:var(--ink);color:var(--cream-1)}
.ios-story[data-reading=true] .ios-levels{pointer-events:auto}
.ios-details{position:relative;z-index:2;padding:76px clamp(24px,7vw,100px) 100px;background:var(--card);border-radius:44px;overflow:hidden}
.ios-details>.ios-story-flow{opacity:.55;z-index:0}
.ios-details-inner{position:relative;max-width:1160px;margin:0 auto}
.ios-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,80px);padding-bottom:64px}
.ios-steps article{max-width:330px}
.ios-step-title{font:600 30px/1.1 var(--font-serif);letter-spacing:-.025em;margin:0 0 16px}
.ios-steps p,.ios-facts p{font-size:15px;line-height:1.6;color:var(--ink-soft);font-weight:500;margin:0;text-wrap:pretty}
.ios-facts{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;padding-top:40px;border-top:1px solid var(--hair)}
.ios-facts p+p{margin-top:18px}
.ios-cta-row{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.ios-qr{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-size:12px;text-decoration:none;font-weight:600}
.ios-qr img{width:52px;height:52px;padding:4px;border:1px solid var(--hair);border-radius:8px;background:#fff}
/* Motion reference 2: physical lift, small overshoot, restrained stagger.
   Existing observer/ticker stays in charge; no second perpetual scroll loop. */
.reveal{transform:translate3d(0,44px,0) scale(.986);transition:opacity 1s cubic-bezier(.2,.75,.2,1),transform 1.2s cubic-bezier(.18,1.04,.24,1);transform-origin:50% 65%}
.reveal.in{transform:translate3d(0,0,0) scale(1)}
.reveal.d1{transition-delay:.10s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.26s}
.reveal.d4{transition-delay:.34s}.reveal.d5{transition-delay:.42s}.reveal.d6{transition-delay:.50s}
.ios-step.reveal{transition-delay:calc(var(--i,0)*.1s)}
.nav{transition:padding .4s var(--ease),margin .4s var(--ease),border-radius .4s var(--ease),background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),transform .65s var(--ease-out),opacity .35s var(--ease)}
.hf-ios-focus .nav:not(:focus-within):not(.open){transform:translate3d(0,-140%,0);opacity:0;pointer-events:none}
@media(min-width:2000px){.ios-intro{left:8vw;max-width:470px}.ios-intro h2{font-size:68px}.ios-split-heading{font-size:90px}}
@media(max-width:1050px) and (min-width:761px){.ios-intro p,.ios-split-detail,.ios-reading p{font-size:13px}.ios-intro h2{font-size:36px}.ios-phone-anchor,.ios-orbit{height:min(69svh,640px)}.ios-split-left,.ios-split-detail.left,.ios-reading-side.left{right:calc(50% + 18svh)}.ios-split-right,.ios-split-detail.right,.ios-reading-side.right{left:calc(50% + 18svh)}}
@media(max-width:760px){
  .ios-story{border-radius:30px;margin-top:-28px}
  .ios-track{height:320svh;min-height:1900px}
  .ios-stage{border-radius:30px;min-height:580px}
  .ios-paper{border-radius:30px}
  .ios-desk img{object-position:47% center}
  .ios-desk-tint{background:rgba(244,240,231,.48)}
  .ios-intro{left:24px;top:78px;transform:none;width:calc(100% - 48px);max-width:580px;text-align:center}
  .ios-story .sec-eyebrow{text-align:center;margin-bottom:8px;font-size:10px}
  .ios-intro h2{font-size:clamp(29px,7.8vw,39px);max-width:340px;margin:0 auto 10px;line-height:1.04}
  .ios-intro p{font-size:12px;line-height:1.42;max-width:420px;margin:0 auto 14px}
  .ios-intro .ios-store{padding:9px 15px;font-size:11px;min-height:38px}
  .ios-phone-anchor,.ios-orbit{top:70%;height:min(48svh,430px)}
  .ios-device{padding:5px;border-radius:29px}
  .ios-display{border-radius:24px}
  .ios-split-left,.ios-split-right{top:102px;left:24px;right:auto;width:calc(100% - 48px);font-size:clamp(28px,7.8vw,38px);max-width:none;text-align:center}
  .ios-split-right{top:142px}
  .ios-split-detail{top:206px;max-width:none;width:calc(50% - 34px);font-size:11px;line-height:1.4}
  .ios-split-detail.left{right:51%}.ios-split-detail.right{left:51%}
  .ios-object{width:58px;border-radius:16px}
  .ios-object:nth-child(1){top:14%;left:-32%}.ios-object:nth-child(2){top:15%;right:-34%}
  .ios-object:nth-child(3){bottom:12%;left:-35%}.ios-object:nth-child(4){bottom:10%;right:-33%}
  .ios-reading-side{top:85px;width:calc(50% - 32px);max-width:none}
  .ios-reading-side.left{right:51%}.ios-reading-side.right{left:51%}
  .ios-reading h3{font-size:25px;margin-bottom:10px}
  .ios-reading p{font-size:11px;line-height:1.4;margin-bottom:10px}
  .ios-reading .ios-store{min-height:34px;padding:8px 12px;font-size:10px}
  .ios-levels{bottom:12px;gap:0}.ios-levels button{font-size:10px;padding:8px 10px}
  .ios-details{padding:58px 26px 76px;border-radius:30px}
  .ios-steps{grid-template-columns:1fr;gap:32px;padding-bottom:42px}
  .ios-steps article{max-width:none}.ios-step-title{font-size:28px}
  .ios-facts{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .ios-steps p,.ios-facts p{font-size:14px}
}
@media(max-width:760px) and (max-height:720px){.ios-intro{top:65px}.ios-intro p{font-size:11px}.ios-intro h2{font-size:28px}.ios-phone-anchor,.ios-orbit{top:73%;height:42svh}.ios-split-left{top:80px}.ios-split-right{top:114px}.ios-split-detail{top:162px}.ios-reading-side{top:70px}.ios-reading h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none!important}
  .ios-track{height:100svh;min-height:720px}
  .ios-desk,.ios-stage>.ios-story-flow,.ios-paper,.ios-split,.ios-orbit,.ios-reading,.ios-levels{display:none}
  .ios-stage{background:var(--cream-1);height:100svh;min-height:720px}
  .ios-phone-anchor{transform:translate(-50%,-50%)!important}
  .ios-intro{opacity:1!important;visibility:visible!important;transform:translateY(-50%)!important}
  .ios-store{transition:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.ios-intro{transform:none!important}}