/* September 25: clear mobile reading and restrained inline video controls. */
@media(max-width:760px){
 [data-hero-design="original"] body #heroCta .hero-benefit{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc(100vw - 48px);max-width:480px;margin-inline:auto}
 [data-hero-design="original"] .hero-benefit-time,[data-hero-design="original"] .hero-benefit strong{width:100%;text-align:center;text-wrap:balance}
 [data-hero-design="original"] .hero-benefit-arrow{display:none}
 #cta footer>div{box-sizing:border-box;width:100%;padding-inline:24px!important}
 #cta footer>div>div:first-child{grid-template-columns:1fr!important;gap:28px!important}
 /* Supplied logo has 218px transparent left padding in a 2500×1120 image. */
 #cta footer img{margin-left:-10.9px!important}
 #cta footer .footer-contact{justify-self:start;text-align:left;align-items:flex-start}
 #cta footer [data-disclaimer]{white-space:normal!important;max-width:100%}
}
#ritualFilm[data-mode="tutorial"] #ritualFilmToggle,#ritualFilm .ritual-sound{position:absolute;top:auto;left:auto;bottom:12px!important;right:64px!important;transform:none;width:44px!important;height:44px!important;min-height:44px;padding:11px;border-radius:50%;border:1px solid #ffffff66;background:#15352adb;color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
#ritualFilm .ritual-sound{right:12px!important}
#ritualFilm button svg{display:block;width:20px;height:20px;fill:currentColor}
#ritualFilm button:focus-visible{outline:2px solid #BFECD4;outline-offset:3px}
#ritualVideo{pointer-events:none}
/* Distinct, quick chapter changes without blur or long staggered text. */
#boneStory .bone-story-copy>div{transition:opacity .2s ease,transform .24s ease,visibility 0s linear .24s!important;animation:none;transform:translateY(-10px)!important}
#boneStory[data-onscreen="true"] .bone-story-copy>div[aria-hidden="false"]{opacity:1;visibility:visible;transform:none!important;transition-delay:0s!important;animation:story-copy-enter .48s cubic-bezier(.22,.7,.25,1) both}
#boneStory .bone-story-copy>div>h2,#boneStory .bone-story-copy>div>p{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
#boneStory .story-vibration-emphasis{font-weight:400;color:inherit}
@keyframes story-copy-enter{0%{opacity:0;translate:0 16px;clip-path:inset(10% 0 0)}25%{opacity:0}100%{opacity:1;translate:0 0;clip-path:inset(0)}}
#boneStory .bone-story-loop-bridge{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease}
#boneStory .bone-story-loop-bridge[data-hold="true"]{opacity:1;transition:none}
@media(prefers-reduced-motion:no-preference){
 #boneStory .bone-story-images{animation:story-drift 7.3s linear infinite alternate;animation-play-state:paused;transform-origin:62% 50%}
 #boneStory[data-motion="true"] .bone-story-images{animation-play-state:running}
}
@keyframes story-drift{from{transform:scale(1)}to{transform:scale(1.065)}}
@media(prefers-reduced-motion:reduce){#boneStory .bone-story-images{animation:none}#boneStory .bone-story-copy>div{transition:none!important;animation:none!important;transform:none!important;translate:none!important;clip-path:none!important}}

/* Align each step number with its heading, independently of paragraph height. */
#ritual .ritual-steps{--a5-step-title-size:clamp(32px,3.6vw,48px)}
#ritual .ritual-steps [data-ritual]{grid-template-columns:24px minmax(0,1fr)!important;column-gap:14px!important}
#ritual .ritual-steps [data-rnum]{display:flex;align-items:center;align-self:start;height:var(--a5-step-title-size);line-height:1!important}
@media(min-width:761px){#ritual .ritual-steps{--a5-step-title-size:clamp(30px,3vw,40px)}}

/* Canvas visual tracks use the same media box; controls remain above them. */
.motion-sequence{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.motion-sequence[hidden]{display:none!important}
#ritualFilm .motion-sequence{object-fit:contain;background:#080d0b}
#deviceFilmToggle{z-index:3}
#boneStory .motion-sequence{object-position:62% 50%}
@media(max-width:760px){#boneStory .motion-sequence{object-position:66% 50%}}

/* Quiet guide playback; touch, pointer movement or keyboard focus restores it. */
#ritualFilmToggle,#ritualFilm .ritual-sound{transition:opacity .22s ease}
#ritualFilm[data-controls-hidden="true"] #ritualFilmToggle:not(:focus-visible),#ritualFilm[data-controls-hidden="true"] .ritual-sound:not(:focus-visible){opacity:0;pointer-events:none}
#ritualFilm #ritualFilmToggle:focus-visible,#ritualFilm .ritual-sound:focus-visible{opacity:1;pointer-events:auto}

/* Neutral illustration label, without a background badge. */
#boneStory .bone-story-note{color:#C7C7C7;background:none;padding:0;border-radius:0}

/* Guide timeline: quiet white hairline, no enclosing frame. */
#ritualFilm[data-mode="tutorial"] #ritualFilmToggle,#ritualFilm .ritual-sound{bottom:36px!important}
#ritualFilm .ritual-progress{position:absolute;left:20px;bottom:5px;width:calc(100% - 40px);height:28px;padding:0;margin:0;border:0;outline:none;box-shadow:none;z-index:3;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:none;transition:opacity .22s ease;--progress:0%}
#ritualFilm .ritual-progress::-webkit-slider-runnable-track{height:2px;border:0;border-radius:2px;background:linear-gradient(to right,#fff var(--progress),#ffffff55 var(--progress));box-shadow:0 1px 2px #0006}
#ritualFilm .ritual-progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px #0005;transform:scale(.55);transition:transform .15s}
#ritualFilm .ritual-progress:is(:hover,:active,:focus-visible)::-webkit-slider-thumb{transform:scale(1)}
#ritualFilm .ritual-progress:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0009,0 0 0 4px #fff}
#ritualFilm .ritual-progress::-moz-range-track{height:2px;border:0;border-radius:2px;background:#ffffff55}
#ritualFilm .ritual-progress::-moz-range-progress{height:2px;background:#fff}
#ritualFilm .ritual-progress::-moz-range-thumb{width:6px;height:6px;border-radius:50%;background:#fff;border:0}
#ritualFilm .ritual-progress:is(:hover,:active,:focus-visible)::-moz-range-thumb{width:10px;height:10px}
#ritualFilm .ritual-progress:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #0009,0 0 0 4px #fff}
#ritualFilm[data-controls-hidden="true"] .ritual-progress:not(:focus-visible){opacity:0;pointer-events:none}
