/* Design tokens — spec appendix (V2). Accent is for conversion buttons only. */
:root {
  --bg: #FAFAF7; --surface: #FFFFFF; --ink: #16161D; --ink-soft: #1F1F28; --muted: #595964; --body: #4A4A55;
  --line: #E9E6DF; --line-soft: #EFEDE7; --line-strong: #E1DED5; --chip: #F1EFE9;
  --accent: #6C4CF1; --accent-soft: #F0EDFF; --accent-ink: #4F3BC4;
  --success: #0B7A57; --success-soft: #E6F5EC; --danger: #B42318;
  --gold: #E4B84C; --gold-text: #9A6700; --silver: #C7C7D1; --bronze: #C98A4B;
  --serif: 'Frank Ruhl Libre', serif; --sans: 'Heebo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 var(--sans); background: var(--bg); color: var(--ink); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; top: -60px; right: 16px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 50; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: 1312px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 900px) { .wrap { padding-inline: 32px; } }

/* header: one row: logo, menu, account buttons; hamburger below 1100px */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.topbar { display: flex; align-items: center; gap: 18px; min-height: 72px; padding-block: 8px; }
.brand img { height: 56px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 2px 16px; flex-wrap: nowrap; font-size: 14.5px; font-weight: 500; flex-grow: 1; white-space: nowrap; }
.nav > a { padding-block: 10px; }
.account-links { display: flex; gap: 8px; flex-shrink: 0; }
.account-links .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; flex-shrink: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); }
.menu-panel.columns { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 10px 18px; min-width: 520px; }
.menu-panel.columns > div { display: flex; flex-direction: column; }
.menu-panel.columns b { padding: 8px 12px 2px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.social { display: flex; gap: 4px; list-style: none; margin: 12px 0 0; padding: 0; }
.social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); }
.social a:hover { background: var(--chip); color: var(--accent-ink); }
@media (max-width: 1280px) { .nav { font-size: 13.5px; gap: 2px 12px; } .brand img { height: 48px; } }
@media (max-width: 1099px) {
  .topbar { flex-wrap: wrap; }
  .account-links { margin-inline-start: auto; }
  .nav-toggle { display: flex; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; white-space: normal; border-top: 1px solid var(--line-soft); padding-top: 6px; }
  .nav.open { display: flex; }
  .menu-panel.columns { grid-template-columns: 1fr; min-width: 0; }
}
/* dropdown menus: native <details>, keyboard and screen-reader friendly without any script */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding-block: 10px; display: inline-flex; align-items: center; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) translateY(-2px); }
.menu[open] summary { color: var(--accent-ink); }
.menu-panel { position: absolute; top: 100%; inset-inline-start: -12px; z-index: 20; min-width: 240px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(22,22,29,.10); padding: 8px; display: flex; flex-direction: column; }
.menu-panel a { padding: 11px 12px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: #F7F5EF; color: var(--ink); }
@media (max-width: 1099px) { .menu-panel { position: static; box-shadow: none; border: 0; padding: 0 12px 6px; min-width: 0; } }
.site-footer .footer-categories { display: grid; gap: 2px 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials .chip { min-height: 40px; padding: 0 14px; font-size: 14px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 12px; font: 600 15px var(--sans); cursor: pointer; border: 1.5px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(.94); }
.btn-outline { border-color: var(--ink); background: transparent; }
.btn-outline-dark { border-color: #3A3A45; color: #fff; }
.btn-outline-dark:hover { color: #fff; border-color: #fff; }

/* hero + search */
.hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 40px 32px; text-align: center; }
.pill { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--chip); border-radius: 999px; padding: 6px 14px; }
.hero h1 { font: 900 clamp(34px, 6vw, 54px)/1.15 var(--serif); max-width: 820px; }
.hero p { font-size: 18px; color: var(--body); max-width: 640px; }
.search { position: relative; width: 100%; max-width: 680px; margin-top: 8px; }
.search form { display: flex; gap: 10px; }
.search-field { position: relative; flex-grow: 1; }
.search-field svg { position: absolute; top: 19px; right: 16px; }
.search input { width: 100%; height: 56px; border: 1.5px solid #DDD9CF; border-radius: 14px; background: var(--surface); padding: 0 44px 0 18px; font: 16px var(--sans); color: var(--ink); }
.search .btn { height: 56px; border-radius: 14px; font-size: 16px; }
.suggest { position: absolute; top: 62px; inset-inline: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(22,22,29,.10); padding: 8px; z-index: 5; text-align: right; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.suggest a:hover, .suggest a:focus { background: #F7F5EF; color: var(--ink); }
.suggest .who { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.35; }
.suggest .who b { font-weight: 600; font-size: 14.5px; }
.suggest .who span { font-size: 12.5px; color: var(--muted); }

/* avatars */
.avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
img.avatar { object-fit: cover; background: var(--chip); }
.avatar.sm { width: 36px; height: 36px; font-size: 13px; }
.avatar.lg { width: 84px; height: 84px; font-size: 26px; border: 3px solid transparent; }
.avatar.xl { width: 128px; height: 128px; font-size: 40px; border: 3px solid transparent; }
.avatar.rank-1 { border-color: var(--gold); } .avatar.rank-2 { border-color: var(--silver); } .avatar.rank-3 { border-color: var(--bronze); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.card-pad { padding: 22px; }
.section-title { font: 700 22px var(--serif); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.section { margin-top: 32px; }

/* podium */
.podium { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .podium { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.podium a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px; text-align: center; }
.podium a:hover { color: var(--ink); border-color: var(--line-strong); }
.podium .place { position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 700; background: var(--chip); border-radius: 999px; padding: 4px 12px; }
.podium .name { font-weight: 700; font-size: 19px; }
.podium .meta { font-size: 13.5px; color: var(--muted); }
.podium .big { font-weight: 700; font-size: 40px; line-height: 1.1; }
.podium .first .big { color: var(--gold-text); }
.podium .of { font-size: 13px; color: var(--muted); }

/* ranking table: cards on mobile, grid rows on desktop */
.board { overflow: hidden; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.board-head a { font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.table-filter { padding: 0 16px 16px; gap: 8px; }
.table-filter .chip { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row, .row-labels { display: grid; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line-soft); grid-template-columns: 28px 44px 1fr 48px; }
.row-labels { display: none; }
.row .rank { font-weight: 700; font-size: 15px; color: var(--muted); }
.row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .who a { font-weight: 600; font-size: 15.5px; }
.row .handle { font-size: 13px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; }
.row .cell { display: none; font-size: 14.5px; }
.row .mobile-stats { grid-column: 3 / -1; font-size: 13px; color: var(--muted); }
.lang-note { font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.tag.note { background: var(--accent-soft); color: var(--accent-ink); }
.sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: right; }
.sort .arrows::after { content: '⇅'; font-size: 11px; color: #A3A3AD; }
.sort[data-dir="asc"] .arrows::after { content: '↑'; color: var(--accent-ink); }
.sort[data-dir="desc"] .arrows::after { content: '↓'; color: var(--accent-ink); }
.row-labels { pointer-events: auto; }
.row-labels .net { display: inline-flex; align-items: center; gap: 6px; }
.row .cell.lead { font-weight: 700; }
.row .none { color: #8A8A96; }
.pscore { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.board-note { padding: 12px 24px 16px; border-top: 1px solid var(--line-soft); }
.tag { font-size: 12.5px; font-weight: 500; background: var(--chip); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.score { width: 44px; height: 32px; border-radius: 9px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.up { color: var(--success); font-weight: 600; } .down { color: var(--danger); font-weight: 600; }
@media (min-width: 900px) {
  .row, .row-labels { grid-template-columns: 32px 44px 1fr 160px 140px 80px 96px 56px; gap: 16px; padding-inline: 24px; }
  .row-labels { display: grid; background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--muted); padding-block: 10px; }
  .row .cell { display: block; }
  .row.all-platforms, .row-labels.all-platforms { grid-template-columns: 32px 44px minmax(160px, 1fr) 160px repeat(4, 92px) 56px; }
  .row .mobile-only { display: none; }
  .row .mobile-stats { display: none; }
}

/* dark band — one per page */
.band { background: var(--ink); color: #fff; border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.band-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.band h2 { font: 700 24px var(--serif); }
.band .sub { font-size: 14px; color: #B9B7C0; }
.band-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.band-grid a { background: var(--ink-soft); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.band-grid a:hover { color: #fff; outline: 1px solid #3A3A45; }
.band-grid .r { font-size: 12px; font-weight: 700; color: #9C8CF5; }
.band-grid .n { font-weight: 600; font-size: 15px; }
.band-grid .s { font-size: 12.5px; color: #B9B7C0; }

/* chips / filters */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 18px; font-size: 14.5px; font-weight: 500; }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

/* page heads */
.crumbs { padding-top: 20px; font-size: 13.5px; color: var(--muted); }
.crumbs b { color: var(--ink); font-weight: 600; }
.page-head { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.page-head h1 { font: 900 clamp(30px, 5vw, 40px)/1.2 var(--serif); }
.lead { font-size: 15.5px; line-height: 1.65; color: var(--body); max-width: 880px; }

/* profile */
.profile-head { display: flex; gap: 24px; padding-top: 18px; align-items: flex-start; flex-wrap: wrap; }
.profile-head .info { display: flex; flex-direction: column; gap: 10px; flex: 1 1 320px; }
.profile-head h1 { font: 900 clamp(30px, 5vw, 38px)/1.2 var(--serif); }
.title-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verified { display: inline-flex; align-items: center; gap: 6px; background: var(--success-soft); color: var(--success); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.tldr { background: var(--surface); border: 1px solid var(--line); border-right: 3px solid var(--accent); border-radius: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.65; color: #33333D; max-width: 900px; }
.stats { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .stats { grid-template-columns: 300px repeat(auto-fit, minmax(200px, 1fr)); } }
.overall { background: var(--ink); color: #fff; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.overall .label { font-size: 13px; font-weight: 600; color: #B9B7C0; }
.ring { width: 124px; height: 124px; border-radius: 50%; border: 4px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ring b { font-size: 52px; line-height: 1; } .ring span { font-size: 12px; color: #B9B7C0; }
.overall .places { margin-top: 8px; background: var(--ink-soft); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.overall .move { font-size: 12.5px; font-weight: 600; color: #7BD8B4; } .overall .move.neg { color: #FF9C8F; }
.platform-card { display: flex; flex-direction: column; gap: 12px; }
.platform-card header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 17px; }
.platform-card .score { height: 30px; border-radius: 8px; font-size: 14.5px; }
.kv { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--body); margin: 0; }
.kv div { display: flex; justify-content: space-between; gap: 12px; }
.kv dd { margin: 0; font-weight: 600; color: var(--ink); }
.auth b { font-size: 34px; color: var(--success); line-height: 1.2; }
.fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.chart-head h2 { font: 700 20px var(--serif); }
.chart svg { width: 100%; height: auto; display: block; }
.split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 480px; } }
.brand-chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.coupon { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px; flex-wrap: wrap; }
.coupon .what { flex-grow: 1; display: flex; flex-direction: column; gap: 3px; }
.coupon code { border: 1.5px dashed var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 7px 14px; font: 700 14px var(--sans); letter-spacing: .06em; }
.coupon button { border: none; background: var(--accent-soft); color: var(--accent-ink); border-radius: 8px; min-height: 44px; padding: 0 14px; font: 600 12.5px var(--sans); cursor: pointer; }
.brief { background: var(--accent-soft); border: 1px solid #DCD4FB; border-radius: 18px; padding: 26px 30px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brief > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.brief h2 { font: 700 21px var(--serif); }

.account-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tldr .fine { margin-top: 8px; } .tldr .fine a { text-decoration: underline; }
.data-line { font-size: 14.5px; color: var(--body); max-width: 900px; }
.about { max-width: 900px; } .about h2 { font: 700 18px var(--serif); margin-bottom: 6px; } .about p { font-size: 15px; line-height: 1.7; color: #33333D; } .about .fine { margin-top: 6px; } .about .fine a { text-decoration: underline; }

/* presence: deliberately plainer than measured metrics (grey, no score chip) */
.presence ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 14.5px; }
.presence a { color: var(--ink); text-decoration: underline; }

/* faq + footer */
.faq h3 { font-weight: 600; font-size: 14.5px; } .faq p { font-size: 14px; color: var(--body); }
.faq div + div { margin-top: 12px; }
.site-footer { margin-top: 56px; border-top: 1px solid var(--line); background: var(--surface); padding-block: 36px 24px; font-size: 14px; color: var(--muted); }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col h2 { font: 700 15px var(--sans); color: var(--ink); margin-bottom: 4px; }
.footer-col a { color: var(--ink); padding-block: 3px; }
.footer-col a:hover { color: var(--accent-ink); }
.brand-col img { height: 60px; width: auto; }
.brand-col p { line-height: 1.6; }
.footer-note { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.benefits { margin-block: 18px; } .benefits h2 { font: 700 19px var(--serif); margin-top: 0; } .benefits ul { margin-top: 10px; padding-inline-start: 20px; } .benefits li + li { margin-top: 6px; }
.fast summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); padding-block: 6px; }
.fast .check { margin-top: 8px; font-weight: 400 !important; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* long-form pages */
.prose { max-width: 860px; }
.prose h1 { font: 900 clamp(30px, 5vw, 40px)/1.2 var(--serif); margin-top: 16px; }
.prose h2 { font: 700 22px var(--serif); margin-top: 36px; }
.prose h3 { font-size: 16px; font-weight: 700; margin-top: 22px; }
.prose p, .prose ul, .prose ol { margin-top: 12px; color: #33333D; }
.prose ul, .prose ol { padding-inline-start: 22px; }
.prose li + li { margin-top: 6px; }
.prose a:not(.btn) { color: var(--accent-ink); text-decoration: underline; }
.prose .lead { margin-top: 12px; }
.legal ol { list-style: none; counter-reset: clause; padding-inline-start: 0; }
.legal ol > li { counter-increment: clause; padding-inline-start: 38px; position: relative; }
.legal ol > li::before { content: counter(clause) "."; position: absolute; inset-inline-start: 0; font-weight: 600; color: var(--muted); }
.table-scroll { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); }
th, td { text-align: right; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--bg); white-space: nowrap; }
.prose table { border: 1px solid var(--line); border-radius: 12px; }

/* forms */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin-top: 24px; }
.form.wide { max-width: 900px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 600; font-size: 14.5px; }
input, select, textarea { font: 16px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid #DDD9CF; border-radius: 10px; padding: 0 14px; min-height: 46px; width: 100%; }
textarea { padding-block: 12px; line-height: 1.5; resize: vertical; }
input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; padding: 0; accent-color: var(--ink); }
input.ltr, td.ltr { text-align: right; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500 !important; }
.notice { background: var(--success-soft); color: #075E43; border-radius: 12px; padding: 14px 18px; font-weight: 500; margin-top: 16px; }
.notice.error { background: #FDECEA; color: var(--danger); }
.notice ul { margin: 6px 0 0; padding-inline-start: 20px; font-weight: 400; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* admin */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.pager [aria-disabled] { opacity: .45; }
.admin { padding-block: 28px; }
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 18px; }
.tiles .card { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--body); }
.tiles b { font-size: 32px; line-height: 1.1; color: var(--ink); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.filters input, .filters select { width: auto; flex: 1 1 200px; }
.account-row { display: grid; gap: 10px; align-items: center; grid-template-columns: 1fr; padding-block: 10px; border-top: 1px solid var(--line-soft); }
@media (min-width: 760px) { .account-row { grid-template-columns: 110px minmax(180px, 1fr) auto auto; } .account-row .check:last-child { grid-column: 2 / -1; } }

@media (prefers-reduced-motion: no-preference) { .btn, .chip, .suggest a, .podium a { transition: background-color .15s, border-color .15s, filter .15s; } }

/* accessibility menu */
.a11y { position: fixed; bottom: 18px; left: 18px; z-index: 100; direction: rtl; }
.a11y-toggle { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #fff; background: #1B4FD8; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(22,22,29,.25); }
.a11y-panel { position: absolute; bottom: 64px; left: 0; width: min(300px, calc(100vw - 36px)); max-height: calc(100vh - 110px); overflow-y: auto; background: #fff; color: #16161D; border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 16px 40px rgba(22,22,29,.22); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; }
.a11y-head h2 { font: 700 19px var(--serif); }
.a11y-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 18px; cursor: pointer; border-radius: 10px; }
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.a11y-row span { font-weight: 600; min-width: 56px; text-align: center; }
.a11y-row button, .a11y-option, .a11y-reset { min-height: 44px; border: 1.5px solid #DDD9CF; background: #fff; color: #16161D; border-radius: 10px; font: 500 15px var(--sans); cursor: pointer; padding: 0 14px; text-align: right; }
.a11y-row button { flex: 1; text-align: center; font-weight: 700; }
.a11y-option[aria-pressed="true"] { background: #16161D; border-color: #16161D; color: #fff; }
.a11y-option[aria-pressed="true"]::after { content: ' ✓'; }
.a11y-reset { text-align: center; border-style: dashed; }
.a11y-statement { text-align: center; padding: 8px; font-size: 14px; text-decoration: underline; }

/* accessibility modes (classes on <html>) */
.a11y-contrast { --bg: #fff; --surface: #fff; --ink: #000; --muted: #1a1a1a; --body: #000; --line: #000; --line-soft: #555; --line-strong: #000; --chip: #fff; --accent: #0B2FA8; --accent-ink: #0B2FA8; --accent-soft: #fff; --success: #005A3C; --danger: #8A0F05; }
.a11y-contrast .tag, .a11y-contrast .chip, .a11y-contrast .card { border: 1.5px solid #000; }
.a11y-contrast .fine, .a11y-contrast .handle, .a11y-contrast .pscore, .a11y-contrast .lang-note { color: #000; }
.a11y-invert { --bg: #000; --surface: #0d0d0d; --ink: #fff; --muted: #e6e6e6; --body: #fff; --line: #fff; --line-soft: #8c8c8c; --line-strong: #fff; --chip: #000; --accent: #FFE14A; --accent-ink: #FFE14A; --accent-soft: #000; --success: #7CF0C3; --danger: #FFA59B; }
.a11y-invert body, .a11y-invert .prose p, .a11y-invert .prose li, .a11y-invert .tldr, .a11y-invert .about p, .a11y-invert .fine, .a11y-invert .handle, .a11y-invert .pscore { color: #fff; }
.a11y-invert .tldr, .a11y-invert input, .a11y-invert select, .a11y-invert textarea, .a11y-invert table, .a11y-invert th, .a11y-invert .menu-panel, .a11y-invert .suggest { background: #0d0d0d; color: #fff; border-color: #fff; }
.a11y-invert .score, .a11y-invert .overall, .a11y-invert .band, .a11y-invert .chip.active { background: #fff; color: #000; }
.a11y-invert .btn-primary { color: #000; }
.a11y-invert .tag, .a11y-invert .chip, .a11y-invert .card { border: 1.5px solid #fff; }
.a11y-grayscale body { filter: grayscale(1); }
.a11y-links a:not(.btn):not(.brand) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; font-weight: 600; }
.a11y-font body, .a11y-font h1, .a11y-font h2, .a11y-font h3, .a11y-font .brand, .a11y-font .section-title, .a11y-font input, .a11y-font button, .a11y-font select, .a11y-font textarea { font-family: Arial, 'Helvetica Neue', sans-serif !important; }
.a11y-spacing body { line-height: 1.9; letter-spacing: .04em; word-spacing: .14em; }
.a11y-spacing p, .a11y-spacing li { margin-bottom: .6em; }
.a11y-motion *, .a11y-motion *::before, .a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-cursor, .a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11h-7l4 8-3 1.500-4-8.200L4 20z' fill='%23000' stroke='%23fff' stroke-width='1.500'/%3E%3C/svg%3E") 4 2, auto !important; }
@media print { .a11y { display: none; } }

/* articles */
.articles { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .articles { grid-template-columns: repeat(3, 1fr); } }
.article-card { display: flex; flex-direction: column; overflow: hidden; }
.article-card:hover { color: var(--ink); border-color: var(--line-strong); }
.article-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.article-card h2 { font: 700 19px/1.3 var(--serif); }
.article-card p { font-size: 14px; color: var(--body); }
.article .article-hero { width: 100%; border-radius: 18px; margin-top: 18px; }
.article p { font-size: 17px; line-height: 1.8; }

/* medals: places 1-3 */
.medal { --m1: #F6C453; --m2: #C9CDD6; --m3: #D9A06B; --mt: #3A2A00; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--mt) !important; font-weight: 800; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.18); }
.medal-1 { background: linear-gradient(160deg, #FFE38A, var(--m1) 55%, #D9A520); }
.medal-2 { background: linear-gradient(160deg, #F1F3F7, var(--m2) 55%, #9AA1AE); --mt: #23272F; }
.medal-3 { background: linear-gradient(160deg, #F0C39A, var(--m3) 55%, #A8683A); --mt: #3B1F08; }
.row .rank.medal { width: 30px; height: 30px; font-size: 13px; }
.podium .place.medal { padding: 5px 14px; }
.band-grid .r.medal { padding: 1px 8px; font-size: 11px; }
.medal.tag { padding: 3px 12px; font-size: 13px; margin-inline-end: 6px; }
.medal.tag::before, .podium .place.medal::before { content: '★'; font-size: .85em; }