/* What's new (whats-new.html): the big update's showcase. Uses site.css's tokens; the cyan is the app's. */
.wn-hero { position: relative; overflow: hidden; background: var(--navy-950); color: #fff; }
.wn-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .45; }
.wn-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 500px at 20% 0%, rgba(61, 212, 255, .22), transparent 60%), linear-gradient(180deg, rgba(7, 13, 29, .35) 0%, rgba(7, 13, 29, .95) 100%); }
.wn-hero .container { position: relative; z-index: 1; padding: 96px 20px 72px; }
.wn-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 19ch; }
.wn-hero .lede { color: #c5d0e6; max-width: 640px; }
.wn-badge { display: inline-block; font: 700 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #06121f; background: #3dd4ff; border-radius: 999px; padding: 7px 12px; margin-bottom: 18px; box-shadow: 0 0 24px rgba(61, 212, 255, .55); }

.wn-stats { background: var(--navy-900); color: #fff; border-top: 1px solid rgba(61, 212, 255, .25); border-bottom: 1px solid rgba(61, 212, 255, .25); }
.wn-stats .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 36px 20px; text-align: center; }
.wn-stat b { display: block; font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--font-head); color: #3dd4ff; text-shadow: 0 0 28px rgba(61, 212, 255, .45); }
.wn-stat span { display: block; margin-top: 8px; color: #c5d0e6; font-size: .95rem; }
@media (max-width: 760px) { .wn-stats .container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wn-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 28px 0 0; }
.wn-jump a { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(61, 212, 255, .45); color: #bff0ff; text-decoration: none; font-weight: 600; font-size: .92rem; }
.wn-jump a:hover { background: rgba(61, 212, 255, .12); }

.wn-feature { scroll-margin-top: 80px; }
.wn-feature h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.wn-feature .eyebrow::before { content: "New · "; color: #3dd4ff; }
.wn-feature .rounded-img { box-shadow: 0 24px 60px rgba(7, 13, 29, .35); }
.dark .wn-feature .rounded-img, .darker .wn-feature .rounded-img { box-shadow: 0 0 0 1px rgba(61, 212, 255, .3), 0 24px 60px rgba(0, 0, 0, .5); }

.wn-list { columns: 3 260px; column-gap: 32px; }
.wn-list h3 { break-after: avoid; margin-top: 4px; font-size: 1.25rem; color: #fff; }
.wn-list .ticks { break-inside: avoid-column; margin-bottom: 22px; }
.wn-list .ticks li { color: #c5d0e6; }
.wn-note { color: #8fa0c2; font-size: .9rem; max-width: 900px; margin: 18px auto 0; text-align: center; }

.wn-faces { background: #0b1620; border: 1px solid rgba(61, 212, 255, .35); border-radius: 14px; padding: 28px 24px 18px; box-shadow: 0 0 40px rgba(61, 212, 255, .12); }
.wn-faces p { margin: 14px 0 0; text-align: center; color: #8fa0c2; font-size: .85rem; }

.wn-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wn-shot { margin: 0; background: var(--navy-800); border: 1px solid rgba(61, 212, 255, .2); border-radius: 14px; overflow: hidden; }
.wn-shot img { display: block; width: 100%; height: auto; }
.wn-shot figcaption { padding: 18px 22px 20px; }
.wn-shot h3 { color: #fff; margin-bottom: 6px; }
.wn-shot p { margin: 0; color: #c5d0e6; }
@media (max-width: 860px) { .wn-shots { grid-template-columns: 1fr; } }
.wn-local { margin: 6px 0 22px; padding: 14px 18px; border-left: 4px solid #3dd4ff; background: rgba(61, 212, 255, .08); border-radius: 0 10px 10px 0; }