/* Scoped Web App everyday section; typography uses the live homepage tokens. */
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section{background:var(--ss-canvas,#faf7f3);color:var(--ss-text);font-family:var(--home-font);padding:var(--home-section,64px) var(--cg-content-gutter,112px);scroll-margin-top:16px;--hwe-peach:#f0e5d6}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section *{box-sizing:border-box}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-inner{width:100%;max-width:1120px;margin:auto;min-width:0}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-heading{margin:0 0 28px;text-align:start}
body.mvp-home .hwe-title{font-family:var(--home-font);font-size:var(--home-heading,40px);font-weight:800;line-height:1.15;letter-spacing:-.025em;margin:0;color:var(--ss-text);text-align:start}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moment{min-width:0;margin:0;text-align:center}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moment>svg{display:block;width:100%;max-width:320px;height:auto;margin:auto}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section figcaption{padding-top:14px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section figcaption p{font-size:15px;line-height:1.5;font-weight:400;color:var(--ss-muted);margin:0 0 8px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section h3{font-family:inherit;font-size:clamp(20px,1.9vw,25px);font-weight:700;line-height:1.3;letter-spacing:-.025em;margin:0;color:var(--ss-text)}
html[data-theme=dark] :is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section{--hwe-peach:#35342b}
@media(max-width:1000px) and (min-width:768px){:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section{padding-inline:32px}:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moments{gap:20px}}
/* Keep each setting legible on phones, with its short caption underneath. */
@media(max-width:767px){
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section{padding-inline:22px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moments{grid-template-columns:1fr;gap:36px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moment{display:block;text-align:center}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section .hwe-moment>svg{width:100%;max-width:260px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section figcaption{padding-top:12px;max-width:30ch;margin-inline:auto}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section figcaption p{font-size:14px;margin-bottom:7px}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section h3{font-size:21px;overflow-wrap:break-word}
:is(#hp-web-everyday,#hp-chrome-everyday,#hp-windows-everyday,#hp-ios-everyday).hwe-section h3 br{display:none}
}
/* Calm situation-specific loops; pause off screen and honor reduced motion. */
.hwe-section .hwe-head{transform-box:view-box;transform-origin:155px 170px}
.hwe-section .hwe-blink,.hwe-section .hwe-speaking-mouth{transform-box:fill-box;transform-origin:center}
.hwe-section .hwe-speaking-mouth{transform:scaleY(.4)}
.hwe-section .hwe-hands{transform-box:view-box;transform-origin:125px 205px}
.hwe-section .hwe-moment[data-motion] .hwe-head{animation:hwe-read var(--hwe-cycle,9s) ease-in-out infinite both}
.hwe-section .hwe-moment[data-motion] .hwe-blink{animation:hwe-blink 6.8s linear infinite both}
.hwe-section [data-activity=typing][data-motion] .hwe-hands{animation:hwe-type var(--hwe-cycle,9s) ease-in-out infinite both}
.hwe-section [data-activity=typing][data-motion] .hwe-head{animation-name:hwe-type-look}
.hwe-section [data-activity=listen][data-motion] .hwe-head{animation-name:hwe-listen}
.hwe-section [data-activity=focus-listen][data-motion] .hwe-head{animation-name:hwe-focus}
.hwe-section [data-activity=relax][data-motion] .hwe-head{animation-name:hwe-relax}
.hwe-section [data-activity=speak][data-motion] .hwe-head{animation-name:hwe-speak}
.hwe-section [data-activity=speak][data-motion] .hwe-speaking-mouth{animation:hwe-speech var(--hwe-cycle,9s) ease-in-out infinite both}
.hwe-section [data-activity=phone-read][data-motion] .hwe-head{animation-name:hwe-phone-read}
@keyframes hwe-type{0%,12%,28%,44%,60%,100%{transform:none}20%,36%,52%{transform:rotate(-1.8deg) translateY(-.7px)}}
@keyframes hwe-type-look{0%,55%,100%{transform:none}70%,82%{transform:rotate(-1.2deg)}}
@keyframes hwe-listen{0%,20%,70%,100%{transform:none}42%{transform:rotate(1.7deg) translateY(1px)}}
@keyframes hwe-read{0%,15%,85%,100%{transform:none}45%,60%{transform:rotate(2deg) translateY(.7px)}}
@keyframes hwe-focus{0%,20%,100%{transform:none}48%,68%{transform:rotate(1.4deg)}}
@keyframes hwe-relax{0%,100%{transform:none}45%,65%{transform:rotate(-1.5deg)}}
@keyframes hwe-speak{0%,20%,65%,100%{transform:none}35%,48%{transform:rotate(1.3deg)}}
@keyframes hwe-speech{0%,18%,30%,44%,58%,100%{transform:scaleY(.4)}24%,37%,51%{transform:scaleY(1.2)}}
@keyframes hwe-phone-read{0%,15%,88%,100%{transform:none}40%,70%{transform:rotate(2.4deg) translateY(1px)}}
@keyframes hwe-blink{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}}

.hwe-section [data-activity=typing]{--hwe-cycle:7.8s}
.hwe-section [data-activity=read]{--hwe-cycle:10s}
.hwe-section [data-activity=translate]{--hwe-cycle:11s}
.hwe-section [data-activity=listen]{--hwe-cycle:9.2s}
.hwe-section [data-activity=focus-listen]{--hwe-cycle:9s}
.hwe-section [data-activity=study-listen]{--hwe-cycle:10.6s}
.hwe-section [data-activity=relax]{--hwe-cycle:12s}
.hwe-section [data-activity=speak]{--hwe-cycle:8.8s}
.hwe-section [data-activity=ride]{--hwe-cycle:10.4s}
.hwe-section [data-activity=phone-read]{--hwe-cycle:11.2s}
.hwe-section [data-activity=ride][data-motion] .hwe-head{animation-name:hwe-ride}
.hwe-section .hwe-moment[data-motion] svg [class]{animation-play-state:paused}
.hwe-section .hwe-moment[data-motion=on] svg [class]{animation-play-state:running}
@keyframes hwe-ride{0%,50%,100%{transform:none}25%{transform:rotate(.6deg) translateY(.6px)}75%{transform:rotate(-.8deg) translateY(1.2px)}}
@media(prefers-reduced-motion:reduce){.hwe-section .hwe-moment[data-motion] svg *{animation:none!important}}
/* Continue the existing cream/green rhythm through each selected platform. */
html body#ss-shell.mvp-home:has(#hp-web-everyday){--hwe-band:#e9f0e6}
html[data-theme="dark"] body#ss-shell.mvp-home:has(#hp-web-everyday){--hwe-band:#23342f}
html body#ss-shell.mvp-home:has(#hp-web-everyday) :is(#hp-web-intro,#hp-chrome-intro,#hp-windows-intro),
html body#ss-shell.mvp-home:has(#hp-web-everyday) #video-library-insertion,
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-ios-guide .cg-step--reverse{background:var(--hwe-band)!important}
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-review,
html body#ss-shell.mvp-home:has(#hp-web-everyday) footer#ss-home-unified-footer,
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-ios-guide .cg-step:not(.cg-step--reverse){background:var(--ss-canvas,#faf7f3)!important}
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-platform-guide:has(#hp-chrome-everyday) .cg-step,
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-windows-guide:has(#hp-windows-everyday) .cg-step{background:var(--hwe-band)!important}
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-platform-guide:has(#hp-chrome-everyday) .cg-step--reverse,
html body#ss-shell.mvp-home:has(#hp-web-everyday) #ssu-windows-guide:has(#hp-windows-everyday) .cg-step--reverse{background:var(--ss-canvas,#faf7f3)!important}
html body#ss-shell.mvp-home:has(#hp-web-everyday):has(:is(#ssu-web-tools,#ssu-windows-guide,#ssu-platform-guide,#ssu-ios-guide):not([hidden])) #ssu-review,
html body#ss-shell.mvp-home:has(#hp-web-everyday):has(:is(#ssu-web-tools,#ssu-windows-guide,#ssu-platform-guide,#ssu-ios-guide):not([hidden])) footer#ss-home-unified-footer{background:var(--hwe-band)!important}
html body#ss-shell.mvp-home:has(#hp-web-everyday):has(:is(#ssu-web-tools,#ssu-windows-guide,#ssu-platform-guide,#ssu-ios-guide):not([hidden])) #video-library-insertion{background:var(--ss-canvas,#faf7f3)!important}

/* Full gallery width; bounded landscape frame preserves both phones without cropping. */
html body#ss-shell.mvp-home #hp-ios-download.hwe-ios-product{display:block;padding:64px max(112px,calc(50% - 540px));background:var(--hwe-band);color:var(--ss-text,#25251f)}
html body#ss-shell.mvp-home #hp-ios-download .hwe-ios-product-inner{width:100%;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
html body#ss-shell.mvp-home #hp-ios-download .hwe-ios-product-inner>div{display:contents}
html body#ss-shell.mvp-home #hp-ios-product-title{font-family:inherit;font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-.025em;margin:0;text-align:start;overflow-wrap:normal;order:0}
html body#ss-shell.mvp-home #hp-ios-download .hp-win-download{order:2;justify-self:center;margin:4px 0 0;max-width:100%}
html body#ss-shell.mvp-home #hp-ios-download .hwe-ios-product-photo{order:1;justify-self:center;display:block;width:100%;height:auto;aspect-ratio:2/1;max-height:520px;object-fit:contain;background:#faf7f3;border:8px solid var(--ss-surface,#fffefa);border-radius:22px;box-shadow:0 14px 30px rgba(50,65,49,.1);box-sizing:border-box}
@media(max-width:1000px){html body#ss-shell.mvp-home #hp-ios-download .hwe-ios-product-photo{aspect-ratio:4/3}}@media(max-width:767px){html body#ss-shell.mvp-home #hp-ios-download.hwe-ios-product{padding:48px 22px}html body#ss-shell.mvp-home #hp-ios-product-title{font-size:30px}html body#ss-shell.mvp-home #hp-ios-download .hwe-ios-product-photo{aspect-ratio:4/3;max-height:none;border-width:6px;border-radius:18px}}