@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20A6, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20A6, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20A6, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20A6, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20A5, U+20A7-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
--ng-950: #021F13;
--ng-900: #032B1A;
--ng-800: #05432A;
--ng-700: #006B40;
--ng-600: #008751;
--ng-500: #10A062;
--ng-300: #8FD3B0;
--ng-200: #C3E7D3;
--ng-100: #E2F3E9;
--ng-50: #F1F9F4;
--white: #FFFFFF;
--ink: #0F1A14;
--petrol-900: var(--ng-900);
--petrol-700: var(--ng-700);
--petrol-100: var(--ng-100);
--ground: #EEF3F0;
--bg: #F6F9F7;
--surface: var(--white);
--surface-2: #F8FBF9;
--surface-3: #ECF2EE;
--border: #DCE6E0;
--border-strong: #B9CABF;
--text: var(--ink);
--text-2: #3A4A41;
--text-3: #57685E;
--link: #00744A;
--link-hover: var(--ink);
--accent: var(--ng-600);
--accent-on: #FFFFFF;
--accent-tint: var(--ng-100);
--accent-wash: var(--ng-50);
--accent-line: var(--ng-200);
--cta: var(--ng-600);
--cta-hover: var(--ng-700);
--cta-active: var(--ng-800);
--cta-edge: var(--ng-800);
--cta-text: #FFFFFF;
--ok: var(--ng-700);
--ok-bg: var(--ng-50);
--ok-line: var(--ng-200);
--warn: #34445E;
--warn-bg: #EEF2F7;
--warn-line: #CBD4E1;
--mute: var(--text-2);
--mute-bg: var(--surface-3);
--mute-line: var(--border);
--ad-bg: var(--ng-50);
--ad-line: var(--ng-300);
--ad-ink: var(--ng-700);
--band: var(--ng-900);
--band-deep: var(--ng-950);
--band-raise: var(--ng-800);
--band-line: #0E5536;
--band-text: #F1F9F4;
--band-text-2: #A9CDB9;
--band-accent: #4FD69A;
--flag: linear-gradient(90deg, var(--ng-600) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--ng-600) 66.66%);
--plate-dark: #101A15;
--plate-light: #FFFFFF;
--plate-line: #D6E0DA;
--focus: var(--ng-700);
--shade: rgba(2, 31, 19, 0.55);
--shadow-card: 0 1px 2px rgba(15, 26, 20, 0.05);
--shadow-lift: 0 6px 16px rgba(15, 26, 20, 0.08);
--shadow-pop: 0 4px 10px rgba(15, 26, 20, 0.08), 0 16px 36px rgba(15, 26, 20, 0.14);
--shadow-box: 0 0 0 1px rgba(15, 26, 20, 0.06);
--font-d: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-b: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-xs: 0.75rem;
--fs-sm: 0.8125rem;
--fs-base: 0.9375rem;
--fs-md: 1.0625rem;
--fs-lg: 1.1875rem;
--fs-xl: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-8: 2rem;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--box: 1320px;
--side-w: 240px;
--mast-h: 68px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-h) + 16px); }
body { margin: 0; background: var(--ground); color: var(--text); font: 400 var(--fs-base)/1.6 var(--font-b); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-d); line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2355695E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-on); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--surface); color: var(--text); border-radius: var(--r-sm); font-weight: 600; box-shadow: var(--shadow-pop); }
.skip:focus { top: 12px; }
.ic { flex: none; }
.flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(11, 31, 22, 0.14); object-fit: cover; }
.box { display: flex; flex-direction: column; max-width: var(--box); min-height: 100vh; margin: 0 auto; background: var(--bg); box-shadow: var(--shadow-box); }
.body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.page { min-width: 0; }
.wrap { padding: var(--s-4); }
.side-shade { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 1.1875rem/1 var(--font-d); letter-spacing: -0.02em; white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand b { font-weight: 700; color: var(--accent); }
.mark { flex: none; color: var(--accent); }
.mark-eq { color: var(--accent); }
.mast { position: relative; z-index: 40; display: grid; gap: 12px; padding: 18px var(--s-4) 14px; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text); }
.mast::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--flag); box-shadow: 0 1px 0 var(--ng-200); pointer-events: none; }
.foot :focus-visible { outline-color: #fff; }
.mast-brand { display: flex; align-items: center; gap: 12px; }
.mast-menu { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 8px; color: var(--ng-700); }
.mast-menu:hover { background: var(--accent-tint); border-color: var(--accent); }
html:not(.js) .mast-menu { display: none; }
.mast-tag { display: none; }
.search { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 14px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; color: var(--text-3); transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s; }
.search:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); color: var(--text); }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: 0; color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.search input:focus { outline: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search-k { display: none; }
.search-pop { position: absolute; left: 0; right: 0; top: 48px; z-index: 30; max-height: 60vh; padding: 6px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); color: var(--text); }
.search-pop a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 6px; color: var(--text); text-decoration: none; }
.search-pop a span { flex: 1; min-width: 0; }
.search-pop li[aria-selected="true"] a, .search-pop a:hover { background: var(--accent-wash); }
.search-pop .none { padding: 10px; color: var(--text-3); }
.side { order: 2; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--border); }
.side-head { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) 10px; }
.nav summary, .nav-l { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 10px 0 8px; border-radius: 9px; color: var(--text); font-weight: 550; text-decoration: none; cursor: pointer; list-style: none; user-select: none; transition: background-color 0.12s; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary > span, .nav-l > span:last-child { flex: 1; min-width: 0; }
.nav summary:hover, .nav-l:hover { background: var(--surface-3); color: var(--text); }
.nav summary > .ic:first-child, .nav-l > .ic { box-sizing: content-box; padding: 6px; background: var(--surface-3); border-radius: 8px; color: var(--text-2); transition: background-color 0.12s, color 0.12s; }
.nav summary:hover > .ic:first-child, .nav-l:hover > .ic { background: var(--surface); }
.nav-g[open] > summary > .ic:first-child { background: var(--accent); color: var(--accent-on); }
.nav-c { color: var(--text-3); transition: transform 0.18s var(--ease); }
.nav-g[open] > summary .nav-c { transform: rotate(180deg); }
.nav-sub { margin: 2px 0 8px 22px; padding-left: 18px; border-left: 1px solid var(--border); }
.nav-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: 7px; color: var(--text-2); font-size: 0.875rem; text-decoration: none; }
.nav-sub a:hover { background: var(--surface-3); color: var(--text); }
.nav small { min-width: 22px; padding: 1px 6px; background: var(--surface-3); border-radius: 999px; color: var(--text-3); font-size: 0.6875rem; font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.nav-places { padding: 4px 0 8px 8px; }
.nav-find { width: 100%; height: 36px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 0.875rem; transition: border-color 0.12s, box-shadow 0.12s; }
.nav-find::placeholder { color: var(--text-3); }
.nav-find:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.clist { max-height: 300px; margin-top: 8px; padding-bottom: 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.clist a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 8px; border-radius: 7px; color: var(--text-2); font-size: 0.875rem; text-decoration: none; }
.clist a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clist a:hover { background: var(--accent-wash); color: var(--text); }
.clist a:hover small { background: var(--accent-tint); color: var(--accent); }
.clist a[aria-current] { background: var(--accent-tint); color: var(--text); font-weight: 600; }
.clist a[aria-current] small { background: var(--accent); color: var(--accent-on); }
.clist-none { padding: 8px; color: var(--text-3); font-size: 0.875rem; }
.side-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px var(--s-5); border-top: 1px solid var(--border); background: var(--surface-2); color: var(--cta); font-size: var(--fs-sm); font-weight: 600; }
.side-foot a { color: var(--cta); text-decoration: none; }
.side-foot a:hover { color: var(--cta-active); text-decoration: underline; }
.foot { position: relative; padding: calc(var(--s-6) + 4px) var(--s-4) var(--s-6); background: var(--band); color: var(--band-text-2); font-size: var(--fs-sm); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--flag); }
.foot a { color: var(--band-text); }
.foot a:hover { color: #fff; }
.foot-note { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--band-line); }
.safer { display: flex; align-items: center; gap: 12px; }
.safer-b { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border: 2px solid var(--band-accent); border-radius: 50%; color: #fff; font: 700 0.8125rem/1 var(--font-d); }
@media (max-width: 999.98px) {
.js .side { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px); border-top: 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-pop); visibility: hidden; transform: translateX(-100%); transition: transform 0.22s var(--ease), visibility 0s 0.22s; }
.js .side-head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: inset 0 4px 0 var(--ng-600); }
.side-x { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; background: none; border: 0; border-radius: var(--r-sm); color: var(--text-2); }
.side-x:hover { color: var(--text); background: var(--surface-3); }
.side-x:focus-visible { outline-color: var(--focus); }
.js.side-open .side { visibility: visible; transform: none; transition: transform 0.22s var(--ease); }
.js.side-open .side-shade { display: block; position: fixed; inset: 0; z-index: 50; background: var(--shade); }
.js.side-open body { overflow: hidden; }
}
@media (min-width: 560px) {
.mast { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-5); padding-left: var(--s-5); padding-right: var(--s-5); }
.wrap { padding: var(--s-5); }
.foot { padding: var(--s-6) var(--s-5); }
}
@media (min-width: 1000px) {
.body { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
.clist { max-height: clamp(220px, calc(100dvh - 520px), 620px); }
.side { grid-column: 1; grid-row: 1; }
.page { grid-column: 2; grid-row: 1; }
.mast { position: sticky; top: 0; grid-template-columns: var(--side-w) minmax(0, 440px) minmax(0, 1fr); gap: 0; height: var(--mast-h); padding: 4px var(--s-6) 0 0; box-shadow: 0 4px 14px rgba(15, 26, 20, 0.06); }
.mast-brand { padding-left: var(--s-5); }
.mast-menu { display: none; }
.mast-tag { display: block; justify-self: end; max-width: 100%; overflow: hidden; color: var(--text-3); font: 600 var(--fs-xs)/1.2 var(--font-d); letter-spacing: 0.1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.mast-tag b { color: var(--accent); font-weight: 700; }
.search-k { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text-3); font: 600 var(--fs-xs)/1 var(--font-b); }
.search:focus-within .search-k { display: none; }
.side { position: sticky; top: var(--mast-h); order: 0; height: calc(100vh - var(--mast-h)); height: calc(100dvh - var(--mast-h)); border-top: 0; border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.wrap { padding: var(--s-5) var(--s-6) var(--s-8); }
.foot { padding: var(--s-6); }
}
@media (min-width: 1281px) {
body { padding: 0 0 var(--s-8); }
.box { min-height: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.foot { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
.side, .mast, .foot, .col-rail, .c-act, .seg, .tools { display: none !important; }
body { background: #fff; }
.box { box-shadow: none; }
}
.nav-icon { flex: none; display: block; }
.nav-sub a > span { flex: 1; }
.nav-sub a { padding-left: 6px; }
.nav-c { color: var(--accent); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-bottom: var(--s-4); color: var(--text-3); font-size: var(--fs-sm); }
.crumbs nav, .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.crumbs ol li + li::before { content: "/"; margin-right: 6px; color: var(--border-strong); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs b { color: var(--text); font-weight: 600; }
.totals { display: flex; flex-wrap: wrap; gap: 4px 0; }
.totals li { white-space: nowrap; }
.totals li:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--cta); vertical-align: middle; }
.totals b { font-family: var(--font-d); font-variant-numeric: tabular-nums; font-weight: 800; }
.cols, .col-main { display: grid; gap: var(--s-4); min-width: 0; }
.col-main { align-content: start; }
.col-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); align-items: start; }
.card { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--mast-h) + 16px); }
.card-t::before, .card-h h2::before, .src-h::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 2px; background: var(--flag); box-shadow: 0 0 0 1px var(--ng-600); vertical-align: 0.05em; }
.card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 18px var(--s-4) 14px; }
.card-h h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.card-sub { margin-top: 2px; color: var(--text-3); font-size: var(--fs-sm); }
.card-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px var(--s-4); }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; }
.more .ic { transition: transform 0.18s var(--ease); }
.more:hover .ic { transform: translateX(3px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, box-shadow 0.15s, transform 0.08s; }
.btn-go { background: var(--cta); color: var(--cta-text); box-shadow: 0 1px 2px rgba(0, 67, 42, 0.25); }
.btn-go:hover { background: var(--cta-hover); color: var(--cta-text); box-shadow: 0 4px 12px rgba(0, 107, 64, 0.28); }
.btn-go:active { background: var(--cta-active); box-shadow: none; transform: translateY(1px); }
.btn-go .ic { transition: transform 0.18s var(--ease); }
.btn-go:hover .ic { transform: translateX(2px); }
.seg { display: inline-flex; max-width: 100%; padding: 3px; background: var(--surface-3); border-radius: 999px; }
.seg button { height: 32px; padding: 0 14px; background: none; border: 0; border-radius: 999px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: color 0.12s, background-color 0.12s; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-on); }
.chip { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border: 1px solid; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; }
.chip-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.chip-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.chip-mute { background: var(--mute-bg); border-color: var(--mute-line); color: var(--mute); }
.pick, .tools-name { height: 40px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); color: var(--text); transition: border-color 0.12s, box-shadow 0.12s; }
.pick:hover, .tools-name:hover { border-color: var(--text-3); }
.pick:focus-within, .tools-name:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.pick { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding-left: 12px; color: var(--text-3); }
.pick select { min-width: 0; height: 100%; padding: 0 32px 0 0; background-color: transparent; border: 0; color: var(--text); font-weight: 500; }
.pick select:focus { outline: none; }
select option { background: var(--surface); color: var(--text); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 0 var(--s-4) var(--s-4); }
.tools-name { display: flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; color: var(--text-3); }
.tools-name input { flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 0; background: transparent; border: 0; color: var(--text); }
.tools-name input::placeholder { color: var(--text-3); }
.tools-name input:focus { outline: none; }
.tile { display: grid; flex: none; place-items: center; width: 92px; height: 44px; padding: 7px 9px; overflow: hidden; border-radius: 9px; }
.tile img { width: 74px; height: 30px; object-fit: contain; }
.tile-dark { background: var(--plate-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(11, 31, 22, 0.2); }
.tile-light { background: var(--plate-light); box-shadow: inset 0 0 0 1px var(--plate-line), 0 1px 2px rgba(11, 31, 22, 0.06); }
.tile-mono { background: var(--petrol-700); color: #fff; font: 800 1rem/1 var(--font-d); letter-spacing: 0.02em; }
.hero { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--surface) 0 58%, var(--ng-50) 58%); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.hero-b { position: relative; padding: var(--s-5) var(--s-4); }
.hero h1 { max-width: 22ch; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.hero p { max-width: 60ch; margin-top: var(--s-3); color: var(--text-2); }
.pos { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--surface-3); border-radius: 50%; color: var(--text-2); font: 700 0.875rem/1 var(--font-d); font-variant-numeric: tabular-nums; }
.pos.is-top { background: var(--accent); color: var(--accent-on); }
.rank thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rank, .rank tbody { display: block; }
.rank tbody { border-top: 1px solid var(--border); }
.rank tr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; grid-template-areas: "pos site site site" "cov cov num lic" "act act act act"; align-items: center; gap: 12px 14px; padding: 14px var(--s-4); border-bottom: 1px solid var(--border); }
.rank td { padding: 0; }
.c-pos { grid-area: pos; text-align: center; }
.c-site { grid-area: site; min-width: 0; }
.num { font: 800 var(--fs-md)/1.2 var(--font-d); font-variant-numeric: tabular-nums; }
td.c-act { grid-area: act; }
.c-act .btn { width: 100%; }
.sitecell { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--text); text-decoration: none; }
.sitecell-t { display: grid; min-width: 0; }
.sitecell b { font: 700 var(--fs-md)/1.25 var(--font-d); overflow-wrap: break-word; }
.sitecell small { overflow: hidden; color: var(--text-3); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.sitecell:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.ranking { container: rank / inline-size; }
@container rank (min-width: 880px) {
.rank { display: table; table-layout: fixed; }
.rank thead { position: static; display: table-header-group; width: auto; height: auto; clip: auto; }
.rank tbody { display: table-row-group; }
.rank tr { display: table-row; padding: 0; border: 0; transition: background-color 0.12s; }
.rank th { padding: 11px 12px; background: var(--ng-50); border-top: 1px solid var(--ng-200); border-bottom: 2px solid var(--ng-600); color: var(--ng-800); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.rank th[title] { cursor: help; }
.rank td { display: table-cell; padding: 13px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rank .c-pos { width: 52px; padding-left: var(--s-4); padding-right: 0; text-align: center; }
.rank .c-act { width: 104px; padding-left: 0; padding-right: var(--s-5); text-align: right; }
.rank td.c-act .btn { width: auto; height: 38px; padding: 0 14px; }
.rank tbody tr:hover { background: var(--accent-wash); }
.rank tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
}
.rank-empty { padding: var(--s-8) var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-3); text-align: center; }
.legend { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.legend b { margin-right: 6px; color: var(--text-2); font-weight: 600; }
.g-row { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-4); scroll-margin-top: calc(var(--mast-h) + 16px); }
.g-row + .g-row { border-top: 1px solid var(--border); }
.g-row:target { background: var(--accent-wash); }
.guide { container-type: inline-size; }
@container (min-width: 860px) {
.g-row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-6); }
}
.g-n { display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin-bottom: 8px; padding: 0 7px; background: var(--accent-tint); border-radius: 999px; color: var(--ng-700); font: 700 var(--fs-xs)/1 var(--font-d); letter-spacing: 0.04em; }
.g-h h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; }
.g-b { min-width: 0; }
.g-b > p { max-width: 68ch; color: var(--text-2); }
.g-b > p + p { margin-top: var(--s-3); }
.g-b > :not(p) { margin-top: var(--s-4); }
.mini { font-size: 0.875rem; table-layout: fixed; }
.mini tbody th, .mini td { overflow-wrap: anywhere; }
.mini caption { padding-bottom: 8px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; }
.mini th, .mini td { padding: 9px 12px 9px 0; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.mini thead th { border-top: 0; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.mini tbody th { font-weight: 600; }
.mini .num { padding-right: 0; font-size: 0.875rem; text-align: right; }
.cc { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cc:hover { text-decoration: underline; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tags a:not(.more) { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background-color 0.12s, border-color 0.12s; }
.tags a:not(.more):hover { background: var(--accent-wash); border-color: var(--accent); }
.tags .more { margin-left: 6px; }
.defs div { display: grid; gap: 2px 20px; padding: 10px 0; border-top: 1px solid var(--border); }
.defs dt { font-weight: 600; }
.defs dd { color: var(--text-2); font-size: 0.875rem; }
.faq details { margin: 0 var(--s-4); border-top: 1px solid var(--border); }
.faq details:last-child { padding-bottom: 6px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q { font: 600 var(--fs-base)/1.4 var(--font-b); letter-spacing: 0; }
.faq summary:hover .q { color: var(--link); }
.faq summary .ic { box-sizing: content-box; padding: 5px; border-radius: 50%; background: var(--accent-wash); color: var(--ng-700); transition: transform 0.18s var(--ease), background-color 0.12s; }
.faq details[open] summary .ic { background: var(--accent); color: var(--accent-on); transform: rotate(180deg); }
.faq details p { max-width: 70ch; padding-bottom: var(--s-4); color: var(--text-2); }
.col-rail .card-h { padding-bottom: 8px; }
.col-rail .card-h h2 { font-size: var(--fs-md); }
.topc { padding: 0 var(--s-4) var(--s-3); }
.topc { counter-reset: c; }
.topc a { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text); text-decoration: none; counter-increment: c; }
.topc li + li a { border-top: 1px solid var(--border); }
.topc a::before { content: counter(c); width: 14px; color: var(--text-3); font: 700 var(--fs-xs)/1 var(--font-d); font-variant-numeric: tabular-nums; }
.topc span { flex: 1; min-width: 0; font-weight: 500; }
.topc a:hover span { text-decoration: underline; }
.topc b { font: 800 var(--fs-base)/1 var(--font-d); font-variant-numeric: tabular-nums; }
.col-rail .topc { padding-bottom: var(--s-4); }
@media (min-width: 560px) {
.card-h, .card-f { padding-left: var(--s-5); padding-right: var(--s-5); }
.tools { padding: 0 var(--s-5) var(--s-4); }
.hero-b { padding: var(--s-6); }
.g-row { padding: var(--s-6) var(--s-5); }
.defs div { grid-template-columns: 170px minmax(0, 1fr); }
.faq details { margin: 0 var(--s-5); }
.topc { padding-left: var(--s-5); padding-right: var(--s-5); }
}
@media (min-width: 760px) {
.hero-b { padding: var(--s-8) 280px var(--s-8) var(--s-8); }
}
@media (min-width: 1000px) {
.rank th { position: sticky; top: var(--mast-h); z-index: 2; }
.cols, .col-main, .col-rail { gap: var(--s-5); }
}
@media (min-width: 1280px) {
.cols { grid-template-columns: minmax(0, 1fr) 248px; align-items: start; }
.cols.cols-1 { grid-template-columns: minmax(0, 1fr); }
.col-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1280px) and (min-height: 820px) {
.col-rail { position: sticky; top: calc(var(--mast-h) + var(--s-5)); }
}
@media (max-width: 359.98px) {
.seg { overflow-x: auto; scrollbar-width: none; }
.seg button { padding: 0 10px; }
.rank tr { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pos site site" "cov cov cov" "num lic lic" "act act act"; }
.tile { width: 80px; }
.tile img { width: 62px; }
.sitecell b { overflow-wrap: anywhere; }
}
.hero-k { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3) !important; color: var(--text-3) !important; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-k .flag { border-radius: 4px; box-shadow: 0 0 0 1px rgba(11, 31, 22, 0.14), 0 2px 6px rgba(11, 31, 22, 0.14); }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-4); }
.facts li { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: 999px; color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.c-st { grid-area: st; }
.mini-r tbody th { display: grid; gap: 2px; justify-items: start; }
.mini-r .more { font-size: var(--fs-xs); font-weight: 500; }
.mini-r thead th:nth-child(1) { width: 38%; }
.mini-r thead th:nth-child(2) { width: 24%; }
.mini-p thead th:nth-child(1) { width: 36px; }
.mini-p thead th:nth-child(2) { width: auto; }
.mini-p thead th:nth-child(3) { width: 84px; }
.mini-p .num { white-space: nowrap; }
.mini-p caption .more { float: right; margin-left: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mini-p .rk { color: var(--text-3); font: 800 var(--fs-sm)/1 var(--font-d); }
.mini-p tbody th a { color: var(--text); text-decoration: none; }
.mini-p tbody th a:hover { text-decoration: underline; }
.feats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.feats li, .feats > span { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; background: var(--surface-3); border-radius: 6px; color: var(--text-2); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.feats .is-app, .feats > .is-app { background: var(--accent-tint); color: var(--accent); }
.pays { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-3); font-size: var(--fs-xs); }
.pays .ic { color: var(--border-strong); }
.offer { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 10px 5px 8px; background: var(--ad-bg); border: 1px dashed var(--ad-line); border-radius: 8px; color: var(--ad-ink); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }
.offer .ic { color: var(--cta); }
.c-st .chip { margin-bottom: 0; }
.lic-by, .lic-no { display: block; margin-top: 6px; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.35; }
.lic-no { margin-top: 2px; color: var(--text-3); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.6875rem; overflow-wrap: anywhere; }
.nums { display: grid; gap: 10px; counter-reset: n; }
.nums li { position: relative; min-height: 28px; padding: 3px 0 0 40px; counter-increment: n; }
.nums li::before { content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; background: var(--accent); border-radius: 8px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); color: var(--accent-on); font: 800 var(--fs-sm)/1 var(--font-d); }
.hubs a { color: var(--text-2); text-decoration: none; }
.hubs li { padding: 0; }
.hubs a { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border-radius: 999px; }
.hubs a:hover { background: var(--accent-wash); color: var(--text); }
.hubs a[aria-current] { background: var(--accent); color: var(--accent-on); }
.mini-r tbody tr:hover { background: var(--surface-2); }
.upd { margin-top: 10px !important; color: var(--text-3) !important; font-size: var(--fs-xs) !important; }
.upd a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.upd a:hover { text-decoration: underline; }
.g-b a:not(.more):not(.btn):not(.cc), .hero p a:not(.btn), .faq p a { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent-line); }
.g-b a:not(.more):not(.btn):not(.cc):hover, .hero p a:not(.btn):hover, .faq p a:hover { text-decoration-color: currentColor; }
.srcs ol { padding: 0 var(--s-4) var(--s-4); counter-reset: src; }
.srcs li { display: grid; gap: 1px; padding: 9px 0 9px 30px; border-top: 1px solid var(--border); position: relative; counter-increment: src; }
.srcs li::before { content: counter(src); position: absolute; left: 0; top: 10px; color: var(--text-3); font: 700 var(--fs-xs)/1.6 var(--font-d); }
.srcs a { justify-self: start; color: var(--text); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.srcs a:hover { color: var(--link); text-decoration: underline; }
.srcs span { color: var(--text-3); font-size: var(--fs-xs); }
@media (min-width: 560px) {
.srcs ol { padding: 0 var(--s-5) var(--s-5); }
}
.g-b a:not(.more):not(.btn):not(.cc) { font-weight: 500; }
.dots { display: grid; gap: 8px; }
.dots li { position: relative; padding-left: 20px; color: var(--text-2); }
.dots li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 3px var(--ng-100); }
.orgs li { display: grid; gap: 2px; padding: 11px 0; border-top: 1px solid var(--border); }
.orgs li:last-child { padding-bottom: 0; }
.orgs a { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: var(--text); font-weight: 600; text-decoration: none; }
.orgs a:hover { color: var(--link); text-decoration: underline; }
.orgs a .ic { color: var(--text-3); }
.orgs span { color: var(--text-2); font-size: 0.875rem; }
.mailto .btn { height: 44px; padding: 0 20px; }
.plinks { padding: 0 var(--s-3) var(--s-3); }
.plinks a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px; color: var(--text-2); font-weight: 500; text-decoration: none; transition: background-color 0.12s; }
.plinks a .ic { color: var(--border-strong); transition: transform 0.18s var(--ease); }
.plinks a:hover { background: var(--surface-3); color: var(--text); }
.plinks a:hover .ic { transform: translateX(3px); }
.plinks a[aria-current] { background: var(--accent-tint); color: var(--text); font-weight: 600; }
.plinks a[aria-current] .ic { color: var(--accent); }
@media (min-width: 560px) {
.orgs li { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.plinks { padding: 0 var(--s-4) var(--s-4); }
}
.art { display: none; }
.art-s { fill: rgba(255, 255, 255, 0.78); stroke: var(--accent-line); stroke-width: 1.5; }
.art-b { fill: var(--accent); opacity: 0.9; }
.art-c { stroke: var(--accent); stroke-width: 18; opacity: 0.9; }
.art-r rect { fill: var(--surface); stroke: var(--accent-line); stroke-width: 1.5; }
.art-t path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-l path { fill: none; stroke: var(--border-strong); stroke-width: 3.5; stroke-linecap: round; }
.art-n circle { fill: var(--accent); stroke: #fff; stroke-width: 4; }
.art-n path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-f { stroke: var(--ng-300); stroke-width: 5; stroke-linecap: round; }
.hero-k .flag { border-radius: 3px; }
.hero .hubs { margin-top: var(--s-4); }
@media (min-width: 760px) {
.art { position: absolute; top: 50%; right: -30px; display: block; width: auto; height: min(300px, calc(100% - 28px)); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
.hero-s .hero-b { padding-right: var(--s-8); }
}
.tile-xs { width: 52px; height: 26px; padding: 4px 6px; border-radius: 6px; }
.tile-xs img { width: 40px; height: 18px; }
.tile-xs.tile-mono { font-size: 0.6875rem; }
.tile-sm { width: 70px; height: 34px; padding: 5px 7px; border-radius: 8px; }
.tile-sm img { width: 56px; height: 24px; }
.tile-lg { width: 132px; height: 62px; padding: 10px 14px; border-radius: 12px; }
.tile-lg img { width: 104px; height: 42px; }
.tile-lg.tile-mono { font-size: 1.375rem; }
.tile-mono { background: var(--petrol-700); }
.rank-ng tr { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pos site site" "st st x" "act act act"; align-items: start; }
.rank-ng td.c-pos { margin-top: 7px; }
.rank-ng .c-st { align-self: center; }
.row-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.row-m .feats, .row-m .offer { margin-top: 0; }
.rank-ng .c-x { grid-area: x; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.rank-ng .c-x::before { content: attr(data-label); color: var(--text-3); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.xv { color: var(--text); font: 700 var(--fs-sm)/1.35 var(--font-d); overflow-wrap: anywhere; }
.rank-ng .c-act { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.btn-in { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-in:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--text); }
.btn-lg { height: 48px; padding: 0 22px; font-size: var(--fs-base); }
.rank-ng .offer { display: inline-flex; }
.rank-ng .sitecell small { white-space: normal; }
@container rank (min-width: 880px) {
.rank-ng .c-st { width: 210px; }
.rank-ng .c-x { display: table-cell; width: 168px; text-align: left; }
.rank-ng .c-x::before { content: none; }
.rank-ng td { padding-top: 16px; padding-bottom: 16px; vertical-align: top; }
.rank-ng td.c-pos { margin-top: 0; padding-top: 22px; }
.rank-ng td.c-x { padding-top: 26px; }
.rank-ng td.c-st { padding-top: 24px; }
.rank-ng .c-act { display: table-cell; width: 124px; padding-top: 20px; }
.rank-ng td.c-act .btn { width: 100%; height: 36px; }
.rank-ng td.c-act .btn + .btn { margin-top: 6px; }
.rank-ng .row-m { margin-left: 104px; }
}
@container rank (min-width: 880px) and (max-width: 959.98px) {
.rank-ng .c-st { width: 180px; }
.rank-ng .c-x { width: 140px; }
.rank-ng .row-m { margin-left: 0; }
}
.g-wide { grid-template-columns: minmax(0, 1fr) !important; }
.items { display: grid; gap: var(--s-3); }
.item { display: grid; gap: 8px; padding: var(--s-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
.item-h { display: flex; align-items: center; gap: 12px; }
.item-h h3 { font-size: var(--fs-md); font-weight: 800; }
.item-n { color: var(--cta); }
.item p { max-width: 70ch; color: var(--text-2); font-size: 0.9375rem; }
.item-f { margin-top: 2px; }
@media (min-width: 900px) {
.items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-s { background: linear-gradient(105deg, var(--surface) 0 62%, var(--ng-50) 62%); }
.hero-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.kf { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: var(--s-5); }
.kf li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-md); }
.kf .ic { margin-top: 2px; color: var(--accent); }
.kf span { display: grid; gap: 1px; min-width: 0; }
.kf small { color: var(--text-3); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.kf b { color: var(--text); font: 700 var(--fs-sm)/1.35 var(--font-d); overflow-wrap: anywhere; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: var(--s-5) !important; }
.hero-cta span { color: var(--text-3); font-size: var(--fs-xs); }
.toc { padding: var(--s-4); }
.toc-h { margin-bottom: 8px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.toc ol { display: grid; gap: 2px 20px; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: flex; gap: 8px; padding: 5px 0; color: var(--text); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--cta); font: 800 var(--fs-xs)/1.7 var(--font-d); }
.toc a:hover { color: var(--link); text-decoration: underline; }
@media (min-width: 560px) {
.toc { padding: var(--s-4) var(--s-5); }
.toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sub-h { margin-top: var(--s-4) !important; margin-bottom: 8px; color: var(--text-3); font-size: var(--fs-xs) !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.reg-l { margin-top: 10px !important; }
.ticket { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px); background: linear-gradient(135deg, var(--ng-50), var(--surface)); border: 1px solid var(--ad-line); border-radius: var(--r-md); }
.ticket::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 6px; background: radial-gradient(circle at 0 50%, var(--surface) 3px, transparent 3.5px) 0 0 / 6px 12px repeat-y; }
.ticket-k { display: flex; align-items: center; gap: 8px; color: var(--ad-ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket-k .ic { color: var(--cta); }
.ticket-h { margin-top: 6px !important; color: var(--text); font: 800 var(--fs-lg)/1.25 var(--font-d); }
.ticket .defs { margin-top: var(--s-3); }
.ticket .defs div { border-top-color: var(--ad-line); }
.ticket-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: var(--s-4) !important; }
.ticket-n { color: var(--text-3); font-size: var(--fs-xs); }
.paywall { display: flex; flex-wrap: wrap; gap: 8px; }
.pw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); font-size: var(--fs-sm); font-weight: 600; }
.pw img { width: 22px; height: 22px; object-fit: contain; }
.pw i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--text-3); color: #fff; font: 800 0.75rem/1 var(--font-d); font-style: normal; }
.pw-crypto { background: var(--surface-2); }
.px-palmpay { background: #6C2BD9 !important; }
.px-kuda { background: #40196D !important; }
.px-paga { background: #F26722 !important; }
.px-bank { background: #0B6B45 !important; }
.px-ussd, .px-qr { background: #334155 !important; }
.px-verve { background: #E30613 !important; }
.px-airtime { background: #E2A600 !important; color: #1A1300 !important; }
.mini-pay .paywall { display: block; }
.mini-pay .pw { box-shadow: none; }
.mini-pay thead th:nth-child(1) { width: 40%; }
.mini-pay thead th:nth-child(2) { width: auto; }
.mini-pay thead th:nth-child(3) { width: 56px; }
.mini-pay td { color: var(--text-2); font-size: var(--fs-xs); }
.coins { display: flex; flex-wrap: wrap; gap: 6px; }
.coins li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px 4px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.coins img { width: 18px; height: 18px; }
.coins-more { padding-left: 10px !important; color: var(--text-3); }
.studios { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.studios li { display: grid; place-items: center; gap: 6px; min-height: 74px; padding: 10px; background: var(--petrol-900); border-radius: 10px; text-align: center; }
.studios img { width: 96px; height: 28px; object-fit: contain; }
.studios span { color: var(--band-text-2); font-size: 0.6875rem; font-weight: 600; }
.appcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.appcard { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 12px 14px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-3); }
.appcard img { grid-row: 1 / 3; width: 28px; height: 28px; object-fit: contain; opacity: 0.5; }
.appcard b { color: var(--text-2); font: 700 var(--fs-base)/1.2 var(--font-d); }
.appcard span { font-size: var(--fs-xs); }
.appcard.is-on { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); }
.appcard.is-on img { opacity: 1; }
.appcard.is-on b { color: var(--text); }
.pc { display: grid; gap: var(--s-3); }
.pc > div { padding: var(--s-4); border-radius: var(--r-md); }
.pc-y { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.pc-n { background: var(--surface-2); border: 1px solid var(--border); }
.pc .sub-h { margin-top: 0 !important; }
.pc ul { display: grid; gap: 8px; }
.pc li { display: flex; gap: 8px; color: var(--text-2); font-size: 0.9375rem; }
.pc-y .ic { margin-top: 3px; color: var(--ok); }
.pc-n .ic { margin-top: 3px; color: var(--cta); }
.fit { padding: 10px 14px; border-radius: 8px; color: var(--text-2); font-size: 0.9375rem; }
.fit b { color: var(--text); }
.fit-y { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.fit-n { margin-top: 8px !important; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--cta); }
@media (min-width: 680px) {
.pc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.steps { display: grid; gap: 10px; counter-reset: st; }
.steps li { position: relative; display: grid; gap: 2px; min-height: 32px; padding: 6px 0 6px 46px; counter-increment: st; }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 32px; height: 32px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--accent-tint); color: var(--accent-on); font: 800 var(--fs-sm)/1 var(--font-d); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: -14px; width: 2px; background: var(--accent-line); }
.steps b { font: 700 var(--fs-base)/1.3 var(--font-d); }
.steps span { color: var(--text-2); font-size: 0.9375rem; }
.mini-kv { table-layout: auto; }
.mini-kv tbody th { width: 42%; color: var(--text-2); font-weight: 600; }
.mini-kv td { color: var(--text); font-weight: 500; }
.mini-k { table-layout: auto; }
.mini-k thead th:nth-child(2), .mini-k thead th:nth-child(3) { width: auto; }
.mini-k tbody th { color: var(--text-2); font-weight: 600; }
.mini-k .cc { font-weight: 700; color: var(--text); }
.mini-k td:last-child { color: var(--text-2); font-size: var(--fs-xs); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mini-cmp { min-width: 520px; table-layout: auto; }
.mini-cmp thead th:nth-child(n) { width: auto; }
.mini-cmp thead th { color: var(--text); font-size: var(--fs-sm); }
.mini-cmp thead th a { color: var(--link); }
.mini-cmp tbody th { color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; }
.mini-cmp td { font-size: var(--fs-xs); }
.mini-cmp td:nth-child(2) { background: var(--accent-wash); font-weight: 600; }
.alts { padding: 0 var(--s-3) var(--s-3); }
.alts a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--text); text-decoration: none; }
.alts a:hover { background: var(--accent-wash); }
.alts span { display: grid; min-width: 0; }
.alts b { font: 700 var(--fs-sm)/1.25 var(--font-d); }
.alts small { overflow: hidden; color: var(--text-3); font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.hcards { display: grid; gap: 6px; padding: 0 var(--s-3) var(--s-4); }
.hcards a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: border-color 0.12s, background-color 0.12s; }
.hcards a .ic { color: var(--accent); }
.hcards a:hover { background: var(--accent-wash); border-color: var(--accent); }
.hcards b { min-width: 26px; padding: 1px 7px; background: var(--accent); border-radius: 999px; color: var(--accent-on); font: 800 0.6875rem/1.6 var(--font-d); text-align: center; }
.g-b .hcards { padding: 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.rail-n { padding: 0 var(--s-4) var(--s-4); color: var(--text-3); font-size: 0.6875rem; }
.topc a[aria-current] span { font-weight: 700; }
.clist-l { display: grid; flex: none; place-items: center; width: 22px; height: 22px; background: var(--surface-3); border-radius: 6px; color: var(--text-2); font: 800 0.6875rem/1 var(--font-d); }
.clist a[aria-current] .clist-l { background: var(--accent); color: var(--accent-on); }
.clist a span.clist-l { flex: none; }
.sp-ic { display: grid; flex: none; place-items: center; width: 48px; height: 24px; background: var(--plate-dark); border-radius: 5px; }
.sp-ic img { width: 40px; height: 16px; object-fit: contain; }
.nav-sub a[aria-current] { background: var(--accent-tint); color: var(--text); font-weight: 600; }
.nav-sub .ic { color: var(--accent); }
.foot-dis { margin-top: 10px; max-width: 90ch; }
.card-t { font: 800 var(--fs-md)/1.2 var(--font-d); letter-spacing: -0.02em; }
.src-h { font: 800 var(--fs-lg)/1.2 var(--font-d); letter-spacing: -0.02em; }
.px-momo { background: #FFCB05 !important; color: #1A1300 !important; }
.px-smartcash { background: #E40000 !important; }
.card-tl { font: 800 var(--fs-lg)/1.2 var(--font-d); letter-spacing: -0.02em; }
.feats > span { display: inline-flex; align-items: center; gap: 4px; }
.clist a span.clist-t { display: grid; flex: none; place-items: center; width: 44px; height: 22px; border-radius: 5px; }
.clist-t img { width: 36px; height: 15px; object-fit: contain; }
.pi-cards { box-sizing: border-box; padding: 6px 1px; background: #1A1F71; border-radius: 4px; }
.foot-grid { display: grid; gap: var(--s-6) var(--s-5); }
.foot-about p { max-width: 36ch; margin-top: var(--s-3); line-height: 1.55; }
.foot-h { margin-bottom: 10px; color: var(--band-text); font: 700 var(--fs-xs)/1.2 var(--font-d); letter-spacing: 0.1em; text-transform: uppercase; }
.foot-col ul { display: grid; gap: 8px; }
.foot-col a { color: var(--band-text-2); text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; }
.foot-note { display: grid; gap: 10px; }
.foot-note .foot-dis { margin-top: 0; }
@media (min-width: 560px) {
.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
.mini-r, .mini-k, .mini-r tbody, .mini-k tbody, .mini-r tr, .mini-k tr, .mini-r th, .mini-k th, .mini-r td, .mini-k td { display: block; width: auto; }
.mini-r caption, .mini-k caption { display: block; }
.mini-r thead, .mini-k thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mini-r tr, .mini-k tr { padding: 10px 0; border-top: 1px solid var(--border); }
.mini-r th, .mini-k th, .mini-r td, .mini-k td { padding: 2px 0; border-top: 0; }
}
.gobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 10px; padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(6, 24, 15, 0.12); transform: translateY(110%); transition: transform 0.22s var(--ease); }
.gobar-on .gobar { transform: none; }
.gobar-t { display: grid; flex: 1; min-width: 0; }
.gobar-t b { font: 800 var(--fs-base)/1.2 var(--font-d); }
.gobar-t small { overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gobar .btn { flex: none; }
@media (max-width: 999.98px) {
.gobar-on body { padding-bottom: 72px; }
}
@media (min-width: 1000px) {
.gobar { display: none; }
}
@media (max-width: 559.98px) {
.tools .pick { flex: 1 1 100%; }
.tools .pick select { flex: 1; }
}
@container rank (min-width: 560px) and (max-width: 879.98px) {
.rank-ng tr { grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1fr) 128px; grid-template-areas: "pos site site act" ". st x act"; }
.rank-ng .c-act { grid-template-columns: 1fr; align-self: start; }
.rank-ng .c-x { align-items: flex-start; text-align: left; }
}
.foot .brand { color: #fff; }
.foot .brand b, .foot .mark { color: var(--band-accent); }