/* =========================================================================
   AdSize — production stylesheet (Design 7 · "Command / App-shell")
   Light by default, dark via [data-theme="dark"]. Maps onto existing markup.
   ========================================================================= */
:root {
  --bg: #fbfbfd;
  --panel: #ffffff;
  --panel-2: #f7f7fb;
  --ink: #0b0b12;
  --muted: #5b5b6b;
  --faint: #8a8a99;
  --line: #ececf1;
  --line-strong: #e0e0e8;
  --accent: #6d5efc;
  --accent-ink: #5847e6;
  --accent-soft: #f0eeff;
  --ok: #16a34a;
  --warn: #d97706;
  --low: #dc2626;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(16,16,36,.05), 0 1px 1px rgba(16,16,36,.04);
  --shadow: 0 8px 24px -10px rgba(20,18,60,.16), 0 2px 6px -2px rgba(20,18,60,.08);
  --shadow-lg: 0 30px 60px -22px rgba(34,26,90,.28), 0 8px 20px -10px rgba(20,18,60,.14);
  --maxw: 1120px;
  --font: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
[data-theme="dark"] {
  --bg: #0a0a12;
  --panel: #14141f;
  --panel-2: #101019;
  --ink: #edeef6;
  --muted: #9a9bb0;
  --faint: #71728a;
  --line: #21212f;
  --line-strong: #2b2b3d;
  --accent: #8b7dff;
  --accent-ink: #b7adff;
  --accent-soft: #1c1a3a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.025em; }
p { margin: 0; }
svg, img { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 200; }

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: var(--ink); flex: none; }
.logo-mark { width: 24px; height: 24px; border-radius: 7px; display: block; box-shadow: 0 4px 10px -3px rgba(109,94,252,.4); }
.flag { width: 18px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: inline-block; vertical-align: middle; }
/* keep near-black brand marks visible on dark bg, near-white marks on light bg */
[data-theme="dark"] .blogo-dark { fill: #e6e8f2; }
.blogo-light { filter: drop-shadow(0 0 .7px rgba(0,0,0,.5)); }
[data-theme="dark"] .blogo-light { filter: none; }
.blogo-img { object-fit: contain; display: inline-block; vertical-align: middle; }
.icon { display: inline-block; vertical-align: middle; flex: none; }
.nav-drop-menu a { display: flex; align-items: center; gap: 8px; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; }

/* header live search */
.hsearch {
  position: relative; flex: 0 1 250px; max-width: 250px; margin: 0 auto;
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 8px 0 13px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--faint); box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, max-width .22s ease;
}
/* Expand the search to full width on focus: hide the nav to free the space,
   then let the search grow (class toggled by app.js on focus/blur). */
.header-inner.hs-open .main-nav { display: none; }
.header-inner.hs-open .hsearch { max-width: 760px !important; flex-grow: 1; }
.hsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hsearch-ic { flex: none; color: var(--faint); }
.hsearch-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 13.5px; color: var(--ink); }
.hsearch-input::placeholder { color: var(--faint); }
.hsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hsearch-kbd { display: flex; gap: 3px; flex: none; }
.hsearch-kbd kbd { font: inherit; font-size: 11px; font-weight: 600; line-height: 1; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 5px; min-width: 19px; text-align: center; }
.hsearch-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 130; max-height: 62vh; overflow: auto; }
.hsearch.open .hsearch-menu { display: block; }
.hsearch-item { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; }
.hsearch-item:hover, .hsearch-item.hi { background: var(--panel-2); text-decoration: none; }
.hsearch-item.is-plat .hs-t { color: var(--accent-ink); }
.hs-t { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-s { font-size: 12px; color: var(--muted); }
.hsearch-empty { margin: 0; padding: 14px 12px; color: var(--faint); font-size: 13px; text-align: center; }

.main-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.main-nav > a, .nav-drop-btn {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 7px 10px; border-radius: 8px;
  white-space: nowrap;
}
/* keep the search usable when the nav is wide (long RU labels) */
.hsearch { min-width: 180px; }
.main-nav > a:hover, .nav-drop-btn:hover { background: var(--panel-2); color: var(--ink); }
.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.theme-toggle { font-size: 16px; background: var(--panel); border: 1px solid var(--line-strong); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.theme-toggle:hover { border-color: var(--accent); }

/* dropdowns */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; min-width: 210px; max-height: 70vh; overflow: auto;
  display: none; z-index: 120;
}
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 8px 11px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 500; }
.nav-drop-menu a:hover { background: var(--panel-2); color: var(--ink); }
.nav-drop-menu a.active { color: var(--accent-ink); background: var(--accent-soft); }
.lang-menu { inset-inline-start: auto; inset-inline-end: 0; min-width: 190px; display: none; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; }
.nav-drop.open .lang-menu, .nav-drop.open .plat-menu { display: block; }
.lang-search { position: sticky; top: 0; z-index: 1; width: 100%; height: 34px; padding: 0 10px 0 30px; margin-bottom: 4px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") no-repeat left 9px center; }
.lang-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plat-menu { width: 300px; max-height: 60vh; }
.plat-menu .lang-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-btn { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 10px; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; line-height: 1;
  padding: 12px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: 0 10px 22px -10px rgba(109,94,252,.75);
  transition: transform .1s, background .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: var(--accent-ink); transform: translateY(-1px); text-decoration: none; }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--panel); }

/* ---- hero -------------------------------------------------------------- */
.hero { padding: 64px 20px 24px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; padding: 6px 13px; border-radius: 999px; margin: 0 0 18px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; letter-spacing: -.035em; margin: 0 0 14px; }
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 720px; margin: 0 auto; }
.stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0; margin: 32px 0 0; }
.stats li { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 24px; min-width: 120px; box-shadow: var(--shadow-sm); }
.stats strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-ink); }
.stats span { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ---- platform chips ---------------------------------------------------- */
.platform-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; }
.chip:hover { text-decoration: none; border-color: var(--brand, var(--accent)); transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, var(--accent)) 14%, transparent); }
.chip-logo { display: inline-flex; }
.chip-logo svg, .sc-logo svg, .ph-logo svg, .src-logo svg { display: block; }

/* ---- filter bar -------------------------------------------------------- */
.mode-hint { text-align: center; color: var(--faint); font-size: 14px; margin: 6px 0 16px; }
.filter-bar {
  --ctl: 42px; position: sticky; top: 61px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px);
  padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.fb-search { flex: 1 1 230px; min-width: 180px; }
.fb-search input { width: 100%; height: var(--ctl); padding: 0 14px; font: inherit; font-size: 15px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.fb-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-selects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-field { display: flex; }
.fb-field > span { display: none; }
.fb-field select {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); height: var(--ctl);
  padding: 0 32px 0 12px; border-radius: 10px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); background: var(--panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;
  min-width: 150px; cursor: pointer;
}
.fb-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-reset { font: inherit; font-weight: 600; font-size: 14px; height: var(--ctl); padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--muted); cursor: pointer; }
.fb-reset:hover { color: var(--ink); border-color: var(--accent); }
.fb-count { margin: 0; margin-inline-start: auto; font-size: 13px; color: var(--faint); font-weight: 600; white-space: nowrap; }

