.hero h1.hero-caps{text-transform:uppercase;font-size:clamp(40px,4.2vw,64px);line-height:1.04;letter-spacing:-.025em}

.does{position:relative;margin-top:30px;display:flex;align-items:center;justify-content:center;gap:14px}
.does__box{display:flex;align-items:center;gap:16px;color:#fff;font-size:clamp(20px,2vw,28px);line-height:1.2}
.does__name{color:rgba(255,255,255,.62)}
.does__window{position:relative;height:3.6em;overflow:hidden;text-align:left;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.does__list{list-style:none;margin:0;padding:0;transform:translateY(0)}
.does__list li{display:flex;align-items:center;gap:12px;height:1.2em;white-space:nowrap;opacity:.45;transition:opacity .3s}
.does__list li.is-on{opacity:1}
.does__tag{flex:none;padding:2px 9px;border-radius:999px;background:rgba(168,199,250,.16);color:var(--blue-soft);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.12em}
.does__egg{width:auto;height:2.2em;transition:opacity .25s}
.does__pause{flex:none;width:30px;height:30px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;cursor:pointer;position:relative}
.does__pause::before,.does__pause::after{content:"";position:absolute;top:9px;width:3px;height:10px;background:rgba(255,255,255,.75)}
.does__pause::before{left:10px}.does__pause::after{left:15px}
.does__pause[aria-pressed="true"]::before{left:11px;width:0;height:0;background:none;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent rgba(255,255,255,.8)}
.does__pause[aria-pressed="true"]::after{display:none}
html:not(.js) .does__pause{display:none}

.home-section{width:min(1120px,calc(100% - 48px));margin:0 auto;padding:88px 0}
.home-section h2{font-size:clamp(28px,3vw,42px);line-height:1.1;font-weight:400;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.home-section__lead{margin-top:8px;color:var(--muted);font-style:italic;font-size:17px}

.film__frame{position:relative;margin-top:28px;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 24px 60px rgba(32,33,36,.14)}
.film__frame video{display:block;width:100%;height:100%;object-fit:cover}
.film__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:rgba(0,0,0,.18);cursor:pointer;transition:background .3s}
.film__play:hover{background:rgba(0,0,0,.05)}
.film__play span{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:transform .3s var(--ease)}
.film__play:hover span{transform:scale(1.06)}
.film__play span::before{content:"";margin-left:6px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink)}
.film.is-playing .film__play{display:none}
.film__caption{margin-top:12px;color:var(--muted);font-size:14px}

.why__grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:56px;align-items:center;margin-top:32px}
.why__photo img{display:block;width:100%;height:auto;border-radius:22px}
.why__photo figcaption{margin-top:10px;color:var(--muted);font-size:14px}
.why__story{margin:0 0 28px;max-width:62ch}
.why__story p{margin:0 0 14px;color:var(--ink);font-size:17px;line-height:1.6}
.why__story p:last-child{margin-bottom:0}
.why__list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.why__list li{position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--line);font-size:15px;line-height:22px;font-weight:700;letter-spacing:.08em;color:var(--ink)}
.why__list li::before{content:"";position:absolute;left:0;top:11px;width:26px;height:26px;border-radius:50%;background:var(--blue-wash)}
.why__list li::after{content:"";position:absolute;left:9px;top:17px;width:6px;height:11px;border:solid var(--blue);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.why__close{margin-top:26px;color:var(--ink);font-size:20px;font-weight:700;letter-spacing:.04em}
.why__more{display:inline-block;margin-top:8px;color:var(--blue);font-weight:500}
@media (prefers-reduced-motion:no-preference){
  html.js .why__list li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  html.js .why__list.is-in li{opacity:1;transform:none}
  html.js .why__list.is-in li:nth-child(2){transition-delay:.08s}
  html.js .why__list.is-in li:nth-child(3){transition-delay:.16s}
  html.js .why__list.is-in li:nth-child(4){transition-delay:.24s}
  html.js .why__list.is-in li:nth-child(5){transition-delay:.32s}
  html.js .why__list.is-in li:nth-child(6){transition-delay:.4s}
}

.faq{margin-top:28px;max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:19px;line-height:26px;font-weight:500;color:var(--ink)}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--blue-wash);color:var(--blue);font:500 20px/30px var(--font);text-align:center;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 50px 22px 0;color:var(--body);font-size:16px;line-height:26px}
.faq__more{display:inline-block;margin-top:18px;color:var(--blue);font-weight:500}

@media (max-width:759px){
  .home-section{width:calc(100% - 32px);padding:64px 0}
  .why__grid{grid-template-columns:1fr;gap:28px}
  .why__photo{max-width:280px}
  .film__play span{width:64px;height:64px}
}
@media (prefers-reduced-motion: reduce){
  .does__list,.does__list li,.why__list li,.film__play span{transition:none!important}
}

@media (max-width:700px){
  .hero h1.hero-caps{font-size:clamp(28px,8.2vw,40px)}
  .does{flex-direction:column;gap:10px}
  .does__box{flex-direction:column;gap:6px;font-size:19px;text-align:center}
  .does__list li{justify-content:center;white-space:normal;height:2.4em;flex-direction:column;gap:2px}
  .does__window{height:7.2em;text-align:center}
  .does__egg{display:none}
}

.details{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;width:min(1240px,calc(100% - 48px));margin:0 auto}
.details-main>section{width:auto;margin:0}
.details-main>.routine,.details-main>.home-section{padding:80px 0}
.details-main>.egg-cta{padding:80px 0 120px}
.details-nav{position:sticky;top:72px;align-self:start;padding-top:86px}
.details-nav ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.details-nav a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:var(--muted);font-size:14px;line-height:20px;transition:color .2s,border-color .2s}
.details-nav a:hover{color:var(--ink)}
.details-nav a.is-current{border-left-color:var(--blue);color:var(--ink);font-weight:700}
.details-nav__toggle{display:none}
.case__text{max-width:42em;margin-top:16px;color:var(--body);font-size:18px;line-height:29px}
.case__note{margin-top:12px;color:var(--muted);font-size:14px;font-style:italic}
@media (max-width:899px){
  .details{display:block;width:auto}
  .details-main{width:calc(100% - 32px);margin:0 auto}
  .details-nav{position:sticky;top:0;z-index:30;padding:0;background:var(--paper);border-bottom:1px solid var(--line)}
  .details-nav__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border:0;background:none;color:var(--ink);font:700 14px/20px var(--font);cursor:pointer}
  .details-nav__toggle::after{content:"";width:8px;height:8px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
  .details-nav.is-open .details-nav__toggle::after{transform:rotate(-135deg)}
  .details-nav ul{display:none;border-left:0;padding:0 16px 10px}
  .details-nav.is-open ul{display:block}
}