/* Original N@il screens, a little pastel and the existing Kindly companion. */
.hero-scene.hero-showcase{height:auto;min-width:0;width:100%;padding-top:5px;align-self:center}
.hero-showcase .scene-halo{inset:65px -35px -15px;background:radial-gradient(ellipse at 55% 45%,#e8dffba8,#f1eafa65 49%,#faece640 68%,transparent 78%)}
.hero-showcase .scene-orbit{top:8%;height:78%;left:-3%;width:106%;pointer-events:none;z-index:-1}
.hero-showcase .orbit-two{top:18%;height:64%;transform:rotate(20deg);border-color:#c7ddcf70}
.hero-showcase .hero-star-anchor{left:88%;top:77px;width:140px;height:140px;z-index:2}
.hero-static-kindly{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 15px #7963c522)}
.hero-little-spark{position:absolute;top:137px;left:2%;font:25px Georgia,serif;color:#caa26c;pointer-events:none}
.hero-slides{display:grid;position:relative;min-width:0}
.hero-slide{grid-area:1/1;display:grid;grid-template-rows:150px auto;gap:13px;min-width:0}
/* All four scenes share the tallest footprint, so a change never moves the page. */
.hero-slide[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
.hero-controls[hidden]{display:none!important}
.hero-bubble{position:relative;align-self:start;width:calc(100% - 126px);margin:4px 0 0 2px;padding:17px 18px 16px;border:1px solid #e8e0f1;border-radius:19px 19px 7px 19px;background:#fffdfef2;box-shadow:0 12px 35px #6d52860b}
.hero-bubble::after{content:"";position:absolute;right:-8px;top:41px;width:14px;height:14px;transform:rotate(45deg);background:#fffdfef2;border-top:1px solid #e8e0f1;border-right:1px solid #e8e0f1}
.hero-bubble-kicker{display:block;font-size:8px;font-weight:600;letter-spacing:1.15px;line-height:1.5;color:var(--accent-strong);margin-bottom:7px}
.hero .hero-bubble h2{font-family:"Segoe UI",sans-serif;font-size:23px;font-weight:500;letter-spacing:-.65px;line-height:1.18;margin:0;color:var(--text)}
.hero-bubble p{font-size:11px;line-height:1.7;color:var(--muted);margin:9px 0 0}
.hero-bubble-mint{background:#f7fcf9;border-color:#d9e8df}
.hero-bubble-mint::after{background:#f7fcf9;border-color:#d9e8df}
.hero-bubble-mint .hero-bubble-kicker{color:#416d5d;font-size:7.5px;letter-spacing:.7px}
.hero-bubble-peach{background:#fffaf7;border-color:#f0e0d6}
.hero-bubble-peach::after{background:#fffaf7;border-color:#f0e0d6}
.hero-bubble-peach .hero-bubble-kicker{color:#94604f}
.hero-bubble-blue{background:#f8fbff;border-color:#dce6f0}
.hero-bubble-blue::after{background:#f8fbff;border-color:#dce6f0}
.hero-bubble-blue .hero-bubble-kicker{color:#526d8f}
.hero-preview{margin:0;min-width:0;align-self:start}
.hero-app-window{display:block;width:100%;padding:0;border:5px solid #fff;border-radius:15px;overflow:hidden;background:#f5f3fa;text-align:left;cursor:pointer;box-shadow:0 19px 45px #5a47751a,0 2px 5px #5a477508;transform:rotate(-1.4deg);transition:transform .3s,box-shadow .3s}
.hero-app-window:hover{transform:rotate(-.4deg) translateY(-3px);box-shadow:0 24px 50px #5a477523}
.hero-app-window:focus-visible{outline:3px solid var(--accent-strong);outline-offset:5px}
.hero-window-bar{height:27px;display:flex;align-items:center;gap:10px;padding:0 9px;color:var(--muted);font-size:7px;font-weight:500;letter-spacing:.65px;background:#faf9fd;border-bottom:1px solid #eeebf4}
.hero-window-dots{display:flex;gap:4px;flex-shrink:0}
.hero-window-dots i{width:5px;height:5px;border-radius:50%;background:#d3c4eb}
.hero-window-dots i:nth-child(2){background:#c1dacb}
.hero-window-dots i:nth-child(3){background:#ebd0bc}
.hero-window-open{margin-left:auto;letter-spacing:0;color:var(--accent-strong);font-size:8px;white-space:nowrap}
.hero-app-window img{display:block;width:100%;height:auto;aspect-ratio:1500/980;object-fit:contain}
.hero-preview figcaption{color:var(--muted);font-size:8px;line-height:1.6;text-align:center;letter-spacing:.1px;margin-top:13px;padding:0 7px;min-height:26px}
.hero-controls{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:9px;min-height:44px;position:relative;z-index:2}
.hero-scene-picker{display:flex;align-items:center;gap:4px;padding:3px;background:#ffffffd9;border:1px solid #e8e1ef;border-radius:28px;box-shadow:0 4px 16px #58436d05}
.hero-scene-picker button{border:0;min-height:38px;border-radius:22px;background:transparent;color:var(--muted);padding:8px 12px;font-size:10px;cursor:pointer;transition:background .2s,color .2s}
.hero-scene-picker button[aria-pressed="true"]{background:var(--tint);color:var(--accent-strong);font-weight:600}
.hero-scene-picker button:hover{color:var(--accent-strong);background:#f5f2fa}
.hero-scene-picker button:focus-visible,.hero-play-toggle:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}
.hero-play-toggle{display:grid;place-items:center;flex-shrink:0;width:40px;min-height:44px;padding:0;border:1px solid #e8e1ef;border-radius:50%;background:#ffffffde;color:var(--accent-strong);cursor:pointer;font-size:16px}
.hero-play-toggle:disabled{cursor:default;opacity:.6}
.hero-play-toggle[aria-pressed="true"] span{font-size:11px;padding-left:2px}
.hero-cloud-board{aspect-ratio:1500/980;border:5px solid white;border-radius:18px;padding:24px;background:linear-gradient(135deg,#eff8f2,#fcfcfe 62%,#f2edfa);box-shadow:0 19px 45px #5a477514;display:flex;flex-direction:column;transform:rotate(1deg)}
.hero-cloud-heading{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.hero-cloud-mark{width:40px;height:40px;flex-shrink:0;border-radius:13px;background:#fff;display:grid;place-items:center;color:#568774;box-shadow:0 5px 16px #5687740c}
.hero-cloud-heading small{display:block;font-size:8px;letter-spacing:1px;line-height:1.5;color:#416d5d;margin-bottom:5px}
.hero-cloud-heading strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.4px}
.hero-cloud-badge{margin-left:auto;font-size:8px;line-height:1.5;white-space:nowrap;background:#fff;border:1px solid #dce9e1;border-radius:15px;padding:5px 8px;color:#416d5d}
.hero-cloud-connections{display:grid;grid-template-columns:1fr 1fr;gap:11px;flex:1}
.hero-cloud-connections>div{position:relative;background:#ffffffdb;border:1px solid #fff;border-radius:13px;padding:14px;display:grid;grid-template-columns:34px 1fr;gap:4px 10px;align-content:center}
.hero-cloud-connections .scene-icon{grid-row:1/3;width:34px;height:34px;border-radius:10px}
.hero-cloud-connections .icon{width:17px;height:17px}
.hero-cloud-connections strong{font-size:12px;font-weight:550;align-self:end}
.hero-cloud-connections small{font-size:8px;line-height:1.5;color:var(--muted)}
.hero-blue{background:#e7f0f9;color:#526d8f}
.hero-cloud-note{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#568774;margin:16px 0 0}
.hero-cloud-note span{color:#caa26c;font-size:17px}
.hero-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-slide:not([hidden]) .hero-bubble,.hero-slide:not([hidden]) .hero-preview{animation:hero-peek-in .65s ease both}
.hero-slide:not([hidden]) .hero-preview{animation-delay:.06s}
@keyframes hero-peek-in{from{opacity:.35;translate:0 8px}to{opacity:1;translate:0 0}}
.motion-paused .hero-slide .hero-bubble,.motion-paused .hero-slide .hero-preview{animation:none}
@media(max-width:1100px){
  .hero-showcase .hero-star-anchor{width:118px;height:118px;left:88%;top:78px}
  .hero-bubble{width:calc(100% - 102px);padding:15px 14px}
  .hero .hero-bubble h2{font-size:21px}
  .hero-bubble p{font-size:10px}
  .hero-bubble-kicker{font-size:7px;letter-spacing:.75px}
  .hero-bubble-mint .hero-bubble-kicker{font-size:7px;letter-spacing:.15px}
  .hero-cloud-board{padding:17px}
  .hero-cloud-heading{margin-bottom:12px;gap:9px}
  .hero-cloud-heading strong{font-size:17px}
  .hero-cloud-heading small{font-size:7px}
  .hero-cloud-badge{font-size:7px;padding:4px 6px}
  .hero-cloud-connections{gap:8px}
  .hero-cloud-connections>div{padding:10px;grid-template-columns:27px 1fr;gap:4px 7px}
  .hero-cloud-connections .scene-icon{width:27px;height:27px;border-radius:8px}
  .hero-cloud-connections strong{font-size:11px}
  .hero-cloud-connections small{font-size:7px}
  .hero-cloud-note{margin-top:10px;font-size:9px}
  .hero-scene-picker button{padding:8px 9px;font-size:9px}
}
@media(min-width:761px) and (max-width:950px){
  .hero-slide{grid-template-rows:168px auto}
  .hero .hero-bubble h2{font-size:19px}
  .hero-bubble{width:calc(100% - 82px)}
  .hero-showcase .hero-star-anchor{width:96px;height:96px;top:74px}
  .hero-cloud-board{aspect-ratio:auto;min-height:255px;padding:14px}
  .hero-cloud-heading{flex-wrap:wrap}
  .hero-cloud-badge{margin-left:49px}
  .hero-cloud-connections>div{grid-template-columns:1fr;gap:5px;padding:9px}
  .hero-cloud-connections .scene-icon{grid-row:auto}
  .hero-controls{gap:4px}
  .hero-scene-picker{gap:0;padding:2px}
  .hero-scene-picker button{padding:7px;font-size:8px}
  .hero-play-toggle{width:33px;font-size:14px}
}
@media(max-width:760px){
  .hero-scene.hero-showcase{margin:34px 0 0;width:100%;max-width:590px;align-self:center}
  .hero-slide{grid-template-rows:150px auto;gap:14px}
  .hero-showcase .hero-star-anchor{left:87%;top:69px;width:112px;height:112px}
  .hero-bubble{width:calc(100% - 99px);padding:15px 16px;margin-left:0}
  .hero .hero-bubble h2{font-size:22px}
  .hero-bubble p{font-size:11px}
  .hero-bubble-kicker{font-size:7px}
  .hero-bubble-mint .hero-bubble-kicker{font-size:7px}
  .hero-preview figcaption{font-size:8px;margin-top:12px;min-height:28px}
  .hero-app-window{border-width:4px;border-radius:11px}
  .hero-window-bar{font-size:6px;height:24px;padding-inline:7px;gap:7px}
  .hero-window-open{font-size:7px}
  .hero-controls{margin-top:6px;gap:6px}
  /* The existing global pause remains available without covering scene labels. */
  .hero-controls{justify-content:flex-start}
  .hero-play-toggle{display:none}
  .motion-toggle{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  .motion-toggle .icon{width:16px;height:16px}
  .motion-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .motion-toggle:focus-visible{width:auto;padding-inline:13px;border-radius:24px}
  .motion-toggle:focus-visible>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .hero-scene-picker button{padding:8px 11px;font-size:10px}
  .hero-cloud-board{padding:20px;min-height:0}
  .hero-cloud-heading strong{font-size:19px}
  .hero-cloud-connections>div{padding:12px;grid-template-columns:29px 1fr}
  .hero-cloud-connections .scene-icon{width:29px;height:29px}
  .hero-cloud-connections strong{font-size:12px}
  .hero-cloud-connections small{font-size:8px}
}
@media(max-width:400px){
  .hero-slide{grid-template-rows:150px auto}
  .hero-bubble{width:calc(100% - 77px);padding:13px 12px}
  .hero .hero-bubble h2{font-size:19px;letter-spacing:-.5px}
  .hero-bubble p{font-size:10px;line-height:1.65;margin-top:7px}
  .hero-bubble-kicker{font-size:6.5px;margin-bottom:6px;letter-spacing:.65px}
  .hero-bubble-mint .hero-bubble-kicker{font-size:6px;letter-spacing:.2px}
  .hero-showcase .hero-star-anchor{width:90px;height:90px;left:88%;top:62px}
  .hero-cloud-board{padding:14px;aspect-ratio:auto;min-height:240px}
  .hero-cloud-heading{gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .hero-cloud-mark{width:32px;height:32px;border-radius:10px}
  .hero-cloud-heading strong{font-size:16px}
  .hero-cloud-heading small{font-size:7px}
  .hero-cloud-badge{font-size:7px;margin-left:auto;padding:4px 6px}
  .hero-cloud-connections{gap:7px}
  .hero-cloud-connections>div{padding:9px;grid-template-columns:24px 1fr;gap:4px 7px}
  .hero-cloud-connections .scene-icon{width:24px;height:24px;border-radius:7px}
  .hero-cloud-connections .icon{width:15px;height:15px}
  .hero-cloud-connections strong{font-size:10px}
  .hero-cloud-connections small{font-size:7px;grid-column:1/-1}
  .hero-cloud-note{font-size:9px;margin-top:10px}
  .hero-scene-picker button{padding:8px 9px;font-size:9px;min-height:38px}
  .hero-scene-picker{gap:0;padding:2px}
  .hero-play-toggle{width:34px}
}
@media(prefers-reduced-motion:reduce){
  .hero-slide .hero-bubble,.hero-slide .hero-preview{animation:none!important}
  .hero-app-window,.hero-scene-picker button{transition:none}
  .hero-app-window:hover{transform:rotate(-1.4deg)}
}