/* themed scrollbars for scrollable menus (no bright native bar on dark) */
.nav-drop-menu, .lang-menu, .ss-list, .ss-menu, .card-grid, .detail-specs { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.nav-drop-menu::-webkit-scrollbar, .lang-menu::-webkit-scrollbar, .ss-list::-webkit-scrollbar, .ss-menu::-webkit-scrollbar { width: 10px; height: 10px; }
.nav-drop-menu::-webkit-scrollbar-thumb, .lang-menu::-webkit-scrollbar-thumb, .ss-list::-webkit-scrollbar-thumb, .ss-menu::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--panel); }
.nav-drop-menu::-webkit-scrollbar-thumb:hover, .lang-menu::-webkit-scrollbar-thumb:hover, .ss-list::-webkit-scrollbar-thumb:hover { background: var(--faint); }
.nav-drop-menu::-webkit-scrollbar-track, .lang-menu::-webkit-scrollbar-track, .ss-list::-webkit-scrollbar-track, .ss-menu::-webkit-scrollbar-track { background: transparent; }

/* searchable custom select (mirrors a hidden native <select>) */
.ss { position: relative; display: inline-flex; }
.ss-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ss-btn { font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); height: var(--ctl, 42px); padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel); min-width: 150px; cursor: pointer; display: inline-flex; align-items: center; position: relative; text-align: start; }
.ss-btn::after { content: ""; position: absolute; right: 11px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat center; }
.ss-btn:hover { border-color: var(--accent); }
.ss.open .ss-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 100%; width: max-content; max-width: 300px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: none; z-index: 60; }
.ss.open .ss-menu { display: block; }
.ss-search { width: 100%; height: 34px; padding: 0 10px 0 30px; margin-bottom: 4px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; color: var(--ink);
  background: var(--panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a8a99' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E") no-repeat left 9px center; }
.ss-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ss-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.ss-opt { padding: 8px 11px; border-radius: 8px; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ss-opt:hover { background: var(--panel-2); color: var(--ink); }
.ss-opt.active { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }

/* ---- card grid --------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; align-items: start; }
.size-card { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s, transform .15s; }
.size-card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand, var(--accent)) 45%, var(--line-strong)); transform: translateY(-3px); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-plat { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 14px; }
.sc-plat:hover { text-decoration: none; color: var(--brand, var(--accent)); }
.sc-logo { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }

.sc-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 6px; min-height: 150px; justify-content: center; }
.sc-preview-wrap:hover { text-decoration: none; }
.sc-preview {
  position: relative; border-radius: 8px; min-width: 14px; min-height: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 85%, #000), color-mix(in srgb, var(--brand) 55%, #fff 14%));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.sc-preview-wrap:hover .sc-preview { box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.sc-preview-dims { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); padding: 2px 6px; white-space: nowrap; }
.sc-scale { font-size: 11px; color: var(--faint); }
.sc-title { font-size: 16px; margin: 8px 0 2px; }
.sc-title a { color: var(--ink); }
.sc-title a:hover { color: var(--brand, var(--accent)); text-decoration: none; }
.sc-group { font-size: 11px; color: var(--faint); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.sc-specs { margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.sc-specs > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.sc-specs dt { color: var(--faint); margin: 0; }
.sc-specs dd { margin: 0; text-align: end; font-weight: 600; color: var(--ink); }
.copy { font: inherit; font-weight: 700; color: var(--accent-ink); background: none; border: 0; cursor: pointer; padding: 0; font-variant-numeric: tabular-nums; }
.copy:hover { text-decoration: underline; }
.copy.copied { color: var(--ok); }
.copy, .wh, .size-hero-val { position: relative; }
.copy.copied::after, .wh.copied::after, .size-hero-val.copied::after {
  content: attr(data-copied); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  background: var(--ink); color: var(--bg); font: 700 11px/1 var(--font); letter-spacing: 0;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 20; box-shadow: var(--shadow-sm);
}
.sc-more { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.sc-more:hover { text-decoration: none; opacity: .8; }

/* equal-height compact cards (used in "same format on other platforms") */
.related .card-grid { align-items: stretch; }
.size-card.compact { height: 100%; }
.size-card.compact .sc-preview-wrap { min-height: 168px; }
.size-card.compact .sc-title { min-height: 2.5em; margin-bottom: 4px; }
.size-card.compact .sc-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* confidence + monogram */
.conf { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.conf-high { background: var(--ok); } .conf-medium { background: var(--warn); } .conf-low { background: var(--low); }
.brand-monogram { display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--fg, #fff); background: var(--c, #6b7280); font-weight: 800; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.no-results { text-align: center; color: var(--faint); padding: 40px 0; }

/* ---- format cards ------------------------------------------------------ */
.formats-index, .tips, .related { margin: 56px auto; }
.formats-index h2, .tips h2, .related h2, .prose h2 { font-size: 26px; font-weight: 800; margin: 0 0 18px; }
.format-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.format-card { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; }
.format-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.fc-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.fc-count { font-size: 13px; color: var(--faint); }

/* ---- page hero (platform / format / size / about) ---------------------- */
.page-hero { padding: 40px 20px 8px; }
.breadcrumb { font-size: 13px; color: var(--faint); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-ink); }
.ph-title { display: flex; align-items: center; gap: 16px; }
.ph-logo { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--brand, var(--accent)) 12%, var(--panel)); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); }
.page-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0; }
.ph-cat { margin: 4px 0 0; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.page-hero .lede { margin: 16px 0 0; text-align: start; }
.official-links { margin-top: 14px; font-size: 14px; color: var(--muted); }
.official-links a { color: var(--accent-ink); }

/* ---- detail page ------------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 1.2fr; gap: 32px; align-items: start; margin-top: 8px; }
.dv-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; margin: 0 0 12px; }
.detail-visual .dv-h:not(:first-child) { margin-top: 28px; }
.dv-preview { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: var(--shadow-sm); }
.dv-context { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px; display: flex; justify-content: center; box-shadow: var(--shadow-sm); }
.detail-specs { margin: 0; display: grid; gap: 0; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.detail-specs > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.detail-specs > div:first-child { border-top: 0; }
.detail-specs dt { color: var(--faint); margin: 0; font-size: 14px; }
.detail-specs dd { margin: 0; text-align: end; font-weight: 600; color: var(--ink); font-size: 14px; }
.safe-note { margin: 16px 0 0; padding: 12px 14px; background: color-mix(in srgb, var(--warn) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--ink); }
.detail-notes { color: var(--muted); margin: 0 0 18px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* size hero + spec chips */
.size-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-bottom: 14px; }
.size-hero-main { flex: 1 1 200px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.size-hero-k { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 6px; }
.size-hero-val { font: inherit; border: 0; background: none; cursor: pointer; padding: 0; color: var(--accent-ink); font-size: clamp(28px, 4vw, 36px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 8px; }
.size-hero-val .unit { font-size: 15px; font-weight: 700; color: var(--faint); }
.size-hero-val:hover { text-decoration: none; opacity: .85; }
.size-hero-val.copied { color: var(--ok); }
.size-hero-wh { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.wh { font: inherit; cursor: pointer; text-align: start; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-width: 100px; transition: border-color .15s; }
.wh span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.wh b { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.wh:hover { border-color: var(--accent); }
.wh.copied b { color: var(--ok); }
.spec-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.spec-chip { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.spec-chip span { display: block; font-size: 12px; font-weight: 600; color: var(--faint); margin-bottom: 4px; }
.spec-chip b { font-size: 15px; font-weight: 700; color: var(--ink); }
.spec-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.spec-note-k { font-weight: 700; color: var(--ink); }
.limit-block { margin: 18px 0 0; }
.limit-block .spec-note-k { display: block; margin-bottom: 9px; }
.limit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.limit-chip { display: inline-flex; align-items: baseline; gap: 8px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-sm); }
.lc-field { font-size: 13px; color: var(--muted); }
.lc-val { font-size: 14px; font-weight: 800; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lc-val span { font-size: 11px; font-weight: 600; color: var(--faint); margin-left: 1px; }

/* ---- FAQ + related searches (size pages) -------------------------------- */
.faq-sec { margin-top: 12px; }
.faq-h { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq-item { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 15.5px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 21px; font-weight: 400; color: var(--muted); flex: none; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-a { padding: 0 18px 16px; color: var(--muted); font-size: 15px; line-height: 1.62; }
.related-searches { margin-top: 12px; }
.rs-h { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 12px; }
.rs-links { display: flex; flex-wrap: wrap; gap: 9px; }
.rs-links a { font-size: 13.5px; color: var(--accent-ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 15px; box-shadow: var(--shadow-sm); }
.rs-links a:hover { border-color: var(--accent); text-decoration: none; }

/* ---- social-media mega hub ---------------------------------------------- */
.hub-sec { margin: 46px auto; }
.hub-h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.hub-sub { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.hub-updated { color: var(--faint); font-size: 13px; margin: 12px 0 0; }
.hub-cheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 12px; }
.hub-cheat-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.hub-cheat-card:hover { border-color: var(--accent); text-decoration: none; }
.hcc-thumb { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.hcc-box { display: block; border-radius: 5px; background: color-mix(in srgb, var(--accent) 28%, var(--panel-2)); border: 1px solid var(--accent); }
.hcc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hcc-size { align-self: flex-start; font-weight: 800; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hcc-ratio { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.hcc-for { font-size: 12.5px; color: var(--muted); line-height: 1.42; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.hub-chip { font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.hub-chip:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
.hub-plat { margin: 0 0 26px; scroll-margin-top: 84px; }
.hub-plat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, var(--brand, var(--accent)) 42%, var(--line)); }
.hub-plat-name { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--ink); }
.hub-plat-name:hover { color: var(--accent-ink); text-decoration: none; }
.hub-plat-logo { display: inline-flex; }
.hub-plat-all { font-size: 13.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.hub-table-wrap { overflow-x: auto; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hub-table thead th { text-align: start; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 0 14px 8px; white-space: nowrap; }
.hub-table tbody tr { border-top: 1px solid var(--line); }
.hub-table td { padding: 10px 14px; vertical-align: middle; }
.ht-name a { color: var(--ink); font-weight: 600; }
.ht-name a:hover { color: var(--accent-ink); }
.ht-size { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ht-ratio { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- vs-comparison ------------------------------------------------------ */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
.cmp-table thead th { text-align: start; padding: 10px 16px; border-bottom: 2px solid var(--line-strong); vertical-align: bottom; }
.cmp-th-fmt { color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.cmp-th-plat { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); border-bottom: 2px solid var(--brand, var(--accent)); padding-bottom: 3px; }
.cmp-th-plat:hover { color: var(--accent-ink); text-decoration: none; }
.cmp-th-logo, .cmp-chip-logo { display: inline-flex; }
.cmp-table tbody tr { border-top: 1px solid var(--line); }
.cmp-table td { padding: 12px 16px; vertical-align: top; }
.cmp-fmt { font-weight: 600; }
.cmp-fmt a { color: var(--ink); }
.cmp-fmt a:hover { color: var(--accent-ink); }
.cmp-size { display: inline-block; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-size:hover { color: var(--accent-ink); }
.cmp-ratio { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cmp-none { color: var(--faint); }
.cmp-same { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp-badge { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 5px; padding: 1px 6px; vertical-align: middle; }
.cmp-summary { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; }
.cmp-index-links { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-index-links .hub-chip { display: inline-flex; align-items: center; gap: 7px; }

/* ---- partners ----------------------------------------------------------- */
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pt-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s, transform .1s, box-shadow .15s;
}
.pt-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); }
/* logo plate — white, rounded; grows in WIDTH for wide brand logos */
.pt-logo {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h, 48px); padding: 8px 13px; background: #fff; border-radius: 13px; box-shadow: var(--shadow-sm);
}
.pt-logo-img { height: 100%; width: auto; max-width: calc(var(--h, 48px) * 3.4); object-fit: contain; display: block; }
/* card logo: a big, full-width brand banner (the logo centered on a white plate) */
.pt-card-logo { display: block; }
.pt-card-logo .pt-logo {
  width: 100%; height: 88px; padding: 16px 20px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
}
.pt-card-logo .pt-logo-img { height: 40px; width: auto; max-width: 100%; }
.pt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-card-name { font-size: 17px; font-weight: 800; margin: 0; min-width: 0; }
.pt-card-cat { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.pt-card-tag {
  color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-card-offer {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--ok) 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent);
}
.pt-card-offer-ic { flex: none; color: var(--ok); margin-top: 1px; }
.pt-card-offer-txt { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.pt-card-cta { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent-ink); }

/* detail: breadcrumb spans the full width; content + sticky sidebar share the
   next row, so the sidebar rises to align with the H1 (no empty top-right gap) */
.pt-detail {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 4px 44px;
  align-items: start; padding: 34px 24px 8px;
}
.pt-detail-crumb { grid-column: 1 / -1; }
.pt-main { min-width: 0; }
.pt-detail-h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0; line-height: 1.05; }
.pt-detail-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pt-detail-meta .lede { margin: 0; }
.pt-cat { display: inline-block; flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; }
a.pt-cat:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: none; }
[data-theme="dark"] .pt-cat { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #cdc7ff; }
.pt-detail-body { margin-top: 24px; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.pt-detail-body p { margin: 0 0 14px; }
.pt-detail-body h3 { color: var(--ink); font-size: 18px; font-weight: 800; margin: 24px 0 10px; }
.pt-detail-body ul, .pt-detail-body ol { margin: 0 0 14px; padding-left: 22px; }
.pt-detail-body li { margin: 0 0 6px; }
.pt-detail-body a { color: var(--accent-ink); text-decoration: underline; }
.pt-side { grid-column: 2; position: sticky; top: 82px; display: flex; flex-direction: column; gap: 12px; }
/* sidebar logo: a full-width brand banner (logo centered), matching the cards */
.pt-side-logo { display: block; margin-bottom: 4px; }
.pt-side-logo .pt-logo {
  width: 100%; height: 96px; padding: 18px 22px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
}
.pt-side-logo .pt-logo-img { height: 44px; width: auto; max-width: 100%; }
.pt-bonus-box {
  padding: 18px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
}
.pt-bonus-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ok); }
.pt-bonus-ic { display: inline-flex; color: var(--ok); }
.pt-bonus-text { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.pt-promo { margin: 14px 0 0; }
.pt-promo-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 5px; }
.pt-promo-code { display: inline-flex; align-items: center; gap: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--ink); background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.pt-promo-code:hover { border-color: var(--accent); color: var(--accent-ink); }
.pt-promo-code .icon { color: var(--faint); }
.pt-bonus-how { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pt-visit { width: 100%; justify-content: center; font-size: 15px; }
.pt-cta-note { margin: 0; font-size: 12.5px; color: var(--faint); text-align: center; }
@media (max-width: 780px) {
  /* single column; reorder so the sidebar (logo + bonus + CTA) sits at the top
     and the description follows below, while the header stays with its copy */
  .pt-detail { grid-template-columns: 1fr; gap: 18px; }
  .pt-detail-crumb, .pt-main, .pt-side { grid-column: 1; }
  .pt-detail-crumb { order: -2; }
  .pt-side { order: -1; position: static; }
  .pt-detail-body { margin-top: 16px; }
}
/* catalog toolbar + category filter */
.pt-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pt-count { font-size: 13.5px; font-weight: 700; color: var(--faint); }
.pt-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-cat-chip { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.pt-cat-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.pt-cat-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pt-cat-n { opacity: .65; font-weight: 700; }
/* catalog search */
.pt-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--faint); }
.pt-search:focus-within { border-color: var(--accent); color: var(--accent-ink); }
.pt-search-in { font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--ink); padding: 8px 0; width: 190px; outline: none; }
.pt-search-in::placeholder { color: var(--faint); }
@media (max-width: 560px) { .pt-search { margin-left: 0; flex: 1 1 100%; } .pt-search-in { width: 100%; } }
/* catalog pagination */
.pt-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.pt-pg { font: inherit; font-size: 14px; font-weight: 700; min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pt-pg:hover:not(:disabled):not(.is-on) { border-color: var(--accent); color: var(--accent-ink); }
.pt-pg.is-on { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }
.pt-pg:disabled { opacity: .4; cursor: default; }
.pt-pg-gap { color: var(--faint); padding: 0 4px; }
/* these set an explicit display, so the UA [hidden] rule can't hide them — force it */
.pt-card[hidden], .pt-pager[hidden] { display: none !important; }

.pt-become { margin: 48px auto; }
.pt-become-in {
  padding: 30px 28px; text-align: center; background: var(--panel-2);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.pt-become-in h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.pt-become-in p { color: var(--muted); font-size: 15px; margin: 0 auto 18px; max-width: 520px; }
.detail-notes-card { margin-top: 20px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.detail-notes-card .dv-h { margin-bottom: 10px; }
.detail-notes-card p { color: var(--muted); margin: 0 0 11px; font-size: 14.5px; line-height: 1.66; }
.detail-notes-card p:last-child { margin-bottom: 0; }
.safe-note { display: flex; align-items: flex-start; gap: 8px; }

/* ---- glossary ----------------------------------------------------------- */
.gl-sec { margin-bottom: 40px; }
.gl-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.gl-count { font-size: 13.5px; font-weight: 700; color: var(--faint); }
.gl-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-cat-chip { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.gl-cat-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.gl-cat-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gl-cat-n { opacity: .65; font-weight: 700; }
.gl-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--faint); }
.gl-search:focus-within { border-color: var(--accent); color: var(--accent-ink); }
.gl-search-in { font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--ink); padding: 8px 0; width: 180px; outline: none; }
.gl-search-in::placeholder { color: var(--faint); }
@media (max-width: 560px) { .gl-search { margin-left: 0; flex: 1 1 100%; } .gl-search-in { width: 100%; } }
/* A–Z bar */
.gl-alpha { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0; margin-bottom: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gl-alpha-l { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--accent-ink); border-radius: 8px; }
.gl-alpha-l:hover { background: var(--panel-2); text-decoration: none; }
.gl-alpha-l.is-off { color: var(--line-strong); pointer-events: none; }
/* letter groups + term cards */
.gl-letter { margin-top: 22px; scroll-margin-top: 84px; }
.gl-letter-h { font-size: 20px; font-weight: 800; color: var(--accent-ink); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-soft); }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gl-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s, transform .1s, box-shadow .15s; }
.gl-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); }
.gl-card-term { font-size: 16px; font-weight: 800; }
.gl-card-def { color: var(--muted); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gl-card-cat { margin-top: auto; padding-top: 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.gl-card[hidden], .gl-letter[hidden] { display: none !important; }
/* term page — hero uses .page-hero's 20px inset; match the .wrap body's 24px so
   the H1 and the definition column share the exact same left edge */
.gl-term-hero { padding-left: 24px; padding-right: 24px; }
/* content column + "more terms" sidebar; outer stays a full-width .wrap so the
   main column's left edge lines up with the header (no centered-block shift) */
.gl-term-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: start; }
.gl-term { max-width: 760px; min-width: 0; }
.gl-term-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.gl-term-head h1 { margin: 0; }
.gl-term-cat { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; }
a.gl-term-cat:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: none; }
.gl-term-def { font-size: 17px; line-height: 1.7; color: var(--ink); margin: 0; }
.gl-term-ex { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.gl-term-ex-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 4px; }
.gl-term-ex p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.gl-related { margin-top: 30px; }
.gl-related h2 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 0 0 12px; }
.gl-related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-related-chip { font-size: 14px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; }
.gl-related-chip:hover { border-color: var(--accent); text-decoration: none; }
.gl-term-back { margin-top: 30px; font-size: 14px; font-weight: 600; }
/* "more terms" sidebar */
.gl-term-side { position: sticky; top: 84px; align-self: start; padding: 16px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.gl-side-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin: 0 0 8px; padding: 0 10px; }
.gl-side-list { list-style: none; margin: 0; padding: 0; }
.gl-side-list a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.gl-side-list a:hover { background: var(--panel-2); color: var(--accent-ink); text-decoration: none; }
.gl-side-all { display: block; margin-top: 8px; padding: 10px 10px 2px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.gl-side-all:hover { text-decoration: none; }
@media (max-width: 780px) { .gl-term-layout { grid-template-columns: 1fr; gap: 28px; } .gl-term-side { position: static; } }

/* ---- geo ---------------------------------------------------------------- */
/* index: toolbar (count + tier filter + search) + country cards */
.geo-index { margin-bottom: 40px; }
.geo-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.geo-count { font-size: 13.5px; font-weight: 700; color: var(--faint); }
.geo-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-tier-chip { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.geo-tier-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.geo-tier-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.geo-chip-n { opacity: .65; font-weight: 700; }
.geo-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--faint); }
.geo-search:focus-within { border-color: var(--accent); color: var(--accent-ink); }
.geo-search-in { font: inherit; font-size: 14px; border: 0; background: transparent; color: var(--ink); padding: 8px 0; width: 170px; outline: none; }
.geo-search-in::placeholder { color: var(--faint); }
.geo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.geo-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s, transform .1s, box-shadow .15s; }
.geo-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow); }
.geo-card[hidden] { display: none !important; }
.geo-card-flag { flex: none; display: inline-flex; }
.geo-flag { display: block; border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-strong) 50%, transparent); }
.geo-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.geo-card-name { font-size: 16.5px; font-weight: 800; }
.geo-card-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-card-arrow { flex: none; font-size: 16px; font-weight: 700; color: var(--accent-ink); }
/* tier badge */
.geo-tier { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.geo-tier-1 { color: var(--accent-ink); background: var(--accent-soft); }
.geo-tier-2 { color: #0a7c47; background: color-mix(in srgb, #12b76a 16%, transparent); }
.geo-tier-3 { color: #0369a1; background: color-mix(in srgb, #0ea5e9 16%, transparent); }
[data-theme="dark"] .geo-tier-2 { color: #6ee7b0; }
[data-theme="dark"] .geo-tier-3 { color: #7dd3fc; }

/* country profile: hero + sticky nav + content */
.geo-head { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.geo-head-flag { flex: none; display: inline-flex; }
.geo-head-txt { min-width: 0; }
.geo-head-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.geo-head-title h1 { margin: 0; }
.geo-head .lede { margin: 8px 0 0; }
.geo-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin: 12px auto 40px; }
.geo-nav { position: sticky; top: 82px; align-self: start; }
.geo-nav nav { display: flex; flex-direction: column; gap: 1px; border-left: 2px solid var(--line); }
.geo-nav a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-left: 2px solid transparent; margin-left: -2px; }
.geo-nav a:hover { color: var(--ink); text-decoration: none; }
.geo-nav a.is-on { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 700; }
.geo-nav a .geo-ic { flex: none; opacity: .6; }
.geo-nav a.is-on .geo-ic { opacity: 1; color: var(--accent); }
.geo-main { min-width: 0; display: grid; gap: 20px; }
.geo-block { padding: 22px 24px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); scroll-margin-top: 82px; min-width: 0; }
.geo-block-h { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.geo-block-ic { display: inline-flex; color: var(--accent-ink); }
.geo-num { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-ink); border-radius: 5px; padding: 0 4px; font-weight: 700; white-space: nowrap; }
[data-theme="dark"] .geo-num { color: #cdc7ff; }
.geo-fx { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 8px 15px; background: color-mix(in srgb, var(--ok) 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); border-radius: 999px; }
.geo-fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); flex: none; }
.geo-fx-main { font-size: 14.5px; color: var(--ink); }
.geo-fx-main b { font-weight: 800; }
.geo-fx-note { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ok); }
.geo-rows { margin: 0; }
.geo-row { display: grid; grid-template-columns: 165px minmax(0, 1fr); gap: 10px 22px; padding: 12px 0; border-top: 1px solid var(--line); }
.geo-row:first-child { border-top: 0; padding-top: 0; }
.geo-row dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); margin: 0; padding-top: 2px; }
.geo-row dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); min-width: 0; }
.geo-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.geo-tag { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.geo-ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.geo-ul li { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.geo-note-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.geo-note-k { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); }
.geo-note-v { font-size: 14.5px; line-height: 1.6; }
/* regulations */
.geo-reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.geo-reg { padding: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.geo-reg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.geo-reg-name { font-size: 14px; font-weight: 800; }
.geo-reg-text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.geo-badge { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; }
.geo-badge-banned { color: #fff; background: #e5484d; }
.geo-badge-restricted { color: #7a4b00; background: #ffb224; }
.geo-badge-allowed, .geo-badge-legal { color: #fff; background: var(--ok); }
.geo-badge-grey { color: var(--muted); background: var(--line); }
/* people */
.geo-sub-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 2px 0 10px; }
.geo-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.geo-people:last-child { margin-bottom: 0; }
.geo-person { padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.geo-person-hd { display: flex; align-items: center; gap: 11px; }
.geo-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel); border: 1px solid var(--line); }
.geo-avatar-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border: 0; }
.geo-person-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.geo-person-name { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.geo-person-fol { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); }
.geo-person-meta { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.geo-person-plat { font-weight: 700; color: var(--ink); }
.geo-person-plat::after { content: " · "; color: var(--faint); }
/* media landscape — two ranked columns (press + YouTube) */
.geo-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px 24px; }
.geo-media-col { min-width: 0; }
.geo-ranklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.geo-rankitem { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 11px; padding: 9px 13px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; transition: border-color .15s; }
.geo-rankitem:hover { border-color: var(--line-strong); }
.geo-rank { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border-radius: 8px; flex: none; }
.geo-rank-name { grid-column: 2; grid-row: 1; font-size: 14px; font-weight: 800; line-height: 1.25; min-width: 0; }
.geo-rank-subs { grid-column: 3; grid-row: 1; justify-self: end; font-size: 11.5px; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.geo-rank-note { grid-column: 2 / -1; grid-row: 2; font-size: 12px; line-height: 1.4; color: var(--muted); }
/* numbered "1) 2) 3)" prose rendered as a real list */
.geo-enum { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; counter-reset: geoenum; }
.geo-enum li { position: relative; padding-left: 30px; line-height: 1.55; counter-increment: geoenum; }
.geo-enum li::before { content: counter(geoenum); position: absolute; left: 0; top: 1px; width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; }
/* charts */
/* reach bars: label + value on one row, full-width bar beneath (no cramped side column) */
.geo-bars { display: grid; gap: 12px; }
.geo-bar { display: grid; gap: 5px; }
.geo-bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.geo-bar-l { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; flex: none; }
.geo-bar-track { height: 9px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.geo-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #00c4cc)); }
.geo-bar-v { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right; line-height: 1.35; min-width: 0; }
.geo-bar-extra { margin-top: 10px; }
.geo-bar-extra li { font-size: 13px; color: var(--muted); }
.geo-bar-extra b { color: var(--ink); font-weight: 700; }
/* multi-clause prose rendered as separate lines */
.geo-lines { gap: 7px; }
.geo-lines li { line-height: 1.5; }
.geo-osbar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; font-size: 11.5px; font-weight: 800; }
.geo-osbar-a, .geo-osbar-i { display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 0; overflow: hidden; }
.geo-osbar-a { background: #3ddc84; color: #05320f; }
.geo-osbar-i { background: #6b7280; color: #fff; }
.geo-oslegend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.geo-oslegend span { display: inline-flex; align-items: center; gap: 6px; }
.geo-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.geo-dot-a { background: #3ddc84; }
.geo-dot-i { background: #6b7280; }
.geo-tznote { margin: 11px 0 0; padding: 11px 14px; background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 10px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.geo-tznote[hidden] { display: none !important; }  /* JS only unhides once it has converted times; flex would otherwise override [hidden] */
.geo-tznote-l { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.geo-tznote-b { display: grid; gap: 5px; }
.geo-tzline { font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.geo-tzflag { flex: none; display: inline-flex; }
.geo-tzsrc { color: var(--muted); font-weight: 600; }
.geo-tzarr { color: var(--faint); }
.geo-tzline b { font-weight: 800; color: var(--accent-ink); }
/* interlink to other countries */
.geo-others { margin: 26px auto 44px; }
.geo-others h2 { font-size: 20px; font-weight: 800; margin: 0 0 16px; }
.geo-others-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.geo-others-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .15s, transform .1s, box-shadow .15s; }
.geo-others-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.geo-others-flag { flex: none; display: inline-flex; }
.geo-others-name { font-weight: 800; font-size: 15.5px; flex: 1; min-width: 0; }
.geo-chip-n { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 5px; font-size: 11px; font-weight: 800; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); }
.geo-tier-chip.is-on .geo-chip-n { background: rgba(255, 255, 255, .28); color: #fff; }
.geo-note { margin-top: 4px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
@media (max-width: 860px) {
  .geo-layout { grid-template-columns: 1fr; gap: 18px; }
  .geo-nav { position: static; }
  .geo-nav nav { flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 6px; }
  .geo-nav a { border: 1px solid var(--line); border-radius: 999px; margin-left: 0; padding: 6px 12px; }
  .geo-nav a.is-on { border-color: var(--accent); }
}
@media (max-width: 560px) {
  .geo-row { grid-template-columns: 1fr; gap: 4px; }
  .geo-search { margin-left: 0; flex: 1 1 100%; }
  .geo-search-in { width: 100%; }
  .geo-head-flag { font-size: 46px; }
}

/* ---- dimensionless formats (text / audio / document ads) ---------------- */
.dv-fmt { min-height: 210px; }
.fmock { width: 100%; display: flex; align-items: center; justify-content: center; }
.fmock-text .fm-card { width: 100%; max-width: 340px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; position: relative; box-shadow: var(--shadow-sm); }
.fm-ad { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--faint); background: var(--line); padding: 2px 7px; border-radius: 5px; }
.fm-h { display: block; height: 13px; width: 62%; border-radius: 5px; background: color-mix(in srgb, var(--brand, var(--accent)) 55%, var(--line-strong)); margin: 4px 0 13px; }
.fm-l { display: block; height: 9px; border-radius: 5px; background: var(--line-strong); margin-bottom: 8px; }
.fm-l.w70 { width: 70%; }
.fm-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; width: 100%; height: 34px; border-radius: 9px; background: var(--brand, var(--accent)); color: #fff; }
.fmock-audio { gap: 12px; padding: 12px 6px; }
.fm-play { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--brand, var(--accent)); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.fm-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 56px; max-width: 300px; }
.fm-wave i { flex: 1; min-width: 3px; border-radius: 3px; background: color-mix(in srgb, var(--brand, var(--accent)) 48%, var(--line-strong)); }
.fm-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--faint); background: var(--panel); border: 1px solid var(--line); padding: 3px 8px; border-radius: 6px; }
.fmock-file { flex-direction: column; gap: 12px; padding: 12px; }
.fm-doc { color: var(--brand, var(--accent)); }
.fm-fmts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fm-fmt { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 3px 9px; border-radius: 6px; }
.fmt-note { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: var(--muted); margin: 4px 2px 0; }
.fmt-note svg { color: var(--warn); flex: none; margin-top: 1px; }
.size-hero-fmt { align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.size-hero-fmt-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.size-hero-fmt-val { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.safe-note .icon { color: var(--warn); flex: none; margin-top: 1px; }
.btn .icon { margin-inline-start: 1px; }

/* creative checker */
.checker-sec { margin: 44px auto; }
.checker { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel) 62%); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-strong)); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.checker-grid { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 28px; align-items: start; }
.checker-info .dv-h { color: var(--ink); font-size: 21px; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.checker-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.checker-info .ck-privacy { margin-top: 16px; }
.ck-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 40px 20px; min-height: 184px; border: 2px dashed color-mix(in srgb, var(--accent) 30%, var(--line-strong)); border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); transition: border-color .15s, background .15s; }
.ck-drop:hover, .ck-drop:focus-visible, .ck-drop.drag { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.ck-drop-ic { color: var(--accent); }
.ck-drop-t { color: var(--ink); font-size: 15px; }
.ck-drop-s { font-size: 13px; }
.ck-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.ck-privacy .icon { color: var(--ok); flex: none; margin-top: 1px; }
.ck-sum { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.ck-sum svg { flex: none; }
.ck-pass { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.ck-warns { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--panel)); }
.ck-fail { color: var(--low); background: color-mix(in srgb, var(--low) 12%, var(--panel)); }
.ck-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ck-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.ck-ic { flex: none; margin-top: 1px; }
.ck-row-main b { display: block; font-weight: 700; color: var(--ink); font-size: 12.5px; }
.ck-row-main span { color: var(--muted); }
.ck-row.ck-ok .ck-ic { color: var(--ok); }
.ck-row.ck-bad .ck-ic { color: var(--low); }
.ck-row.ck-warn .ck-ic { color: var(--warn); }
.ck-row.ck-na .ck-ic { color: var(--faint); }
.ck-reset { margin-top: 2px; }
@media (max-width: 640px) { .checker-grid { grid-template-columns: 1fr; gap: 18px; } }

/* in-context mocks */
.mk { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mk-cap { font-size: 12px; color: var(--faint); }
.mk-img { border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, #000), color-mix(in srgb, var(--brand) 50%, #fff 12%)); }
.mk-circle { border-radius: 50%; }
.mk-line { display: block; height: 9px; border-radius: 5px; background: var(--panel-2); width: 100%; }
.mk-line.w40 { width: 40%; } .mk-line.w60 { width: 60%; } .mk-line.w80 { width: 80%; }
.mk-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none; }
.mk-avatar.sm { width: 26px; height: 26px; }
.mk-post { width: 280px; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px; gap: 10px; }
.mk-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.mk-row.gap { margin-top: 4px; }
.mk-post .mk-img { width: 100% !important; }
.mk-phone { position: relative; border-radius: 22px; border: 5px solid #1f2937; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, #000), color-mix(in srgb, var(--brand) 50%, #fff 12%)); }
.mk-safe { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.mk-safe-top { top: 0; height: 14%; border-radius: 16px 16px 0 0; }
.mk-safe-bottom { bottom: 0; height: 28%; border-radius: 0 0 16px 16px; }
.mk-web { width: 280px; max-width: 100%; align-items: stretch; gap: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.mk-bannerimg { align-self: center; border-radius: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, #000), color-mix(in srgb, var(--brand) 50%, #fff 12%)); }
.mk-cover { position: relative; align-items: flex-start; }
.mk-coverimg { border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 80%, #000), color-mix(in srgb, var(--brand) 50%, #fff 12%)); }
.mk-cover .mk-avatar { position: absolute; left: 16px; bottom: 22px; width: 46px; height: 46px; border: 3px solid var(--panel); }

/* ---- prose / about ----------------------------------------------------- */
.prose { max-width: 800px; color: var(--muted); }
.prose h2 { color: var(--ink); margin-top: 32px; }
.prose p { margin: 0 0 14px; }
.conf-legend, .sources-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.conf-legend li { display: flex; align-items: center; gap: 10px; }
.sources-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sources-list a { color: var(--accent-ink); word-break: break-all; font-size: 13.5px; }
.notfound { text-align: center; }
.notfound h1 { font-size: 80px; margin: 0; color: var(--accent-ink); }

/* ---- about page -------------------------------------------------------- */
.about-stats { justify-content: flex-start; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 44px auto; }
.about-card { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.about-ic { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 16px; }
.about-card h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.about-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.about-badge { display: inline-block; margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 999px; padding: 5px 12px; }
.about-card .conf-legend { margin-top: 16px; gap: 12px; }
.about-card .conf-legend li { align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.about-card .conf-legend .conf { margin-top: 5px; }

.about-sources { margin: 52px auto; }
.about-sources h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 20px; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.src-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; }
.src-card:hover { text-decoration: none; border-color: var(--brand, var(--accent)); box-shadow: var(--shadow); transform: translateY(-2px); }
.src-logo2 { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.src-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.src-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.src-host { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.about-disclaimer { display: flex; align-items: flex-start; gap: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 44px auto; }
.about-disclaimer .about-ic.dis { flex: none; width: 38px; height: 38px; margin: 0; background: color-mix(in srgb, var(--warn) 14%, var(--panel)); color: var(--warn); }
.about-disclaimer h2 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.about-disclaimer p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.about-cta { text-align: center; margin: 44px auto 64px; }

@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---- tips -------------------------------------------------------------- */
.tips-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; counter-reset: tip; }
.tips-list li { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 16px 16px 16px 52px; position: relative; box-shadow: var(--shadow-sm); color: var(--muted); }
.tips-list li::before { counter-increment: tip; content: counter(tip); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---- footer ------------------------------------------------------------ */
.site-footer { margin-top: 60px; border-top: 1px solid var(--line); background: var(--panel-2); padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer-about p { color: var(--muted); font-size: 14px; max-width: 340px; }
.footer-about .logo { margin-bottom: 12px; }
.data-version { color: var(--faint) !important; font-size: 12.5px !important; }
.footer-tg {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--accent);
}
.footer-tg:hover { background: var(--accent-ink); text-decoration: none; }
.footer-tg .icon { flex: none; }
.footer-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 4px 0 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--muted); font-size: 14px; }
.footer-col a:hover { color: var(--accent-ink); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--muted); }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--accent-ink); }

/* ---- cookie / privacy notice bar --------------------------------------- */
.cookiebar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 680px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 18px 48px -12px rgba(0,0,0,.45), 0 6px 16px -8px rgba(0,0,0,.32); padding: 14px 18px;
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
}
.cookiebar.show { opacity: 1; transform: none; }
.cookiebar[hidden] { display: none; }
body.has-cookiebar { padding-bottom: 108px; }
@media (max-width: 560px) { body.has-cookiebar { padding-bottom: 168px; } }
.cookiebar-txt { margin: 0; flex: 1 1 300px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cookiebar-txt a { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.cookiebar-txt a:hover { text-decoration: underline; }
.cookiebar-ok {
  flex: none; cursor: pointer; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px;
  padding: 9px 20px; transition: filter .15s, transform .1s;
}
.cookiebar-ok:hover { filter: brightness(1.07); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } }

/* ---- legal pages (privacy / cookies) ----------------------------------- */
.legal-page { max-width: 1080px; padding-top: 40px; padding-bottom: 64px; }
.legal-hero { margin-bottom: 40px; }
.legal-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.legal-hero .lede { max-width: 640px; margin: 16px 0 0; text-align: start; }
.legal-updated { display: inline-block; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 4px 12px; }

.legal-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 64px; align-items: start; }
.legal-doc { max-width: 760px; min-width: 0; }

.legal-toc { align-self: start; }
.legal-toc-inner { position: sticky; top: 88px; }
.legal-toc-h { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.legal-toc nav { display: flex; flex-direction: column; gap: 9px; border-inline-start: 2px solid var(--line); padding-inline-start: 16px; }
.legal-toc a { color: var(--muted); font-size: 13px; line-height: 1.45; text-decoration: none; transition: color .12s; }
.legal-toc a:hover, .legal-toc a.active { color: var(--accent-ink); font-weight: 600; }

.legal-block { margin-bottom: 30px; scroll-margin-top: 88px; }
.legal-block h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; color: var(--ink); }
.legal-block p { color: var(--muted); font-size: 15px; line-height: 1.68; margin: 0 0 12px; }
.legal-block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--ink); }
.legal-table-wrap { overflow-x: auto; margin: 6px 0 16px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 440px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table thead th { font-weight: 700; color: var(--ink); background: var(--panel-2); border-bottom-color: var(--line-strong); }
.legal-table td { color: var(--muted); }
.legal-table code { white-space: nowrap; }
.legal-contact { margin-top: 8px; font-size: 15px; color: var(--muted); }
.legal-contact a { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 900px) {
  .legal-body { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
}

/* ---- contact page ------------------------------------------------------ */
.contact-page { max-width: 720px; padding-top: 40px; padding-bottom: 64px; }
.contact-hero { margin-bottom: 28px; }
.contact-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.contact-hero .lede { max-width: 620px; margin: 14px 0 0; text-align: start; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-field { display: flex; flex-direction: column; gap: 7px; }
.contact-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.contact-field input, .contact-field select, .contact-field textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 11px 14px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
.contact-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
.contact-field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-field.has-err input, .contact-field.has-err select, .contact-field.has-err textarea { border-color: var(--warn); }
.contact-err { font-size: 12.5px; color: var(--warn); font-weight: 500; }
.contact-formerr {
  margin-bottom: 18px; padding: 12px 15px; border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.contact-note { margin: 0; font-size: 13px; color: var(--faint); }
.contact-note a { color: var(--accent-ink); font-weight: 600; }
.contact-sent {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 28px;
}
.contact-sent-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 4px;
}
.contact-sent h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.contact-sent p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 520px; }
.contact-sent .btn { margin-top: 10px; }

/* =========================================================================
   HOME LANDING (Design 7 signature sections)
   ========================================================================= */
.pv { border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--bc) 85%, #000), color-mix(in srgb, var(--bc) 55%, #fff 14%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.home-sec { padding: 60px 0 0; }
.sec-head { max-width: 620px; margin: 0 0 28px; }
.sec-h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.sec-lead { margin-top: 10px; color: var(--muted); font-size: 16px; }

/* hero */
.home-hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; padding: 60px 0 40px; }
.hh-copy .eyebrow { margin-bottom: 20px; }
.home-hero h1 { font-size: clamp(36px, 4.8vw, 54px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.home-hero .lede { margin: 20px 0 0; max-width: 500px; text-align: start; }
.hh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hh-trust { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hh-trust-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.hh-trust-logos { display: flex; align-items: center; gap: 14px; }
.hh-trust-logo { opacity: .72; transition: opacity .15s; }
.hh-trust-logo:hover { opacity: 1; }

/* faux app window */
.hp-app { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.hp-app-top { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--panel), var(--panel-2)); }
.hp-dots { display: flex; gap: 7px; flex: none; }
.hp-dots i { width: 11px; height: 11px; border-radius: 50%; background: #d9d9e2; }
.hp-dots i:nth-child(1){ background:#ff6159; } .hp-dots i:nth-child(2){ background:#ffc12e; } .hp-dots i:nth-child(3){ background:#28c940; }
.hp-app-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.hp-app-caret { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; }
.hp-blink { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; background: var(--accent); animation: hpblink 1.1s steps(2) infinite; }
@keyframes hpblink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.hp-app-body { padding: 10px; }
.hp-hint { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 10px 8px; margin: 0; }
.hp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; transition: background .14s; }
.hp-row + .hp-row { margin-top: 2px; }
.hp-row:hover { background: var(--accent-soft); }
.hp-row-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; }
.hp-row-main { flex: 1; min-width: 0; }
.hp-row-ttl { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row-pv { flex: none; display: grid; place-items: center; width: 46px; }
.hp-row-dim { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; }

/* live-preview bento (one big + smaller) */
.hp-gal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.hp-gi { grid-column: span 3; display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; }
.hp-gi.big { grid-column: span 6; grid-row: span 2; }
.hp-gi:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--bc) 45%, var(--line-strong)); }
.hp-gi-pv { flex: 1; display: grid; place-items: center; min-height: 150px; background: repeating-linear-gradient(45deg, var(--panel-2) 0 10px, var(--panel) 10px 20px); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.hp-gi.big .hp-gi-pv { min-height: 336px; }
.hp-gi-cap { display: flex; align-items: center; gap: 9px; }
.hp-gi-ic { flex: none; }
.hp-gi-txt { font-size: 13.5px; font-weight: 600; line-height: 1.25; min-width: 0; }
.hp-gi-txt em { display: block; font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* one source of truth */
.hp-truth-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.hp-ts { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.hp-ts b { display: block; font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-ink); }
.hp-ts span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hp-truth-cta { position: relative; overflow: hidden; text-align: center; border-radius: var(--radius-lg); padding: 52px 40px; background: linear-gradient(135deg, #8b7dff, var(--accent) 46%, #5847e6); color: #fff; box-shadow: var(--shadow-lg); }
.hp-truth-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 50% -10%, rgba(255,255,255,.28), transparent 60%); }
.hp-truth-cta > * { position: relative; z-index: 1; }
.hp-truth-cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.hp-truth-cta p { margin: 12px auto 0; max-width: 560px; font-size: 17px; opacity: .92; }
.hp-truth-cta .btn { margin-top: 24px; background: #fff; color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.hp-truth-cta .btn:hover { background: #fff; }

/* ---- responsive -------------------------------------------------------- */
/* Medium desktop: tighten the header so long-word languages (German) fit
   before the mobile layout kicks in at 860px. */
@media (max-width: 1260px) {
  .header-inner { gap: 8px; }
  .main-nav { gap: 0; }
  .main-nav > a, .main-nav .nav-drop-btn { padding: 7px 8px; font-size: 13px; }
  .hsearch { flex-basis: 190px; max-width: 190px; }
  [data-spot="header_btn"] > a { padding: 7px 11px; font-size: 12.5px; }
}
/* Long-language safety: the header has no hamburger, so drop the search, then
   the nav, well before they'd overflow (they just cleanly disappear). */
@media (max-width: 1080px) { .hsearch { display: none; } }
@media (max-width: 960px) { .main-nav { display: none; } }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: 1fr; gap: 34px; padding: 40px 0 30px; }
  .home-hero .hp-app { order: 2; }
  .hp-gi, .hp-gi.big { grid-column: span 6; grid-row: auto; }
  .hp-gi.big .hp-gi-pv { min-height: 150px; }
  .hp-truth-stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .header-inner { gap: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats li { padding: 14px 18px; min-width: 100px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }

/* ---------------------------------------------------- advertise / media kit -- */
.adv-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.adv-stats > div { display: flex; flex-direction: column; padding: 12px 18px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius, 16px); min-width: 110px; }
.adv-stats b { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.adv-stats span { font-size: 13px; color: var(--muted); margin-top: 2px; }
.adv-sec { margin: 34px auto; }
.adv-sec > h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 0 0 14px; }
.adv-lead { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 760px; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.adv-card { padding: 20px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-lg, 20px); box-shadow: var(--shadow-sm); }
.adv-card .adv-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.adv-card h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.adv-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.adv-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 800px; }
.adv-feats li { position: relative; padding: 12px 16px 12px 42px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.adv-feats li::before { content: "✓"; position: absolute; left: 15px; top: 12px; color: var(--accent-ink); font-weight: 800; }
.adv-cta { text-align: center; margin: 40px auto 48px; padding: 30px 22px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: var(--radius-lg, 20px); max-width: 760px; }
.adv-cta h2 { margin: 0 0 8px; font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.adv-cta p { margin: 0 auto 18px; max-width: 560px; color: var(--muted); line-height: 1.55; }