/* V3 — visible, input-driven motion. All content remains usable without this file. */
:root {
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-spring:cubic-bezier(.22,1.24,.36,1);
  --hero-travel:460px;
}
.hero {overflow:visible}
.hero-stage {position:relative;overflow:clip;background:#fff}
.hero-copy,.hero-image {animation:none}
.hero h1 .hero-line {display:block;overflow:hidden;color:var(--ink);padding-block:.035em}
.hero h1 .hero-line>span {display:block;color:inherit}
.hero h1 .hero-line>.hero-accent {color:#77777e}
.scroll-cue {display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;width:fit-content;margin:0 auto 16px;padding:7px 14px;color:var(--muted);font-size:12px;font-weight:500;position:relative;z-index:3}
.scroll-cue>.icon {width:14px;height:14px}
.cue-mark {height:26px;width:1px;background:#dcdce0;position:relative;overflow:hidden}
.cue-mark i {position:absolute;top:0;left:0;width:1px;height:12px;background:#55555d}
.motion-ready .cue-mark i {animation:cue-travel 1.8s .9s 3 ease-in-out both}
@keyframes cue-travel {0% {transform:translateY(-13px)} 60%,100% {transform:translateY(27px)}}
.motion-ready .hero-image {transform:translate3d(0,var(--hero-y,0px),0) scale(var(--hero-scale,1));transform-origin:center 65%}
.motion-ready .hero-copy {transform:translate3d(0,var(--copy-y,0px),0) scale(var(--copy-scale,1));transform-origin:center top}
.motion-ready .hero-accent {color:var(--headline-tone,#77777e)!important}
.motion-pinned .hero-runway {height:calc(var(--stage-h) + var(--hero-travel))}
.motion-pinned .hero-stage {position:sticky;top:68px;height:var(--stage-h)}
.motion-pinned .hero-copy {position:absolute;top:0;left:0;right:0;padding:26px 24px 0;z-index:2}
.motion-pinned .hero .eyebrow {margin-bottom:12px}
.motion-pinned .hero h1 {font-size:clamp(56px,7.5svh,76px)}
.motion-pinned .hero-description {font-size:17px;margin:16px 0 20px;line-height:1.7}
.motion-pinned .hero-image {position:absolute;bottom:30px;left:0;right:0;width:min(1080px,86vw,120svh);max-width:none;margin:0 auto;height:48svh}
.motion-pinned .hero-image img {width:100%;height:100%;object-fit:cover;object-position:center 32%}
.motion-pinned .scroll-cue {position:absolute;bottom:3px;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;opacity:var(--cue-opacity,1)}
.quick-services {position:relative;z-index:3;background:#fff}
.page-progress {position:absolute;bottom:-1px;left:0;right:0;height:2px;transform-origin:left center;background:var(--button-blue);transform:scaleX(var(--page-progress,0));pointer-events:none}
.motion-panel {transform:translate3d(0,var(--chapter-y,0px),0) scale(var(--chapter-scale,1));opacity:var(--chapter-opacity,1);transform-origin:center 25%}
/* Motion only on the visual object. Text outside it stays steady. */
.motion-ready .tilt-object {transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--tilt-lift,0px));transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)}
.motion-ready .reading-sheet {transition:transform .7s var(--motion-ease),box-shadow .7s var(--motion-ease);transform-origin:50% 90%}
.motion-ready .reading-note {transition:transform .7s var(--motion-ease),box-shadow .7s var(--motion-ease)}
.motion-ready .reading-lines i {transform-origin:left;transition:transform .65s var(--motion-ease)}
.learn-link .icon {width:30px;height:30px;padding:7px;transition:transform .5s var(--motion-spring),background .25s,color .25s}
.motion-ready .pill {transition:transform .4s var(--motion-spring),background .2s,box-shadow .4s}
.motion-ready .quick-services a,.motion-ready .journey-path>a {transition:transform .5s var(--motion-spring),background .3s,color .25s;border-radius:12px}
.motion-ready .quick-services a>.icon:first-child,.motion-ready .journey-path>a>.icon:first-child {transition:transform .55s var(--motion-spring)}
.library-view>a {transition:padding .4s var(--motion-ease),color .25s,background .25s}
.care-icon {width:58px;height:58px;display:grid;place-items:center;border-radius:16px;transition:background .3s,transform .5s var(--motion-spring)}
.care-icon>.icon {transition:transform .55s var(--motion-spring)}
@media (hover:hover) and (pointer:fine) {
  .motion-ready .pill:hover {transform:translateY(-3px);box-shadow:0 9px 22px rgb(0 0 0 / 11%)}
  .motion-ready .pill.primary:hover {box-shadow:0 8px 24px rgb(0 113 227 / 20%)}
  .motion-ready .learn-link:hover .icon {transform:rotate(90deg) scale(1.12);background:#dedee5}
  .motion-ready .light-link:hover .icon {background:#565662;color:#fff}
  .motion-ready .quick-services a:hover {background:var(--paper);transform:translateY(-5px)}
  .motion-ready .quick-services a:hover>.icon:first-child {transform:translateY(-3px) scale(1.16)}
  .motion-ready .journey-path>a:hover {transform:translateY(-5px)}
  .motion-ready .journey-path>a:hover>.icon:first-child {transform:scale(1.18)}
  .motion-ready .library-view>a:hover {padding-left:10px;padding-right:3px}
  .motion-ready .library-view>a:hover .icon {transform:translateX(5px)}
  .motion-ready .reader-item:hover .reading-sheet {transform:translate(-5px,-15px) rotate(-7deg);box-shadow:0 18px 34px rgb(29 29 31 / 9%)}
  .motion-ready .reader-item:hover .reading-note {transform:translate(7px,8px) rotate(2deg);box-shadow:0 18px 35px rgb(29 29 31 / 13%)}
  .motion-ready .reader-item:hover .reading-lines i:nth-child(2) {transform:scaleX(1.12);transition-delay:.07s}
  .motion-ready .reader-item:hover .reading-lines i:nth-child(3) {transform:scaleX(1.4);transition-delay:.14s}
  .motion-ready .aftercare-item:hover .care-icon {background:#e5e5eb;transform:translateY(-4px)}
  .motion-ready .aftercare-item:hover .care-icon>.icon {transform:scale(1.1) rotate(-7deg)}
}
.motion-ready .pill:active,.motion-ready .icon-button:active,.motion-ready .quick-services a:active {transform:scale(.96);transition-duration:90ms}
/* A real sliding selection surface, not a color swap. */
.segmented.has-indicator {position:relative;isolation:isolate}
.segment-indicator {position:absolute;left:0;top:0;background:#fff;box-shadow:0 2px 7px rgb(0 0 0 / 9%);border-radius:9px;pointer-events:none;transition:transform .45s var(--motion-ease),width .45s var(--motion-ease),height .25s;z-index:0}
.home-segmented .segment-indicator {background:#494951;box-shadow:0 3px 10px rgb(0 0 0 / 18%)}
.segmented.has-indicator>button {position:relative;z-index:1;background:transparent!important;box-shadow:none!important}
#homeGuideContent {overflow:clip}
/* The veil is separate so entry/exit is interruptible in both directions. */
.sheet-veil {position:fixed;inset:0;z-index:80;background:rgb(18 18 23 / 48%);pointer-events:none;opacity:0}
#detail::backdrop {background:transparent}
#detail {transform-origin:center;isolation:isolate}
.detail-nav {z-index:4}
.prepare-check>span:first-child {transition:background .25s,transform .4s var(--motion-spring)}
.prepare-check[aria-pressed="true"]>span:first-child {transform:scale(1.12)}
.faq-list summary {transition:color .25s}
.faq-list details.is-closing .faq-plus::after {transform:rotate(90deg)}
@media (max-width:620px) {
  .scroll-cue {margin-top:4px;margin-bottom:12px;font-size:12px}
  .learn-link .icon {width:28px;height:28px;padding:6px}
  .hero-line {padding-block:.02em!important}
  .motion-ready .tilt-object {transform:none}
  .care-icon {width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce) {
  .hero-runway {height:auto!important}
  .hero-stage {position:relative!important;height:auto!important;top:auto!important}
  .hero-copy,.hero-image {transform:none!important;animation:none!important}
  .motion-panel,.tilt-object {transform:none!important;opacity:1!important}
  .segment-indicator,.reading-sheet,.reading-note {transition:none!important}
  .cue-mark i {animation:none!important;transform:none!important}
}

/* Blend the product photo edges into the white hero without softening the robots. */
.hero-image img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 92%, transparent);
  mask-composite: intersect;
}