/* What's New and Updates (owner, 2026-11-03). Built on the Help Center's page
   and colors (help.css); these are the pieces it doesn't have. The pages are
   generated by scripts/build-whats-new.js. */

.help-main a { color: var(--accent); }
.help-main .help-card { color: var(--text); }

/* The index: one card per post, its lead image above the words. */
.wn-list { display: flex; flex-direction: column; gap: 16px; }
.wn-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.wn-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.wn-card img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--border); }
.wn-card-text { padding: 16px 18px 18px; }
.wn-card-phone { display: flex; align-items: center; }
.wn-card-phone img { width: 104px; max-height: none; flex-shrink: 0; margin: 14px 0 14px 14px; border: 1px solid var(--border); border-radius: 12px; }
.wn-card-phone .wn-card-text { min-width: 0; }
.wn-date { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* A post: wide screenshot groups use the column's full width. */
.help-shot.wn-shot img { max-width: 100%; border-radius: 14px; }
.wn-callout { margin: 18px 0 22px; padding: 16px 20px; border-radius: 14px; background: var(--accent-glow); border-left: 4px solid var(--accent); color: var(--text); font-size: 18px; font-weight: 700; line-height: 1.5; }
.wn-cta { margin: 22px 0; }
.help-main a.wn-button { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--accent); color: #14141d; font-weight: 700; }

/* Updates: one entry per date, its bullets plain. */
.wn-update { padding: 6px 0 14px; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.wn-update:last-of-type { border-bottom: 0; }
.wn-update h2 { font-size: 19px; margin: 28px 0 10px; }
.wn-update h2 a { color: var(--text); }
.wn-update-title { color: var(--muted); font-weight: 500; font-size: 16px; margin-left: 6px; }
.wn-update h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }