/* Isolated homepage concept. The sections below the hero retain home.css. */
.hero-refresh .site-header{height:88px;background:#F1B7C6;backdrop-filter:none}
.hero-refresh .header-inner{max-width:1440px;padding-inline:44px;display:grid;grid-template-columns:1fr auto 1fr;gap:32px}
.hero-refresh .header-inner>.brand{justify-self:start}
.hero-refresh .header-actions{justify-self:end}
.hero-header-nav{display:flex;align-items:center;gap:clamp(4px,1vw,16px);font-size:16px;font-weight:600;color:#655058}
.hero-header-nav a{white-space:nowrap;padding:10px 17px;border-radius:999px;transition:background .16s ease,color .16s ease}
.hero-header-nav a:hover,.hero-header-nav a:focus-visible{color:#1d1916;background:#ffffff66;text-decoration:none}
.hero-header-nav a:active{color:#1d1916;background:#ffffff99}
.hero-refresh .site-header a:focus-visible,.hero-refresh .site-header button:focus-visible{border-radius:999px;outline:2px solid #1d1916;outline-offset:4px}
.hero-refresh .menu-toggle{display:none}
.hero-refresh .header-download{display:inline-flex;align-items:center;justify-content:center;min-width:164px;min-height:52px;padding:12px 28px;border-radius:999px;background:#000;color:#fff;font-size:18px;font-weight:700;line-height:1.2;transition:background .16s ease,box-shadow .16s ease}
.hero-refresh .header-download:hover,.hero-refresh .header-download:focus-visible{background:#292326;box-shadow:0 4px 12px #1d191614}
.hero-refresh .header-download:active{background:#45333b;box-shadow:none}
.hero-showcase{--accent:#F1B7C6;background:#fff;position:relative;overflow:clip}
.hero-showcase-inner{max-width:1440px;margin:auto;padding:44px 40px 32px;text-align:center;position:relative}
.showcase-stage{--device-width:clamp(520px,calc((100svh - 425px)*1.517),820px);position:relative;height:calc(var(--device-width)/1.517);max-width:1320px;margin:auto;isolation:isolate;touch-action:pan-y}
.showcase-device{width:var(--device-width);height:100%;position:absolute;left:50%;top:0;transform:translateX(-50%);user-select:none}
.showcase-hardware{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;pointer-events:none}
.showcase-screen{position:absolute;left:9.5%;right:9.5%;top:10.5%;bottom:9%;border-radius:4px;overflow:hidden;background:#272324;z-index:2}
.showcase-wallpaper{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .3s cubic-bezier(.2,.65,.3,1);pointer-events:none;will-change:opacity;transform:translateZ(0)}
.showcase-wallpaper.is-current{opacity:1;z-index:2}
.showcase-wallpaper.is-leaving{opacity:1;z-index:1;transition:none}
.showcase-decor{position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;will-change:opacity;transform:translateZ(0)}
.showcase-decor.is-current{opacity:1;visibility:visible}
.showcase-decor.is-leaving{visibility:visible}
.decor-side{position:absolute;top:0;bottom:-100px;width:calc((100% - var(--device-width))/2);min-width:155px}
.decor-left{left:0}.decor-right{right:0}
.floating-emoji{position:absolute;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;line-height:1;display:block;transform:translate3d(0,0,0) rotate(var(--tilt));animation:cozy-bob var(--duration,7s) ease-in-out infinite;animation-delay:var(--delay,0s);animation-play-state:paused}
.emoji-filter-defs{position:absolute;pointer-events:none;overflow:hidden}
/* Static outline and shadow are composited before the outer float transform. */
.floating-emoji>span{display:block;filter:url(#emoji-sticker-outline);transform:translateZ(0);backface-visibility:hidden}
/* Larger accents frame the scene; smaller ones sit closer to the Mac. */
.emoji-1{font-size:clamp(70px,7.3vw,108px);left:25%;top:1%;--tilt:-13deg;--delay:-1s;--duration:7.6s;--lift:-10px;--drift:3px}
.emoji-2{font-size:clamp(76px,8.2vw,118px);left:0;top:32%;--tilt:8deg;--delay:-3.4s;--duration:8.8s;--lift:-8px;--drift:-3px}
.emoji-3{font-size:clamp(42px,4.6vw,66px);right:0;top:19%;--tilt:-16deg;--delay:-2s;--duration:6.8s;--lift:-7px;--drift:2px}
.emoji-4{font-size:clamp(62px,6.8vw,98px);left:7%;top:79%;--tilt:-9deg;--delay:-5.2s;--duration:8.2s;--lift:-10px;--drift:3px}
.emoji-5{font-size:clamp(39px,4.2vw,60px);right:7%;top:72%;--tilt:13deg;--delay:-4s;--duration:7.2s;--lift:-6px;--drift:-2px}
.emoji-6{font-size:clamp(54px,6vw,86px);right:15%;top:52%;--tilt:-12deg;--delay:-2.5s;--duration:9s;--lift:-9px;--drift:2px}
.decor-right .emoji-1{left:auto;right:36%;top:5%;--tilt:12deg;--delay:-4.8s;--duration:8.4s}
.decor-right .emoji-2{left:auto;right:0;top:23%;--tilt:-7deg;--delay:-1.6s;--duration:7.4s}
.decor-right .emoji-3{right:auto;left:1%;top:45%;--tilt:14deg;--delay:-5.3s}
.decor-right .emoji-4{left:auto;right:2%;top:84%;--tilt:8deg;--delay:-3s}
.decor-right .emoji-5{right:auto;left:13%;top:78%;--tilt:-10deg;--delay:-1.5s}
.decor-right .emoji-6{right:22%;top:52%;--tilt:10deg;--delay:-6s;--duration:7.8s}
[data-decor="paper"] .decor-left .emoji-2{font-size:clamp(47px,5vw,70px)}
.showcase-navigation{margin:10px auto 3px}.showcase-theme-name{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:20px;height:20px;color:#706969}
.showcase-controls{display:flex;justify-content:center;align-items:center;height:34px}
.showcase-dots{display:flex;align-items:center;gap:0}.showcase-dots button{width:32px;height:34px;background:none;border:0;padding:0;display:grid;place-items:center}
.showcase-dots button span{width:7px;height:7px;border-radius:8px;background:#ddd9d8;transition:width .2s,background .2s}
.showcase-dots button.is-active span{width:21px;background:#e799af}.showcase-dots button:hover span{background:#d98da3}
.hero-showcase h1{font-size:clamp(35px,3.8vw,54px);line-height:1.06;letter-spacing:-.045em;font-weight:700;margin:0 auto;max-width:1120px}
.showcase-download{margin-top:12px}.showcase-download .store-badge img{height:60px}.showcase-download .download-note{margin-top:0;font-size:11px}
.showcase-status{font-size:12px;color:#6b343c;position:absolute;bottom:9px;left:20px;right:20px}.showcase-status:empty{display:none}
.showcase-decor:is(.is-current,.is-leaving) .floating-emoji{animation-play-state:running;will-change:transform}
.hero-showcase[data-motion-paused=true] .floating-emoji{animation-play-state:paused;will-change:auto}
@keyframes cozy-bob{0%,100%{transform:translate3d(0,0,0) rotate(var(--tilt))}50%{transform:translate3d(var(--drift,2px),var(--lift,-8px),0) rotate(calc(var(--tilt) + 1.5deg))}}
@media(min-width:1500px){.showcase-stage{--device-width:min(870px,calc((100svh - 435px)*1.517))}.hero-showcase-inner{padding-top:55px}}
@media(max-width:1100px) and (min-width:901px){
 .hero-refresh .header-inner{padding-inline:28px;gap:20px}.hero-header-nav{font-size:14px;gap:2px}.hero-header-nav a{padding-inline:13px}.hero-refresh .header-download{min-width:144px;min-height:48px;font-size:16px}
 .showcase-stage{--device-width:min(58vw,650px)}.hero-showcase-inner{padding-inline:24px}
}
@media(max-width:900px){
 .hero-refresh .site-header{height:72px}.hero-refresh .header-inner{padding-inline:24px;display:flex;justify-content:space-between}.hero-header-nav,.hero-refresh .header-download{display:none}
 .hero-refresh .menu-toggle{display:block;margin-right:0}.hero-refresh .brand{font-size:29px}.hero-refresh .brand img{width:32px;height:32px}
 .menu-open,.menu-open body{overflow:hidden}.menu-open .site-header{background:#fff6f8}
 .hero-refresh .site-menu{position:fixed;inset:72px 0 0;width:auto;height:calc(100dvh - 72px);padding:24px max(24px,calc((100vw - 440px)/2)) max(32px,env(safe-area-inset-bottom));border:0;border-radius:0;background:#fff6f8;box-shadow:none;display:flex;flex-direction:column;align-items:stretch;overflow-y:auto;overscroll-behavior:contain}
 .menu-links{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:6px;padding-bottom:24px}
 .hero-refresh .site-menu .menu-links a{font-size:clamp(24px,4svh,34px);font-weight:700;letter-spacing:-.035em;line-height:1.2;text-align:center;padding:12px 28px;color:#655058;border-radius:999px;width:max-content;max-width:100%;margin-inline:auto;transition:background .16s ease,color .16s ease}
 .hero-refresh .site-menu .menu-links a:hover,.hero-refresh .site-menu .menu-links a:focus-visible{color:#1d1916;background:#f8dce8;border-radius:999px}
 .hero-refresh .site-menu .menu-links a:active{background:#f1b7c6;border-radius:999px}
 .hero-refresh .site-menu .menu-download{display:flex;justify-content:center;align-items:center;background:#000;border-radius:40px;padding:12px;min-height:68px;flex-shrink:0;color:#fff;font-size:24px;font-weight:700;line-height:1.2}
 .hero-refresh .site-menu .menu-download:hover{background:#262222}
}
@media(max-width:900px){
 .hero-refresh .header-inner{padding-inline:20px}
 .hero-showcase-inner{padding:28px 12px 35px}.showcase-stage{--device-width:min(100%,560px);height:clamp(250px,72vw,440px)}
 .showcase-device{height:auto;aspect-ratio:4340/2860;top:22px}.showcase-screen{border-radius:2px}
 .decor-side{inset:0;width:auto;min-width:0}
 .floating-emoji{--lift:-5px;--drift:1px}
 .floating-emoji{display:none}
 .decor-left .emoji-1{display:block;font-size:64px;left:3%;top:1%;--tilt:-13deg}
 .decor-right .emoji-1{display:block;left:auto;right:3%;top:71%;font-size:62px;--tilt:8deg}
 .showcase-navigation{margin:8px auto 6px}.showcase-theme-name{font-size:10px}.showcase-controls{height:44px}.showcase-dots button{width:36px;height:44px}
 .hero-showcase h1{font-size:clamp(26px,5.8vw,40px);line-height:1.13;letter-spacing:-.048em}
 .showcase-download{margin-top:16px}.showcase-download .store-badge img{height:50px}
 .showcase-status{bottom:4px;font-size:10px}
}
@media(max-width:360px){.hero-refresh .header-inner{padding-inline:16px}.hero-refresh .brand{font-size:26px}.showcase-stage{height:235px}.hero-showcase h1{font-size:24px}.decor-left .emoji-1{font-size:50px}.decor-right .emoji-1{top:69%;font-size:49px}}
@media(prefers-reduced-motion:reduce){.floating-emoji{animation:none!important;will-change:auto!important}.showcase-wallpaper,.showcase-decor,.showcase-dots button span{transition:none}}

/* Use the same native rounded system family as the Mac app. */
.hero-refresh{font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:400}
.hero-refresh h1,.hero-refresh h2,.hero-refresh h3{font-weight:700}
.hero-refresh .brand{font-weight:800}
.hero-refresh .section-heading>a,.hero-refresh .apply-button{font-weight:600}

/* Desktop: reserve copy/CTA space, then give the Mac the remaining first-screen height. */
@media(min-width:901px){
 .hero-showcase-inner{height:calc(100svh - 88px);padding-top:22px;padding-bottom:16px;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto}
 .showcase-stage{container-type:size;--device-width:min(calc(100cqh * 1.517),calc(100cqw - 300px),1000px);width:100%;height:auto;min-height:0;margin:0 auto}
 .showcase-device{height:auto;aspect-ratio:4340/2860;top:50%;transform:translate(-50%,-50%)}
 .decor-side{bottom:30px;min-width:0}
 .showcase-navigation{margin:6px auto 2px}
 .showcase-controls{height:30px}.showcase-dots button{height:30px}
 .hero-showcase h1{font-size:clamp(34px,3.5vw,50px);line-height:1.06}
 .showcase-download{display:flex;flex-direction:column;align-items:center;margin-top:10px}
 .showcase-download .store-badge{padding:6px;margin:0}
 .showcase-download .download-note{line-height:16px;margin:0}
}
@media(min-width:901px) and (max-height:680px){
 .hero-showcase-inner{padding-top:14px;padding-bottom:12px}
 .hero-showcase h1{font-size:36px}
 .showcase-navigation{margin-top:2px}.showcase-theme-name{height:17px;line-height:17px}
 .showcase-download{margin-top:6px}
 .showcase-download .store-badge img{height:52px}
 .floating-emoji{font-size:clamp(38px,5vw,72px)}
 [data-decor="paper"] .decor-left .emoji-2{font-size:48px}
}

/* Full first-screen composition: decoration runs alongside the Mac, headline and CTA. */
.hero-decor-canvas{display:none;pointer-events:none}
@media(min-width:901px){
 .hero-decor-canvas{display:block;position:absolute;inset:0;z-index:3;--decor-edge:clamp(20px,3vw,56px)}
 .hero-decor-canvas .decor-side{top:24px;bottom:24px;width:calc((100% - var(--decor-center-width,750px))/2 - var(--decor-edge));min-width:0}
 .hero-decor-canvas .decor-left{left:var(--decor-edge)}
 .hero-decor-canvas .decor-right{right:var(--decor-edge)}
 .hero-decor-canvas .decor-left .emoji-1{left:34%;right:auto;top:3%}
 .hero-decor-canvas .decor-left .emoji-2{left:0;right:auto;top:31%}
 .hero-decor-canvas .decor-left .emoji-3{left:auto;right:0;top:22%}
 .hero-decor-canvas .decor-left .emoji-4{left:0;right:auto;top:80%}
 .hero-decor-canvas .decor-left .emoji-5{left:auto;right:0;top:88%}
 .hero-decor-canvas .decor-left .emoji-6{left:auto;right:8%;top:54%}
 .hero-decor-canvas .decor-right .emoji-1{left:auto;right:34%;top:4%}
 .hero-decor-canvas .decor-right .emoji-2{left:auto;right:0;top:22%}
 .hero-decor-canvas .decor-right .emoji-3{left:0;right:auto;top:43%}
 .hero-decor-canvas .decor-right .emoji-4{left:auto;right:0;top:86%}
 .hero-decor-canvas .decor-right .emoji-5{left:7%;right:auto;top:78%}
 .hero-decor-canvas .decor-right .emoji-6{left:auto;right:6%;top:59%}
}
@media(min-width:901px) and (max-width:1100px){
 .hero-decor-canvas .floating-emoji{font-size:clamp(42px,6.2vw,68px)}
 .hero-decor-canvas .emoji-3,.hero-decor-canvas .emoji-5{font-size:42px}
 .hero-decor-canvas [data-decor="paper"] .decor-left .emoji-2{font-size:48px}
}