/* Feature stories and a compact screen-saver card. Demo scenery only. */
.feature-story { overflow: hidden; scroll-margin-top: 64px; }
.feature-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; min-height: 450px; }
.feature-copy { position: relative; z-index: 1; }
.feature-copy h2 { font-size: clamp(38px, 4.5vw, 58px); text-wrap: balance; }
.feature-copy .eyebrow { color: var(--purple); }
.feature-description { margin-top: 28px; color: var(--muted); font-size: 19px; line-height: 1.8; }
.feature-visual { min-width: 0; position: relative; }
.feature-caption { margin-top: 28px; color: #77727e; font-size: 11px; text-align: center; letter-spacing: .04em; }
.story-displays { background: #faf9fc; }
.story-playlist { background: #f0edf7; }
.story-playlist .feature-copy { grid-column: 2; grid-row: 1; }
.story-playlist .feature-visual { grid-column: 1; grid-row: 1; }
.story-playlist .feature-layout { grid-template-columns: 1.1fr .9fr; gap: 100px; }
.story-focus { background: #fff; }

/* Each display has its own scene, with a staggered arrival. */
.display-stage { position: relative; height: 450px; isolation: isolate; }
.display-orbit { position: absolute; inset: 15% -10% -5%; z-index: -1; background: radial-gradient(ellipse, #b7a2e04d, transparent 66%); }
.story-device { position: absolute; width: 72%; }
.device-screen { position: relative; padding: 6px 6px 15px; border-radius: 12px; aspect-ratio: 1.6; background: linear-gradient(135deg, #44454c, #191a20); box-shadow: 0 24px 45px #28203926; }
.device-screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px 7px 2px 2px; }
.device-screen::after { content: ''; position: absolute; top: 100%; left: 38%; width: 24%; height: 38px; background: linear-gradient(90deg, #b1afb9, #e0dfe4, #b7b5bf); clip-path: polygon(30% 0,70% 0,76% 87%,100% 92%,100% 100%,0 100%,0 92%,24% 87%); }
.screen-gradient { background: radial-gradient(ellipse at 65% 30%, #d0baf6, transparent 40%), linear-gradient(145deg, #393056, #8170b6 55%, #e4b0c2); border: 6px solid #33343c; border-bottom-width: 15px; padding: 0; }
.story-device > span { display: block; margin-top: 48px; font-size: 12px; color: #77717f; text-align: center; }
.device-secondary { right: -2%; top: 0; width: 63%; }
.device-secondary > span { position: absolute; top: -28px; right: 0; margin: 0; }
.device-primary { left: -3%; top: 110px; }
.motion-start .device-secondary { animation: device-arrive 1.5s var(--ease) both; }
.motion-start .device-primary { animation: device-arrive 1.5s .2s var(--ease) both; }
@keyframes device-arrive { from { opacity: 0; transform: translateY(35px) scale(.94); } to { opacity: 1; transform: none; } }

/* A compact schedule: scenery arrives in time order. */
.schedule-stage { padding: 30px; background: #ffffffd9; border: 1px solid #fff; border-radius: 26px; box-shadow: 0 30px 70px #59477b15; }
.schedule-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 15px; font-weight: 600; }
.schedule-heading > span:last-child { font-size: 25px; color: var(--purple); }
.schedule-row { display: grid; grid-template-columns: 45px 66px 1fr; align-items: center; gap: 16px; position: relative; padding: 22px 0; }
.schedule-row + .schedule-row { border-top: 1px solid #e9e5ef; }
.schedule-time { font-size: 12px; color: #807788; font-variant-numeric: tabular-nums; }
.schedule-row strong { font-size: 15px; font-weight: 500; line-height: 1.5; }
.schedule-thumb { width: 66px; height: 54px; border-radius: 10px; box-shadow: inset 0 0 0 1px #00000005; }
.schedule-thumb.morning { background: radial-gradient(circle at 65% 35%, #fff1c4 0 12%, transparent 13%), linear-gradient(160deg, #a7d6e3, #f7dfba); }
.schedule-thumb.evening { background: radial-gradient(circle at 60% 55%, #ffddb0 0 13%, transparent 14%), linear-gradient(160deg, #846fb4, #f6a192); }
.schedule-thumb.midnight { background: radial-gradient(circle at 30% 30%, #e8defa 0 2%, transparent 3%), radial-gradient(circle at 70% 65%, #e8defa 0 1%, transparent 2%), linear-gradient(160deg, #232442, #716799); }
.schedule-line { position: absolute; height: 2px; bottom: 9px; left: 61px; right: 0; background: linear-gradient(90deg, #a68add, #e5dbf6); border-radius: 2px; transform-origin: left; }
.motion-start .schedule-row { animation: schedule-arrive 1.1s var(--ease) both; }
.motion-start .schedule-row:nth-child(3) { animation-delay: .3s; }
.motion-start .schedule-row:nth-child(4) { animation-delay: .6s; }
.motion-start .schedule-line { animation: schedule-progress 2.2s .6s var(--ease) both; }
@keyframes schedule-arrive { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes schedule-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Sound bars settle as the example full-screen rule takes effect. */
.quiet-stage { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 400px; padding: 24px; isolation: isolate; }
.quiet-halo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse, #e9e3f8 0, #f7f5fc 40%, transparent 68%); }
.quiet-moon { font-size: 82px; line-height: 1.1; color: #8462c8; transform: rotate(-15deg); }
.quiet-title { font-weight: 600; font-size: 18px; margin-top: 18px; }
.quiet-wave { display: flex; gap: 6px; align-items: center; height: 80px; margin: 20px 0; }
.quiet-wave i { width: 4px; height: 5px; border-radius: 5px; background: #b8a3de; --bar-height: 30px; }
.quiet-wave i:nth-child(3n) { --bar-height: 52px; }
.quiet-wave i:nth-child(3n + 1) { --bar-height: 18px; }
.quiet-rule { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; width: 100%; padding: 19px 16px; background: #fff; border: 1px solid #efebf4; border-radius: 14px; box-shadow: 0 12px 35px #5b407510; font-size: 13px; }
.quiet-rule strong { font-weight: 500; color: #7958b2; }
.rule-arrow { color: #b1a8bd; }
.quiet-note { margin-top: 17px; color: #88818f; font-size: 12px; text-align: center; }
.motion-start .quiet-wave i { animation: settle-wave 2.6s .3s ease-out both; }
.motion-start .quiet-moon { animation: moon-arrive 1.8s var(--ease) both; }
@keyframes settle-wave { 0%, 20% { height: var(--bar-height); } 45% { height: calc(var(--bar-height) * .6); } 70%, 100% { height: 5px; } }
@keyframes moon-arrive { from { opacity: .25; transform: rotate(-40deg) scale(.8); } to { opacity: 1; transform: rotate(-15deg) scale(1); } }

/* Keep the screen saver in its original compact card format. */
.saver-summary { padding-bottom: 88px; scroll-margin-top: 64px; }
.saver-summary .bento-card { min-width: 0; width: 100%; }
.saver-summary h2 { font-size: 36px; line-height: 1.18; }
@media (max-width: 700px) {
  .saver-summary { padding-bottom: 72px; }
  .saver-summary h2 { font-size: 32px; }
}

@media (max-width: 1000px) {
  .feature-layout, .story-playlist .feature-layout { gap: 40px; }
  .feature-description { font-size: 17px; }
  .schedule-stage { padding: 22px; }
  .schedule-row { gap: 10px; grid-template-columns: 40px 54px 1fr; }
  .schedule-thumb { width: 54px; height: 48px; }
  .schedule-line { left: 50px; }
  .display-stage { height: 420px; }
}
@media (max-width: 700px) {
  .feature-layout, .story-playlist .feature-layout { grid-template-columns: 1fr; gap: 42px; min-height: 0; }
  .story-playlist .feature-copy, .story-playlist .feature-visual { grid-column: auto; grid-row: auto; }
  .feature-copy h2 { font-size: 40px; }
  .feature-description { margin-top: 22px; }
  .feature-visual { width: 100%; max-width: 500px; margin-inline: auto; }
  .display-stage { height: clamp(330px, 85vw, 400px); }
  .device-primary { top: 90px; left: 0; }
  .device-secondary { right: 0; }
  .quiet-stage { min-height: 340px; padding-inline: 0; }
  .feature-caption { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce), print {
  .feature-visual *, .feature-visual *::before, .feature-visual *::after { animation: none !important; transition: none !important; }
}

/* The compact feature grid shares the original screen-saver card style. */
.utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.utility-card { display: flex; flex-direction: column; }
.utility-grid .bento-card { min-height: 490px; }
.utility-grid .saver-clock { margin-top: 45px; }
.card-interface { background: #f0edf7; }
.card-downloads { background: #edf2f9; }
.card-subscriptions { background: #f7f1eb; }
.utility-visual { margin-top: auto; padding-top: 28px; padding-bottom: 12px; }
.utility-caption { display: block; text-align: center; color: #89838f; font-size: 10px; margin-top: 12px; }
.mini-app { border: 1px solid #e4dfed; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 12px 28px #5b467b12; }
.mini-toolbar { height: 24px; display: flex; align-items: center; gap: 5px; padding-inline: 10px; border-bottom: 1px solid #efedf2; }
.mini-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: #d7cfdf; }
.mini-layout { display: grid; grid-template-columns: 24% 1fr; min-height: 136px; }
.mini-sidebar { background: #f7f5fa; padding: 18px 10px; display: flex; flex-direction: column; gap: 12px; }
.mini-sidebar b, .mini-sidebar i { display: block; height: 7px; border-radius: 3px; background: #ded9e8; }
.mini-sidebar b { background: #ac93df; }
.mini-library { padding: 14px; font-size: 11px; font-weight: 600; }
.mini-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.mini-tiles i, .subscription-tiles i { display: block; aspect-ratio: .75; border-radius: 7px; background: linear-gradient(145deg,#a5c4da,#e8d3d4); }
.mini-tiles i:nth-child(2), .subscription-tiles i:nth-child(2) { background: linear-gradient(145deg,#d7b6a2,#ede0c5); }
.mini-tiles i:nth-child(3), .subscription-tiles i:nth-child(3) { background: linear-gradient(145deg,#8e8dbc,#d3b4cd); }
.mini-tiles i:nth-child(4) { background: linear-gradient(145deg,#97b9ae,#dce3bf); }
.download-demo { background: #ffffffcf; border: 1px solid #fff; border-radius: 16px; padding: 24px; box-shadow: 0 12px 28px #364c7110; }
.download-demo-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; font-size: 14px; }
.download-symbol { display: grid; place-items: center; width: 30px; height: 30px; background: #e7edf8; color: #6b7fba; border-radius: 9px; font-size: 23px; }
.download-demo-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #727788; }
.download-progress { height: 6px; border-radius: 4px; overflow: hidden; margin: 12px 0; background: #e5eaf3; }
.download-progress i { display: block; height: 100%; width: 68%; border-radius: inherit; background: linear-gradient(90deg,#a397d6,#778fcb); transform-origin: left; }
.download-meta { font-size: 10px; }
.subscription-demo { padding: 20px; border-radius: 16px; background: #ffffffb3; border: 1px solid #fff; box-shadow: 0 12px 28px #76553610; }
.subscription-heading { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.subscription-heading span:last-child { color: #9d8471; }
.subscription-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.subscription-tiles i { aspect-ratio: 1.2; position: relative; }
.subscription-tiles i::after { content: '✓'; position: absolute; bottom: 7px; right: 7px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #ffffffd9; color: #6d677b; font: 10px system-ui; }
.card-downloads.is-revealed .download-progress i { animation: schedule-progress 1.8s .2s var(--ease) both; }
@media (max-width: 700px) {
  .utility-grid { grid-template-columns: 1fr; gap: 18px; }
  .utility-grid .bento-card { min-height: 440px; }
  .utility-grid .saver-clock { margin-top: 35px; }
  .download-demo { padding: 20px; }
}
@media (prefers-reduced-motion: reduce), print {
  .utility-grid * { animation: none !important; }
}