/* site.css */
/* TopCardX — a readable card directory. Material belongs to the card, not the UI. */
:root {
  color-scheme: dark;
  --canvas: #16191d;
  --paper: #22262c;
  --raised: #2c3036;
  --ink: #f3f4f1;
  --muted: #bdc2cb;
  --subtle: #969da9;
  --line: #393d44;
  --accent: #b9c6f6;
  --green: #add8bd;
  --amber: #e4c793;
  --font: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button, input, select { border-radius: 0; }
button { border: 0; }
input, select { min-width: 0; color: var(--ink); background: var(--paper); }
p, h1, h2, h3, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
p { overflow-wrap: anywhere; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: 10px; left: 16px; transform: translateY(-160%); padding: 10px 20px; color: var(--canvas); background: var(--accent); }
.skip:focus { transform: none; }
.shell { margin-inline: auto; }
.muted, .page-subtitle { color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 20px; border: 1px solid transparent; border-radius: 7px; font-weight: 600; line-height: 1.4; }
.primary { color: #1b2130; background: var(--accent); }
.primary:hover { background: #ced7fa; }
.secondary { background: var(--paper); border-color: var(--line); }
.secondary:hover { background: var(--raised); }
.subtle-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent); }
.subtle-link:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-button { background: none; color: var(--muted); padding: 10px 12px; min-height: 44px; }

/* Navigation remains visually quieter than the catalog. */
.header { position: sticky; top: 0; z-index: 50; background: var(--canvas); border-bottom: 1px solid var(--line); }
.header-inner { height: 64px; display: flex; align-items: center; gap: 48px; }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.brand-logo { width: 200px; height: auto; }
.desktop-nav { display: flex; align-self: stretch; align-items: stretch; gap: 30px; margin-left: auto; }
.desktop-nav a { display: flex; align-items: center; position: relative; color: var(--muted); font-size: 16px; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.desktop-nav a.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.language, .header-compare { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 14px; white-space: nowrap; }
.language { color: var(--muted); padding-inline: 4px; }
.language svg { width: 16px; }
.header-compare, .header-compare > svg { display: none; }
.header-compare b { display: grid; place-items: center; min-width: 24px; height: 24px; padding-inline: 5px; border-radius: 5px; background: var(--raised); color: var(--accent); font-size: 13px; }
.menu-toggle, .mobile-nav { display: none; }

/* A large, restrained campaign surface. Stable height across autoplay slides. */
.comparison-home { padding-top: 12px; }
.offers { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 16px; background: #22262d; }
.offer-slides { display: grid; }
.offer-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr); align-items: center; background: #252931; }
.offer-slide[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
.offer-mint { background: #232e2d; }
.offer-brand { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.offer-brand-name { color: var(--ink); font-weight: 650; }
.offer-tag { padding-left: 12px; border-left: 1px solid #5a616c; }
.offer-title-mobile { display: none; }
.offer-title { line-height: 1.25; letter-spacing: -.04em; }
.offer-description { color: #d6d9df; }
.offer-terms { color: var(--muted); max-width: 66ch; }
.offer-links { display: flex; align-items: center; gap: 24px; }
.offer-cta, .offer-source { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 550; }
.offer-cta { background: #d4dcfa; color: #202638; border-radius: 6px; padding: 10px 20px; }
.offer-cta:hover { background: #e3e9ff; }
.offer-source { color: #d2d7e4; }
.offer-source:hover { text-decoration: underline; text-underline-offset: 4px; }
.offer-links svg { width: 17px; height: 17px; }
.offer-art { justify-self: center; position: relative; }
.offer-controls { position: absolute; bottom: 8px; left: 50%; width: max-content; transform: translateX(-50%); display: flex; align-items: center; min-height: 44px; }
.offer-dot { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border-radius: 50%; }
.offer-dot span { width: 8px; height: 8px; border-radius: 50%; background: #8d9198; transition: background-color .15s ease; }
.offer-dot:hover span, .offer-dot[aria-current="true"] span { background: #fff; }
.offer-dot:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

/* Search, residency and type work immediately, with no submit step. */
.home-filters { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .85fr) auto; gap: 14px; }
.home-search-wrap, .home-select, .home-search, .home-select-group { min-width: 0; }
.home-select-group { display: contents; }
.home-search, .home-select { display: flex; position: relative; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); height: 48px; }
.home-search { padding-inline: 16px; }
.home-search:focus-within, .home-select:focus-within, .search-field:focus-within, .select-field:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); }
.home-search > svg, .select-icon { color: var(--muted); width: 19px; height: 19px; }
.home-search input { width: 100%; height: 100%; background: transparent; border: 0; outline: none; font-size: 16px; }
input::placeholder { color: var(--subtle); opacity: 1; }
.search-shortcut { color: var(--subtle); font: 13px var(--font); white-space: nowrap; }
.home-select select { width: 100%; height: 100%; appearance: none; background: transparent; border: 0; padding: 0 38px 0 43px; outline: none; font-size: 16px; }
.select-icon { position: absolute; left: 15px; pointer-events: none; }
.chevron-icon { position: absolute; right: 14px; width: 14px; height: 14px; color: var(--muted); transform: rotate(90deg); pointer-events: none; }
option { color: var(--ink); background: var(--paper); }
.filter-context { margin-top: 6px; color: var(--subtle); font-size: 14px; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.feed-topics { display: flex; align-items: center; gap: 12px; }
.feed-topics button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; color: var(--muted); border: 1px solid var(--line); background: transparent; border-radius: 6px; font-size: 16px; white-space: nowrap; }
.feed-topics button.selected { color: #dbe3ff; border-color: #8898c9; background: #303849; }
.feed-topics button:hover { color: var(--ink); border-color: #79808b; }
.feed-stats { display: flex; align-items: center; gap: 18px; }
.feed-stats select { min-height: 44px; background: transparent; border: 0; color: var(--muted); font-size: 14px; }
.feed-count { color: var(--subtle); white-space: nowrap; font-size: 14px; }
[data-filter-results] { transition: opacity .15s ease; }
[data-filter-results].is-filtering { opacity: .6; }

/* Shared catalog structure; natural-height masonry is defined below. */
.discovery-card { grid-template-rows: subgrid; row-gap: 12px; padding-bottom: 30px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-identity { display: flex; align-items: center; gap: 24px; min-width: 0; }
.card-visual { width: 224px; flex-shrink: 0; }
.card-heading { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.card-heading h2 { font-size: 28px; overflow-wrap: anywhere; font-weight: 650; }
.card-heading h2 a:hover { color: var(--accent); }
.card-meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 14px; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: end; }
.card-name-link { display: block; color: inherit; border-radius: 4px; }
.card-name-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.feed-footnote { display: flex; justify-content: space-between; gap: 24px; margin-top: 8px; padding-block: 20px; color: var(--muted); font-size: 14px; }
.footnote-info { display: flex; align-items: baseline; gap: 10px; }
.footnote-icon { width: 16px; height: 16px; align-self: center; }
.footnote-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--accent); }
.footnote-link svg { width: 16px; }

/* Catalog, country and guide pages share the same reading system. */
.page-intro { padding-block: 40px 32px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); margin-bottom: 24px; font-size: 14px; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--subtle); }
.page-title { font-size: clamp(30px, 4vw, 44px); }
.page-subtitle { max-width: 72ch; margin-top: 14px; font-size: 18px; }
.filter-bar { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.search-field, .select-field { display: flex; position: relative; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); min-width: 0; }
.search-field > svg, .select-field > svg:not(.chevron-arrow) { position: absolute; left: 14px; color: var(--muted); width: 18px; pointer-events: none; }
.search-field input, .select-field select { width: 100%; min-height: 52px; padding: 10px 35px 10px 43px; appearance: none; border: 0; background: transparent; outline: none; }
.chevron-arrow { position: absolute; right: 12px; width: 14px; transform: rotate(90deg); pointer-events: none; }
.filter-secondary { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.checkbox-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.checkbox-label input { accent-color: var(--accent); width: 18px; height: 18px; }
.cb-custom { display: none; }
.sort-wrap { position: relative; margin-left: auto; }
.sort-wrap select { appearance: none; border: 0; padding: 10px 34px 10px 12px; min-height: 44px; border-radius: 5px; }
.reset-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); min-height: 44px; }
.reset-link svg { width: 16px; }
.filter-tag { color: var(--accent); }
.results-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding-block: 8px 18px; margin-bottom: 28px; }
.heading-stat { display: flex; gap: 8px; align-items: baseline; }
.heading-stat strong { font-size: 24px; font-weight: 600; }
.heading-stat span, .compare-hint { color: var(--muted); font-size: 14px; }
.notice { display: flex; align-items: flex-start; gap: 12px; background: var(--paper); border-left: 2px solid var(--accent); padding: 18px 22px; margin-bottom: 28px; color: var(--muted); font-size: 16px; }
.notice-icon { width: 20px; margin-top: 3px; color: var(--accent); }
.countries-grid, .collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.country-tile { display: flex; align-items: center; gap: 18px; min-height: 136px; padding: 24px; background: var(--paper); border-radius: 8px; }
.country-tile:hover, .guide-card:hover { background: var(--raised); }
.country-flag { font-size: 32px; }
.country-info { flex: 1; min-width: 0; }
.country-info h3 { font-size: 22px; margin-bottom: 8px; }
.country-info span { font-size: 14px; color: var(--muted); }
.country-tile .chevron { color: var(--muted); width: 16px; }
.guide-card { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; background: var(--paper); border-radius: 8px; }
.guide-icon { color: var(--accent); }
.guide-icon svg { width: 28px; height: 28px; }
.guide-info h3 { font-size: 24px; }
.guide-info p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.guide-read { display: flex; align-items: center; gap: 10px; color: var(--accent); margin-top: auto; min-height: 44px; }
.collections-grid + .notice { margin-top: 28px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 64px 24px; background: var(--paper); border-radius: 8px; }
.empty-state h2 { font-size: 26px; }
.empty-state p { color: var(--muted); margin: 14px auto 24px; max-width: 62ch; }
.empty-page { text-align: center; padding-block: 80px; }
.empty-page p { margin: 20px auto 28px; }
.error-code { color: var(--accent); font-size: 72px; }

/* Card detail and sourced terms. */
.detail-top { padding-top: 36px; }
.detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; padding-block: 8px 40px; border-bottom: 1px solid var(--line); }
.detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.detail-hero h1 { font-size: clamp(32px, 4.5vw, 50px); }
.detail-summary { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 65ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.detail-disclosure { font-size: 14px; color: var(--muted); margin-top: 16px; }
.detail-disclosure a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.variants-section { padding-block: 40px 16px; }
.variant-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.variant-heading h2 { font-size: 26px; }
.variant-checked { color: var(--muted); white-space: nowrap; font-size: 14px; margin-top: 8px; }
.variant-panel { padding: 24px 28px; margin-bottom: 24px; background: var(--paper); border-radius: 8px; }
.variant-header { padding-bottom: 24px; }
.variant-header h3 { font-size: 24px; }
.variant-region { color: var(--muted); margin-top: 8px; }
.variant-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.variant-fact { min-width: 0; padding: 22px 0; border-top: 1px solid var(--line); }
.variant-fact dt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.variant-fact dd strong { font-size: 20px; line-height: 1.5; font-weight: 600; }
.fact-cond { color: var(--muted); margin-top: 10px; font-size: 16px; }
.fact-source { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--accent); font-size: 13px; margin-top: 10px; overflow-wrap: anywhere; }
.fact-source svg { width: 14px; height: 14px; }
.fact-source time { color: var(--muted); }
.variant-notice { padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--line); }
.variant-notice p { margin-top: 8px; color: var(--muted); }

/* Cards run down the table; each feature keeps one aligned column. */
.compare-page { padding-top: 34px; }
.compare-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.compare-heading h1 { font-size: 34px; }
.compare-context { margin-top: 8px; color: var(--muted); }
.compare-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; padding-block: 24px; }
.compare-toolbar > label:first-child { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.compare-toolbar select, .compare-card-header select { max-width: 100%; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; text-overflow: ellipsis; }
.compare-toolbar select { min-width: 180px; width: auto; }
.compare-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.compare-limit { font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.compare-table-hint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; color: var(--subtle); font-size: 14px; padding-bottom: 12px; }
.comparison-scroll { position: relative; isolation: isolate; overflow: auto; max-height: max(480px, calc(100svh - 250px)); border: 1px solid var(--line); border-radius: 8px; scrollbar-color: #747d8d #22262c; }
.comparison-table { --comparison-card-width: 240px; --comparison-feature-width: 280px; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; }
.comparison-table th, .comparison-table td { width: var(--comparison-feature-width); min-width: var(--comparison-feature-width); max-width: var(--comparison-feature-width); }
.comparison-table tr > :first-child { width: var(--comparison-card-width); min-width: var(--comparison-card-width); max-width: var(--comparison-card-width); }
.comparison-table th, .comparison-table td { padding: 20px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); overflow-wrap: anywhere; }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-table tbody tr:last-child > * { border-bottom: 0; }
.comparison-table thead th { position: sticky; top: 0; z-index: 3; padding-block: 16px; background: #22252a; color: var(--muted); font-size: 15px; font-weight: 550; white-space: nowrap; }
.comparison-table tbody th { position: sticky; left: 0; z-index: 2; background: #1c2025; color: var(--ink); font-weight: 500; box-shadow: 6px 0 12px #00000012; }
.comparison-table .col-card { position: sticky; left: 0; z-index: 4; width: var(--comparison-card-width); font-weight: 500; }
.compare-card-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 100%; }
.compare-card-header .card-visual { margin: 0; }
.compare-slot { display: flex; align-items: center; justify-content: space-between; height: 28px; color: var(--subtle); font-size: 14px; font-weight: 500; }
.compare-remove { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--muted); border-radius: 6px; }
.compare-remove:hover { color: var(--ink); background: var(--raised); }
.comparison-table td.is-emphasis { background: #ffffff03; }
.comparison-table td > span { font-size: 17px; font-weight: 550; }
.comparison-table td.is-emphasis > span { color: var(--accent); }
.comparison-table tbody tr:hover td { background: #ffffff05; }
.fact-note { display: block; color: var(--muted); font-size: 16px; line-height: 1.8; margin-top: 8px; }
.card-eligibility { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; line-height: 1.75; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card-eligibility > span { color: var(--muted); }
.card-eligibility small { display: block; font-size: 16px; color: var(--muted); margin-top: 6px; }

/* Long-form content stays at a comfortable line length. */
.prose { max-width: 840px; padding-top: 40px; }
.prose .lead { margin-block: 24px 40px; font-size: 22px; color: var(--muted); }
.prose-section { margin-bottom: 32px; }
.prose-section h2 { font-size: 26px; margin-bottom: 16px; }
.prose-section p { font-size: 18px; line-height: 1.9; color: var(--muted); }
.prose-footer { padding-top: 12px; }
.footer { margin-top: 72px; border-top: 1px solid var(--line); padding-block: 36px 28px; }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 36px; }
.footer .brand-logo { width: 176px; }
.footer-brand-col p { color: var(--muted); margin-top: 16px; font-size: 14px; }
.footer-badge { display: none; }
.footer-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; font-size: 14px; }
.footer-links a { min-height: 44px; color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { color: var(--subtle); font-size: 13px; margin-top: 36px; }
.footer-bottom p { max-width: 86ch; }
.footer-bottom > span { white-space: nowrap; }

@supports not (grid-template-rows: subgrid) {
  .discovery-card { display: flex; flex-direction: column; gap: 22px; }
  .card-actions { margin-top: auto; align-self: stretch; }
}
@media (max-width: 1199px) {
  .header-inner { gap: 28px; }
  .desktop-nav { gap: 24px; }
  .discovery-grid { column-gap: 40px; }
  .countries-grid, .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .header-inner { height: 72px; }
  .header-actions { margin-left: auto; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: var(--muted); }
  .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 20px 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .mobile-nav a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .mobile-nav a:hover { background: var(--raised); }
  .discovery-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero { grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
  .detail-card-art { padding: 16px; }
  .variant-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-heading { flex-direction: column; gap: 6px; }
}
@media (max-width: 767px) {
  .shell { width: calc(100% - 40px); }
  .header-inner { height: 68px; }
  .language { padding-inline: 6px; min-width: 44px; }
  .language svg { display: none; }
  .mobile-nav { padding: 12px 16px; }
  .home-filters { gap: 10px; }
  .home-search-wrap { grid-column: 1 / -1; }
  .home-search, .home-select { height: 48px; }
  .home-select select { padding-left: 13px; padding-right: 30px; }
  .home-select .select-icon { display: none; }
  .chevron-icon { right: 10px; width: 13px; }
  .search-shortcut { display: none; }
  .discovery-card { row-gap: 22px; }
  .card-actions { gap: 10px; }
  .footnote-info { align-items: flex-start; }
  .footnote-icon { margin-top: 4px; align-self: auto; }
  .footnote-link { align-self: flex-start; min-height: 44px; }
  .page-intro { padding-block: 28px; }
  .page-subtitle { font-size: 16px; }
  .breadcrumb { margin-bottom: 20px; }
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
  .filter-secondary { align-items: flex-start; gap: 8px; }
  .sort-wrap { margin-left: 0; }
  .results-heading { align-items: flex-start; }
  .compare-hint { max-width: 130px; text-align: right; }
  .countries-grid, .collections-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .country-tile { padding: 22px; min-height: 116px; }
  .notice { padding: 16px; font-size: 16px; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .detail-card-art { width: min(320px, 100%); margin-inline: auto; }
  .detail-summary { font-size: 16px; }
  .detail-tags { gap: 10px 16px; }
  .variant-panel { padding: 22px; }
  .variant-facts { grid-template-columns: minmax(0, 1fr); }
  .variant-checked { white-space: normal; }
  .prose { padding-top: 28px; }
  .prose-section p { font-size: 16px; }
  .empty-state { padding: 40px 20px; }
  .empty-state h2 { font-size: 23px; }
  .footer { margin-top: 48px; }
  .footer-top, .footer-bottom { flex-direction: column; gap: 20px; }
  .footer-links { gap: 12px 24px; }
  .footer-bottom { margin-top: 24px; }
}
@media (max-width: 359px) {
  .shell { width: calc(100% - 32px); }
  .header-inner { gap: 8px; }
  .language { font-size: 13px; }
  .card-actions, .compare-add { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 1199px) {
  .offer-slide { gap: 36px; padding-inline: 36px; }
  .offer-art { width: 300px; }
  .card-visual { width: 210px; }
  .card-identity { gap: 20px; }
  .card-heading h2 { font-size: 25px; }
}
@media (max-width: 999px) {
  .header-compare { display: inline-flex; padding: 0 8px; font-size: 16px; }
  .header-compare > svg { display: block; }
  .offer-slide { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; padding: 28px 30px 48px; }
  .offer-art { width: 220px; }
  .card-visual { width: 250px; }
  .card-heading h2 { font-size: 28px; }
}
@media (max-width: 767px) {
  .brand-logo { width: 156px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 2px; }
  .header-compare { gap: 0; min-width: 44px; }
  .header-compare > svg { display: none; }
  .comparison-home { padding-top: 16px; }
  .offers { margin-bottom: 20px; border-radius: 8px; }
  .offer-slide { min-height: 174px; grid-template-columns: minmax(0, 1fr) 136px; gap: 14px; padding: 16px 20px 34px; }
  .offer-art { display: block; width: 136px; padding: 0; }
  .offer-title-mobile { display: block; font-size: 25px; line-height: 1.4; }
  .offer-title-desktop, .offer-brand, .offer-description, .offer-terms, .offer-source { display: none; }
  .offer-brand { font-size: 14px; margin-bottom: 12px; }
  .offer-title { font-size: 30px; }
  .offer-description { font-size: 16px; margin-top: 10px; }
  .offer-terms { font-size: 14px; margin-top: 10px; }
  .offer-links { gap: 0; margin-top: 12px; }
  .offer-cta { padding: 0; min-height: 40px; background: transparent; color: var(--accent); }
  .offer-cta:hover { background: transparent; }
  .offer-cta, .offer-source { font-size: 15px; }
  .offer-controls { bottom: 4px; }
  .home-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .home-select-group { display: contents; }
  .home-reset, .filter-context { font-size: 14px; }
  .feed-toolbar { flex-wrap: nowrap; gap: 10px; padding: 12px 0; margin-bottom: 20px; }
  .feed-topics { gap: 8px; }
  .feed-topics button { font-size: 15px; padding-inline: 12px; }
  .feed-stats { width: auto; gap: 8px; }
  .feed-stats select { min-height: 36px; max-width: 88px; font-size: 13px; }
  .feed-count { font-size: 13px; }
  .card-identity { gap: 18px; align-items: center; }
  .card-visual { width: 45%; max-width: 216px; }
  .card-heading { gap: 8px; }
  .card-heading h2 { font-size: 23px; }
  .card-meta-line { font-size: 14px; margin-top: 0; }
  .card-eligibility { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .feed-footnote { flex-direction: column; gap: 12px; }
  .compare-page { padding-top: 24px; }
  .compare-heading { flex-wrap: wrap; gap: 4px; }
  .compare-heading h1 { font-size: 30px; }
  .compare-toolbar { gap: 12px 20px; }
  .compare-toolbar > label:first-child { width: 100%; }
  .compare-actions { gap: 12px; }
  .compare-actions .button { padding-inline: 12px; min-height: 44px; }
  .comparison-scroll { max-height: max(460px, calc(100svh - 130px)); }
  .comparison-table { --comparison-card-width: 148px; --comparison-feature-width: 240px; }
  .compare-card-header .card-visual { width: 180px; margin: 0; }
  .comparison-table th, .comparison-table td { padding: 14px; }
}
@media (max-width: 359px) {
  .brand-logo { width: 128px; }
  .feed-stats select { display: none; }
  .header-actions { gap: 0; }
  .header-compare { padding-inline: 0; }
  .card-heading h2 { font-size: 22px; }
  .card-identity { gap: 12px; }
  .card-visual { width: 43%; }
  .home-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-reset { grid-column: 2; justify-self: end; min-height: 32px; }
  .offer-slide { grid-template-columns: minmax(0, 1fr) 106px; padding: 20px 16px 44px; }
  .offer-art { width: 106px; }
  .offer-title-mobile { font-size: 22px; }
  .offer-title { font-size: 27px; }
  .offer-links { gap: 14px; }
  .offer-cta { padding-inline: 14px; }
}

/* Branded card illustrations. Fixed geometry, independently sourced brand marks. */
.designed-card { --card-base: #242a31; --card-edge: #4b5057; --card-ink: #fff; position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; padding: 8%; overflow: hidden; border-radius: 14px; color: var(--card-ink); background: linear-gradient(122deg, #ffffff13, transparent 44%), linear-gradient(145deg, var(--card-edge), var(--card-base) 60%); box-shadow: inset 0 0 0 1px #ffffff30, 0 6px 18px #00000012; }
.card-design-pattern { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.card-design-pattern::before { content: ""; position: absolute; width: 150%; height: 150%; left: -22%; top: -95%; border: 1px solid #ffffff2b; border-radius: 50%; box-shadow: 0 8px 0 #ffffff06, 0 16px 0 #ffffff06, 0 24px 0 #ffffff06, 0 32px 0 #ffffff06, 0 40px 0 #ffffff06; transform: rotate(-22deg); }
.card-design-pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 45%, #ffffff08 45.2%, transparent 78%); }
.card-brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card-brand-logo { width: 70%; height: 11cqw; object-fit: contain; object-position: left center; }
.card-brand-lockup[data-logo-kind="icon"] .card-brand-logo { width: 18%; height: 18cqw; flex-shrink: 0; }
.design-metamask .card-brand-logo, .design-metamask-metal .card-brand-logo { width: 48%; height: 23cqw; }
.design-ready .card-brand-logo { height: 16cqw; }
.design-etherfi .card-brand-logo, .design-etherfi-core .card-brand-logo { height: 15cqw; }
.logo-white .card-brand-logo { filter: brightness(0) invert(1); }
.logo-dark .card-brand-logo { filter: brightness(0); }
.card-brand-text { color: var(--card-ink); font-size: clamp(16px, 7.5cqw, 32px); font-weight: 650; letter-spacing: -.04em; line-height: 1.15; }
.card-design-bottom { min-height: 12cqw; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.card-edition { font-size: clamp(10px, 4.5cqw, 18px); opacity: .84; }
.design-network { margin-left: auto; flex-shrink: 0; }
.network-visa { font-family: Arial, sans-serif; font-size: 10cqw; line-height: .85; font-weight: 900; font-style: italic; letter-spacing: -.055em; }
.network-mastercard { width: 24%; height: auto; fill: none; stroke: none; }
.network-amex { padding: 5px; font-family: Arial, sans-serif; font-size: 3.6cqw; line-height: .95; font-weight: 900; letter-spacing: -.04em; border: 1px solid currentColor; text-align: center; }
.design-redotpay { --card-base: #161819; --card-edge: #45484c; }
.design-redotpay-physical { --card-base: #c90628; --card-edge: #ef1237; }
.design-bitget-wallet { --card-base: #0b1518; --card-edge: #18262b; }
.design-bitget-wallet .card-design-pattern::after { inset: 22% -10% -10% 18%; background: linear-gradient(135deg, transparent 50%, #17c8d3 50%, #0896a2 63%, transparent 63%), linear-gradient(45deg, transparent 73%, #4ce6e8 73%, #15a7b7 91%, transparent 91%); opacity: .9; }
.design-metamask { --card-base: #ed7618; --card-edge: #f9a756; }
.design-metamask-metal { --card-base: #a05230; --card-edge: #ec9862; }
.design-metamask .card-design-pattern::after, .design-metamask-metal .card-design-pattern::after { background: conic-gradient(from 30deg at 78% 68%, #ffd28d77 0deg 62deg, #ae491a44 63deg 112deg, transparent 113deg 180deg, #ffb87655 181deg 220deg, transparent 221deg); }
.design-metamask-metal .card-design-bottom { background: #48267e; margin: 0 -9.6% -9.6%; padding: 4% 9.6%; }
.design-nexo { --card-base: #16191c; --card-edge: #383c42; }
.design-nexo .card-design-pattern::after { background: linear-gradient(132deg, transparent 57%, #a9b0b8 57.3%, #636a73 74%, #c3c8ce); }
.design-coinbase { --card-base: #0043dc; --card-edge: #1262ff; }
.design-gemini { --card-base: #307a9b; --card-edge: #334f79; background: linear-gradient(145deg,#2f506d,#2677b4 47%,#65689e 72%,#a0ae87); }
.design-ready { --card-base: #c86042; --card-edge: #773323; }
.design-gnosis-pay { --card-base: #121a15; --card-edge: #344030; }
.design-gnosis-pay .card-design-pattern::before { border-color: #b5c77588; box-shadow: 0 12px 0 #b5c77518,0 24px 0 #b5c77518,0 36px 0 #b5c77518,0 48px 0 #b5c77518,0 60px 0 #b5c77518; }
.design-bybit { --card-base: #dededb; --card-edge: #fafaf5; --card-ink: #242629; }
.design-crypto-com { --card-base: #00375d; --card-edge: #187dad; }
.design-wirex { --card-base: #171716; --card-edge: #49443a; }
.design-etherfi { --card-base: #6e49c9; --card-edge: #ae73df; background: linear-gradient(135deg,#8659d6,#ad6cdf 38%,#7496c8 75%,#529bad); }
.design-etherfi-core { --card-base: #121831; --card-edge: #423360; background: linear-gradient(115deg,#121831 8%,#211b48 60%,#352266); }
.design-etherfi-core .card-design-pattern::before { opacity: .08; }
.design-etherfi-core .card-design-pattern::after { background: linear-gradient(125deg,transparent 30%,#7859ba18 75%,transparent); }
.design-kast { --card-base: #979c9f; --card-edge: #d7dadb; --card-ink: #25292c; }
.design-safepal { --card-base: #20104d; --card-edge: #7150d5; }
.design-infini-lite { --card-base: #141414; --card-edge: #393939; }
.design-infini-pro { --card-base: #d8d7d7; --card-edge: #e9e9e9; --card-ink: #161616; }
.design-infini-max { --card-base: #e21110; --card-edge: #f5a400; background: linear-gradient(160deg, #e21110, #f5a400); }
.design-ledger-cl { --card-base: #15171c; --card-edge: #30343b; }
.design-bitpanda { --card-base: #192b23; --card-edge: #40554a; }
.design-bitrefill { --card-base: #123f37; --card-edge: #286452; background: linear-gradient(154deg,#184b3c 30%,#ee4954 30.5%,#e63748 72%,#215f4e 72.5%); }
.design-kucoin { --card-base: #182829; --card-edge: #314849; }
.design-bleap { --card-base: #61bea3; --card-edge: #b5f1c2; --card-ink: #173c31; }
.design-tria { --card-base: #071014; --card-edge: #202936; background: linear-gradient(138deg,#11171d 35%,#295869 36%,#826f93 60%,#101619 61%); }
.design-coinbase-one { --card-base: #121416; --card-edge: #36383b; }
.design-krak { --card-base: #202224; --card-edge: #414346; }
.design-bybit .card-brand-logo, .design-okx .card-brand-logo { height: 16cqw; }
.design-okx { --card-base: #0c0e0f; --card-edge: #383b3d; }
.design-okx .card-design-pattern::after, .design-coinbase-one .card-design-pattern::after { background: repeating-linear-gradient(0deg,transparent,transparent 9px,#ffffff0c 9px,#ffffff0c 10px),repeating-linear-gradient(90deg,transparent,transparent 13px,#ffffff0a 13px,#ffffff0a 14px); }
.detail-card-art { padding: 0; }
.offer-slide { min-height: 270px; padding: 24px 40px 32px; gap: 48px; background: linear-gradient(110deg,#23262d 45%,#302a27); }
.offer-mint { background: linear-gradient(110deg,#20272b 45%,#22312f); }
.offer-brand { margin-bottom: 6px; font-size: 14px; }
.offer-title { font-size: clamp(30px,2.8vw,40px); }
.offer-description { margin-top: 8px; font-size: 17px; }
.offer-terms { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.offer-links { margin-top: 14px; }
.offer-art { width: min(100%,310px); padding: 8px 0; }
.offer-art .designed-card { transform: rotate(-4deg); box-shadow: inset 0 0 0 1px #ffffff24, 0 16px 36px #0002; }

/* The DOM remains in reading order. JS only computes row spans for natural-height items. */
.shell { width: min(1440px,calc(100% - 80px)); }
.discovery-grid { --masonry-gap: 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; align-items: start; }
.discovery-grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; }
.discovery-card { display: flex; flex-direction: column; gap: 20px; align-self: start; min-width: 0; grid-row: auto; height: auto; margin: 0; padding: 20px; border: 1px solid #ffffff0c; border-radius: 12px; background: #20242a; }
.discovery-card .card-identity { flex-direction: column; align-items: stretch; gap: 16px; }
.discovery-card .card-visual { width: 100%; max-width: none; }
.discovery-card .card-heading { display: flex; flex-direction: column; align-items: stretch; flex: none; gap: 8px; }
.discovery-card .card-heading h2 { font-size: 25px; line-height: 1.3; }
.discovery-card .card-meta-line { font-size: 14px; margin-top: 0; color: var(--subtle); }
.discovery-card .fact-note { font-size: 15px; line-height: 1.65; margin-top: 4px; }
.discovery-card .card-eligibility { display: block; border-top: 1px solid var(--line); border-bottom: 0; padding: 16px 0 0; }
.discovery-card .card-eligibility > span { display: block; margin-bottom: 7px; font-size: 15px; }
.discovery-card .card-eligibility small { font-size: 15px; }
.discovery-card .card-actions { align-self: stretch; }
@media (min-width:1760px) {
 .shell { width: min(1800px,calc(100% - 112px)); }
 .discovery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:1279px) {
 .shell { width: calc(100% - 64px); }
 .discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .offer-slide { gap: 32px; grid-template-columns: minmax(0,1fr) 280px; padding-inline: 28px; }
 .offer-art { width: 280px; }
}
@media (max-width:799px) {
 .shell { width: calc(100% - 40px); }
 .discovery-grid { grid-template-columns: minmax(0,1fr); }
 .discovery-card { padding: 20px; }
 .offer-slide { min-height: 180px; grid-template-columns: minmax(0,1fr) 136px; gap: 14px; padding: 18px 20px 34px; }
 .offer-art { width: 136px; }
 .offer-art .designed-card { border-radius: 8px; }
 .offer-description { font-size: 16px; }
 .offer-title-mobile { font-size: 24px; }
 .discovery-card .card-heading h2 { font-size: 25px; }
}
@media (max-width:359px) {
 .shell { width: calc(100% - 32px); }
 .discovery-card { padding: 16px; }
 .discovery-card .card-heading h2 { font-size: 23px; }
 .offer-slide { grid-template-columns: minmax(0,1fr) 106px; padding-inline: 16px; }
 .offer-art { width: 106px; }
 .offer-title-mobile { font-size: 22px; }
}

.card-variant-name { display: block; margin-top: 5px; font-size: 18px; font-weight: 550; line-height: 1.45; color: var(--accent); }
.compare-product-name { font-size: 18px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.compare-product-name span { display: block; color: var(--muted); font-size: 16px; font-weight: 500; }

/* Detail navigation stays lightweight while keeping every published term visible. */
.variant-jumps { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; }
.variant-jumps a { padding:10px 16px; border:1px solid var(--line); border-radius:10px; font-size:15px; color:var(--ink); }
.variant-jumps a:hover { border-color:var(--accent); }
.variant-panel { scroll-margin-top:0; }
.fact-references { margin-top:10px; }
.fact-references summary { font-size:13px; color:var(--muted); cursor:pointer; }
.fact-references .fact-source { display:flex; overflow-wrap:anywhere; }

/* Three editorial highlights per card; full terms stay in detail and comparison. */
.card-essentials { display: grid; gap: 18px; }
.card-essentials > div { min-width: 0; }
.card-essentials dt { color: var(--subtle); font-size: 15px; margin-bottom: 4px; }
.card-essentials strong { display: block; color: var(--ink); font-size: 20px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.card-essentials > div:first-child strong { font-size: 24px; color: var(--accent); }
.card-essentials p { color: var(--muted); font-size: 16px; line-height: 1.6; margin-top: 5px; }
.discovery-card .card-eligibility { font-size: 16px; padding-top: 14px; }
.discovery-card .card-actions { margin-top: 0; }
@media (max-width: 640px) {
 .card-essentials > div:first-child strong { font-size: 23px; }
}
.discovery-card .card-actions { gap: 12px; }
.card-apply-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; font-size: 16px; font-weight: 600; flex: 1; background: var(--accent); color: #171c29; border: 1px solid transparent; }
.card-apply-link svg { width: 16px; height: 16px; }
.card-apply-link:hover { background: #ced8ff; }
.card-partner-note { font-size: 14px; color: var(--muted); margin-top: -10px; }
@media (max-width: 640px) {
 .feed-toolbar { flex-wrap: wrap; }
 .feed-stats { margin-left: auto; }
}

/* New cards add rows, while feature headers and card names stay in view. */
.compare-table-hint { align-items: center; }
.compare-scroll-tools, .compare-scroll-buttons { display: flex; align-items: center; gap: 10px; }
.compare-scroll-buttons[hidden] { display: none; }
.compare-scroll-tools [data-comparison-position] { min-width: 52px; font-variant-numeric: tabular-nums; }
.compare-scroll-buttons button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font-size: 22px; }
.compare-scroll-buttons button:disabled { opacity: .35; cursor: default; }
.compare-card-header .card-visual { width: 152px; max-width: 100%; }
.compare-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.compare-card-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15px; font-weight: 550; flex: 1; color: var(--accent); }
.compare-card-actions .compare-apply { background: var(--accent); color: #171c29; border-radius: 7px; }
.compare-partner-note { color: var(--muted); font-size: 13px; font-weight: 400; }
@media (max-width: 640px) {
 .compare-toolbar select { min-width: 0; flex: 1; }
 .compare-actions { margin-left: 0; flex-wrap: wrap; }
 .compare-table-hint { gap: 10px; }
 .compare-scroll-tools { margin-left: auto; }
 .comparison-table { --comparison-card-width: 128px; --comparison-feature-width: min(240px, calc(100vw - 170px)); }
 .comparison-table thead th { white-space: normal; }
 .compare-card-header .card-visual { width: 100px; }
 .compare-product-name { font-size: 16px; }
 .compare-product-name span { font-size: 14px; }
}
@media (max-width: 380px) {
 .compare-card-actions { flex-direction: column; gap: 4px; align-items: stretch; }
}
@media (max-width: 359px) {
 .comparison-table { --comparison-feature-width: calc(100vw - 162px); }
}

/* Official marks on original illustrations, colors observed on product pages. */
.design-gate { --card-base: #101318; --card-edge: #3b4048; }
.design-gate .card-design-pattern::after { background: linear-gradient(145deg, #ffffff09, transparent 60%); }
.design-mexc { --card-base: #111110; --card-edge: #34322b; }
.design-mexc .card-design-pattern::after { background: linear-gradient(130deg, transparent 55%, #bd9f561c 85%, transparent); }
.design-mexc .card-brand-lockup[data-logo-kind="icon"] .card-brand-logo { width: 28%; height: 28cqw; }

/* agy.css */
/* TopCardX — shared AGY layout.
   refinement.css owns the current palette and final visual treatment.
   Every AGY document has data-page and data-lang on its body.
*/

body[data-design="agy"] {
  --banner-accent: #f5a623;
  --banner-accent-hover: #ffb845;
  --font: "Avenir Next", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body[data-design="agy"] ::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Header & Navigation */

body[data-design="agy"] .header-inner {
  height: 64px;
}

body[data-design="agy"] .desktop-nav a {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s ease;
}

body[data-design="agy"] .desktop-nav a:hover,
body[data-design="agy"] .desktop-nav a.active {
  color: #ffffff;
}

body[data-design="agy"] .desktop-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}

body[data-design="agy"] .language {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease;
}

body[data-design="agy"] .language:hover {
  color: var(--ink);
}

/* Container Shell */
body[data-design="agy"] .shell {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

body[data-design="agy"] .comparison-home {
  padding-top: 16px;
}

/* Promotional Banner */
body[data-design="agy"] .offers {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

body[data-design="agy"] .offer-slides {
  display: grid;
}

body[data-design="agy"] .offer-slide {
  --offer-glow: #f5a62314;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
  align-items: center;
  gap: 48px;
  min-height: 290px;
  padding: 32px 48px 60px;
}

body[data-design="agy"] .offer-mint {
  --offer-glow: #17c8d330;
  --banner-accent: #67e5dd;
  --banner-accent-hover: #96f3ed;
}

body[data-design="agy"] #offer-etherfi {
  --offer-glow: #8c65e040;
  --banner-accent: #c0a6f5;
  --banner-accent-hover: #d4c2ff;
}

body[data-design="agy"] .offer-slide[hidden] {
  display: grid !important;
  visibility: hidden;
  pointer-events: none;
}

body[data-design="agy"] .offer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
}

body[data-design="agy"] .offer-brand-name {
  color: var(--ink);
  font-weight: 650;
  font-size: 16px;
}

body[data-design="agy"] .offer-tag {
  padding-left: 10px;
  border-left: 1px solid #334155;
  color: var(--muted);
  font-size: 14px;
}

body[data-design="agy"] .offer-title {
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.25;
}

body[data-design="agy"] .offer-description {
  margin-top: 10px;
  line-height: 1.5;
}

body[data-design="agy"] .offer-terms {
  margin-top: 8px;
  max-width: 64ch;
}

body[data-design="agy"] .offer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

body[data-design="agy"] .offer-cta {
  background: var(--banner-accent);
  color: #11141c;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  padding: 10px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  text-decoration: none;
}

body[data-design="agy"] .offer-cta:hover {
  background: var(--banner-accent-hover);
}

body[data-design="agy"] .offer-cta svg {
  display: none;
}

body[data-design="agy"] .offer-source {
  color: var(--banner-accent);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

body[data-design="agy"] .offer-source:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-design="agy"] .offer-source svg {
  width: 15px;
  height: 15px;
}

body[data-design="agy"] .offer-art {
  width: min(100%, 330px);
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}

body[data-design="agy"] .offer-art .designed-card {
  transform: rotate(-6deg) perspective(1000px);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body[data-design="agy"] .offer-controls { bottom: 12px; }

/* Cockpit Search & Filters */
body[data-design="agy"] .home-cockpit {
  margin-bottom: 8px;
}

body[data-design="agy"] .home-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body[data-design="agy"] .home-search,
body[data-design="agy"] .home-select {
  display: flex;
  position: relative;
  align-items: center;
  background: #131720;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  height: 46px;
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-design="agy"] .home-search {
  padding-inline: 16px;
  gap: 10px;
}

body[data-design="agy"] .home-search:focus-within,
body[data-design="agy"] .home-select:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}

body[data-design="agy"] .home-search > svg {
  width: 18px;
  height: 18px;
  color: var(--subtle);
  flex-shrink: 0;
}

body[data-design="agy"] .home-search input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 15px;
}

body[data-design="agy"] .home-search input::placeholder {
  color: var(--subtle);
  opacity: 1;
}

body[data-design="agy"] .search-shortcut {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

body[data-design="agy"] .home-select select {
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  padding: 0 38px 0 16px;
  cursor: pointer;
}

body[data-design="agy"] .home-select .select-icon {
  display: none;
}

body[data-design="agy"] .home-select .chevron-icon {
  position: absolute;
  right: 14px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  transform: rotate(90deg);
}

body[data-design="agy"] .home-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.15s ease;
  text-decoration: none;
}

body[data-design="agy"] .home-reset:hover {
  color: var(--accent);
}

body[data-design="agy"] option {
  background: #141824;
  color: var(--ink);
}

/* Toolbar: Quick Tabs & Sort */
body[data-design="agy"] .feed-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

body[data-design="agy"] .feed-topics {
  display: flex;
  align-items: center;
  gap: 24px;
}

body[data-design="agy"] .feed-topics button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  transition: color 0.15s ease;
}

body[data-design="agy"] .feed-topics button.selected {
  font-weight: 600;
  background: transparent;
  border: 0;
}

body[data-design="agy"] .feed-topics button.selected::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
}

body[data-design="agy"] .feed-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

body[data-design="agy"] .feed-count {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"] .feed-stats select {
  display: block;
  max-width: none;
  min-height: 44px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s ease;
}

body[data-design="agy"] .feed-stats select:hover {
  color: var(--ink);
}

/* Card Grid */
body[data-design="agy"] .discovery-grid {
  --masonry-gap: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}

body[data-design="agy"] .discovery-grid.is-masonry {
  grid-auto-rows: 1px;
  row-gap: 0;
}

/* Card Container & Proportions */
body[data-design="agy"] .discovery-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  margin: 0;
  gap: 0;
  height: auto;
}

/* Card Header: Brand/Variant on Left, Artwork on Top Right */
body[data-design="agy"] .discovery-card .card-identity {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  min-width: 0;
}

body[data-design="agy"] .discovery-card .card-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

body[data-design="agy"] .discovery-card .card-heading h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .discovery-card .card-brand-title {
  display: block;
  transition: color 0.15s ease;
}

body[data-design="agy"] .discovery-card .card-variant-name {
  display: block;
  margin-top: 4px;
  line-height: 1.4;
}

body[data-design="agy"] .discovery-card .card-name-link {
  color: inherit;
  text-decoration: none;
}

body[data-design="agy"] .discovery-card .card-name-link:hover .card-brand-title {
  color: var(--accent);
}

body[data-design="agy"] .discovery-card .card-meta-line {
  margin-top: 8px;
  line-height: 1.4;
}

body[data-design="agy"] .discovery-card .card-visual {
  width: clamp(136px, 12vw, 184px);
  flex-shrink: 0;
}

body[data-design="agy"] .discovery-card .designed-card {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Card Highlights */
body[data-design="agy"] .discovery-card .card-essentials {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

body[data-design="agy"] .card-feature-item {
  min-width: 0;
}

/* Lead / Primary Highlight */
body[data-design="agy"] .card-feature-lead {
  padding-bottom: 12px;
  margin-bottom: 10px;
}

body[data-design="agy"] .card-feature-lead .feature-body {
  margin: 0;
}

body[data-design="agy"] .card-feature-lead .feature-val {
  display: block;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .card-feature-lead .feature-note {
  margin: 6px 0 0 0;
  overflow-wrap: anywhere;
}

/* Secondary & Tertiary Highlight Rows */
body[data-design="agy"] .card-feature-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
}

body[data-design="agy"] .card-feature-row .feature-label {
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .card-feature-row .feature-body {
  margin: 0;
  min-width: 0;
}

body[data-design="agy"] .card-feature-row .feature-val {
  display: block;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .card-feature-row .feature-note {
  margin: 3px 0 0 0;
  overflow-wrap: anywhere;
}

/* Quiet Eligibility / Region Restriction Line */
body[data-design="agy"] .discovery-card .card-eligibility {
  margin-top: 12px;
  margin-bottom: 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Reset inherited block labels: these spans form one readable restriction line. */
body[data-design="agy"] .discovery-card .card-eligibility > span {
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* Apply Action Button */
body[data-design="agy"] .discovery-card .card-actions {
  align-self: stretch;
}

body[data-design="agy"] .discovery-card .card-apply-link {
  text-decoration: none;
}

body[data-design="agy"] .discovery-card .card-partner-note {
  line-height: 1.4;
}

/* Footnote & Empty State */
body[data-design="agy"] .feed-footnote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--surface-border);
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 12px;
}

body[data-design="agy"] .footnote-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

body[data-design="agy"] .footnote-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  align-self: center;
}

body[data-design="agy"] .footnote-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
}

body[data-design="agy"] .empty-state {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 56px 24px;
  text-align: center;
}

body[data-design="agy"] .empty-state h2 {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 10px;
}

body[data-design="agy"] .empty-state p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
}

body[data-design="agy"] .empty-state .button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  min-height: 44px;
  font-weight: 600;
}

/* Footer Overrides */
body[data-design="agy"] .footer {
  border-top: 1px solid var(--surface-border);
  color: var(--muted);
}

body[data-design="agy"] .footer-badge {
  color: var(--subtle);
}

/* Responsive Scaling */
@media (max-width: 1279px) {
  body[data-design="agy"] .shell {
    width: calc(100% - 48px);
  }
  body[data-design="agy"] .discovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-design="agy"] .offer-slide {
    gap: 32px;
    padding: 28px 36px;
  }
  body[data-design="agy"] .offer-art {
    width: 270px;
  }
}

@media (max-width: 860px) {
  body[data-design="agy"] .home-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  body[data-design="agy"] .home-search-wrap {
    grid-column: 1 / -1;
  }
  body[data-design="agy"] .home-reset {
    grid-column: auto;
    padding-inline: 4px;
  }
}

@media (max-width: 799px) {
  body[data-design="agy"] .shell {
    width: calc(100% - 32px);
  }
  body[data-design="agy"] .discovery-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-design="agy"] .discovery-card {
    padding: 20px;
  }
  body[data-design="agy"] .offer-slide {
    min-height: 190px;
  }
  body[data-design="agy"] .offer-art {
    display: flex;
    padding: 0;
  }
  body[data-design="agy"] .offer-brand,
  body[data-design="agy"] .offer-description,
  body[data-design="agy"] .offer-terms,
  body[data-design="agy"] .offer-source,
  body[data-design="agy"] .offer-title-desktop {
    display: none;
  }
  body[data-design="agy"] .offer-title-mobile {
    display: block;
    color: var(--ink);
  }
  body[data-design="agy"] .offer-cta {
    padding-inline: 12px;
  }
  body[data-design="agy"] .feed-toolbar {
    flex-wrap: wrap;
  }
  body[data-design="agy"] .feed-stats {
    margin-left: auto;
  }
  body[data-design="agy"] .feed-footnote {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  body[data-design="agy"] .shell {
    width: calc(100% - 24px);
  }
  body[data-design="agy"] .home-select-group {
    display: contents;
  }
  body[data-design="agy"] .feed-toolbar {
    flex-direction: column;
  }
  body[data-design="agy"] .feed-topics {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-design="agy"] .feed-stats {
    justify-content: space-between;
  }
  body[data-design="agy"] .discovery-card {
    padding: 18px;
  }
  body[data-design="agy"] .discovery-card .card-identity {
    gap: 12px;
  }
  body[data-design="agy"] .discovery-card .card-visual {
    width: 136px;
  }
  body[data-design="agy"] .discovery-card .card-heading h2 {
    font-size: 21px;
  }
  body[data-design="agy"] .discovery-card .card-variant-name {
    font-size: 15px;
  }
  body[data-design="agy"] .card-feature-lead .feature-val {
    font-size: 22px;
  }
  body[data-design="agy"] .card-feature-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
  }
  body[data-design="agy"] .home-search input,
  body[data-design="agy"] .home-select select {
    font-size: 16px;
  }
  body[data-design="agy"] .home-select select {
    padding-inline: 10px 26px;
  }
  body[data-design="agy"] .home-select .chevron-icon {
    right: 8px;
    width: 12px;
  }
}

@media (max-width: 359px) {
  body[data-design="agy"] .shell {
    width: calc(100% - 16px);
  }
  body[data-design="agy"] .discovery-card {
    padding: 14px;
  }
  body[data-design="agy"] .discovery-card .card-visual {
    width: 112px;
  }
  body[data-design="agy"] .discovery-card .card-heading h2 {
    font-size: 20px;
  }
  body[data-design="agy"] .discovery-card .card-variant-name {
    font-size: 15px;
  }
  body[data-design="agy"] .card-feature-lead .feature-val {
    font-size: 22px;
  }
  body[data-design="agy"] .card-feature-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
  }
  body[data-design="agy"] .card-feature-row .feature-label {
    font-size: 15px;
  }
  body[data-design="agy"] .card-feature-row .feature-val {
    font-size: 16px;
  }
  body[data-design="agy"] .offer-slide {
    grid-template-columns: minmax(0, 1fr) 106px;
    padding-inline: 16px;
  }
  body[data-design="agy"] .offer-art {
    width: 106px;
  }
  body[data-design="agy"] .offer-title-mobile {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design="agy"] * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* Keep the actual offer and its qualifications readable on small screens. */
@media (max-width: 799px) {
  body[data-design="agy"] .offer-slide {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 12px 16px;
    align-items: start;
    padding: 20px 18px 60px;
  }
  body[data-design="agy"] .offer-copy { display: contents; }
  body[data-design="agy"] .offer-brand {
    grid-column: 1; grid-row: 1;
    align-self: center;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    margin: 0;
  }
  body[data-design="agy"] .offer-tag { border: 0; padding: 0; font-size: 13px; }
  body[data-design="agy"] .offer-art { grid-column: 2; grid-row: 1; width: 104px; }
  body[data-design="agy"] .offer-title-mobile {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0; font-size: 27px; line-height: 1.3; font-weight: 700;
  }
  body[data-design="agy"] .offer-terms {
    display: block; grid-column: 1 / -1; grid-row: 3;
    margin: 0; font-size: 14px; line-height: 1.6;
  }
  body[data-design="agy"] .offer-links {
    grid-column: 1 / -1; grid-row: 4; margin: 0; gap: 18px;
  }
  body[data-design="agy"] .offer-source { display: inline-flex; font-size: 14px; }
}

/* agy-pages.css */
/* TopCardX — Antigravity (agy) Inner Pages Styles
   Scoped exclusively under body[data-design="agy"]
   Loading order: site.css -> agy.css -> agy-pages.css
   refinement.css owns the shared final visual treatment.
*/

/* ==========================================================================
   1. Global Container & Typography Refinements
   ========================================================================== */

/* Shared shell widths remain defined by the approved homepage in agy.css. */

body[data-design="agy"] .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 20px;
}

body[data-design="agy"] .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

body[data-design="agy"] .breadcrumb a:hover {
  color: #ffffff;
}

body[data-design="agy"] .breadcrumb .sep {
  color: var(--subtle);
  user-select: none;
}

body[data-design="agy"] .breadcrumb [aria-current="page"] {
  color: var(--ink-secondary);
  font-weight: 500;
}

body[data-design="agy"] .page-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

body[data-design="agy"] .page-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 68ch;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Common Notices */
body[data-design="agy"] .notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  line-height: 1.6;
}

body[data-design="agy"] .notice p {
  margin: 0;
}

body[data-design="agy"] .notice-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

body[data-design="agy"] .discontinued-notice {
  border-left-color: var(--banner-accent);
  background: rgba(245, 166, 35, 0.05);
}

body[data-design="agy"] .discontinued-notice .notice-icon {
  color: var(--banner-accent);
}

/* Generic Buttons */
body[data-design="agy"] .button.primary {
  min-height: 44px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: background 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

body[data-design="agy"] .button.primary:hover {
  background: var(--accent-hover);
}

body[data-design="agy"] .button.secondary {
  font-weight: 500;
  min-height: 44px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

body[data-design="agy"] .button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Subtle Links */
body[data-design="agy"] .subtle-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  min-height: 44px;
  transition: color 0.15s ease;
}

body[data-design="agy"] .subtle-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-design="agy"] .subtle-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ==========================================================================
   2. Catalog Cockpit & Listing Page (cards / country / collection)
   ========================================================================== */

body[data-design="agy"] .listing-body {
  padding-bottom: 48px;
}

body[data-design="agy"] .catalog-cockpit {
  margin-bottom: 12px;
}

body[data-design="agy"] .catalog-cockpit .filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body[data-design="agy"] .search-field,
body[data-design="agy"] .select-field {
  display: flex;
  position: relative;
  align-items: center;
  background: #131720;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  height: 46px;
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-design="agy"] .search-field:focus-within,
body[data-design="agy"] .select-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  outline: none;
}

body[data-design="agy"] .search-field > svg,
body[data-design="agy"] .select-field > svg:not(.chevron-arrow) {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--subtle);
  pointer-events: none;
  flex-shrink: 0;
}

body[data-design="agy"] .search-field input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  padding: 0 46px 0 42px;
}

body[data-design="agy"] .search-field input::placeholder {
  color: var(--subtle);
  opacity: 1;
}

body[data-design="agy"] .search-field .search-shortcut {
  position: absolute;
  right: 12px;
  color: var(--muted);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid #232c3d;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

body[data-design="agy"] .select-field select {
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  padding: 0 38px 0 42px;
  cursor: pointer;
}

body[data-design="agy"] .select-field .chevron-arrow {
  position: absolute;
  right: 14px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  transform: rotate(90deg);
}

body[data-design="agy"] .filter-secondary {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-top: 4px;
  font-size: 14px;
  color: var(--muted);
}

body[data-design="agy"] .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-secondary);
  font-size: 14.5px;
  user-select: none;
}

body[data-design="agy"] .checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

body[data-design="agy"] .cb-custom {
  display: none;
}

body[data-design="agy"] .sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}

body[data-design="agy"] .sort-wrap select {
  appearance: none;
  background: #131720;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  min-height: 44px;
  padding: 6px 34px 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

body[data-design="agy"] .sort-wrap select:focus {
  border-color: var(--accent);
  color: var(--ink);
  outline: none;
}

body[data-design="agy"] .sort-wrap .chevron-arrow {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 12px;
  color: var(--muted);
  pointer-events: none;
  transform: rotate(90deg);
}

body[data-design="agy"] .filter-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(156, 182, 248, 0.12);
  border: 1px solid rgba(156, 182, 248, 0.25);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
}

body[data-design="agy"] .reset-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  min-height: 44px;
  padding: 0 8px;
  text-decoration: none;
  transition: color 0.15s ease;
}

body[data-design="agy"] .reset-link:hover {
  color: var(--accent);
}

body[data-design="agy"] .reset-link svg {
  width: 14px;
  height: 14px;
}

body[data-design="agy"] .results-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--surface-border);
  padding-block: 8px 16px;
  margin-bottom: 24px;
}

body[data-design="agy"] .heading-stat {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

body[data-design="agy"] .heading-stat strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"] .heading-stat span {
  color: var(--muted);
  font-size: 14.5px;
}

/* ==========================================================================
   3. Countries Grid & Country Tiles
   ========================================================================== */

body[data-design="agy"] .country-tile {
  text-decoration: none;
}

body[data-design="agy"] .country-tile:hover {
  border-color: var(--surface-border-hover);
}

body[data-design="agy"] .country-flag {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

body[data-design="agy"] .country-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-design="agy"] .country-info h3 {
  font-size: 18px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
}

body[data-design="agy"] .country-info span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

body[data-design="agy"] .country-tile .chevron {
  color: var(--subtle);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

body[data-design="agy"] .country-tile:hover .chevron {
  color: var(--accent);
  transform: translateX(2px);
}

/* ==========================================================================
   4. Collections (Guides) Grid & Guide Cards
   ========================================================================== */

body[data-design="agy"] .guide-card {
  text-decoration: none;
}

body[data-design="agy"] .guide-icon {
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(156, 182, 248, 0.1);
  color: var(--accent);
  flex-shrink: 0;
}

body[data-design="agy"] .guide-icon svg {
  width: 22px;
  height: 22px;
}

body[data-design="agy"] .guide-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body[data-design="agy"] .guide-info h3 {
  line-height: 1.35;
}

body[data-design="agy"] .guide-read svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

body[data-design="agy"] .guide-card:hover .guide-read svg {
  transform: translateX(3px);
}

/* ==========================================================================
   5. Detail Page (Hero, Variant Tabs, Variant Panels & 15 Facts)
   ========================================================================== */

body[data-design="agy"] .detail-top,
body[data-design="agy"] .variants-section {
  max-width: 1120px;
}

body[data-design="agy"] .detail-top {
  padding-top: 24px;
}

body[data-design="agy"] .detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 340px);
  gap: 48px;
  align-items: center;
  padding-block: 16px 40px;
  border-bottom: 1px solid var(--surface-border);
}

body[data-design="agy"] .detail-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body[data-design="agy"] .detail-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 14px;
}

body[data-design="agy"] .detail-tags .category,
body[data-design="agy"] .detail-tags .network-badge,
body[data-design="agy"] .variant-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  line-height: 1.35;
}

body[data-design="agy"] .detail-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

body[data-design="agy"] .detail-summary {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 65ch;
  margin-top: 14px;
  margin-bottom: 0;
}

body[data-design="agy"] .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

body[data-design="agy"] .hero-ctas .cta-visit {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

body[data-design="agy"] .hero-ctas .cta-visit:hover {
  background: var(--accent-hover);
}

body[data-design="agy"] .detail-disclosure {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 14px;
  margin-bottom: 0;
}

body[data-design="agy"] .detail-disclosure a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-design="agy"] .detail-card-art {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

body[data-design="agy"] .detail-card-art .designed-card {
  transform: rotate(-5deg) perspective(1000px);
  border-radius: 12px;
  box-shadow: 0 20px 44px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Variants Section */
body[data-design="agy"] .variants-section {
  padding-block: 24px 48px;
}

body[data-design="agy"] .variant-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
}

body[data-design="agy"] .variant-heading h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

body[data-design="agy"] .variant-checked {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"] .variant-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

body[data-design="agy"] .variant-jumps a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

body[data-design="agy"] [data-variant-reader] .variant-panel {
  scroll-margin-top: 8px;
}
body[data-design="agy"] [data-active-variant] > .variant-panel {
  margin-bottom: 0;
}
body[data-design="agy"] .detail-card-art > [data-variant-art] { width: 100%; }

body[data-design="agy"] .variant-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 56px;
  scroll-margin-top: 84px;
}

body[data-design="agy"] .variants-section > .variant-panel:last-child {
  margin-bottom: 0;
}

body[data-design="agy"] .variant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 0;
  margin-bottom: 0;
}

body[data-design="agy"] .variant-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body[data-design="agy"] .variant-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

body[data-design="agy"] .variant-title-row h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

body[data-design="agy"] .variant-region {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

body[data-design="agy"] .variant-header-actions {
  display: flex;
  gap: 12px;
  flex-direction: column;
  align-items: flex-end;
  max-width: 360px;
}

body[data-design="agy"] .variant-availability { margin: 0; text-align: right; font-size: 14px; line-height: 1.55; }
body[data-design="agy"] .variant-availability span { color: var(--muted); margin-right: 8px; }
body[data-design="agy"] .variant-availability strong { font-weight: 500; color: #efc375; }
body[data-design="agy"] .variant-availability[data-residence-status="eligible"] strong { color: #a8c9bf; }
body[data-design="agy"] .variant-alternatives { min-height: 44px; font-size: 14px; }

body[data-design="agy"] .variant-apply {
  min-height: 44px;
  padding: 8px 20px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 8px;
}

/* One reading column: labels and terms keep the same alignment in every group. */

body[data-design="agy"] .variant-fact-section h4 {
  margin: 0;
  font-weight: 650;
  line-height: 1.5;
}

body[data-design="agy"] .variant-facts {
  display: block;
  margin: 0;
  padding: 0;
}

body[data-design="agy"] .variant-fact {
  min-width: 0;
  padding: 20px 16px;
  border-top: 0;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 24px;
}

body[data-design="agy"] .variant-fact dt {
  display: block;
  margin: 0;
  padding-top: 2px;
}

body[data-design="agy"] .variant-fact .fact-lbl {
  line-height: 1.6;
}

body[data-design="agy"] .variant-fact dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: start;
  margin: 0;
  min-width: 0;
}

body[data-design="agy"] .variant-fact .fact-content {
  min-width: 0;
}

body[data-design="agy"] .variant-fact dd strong {
  display: block;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .variant-fact .fact-cond {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .variant-fact .fact-references {
  min-width: 0;
  margin: -8px 0;
}

body[data-design="agy"] .variant-fact .fact-references[open] {
  grid-column: 1 / -1;
  margin: 0;
}

body[data-design="agy"] .variant-fact .fact-references summary {
  width: fit-content;
  min-height: 44px;
  padding: 12px 4px;
  font-size: 13px;
  color: var(--subtle);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}

body[data-design="agy"] .variant-fact .fact-references summary:hover {
  color: var(--accent);
}

body[data-design="agy"] .variant-fact .fact-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  margin-top: 6px;
  margin-right: 12px;
  overflow-wrap: anywhere;
}

body[data-design="agy"] .variant-fact .fact-source:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-design="agy"] .variant-fact .fact-source svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

body[data-design="agy"] .variant-fact .fact-source span {
  min-width: 0;
}

body[data-design="agy"] .variant-fact .fact-source time {
  color: var(--subtle);
  font-size: 12px;
}

/* Variant Notices */
body[data-design="agy"] .variant-notice {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(245, 166, 35, 0.05);
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-left: 3px solid var(--banner-accent);
  border-radius: 8px;
}

body[data-design="agy"] .variant-notice .notice-head strong {
  font-size: 15.5px;
  color: #ffca66;
}

body[data-design="agy"] .variant-notice p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.5;
}

body[data-design="agy"] .variant-notice .fact-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--banner-accent);
  text-decoration: none;
  margin-top: 6px;
}

body[data-design="agy"] .variant-notice .fact-source time {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

/* ==========================================================================
   6. Comparison Table Page (Sticky Columns & Rows, Local Scroll)
   ========================================================================== */

body[data-design="agy"] .compare-page {
  padding-top: 24px;
  padding-bottom: 48px;
}

body[data-design="agy"] .compare-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}

body[data-design="agy"] .compare-heading h1 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

body[data-design="agy"] .compare-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding-block: 16px 14px;
  border-bottom: 1px solid var(--surface-border);
  margin-bottom: 12px;
}

body[data-design="agy"] .compare-toolbar-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

body[data-design="agy"] .compare-toolbar-field select {
  background: #131720;
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  color: var(--ink);
  font-size: 15px;
  min-height: 44px;
  padding: 0 34px 0 14px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

body[data-design="agy"] .compare-toolbar-field select:focus {
  border-color: var(--accent);
  outline: none;
}

body[data-design="agy"] .compare-toolbar-field .chevron-icon {
  position: absolute;
  right: 12px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  transform: rotate(90deg);
}

body[data-design="agy"] .compare-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

body[data-design="agy"] .compare-limit {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-design="agy"] .compare-table-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13.5px;
  color: var(--subtle);
  padding-block: 4px 12px;
}

body[data-design="agy"] .compare-scroll-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

body[data-design="agy"] [data-comparison-position] {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"] .compare-scroll-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-design="agy"] .compare-scroll-buttons button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #161b26;
  border: 1px solid var(--surface-border);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body[data-design="agy"] .compare-scroll-buttons button:hover:not(:disabled) {
  background: var(--paper-hover);
  border-color: var(--surface-border-hover);
  color: #ffffff;
}

body[data-design="agy"] .compare-scroll-buttons button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Comparison Scroller Container */
body[data-design="agy"] .comparison-scroll {
  position: relative;
  isolation: isolate;
  overflow-x: auto;
  overflow-y: auto;
  max-height: max(480px, calc(100svh - 220px));
  background: var(--canvas);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: #2a3449 #0f131c;
  -webkit-overflow-scrolling: touch;
}

body[data-design="agy"] .comparison-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body[data-design="agy"] .comparison-scroll::-webkit-scrollbar-track {
  background: #0f131c;
}

body[data-design="agy"] .comparison-scroll::-webkit-scrollbar-thumb {
  background: #2a3449;
  border-radius: 4px;
}

/* Semantic Comparison Table */
body[data-design="agy"] .comparison-table {
  --comparison-card-width: 250px;
  --comparison-feature-width: 280px;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 15px;
}

body[data-design="agy"] .comparison-table th,
body[data-design="agy"] .comparison-table td {
  width: var(--comparison-feature-width);
  min-width: var(--comparison-feature-width);
  max-width: var(--comparison-feature-width);
  padding: 18px 20px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  overflow-wrap: anywhere;
}

body[data-design="agy"] .comparison-table tr > :first-child {
  width: var(--comparison-card-width);
  min-width: var(--comparison-card-width);
  max-width: var(--comparison-card-width);
}

body[data-design="agy"] .comparison-table th:last-child,
body[data-design="agy"] .comparison-table td:last-child {
  border-right: 0;
}

body[data-design="agy"] .comparison-table tbody tr:last-child > * {
  border-bottom: 0;
}

/* Sticky Header Row */
body[data-design="agy"] .comparison-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-block: 14px;
  background: #161a26;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  border-bottom: 2px solid var(--surface-border);
  border-right: 1px solid var(--line);
}

/* Sticky First Column */
body[data-design="agy"] .comparison-table tbody th {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #131722;
  color: var(--ink);
  font-weight: 500;
  box-shadow: 6px 0 16px rgba(0, 0, 0, 0.45);
  border-right: 1px solid var(--surface-border);
}

/* Intersection Cell (Top-Left corner) */
body[data-design="agy"] .comparison-table .col-card {
  position: sticky;
  left: 0;
  z-index: 10;
  background: #181d2c !important;
}

/* Card Information inside Sticky TH */
body[data-design="agy"] .compare-card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 100%;
}

body[data-design="agy"] .compare-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--subtle);
  font-weight: 500;
  min-height: 28px;
}

body[data-design="agy"] .compare-remove {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--subtle);
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

body[data-design="agy"] .compare-remove:hover {
  color: #ff7878;
  background: rgba(255, 120, 120, 0.1);
}

body[data-design="agy"] .compare-remove svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
}

body[data-design="agy"] .compare-card-header .card-visual {
  width: min(160px, 100%);
  margin-inline: auto;
}

body[data-design="agy"] .compare-card-header select[data-compare-card] {
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  background: #0f131c;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
}

body[data-design="agy"] .compare-product-name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}

body[data-design="agy"] .compare-product-name .card-name-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}

body[data-design="agy"] .compare-product-name .card-name-link:hover {
  color: var(--accent);
}

body[data-design="agy"] .compare-product-name span {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 2px;
}

body[data-design="agy"] .compare-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

body[data-design="agy"] .compare-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

body[data-design="agy"] .compare-apply:hover {
  background: var(--accent-hover);
}

body[data-design="agy"] .compare-partner-note {
  font-size: 12px;
  color: var(--subtle);
  line-height: 1.35;
  text-align: center;
}

/* Feature Data Cells (TD) */
body[data-design="agy"] .comparison-table td {
  background: var(--paper);
  color: var(--ink-secondary);
  line-height: 1.55;
}

body[data-design="agy"] .comparison-table td.is-emphasis {
  background: #171c2b;
}

body[data-design="agy"] .comparison-table td > span {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"] .comparison-table td.is-emphasis > span {
  color: var(--accent);
  font-weight: 650;
}

body[data-design="agy"] .comparison-table .fact-note {
  display: block;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
}

body[data-design="agy"] .comparison-table tbody tr:hover td {
  background: #191f30;
}

body[data-design="agy"] .comparison-table tbody tr:hover th {
  background: #161b28;
}

/* ==========================================================================
   7. Editorial Long-form Pages (Methodology / Disclosure / Privacy)
   ========================================================================== */

body[data-design="agy"] .prose {
  padding-top: 28px;
  padding-bottom: 56px;
}

body[data-design="agy"] .prose .lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  margin-block: 20px 32px;
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: 24px;
  font-weight: 500;
}

body[data-design="agy"] .prose-section {
  margin-bottom: 36px;
}

body[data-design="agy"] .prose-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

body[data-design="agy"] .prose-section p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-secondary);
  margin-bottom: 16px;
}

body[data-design="agy"] .prose-footer {
  padding-top: 20px;
  border-top: 1px solid var(--surface-border);
}

/* ==========================================================================
   8. 404 & Empty States
   ========================================================================== */

body[data-design="agy"] .empty-page {
  text-align: center;
  padding-block: 80px 100px;
}

body[data-design="agy"] .empty-page .error-code {
  display: block;
  font-size: clamp(64px, 10vw, 100px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

body[data-design="agy"] .empty-page h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

body[data-design="agy"] .empty-page p {
  font-size: 16px;
  color: var(--muted);
  margin: 0 auto 28px;
  max-width: 48ch;
  line-height: 1.6;
}

/* ==========================================================================
   9. Responsive Breakpoints & Mobile Optimization (down to 320px)
   ========================================================================== */

@media (max-width: 1279px) {
  body[data-design="agy"] .detail-hero {
    gap: 36px;
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1024px) {
  body[data-design="agy"] .countries-grid,
  body[data-design="agy"] .collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body[data-design="agy"] .catalog-cockpit .filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body[data-design="agy"] .search-field {
    grid-column: 1 / -1;
  }
  body[data-design="agy"] .detail-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-design="agy"] .detail-card-art {
    order: -1;
    width: 260px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  body[data-design="agy"] .compare-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  body[data-design="agy"] .compare-toolbar-field,
  body[data-design="agy"] .compare-toolbar-field select {
    width: 100%;
  }
  body[data-design="agy"] .compare-actions {
    margin-left: 0;
    justify-content: space-between;
    width: 100%;
  }
  body[data-design="agy"] .compare-table-hint {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  body[data-design="agy"] .compare-scroll-tools {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  body[data-design="agy"] .countries-grid,
  body[data-design="agy"] .collections-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-design="agy"] .variant-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 18px 0;
  }
  body[data-design="agy"] .variant-fact dd {
    display: block;
  }
  body[data-design="agy"] .variant-fact .fact-references {
    margin: 4px 0 -8px;
  }
  body[data-design="agy"] .variant-fact .fact-lbl {
    color: var(--accent);
  }
  body[data-design="agy"] .variant-fact-section h4 {
    padding-inline: 12px;
  }
  body[data-design="agy"] .variant-header {
    flex-direction: column;
    align-items: flex-start;
  }
  body[data-design="agy"] .variant-header-actions {
    width: 100%;
    align-items: flex-start;
    max-width: none;
  }
  body[data-design="agy"] .variant-availability { text-align: left; }
  body[data-design="agy"] .variant-apply {
    width: 100%;
  }
  /* Mobile Sticky Table Column & Local Scroll */
  body[data-design="agy"] .comparison-table {
    --comparison-card-width: 140px;
    --comparison-feature-width: min(240px, calc(100vw - 170px));
  }
  body[data-design="agy"] .comparison-table thead th {
    white-space: normal;
    font-size: 13.5px;
    padding: 12px 14px;
  }
  body[data-design="agy"] .comparison-table td {
    padding: 14px;
  }
  body[data-design="agy"] .comparison-table tbody th {
    padding: 14px 12px;
  }
  body[data-design="agy"] .compare-card-header .card-visual {
    width: 100px;
  }
  body[data-design="agy"] .compare-product-name {
    font-size: 15px;
  }
  body[data-design="agy"] .compare-product-name span {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  body[data-design="agy"] .catalog-cockpit .filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-design="agy"] .select-field select,
  body[data-design="agy"] .search-field input {
    font-size: 16px;
  }
  body[data-design="agy"] .detail-hero h1 {
    font-size: 28px;
  }
  body[data-design="agy"] .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  body[data-design="agy"] .hero-ctas .button {
    width: 100%;
  }
  body[data-design="agy"] .variant-panel {
    padding: 0;
  }
}

@media (max-width: 359px) {
  body[data-design="agy"] .comparison-table {
    --comparison-card-width: 126px;
    --comparison-feature-width: calc(100vw - 156px);
  }
  body[data-design="agy"] .compare-card-header .card-visual {
    width: 88px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  body[data-design="agy"] .country-tile,
  body[data-design="agy"] .guide-card,
  body[data-design="agy"] .variant-panel,
  body[data-design="agy"] .comparison-scroll,
  body[data-design="agy"] .button {
    transition: none !important;
  }
}

/* Some system fonts omit this regional flag; retain a legible ISO marker. */
body[data-design="agy"] .country-flag.country-code { font-family: var(--font); font-size: 16px; font-weight: 650; color: var(--accent); }

/* ux.css */
/* TopCardX UX Enhancements - Dark theme accessible native components */
:root {
  --ux-bg: #0b0e14;
  --ux-surface: #141824;
  --ux-line: #1e2638;
  --ux-accent: #9cb6f8;
  --ux-ink: #f1f5f9;
  --ux-muted: #94a3b8;
  --ux-subtle: #64748b;
}

/* Ensure hidden attribute is never overridden by display: flex/grid */
[hidden],
.country-tile[hidden] {
  display: none !important;
}

/* Clean up native select and remove dangling sibling SVGs without layout break */
select[data-country-search][hidden],
select[data-country-search].country-search-hidden {
  display: none !important;
}

select[data-country-search][hidden] ~ svg,
select[data-country-search].country-search-hidden ~ svg,
.country-picker-btn ~ svg:not(.country-picker-btn-chevron svg) {
  display: none !important;
}

/* Country picker opener button (preserves native footprint) */
.country-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: 8px;
  color: var(--ux-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.country-picker-btn:hover {
  border-color: var(--ux-accent);
}

.country-picker-btn[aria-expanded="true"] {
  border-color: var(--ux-accent);
  box-shadow: 0 0 0 1px var(--ux-accent);
}

.country-picker-btn-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-picker-btn-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ux-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.country-picker-btn[aria-expanded="true"] .country-picker-btn-chevron {
  transform: rotate(180deg);
}

/* Native Popover search dialog */
.country-picker-popover {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: min(480px, 80vh);
  background: var(--ux-surface);
  border: 1px solid var(--ux-line);
  border-radius: 12px;
  color: var(--ux-ink);
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  z-index: 1000;
}

.country-picker-popover:not(:popover-open) {
  display: none;
}

.country-picker-popover::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.country-picker-search-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--ux-bg);
  border: 1px solid var(--ux-line);
  border-radius: 8px;
  color: var(--ux-ink);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.country-picker-search-input:focus {
  border-color: var(--ux-accent);
  box-shadow: 0 0 0 1px var(--ux-accent);
}

.country-picker-listbox {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  margin: 0;
  outline: none;
}

.country-picker-option {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--ux-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.1s ease, color 0.1s ease;
}

.country-picker-option:hover,
.country-picker-option.is-active {
  background: var(--ux-line);
  color: var(--ux-accent);
}

.country-picker-option.is-selected,
.country-picker-option[aria-selected="true"] {
  background: rgba(156, 182, 248, 0.15);
  color: var(--ux-accent);
  font-weight: 600;
}

.country-picker-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--ux-muted);
  font-size: 14px;
}

/* Compact editorial markets, grouped so a residence is easy to scan. */
.country-directory-section { margin-top: 24px; }
.country-directory-group h2 { margin: 0 0 6px; color: var(--ux-ink); font-size: 19px; font-weight: 650; }
.country-directory-group + .country-directory-group { margin-top: 4px; }
.country-directory-group .countries-grid { margin-bottom: 32px !important; }
.country-directory-section { margin-bottom: 48px; }
.country-tile .country-count { color: var(--ux-muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Thin sticky detail section navigation */
.detail-section-nav {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: rgba(20, 24, 36, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ux-line);
  margin: 0 0 20px 0;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.detail-section-nav::-webkit-scrollbar {
  display: none;
}

.detail-section-nav a[data-detail-section] {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ux-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  line-height: 1.25;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.detail-section-nav a[data-detail-section]:hover {
  color: var(--ux-ink);
  background: rgba(255, 255, 255, 0.04);
}

.detail-section-nav a[data-detail-section].is-active,
.detail-section-nav a[data-detail-section][aria-current="location"] {
  color: var(--ux-accent);
  background: rgba(156, 182, 248, 0.12);
  font-weight: 600;
}

/* Heading scroll offset for 64px header and sticky nav */
[id^="variant-"], #card-comparison, h4[id^="variant-"] {
  scroll-margin-top: 118px;
}

/* Mobile navigation active link highlight */
.mobile-nav a.active,
#mobile-menu a.active {
  color: var(--ux-accent) !important;
  background: rgba(156, 182, 248, 0.12);
  font-weight: 600;
  border-radius: 6px;
}

/* Card art wrapper link maintaining .card-identity layout */
a.card-art-link {
  display: block;
  flex-shrink: 0;
  width: clamp(136px, 12vw, 184px);
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

a.card-art-link:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

a.card-art-link:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}

a.card-art-link .card-visual {
  width: 100% !important;
}

/* Component focus and responsive integration */
.country-picker-btn:focus-visible,
.detail-section-nav a:focus-visible {
  outline: 2px solid var(--ux-accent);
  outline-offset: 2px;
}
body[data-design="agy"] .home-select .country-picker-btn {
  height: 100%; border: 0; background: transparent; font-size: 15px;
}
body[data-design="agy"] .compare-toolbar-field .country-picker-btn { width: 230px; }
body[data-design="agy"] .quick-toolbar .country-picker-btn { width: min(260px, 100%); }
body[data-design="agy"] .select-field .country-picker-btn { border: 0; background: transparent; }
@media (max-width: 640px) {
  .detail-section-nav { padding-inline: 4px; gap: 2px; flex-wrap: wrap; }
  .detail-section-nav a[data-detail-section] { padding-inline: 7px; font-size: 14px; }
  body[data-design="agy"] .compare-toolbar-field .country-picker-btn { width: min(230px, 55vw); }
}
@media (max-width: 480px) {
  body[data-design="agy"] .home-select .country-picker-btn { font-size: 16px; padding-inline: 8px; }
  a.card-art-link { width: 136px; }
}
@media (max-width: 359px) {
  a.card-art-link { width: 112px; }
  .detail-section-nav a[data-detail-section] { padding-inline: 6px; }
  [id^="variant-"], #card-comparison { scroll-margin-top: 158px; }
}
@media (prefers-reduced-motion: reduce) {
  .country-picker-btn, .country-picker-option, .country-picker-btn-chevron,
  .detail-section-nav a, a.card-art-link { transition: none; }
}

/* refinement.css */
/* ==========================================================================
   TopCardX — AGY Visual Refinement Layer (Final Authority)
   Strictly scoped under body[data-design="agy"][data-page][data-lang]
   Loading order: site.css -> agy.css -> agy-pages.css -> (page css) -> ux.css -> refinement.css
   ========================================================================== */

/* Shared neutral palette; scoped to the active AGY page after legacy component styles. */
body[data-design="agy"][data-page][data-lang] {
  color-scheme: dark;
  --canvas: #10151b;
  --paper: #181f28;
  --canvas-elevated: #202a36;
  --paper-hover: #252f3c;
  --line: #303b49;
  --surface-border: #303b49;
  --surface-border-hover: #52647b;
  --ink: #edf2f8;
  --ink-secondary: #c7d0dd;
  --muted: #afbccc;
  --subtle: #9baabe;
  --accent: #afc4f1;
  --accent-hover: #c8d8f8;
  --accent-ink: #101b30;
  --ux-bg: var(--canvas);
  --ux-surface: var(--paper);
  --ux-line: var(--line);
  --ux-accent: var(--accent);
  --ux-ink: var(--ink);
  --ux-muted: var(--muted);
  --ux-subtle: var(--subtle);
  --banner-bg: #151d26;
  --banner-border: #303b49;
  background-color: var(--canvas);
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 2. Header & Detail Nav: Remove Blur, Background Gradients & Shadows */
body[data-design="agy"][data-page][data-lang] .header,
body[data-design="agy"][data-page][data-lang] .detail-section-nav {
  background: var(--canvas);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}

body[data-design="agy"][data-page][data-lang] .detail-section-nav a[data-detail-section] {
  color: var(--muted);
  font-size: 14px;
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}

body[data-design="agy"][data-page][data-lang] .detail-section-nav a[data-detail-section]:hover {
  color: var(--ink);
  background: var(--canvas-elevated);
}

body[data-design="agy"][data-page][data-lang] .detail-section-nav a[data-detail-section].is-active,
body[data-design="agy"][data-page][data-lang] .detail-section-nav a[data-detail-section][aria-current="location"] {
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink-secondary);
  font-weight: 600;
}

/* 3. 3 Brand Banners: Restrained Background, Original Artwork & Brand CTAs */
body[data-design="agy"][data-page][data-lang] .offers {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

body[data-design="agy"][data-page][data-lang] .offer-slide {
  --offer-stage: #352922;
  position: relative;
  isolation: isolate;
  background: var(--paper);
}
body[data-design="agy"][data-page][data-lang] .offer-mint { --offer-stage: #183439; }
body[data-design="agy"][data-page][data-lang] #offer-etherfi { --offer-stage: #302b43; }
body[data-design="agy"][data-page][data-lang] .offer-slide::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 43%;
  background: var(--offer-stage);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}
body[data-design="agy"][data-page][data-lang] .offer-copy { max-width: 69ch; }
body[data-design="agy"][data-page][data-lang] .offer-art { z-index: 1; }

body[data-design="agy"][data-page][data-lang] .offer-title {
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .offer-description {
  color: var(--ink-secondary);
  font-size: 16.5px;
}

body[data-design="agy"][data-page][data-lang] .offer-terms {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* 4. Cockpit Toolrow (Filters) */
body[data-design="agy"][data-page][data-lang] .home-search,
body[data-design="agy"][data-page][data-lang] .home-select,
body[data-design="agy"][data-page][data-lang] .search-field,
body[data-design="agy"][data-page][data-lang] .select-field {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 46px;
}

body[data-design="agy"][data-page][data-lang] .home-search:focus-within,
body[data-design="agy"][data-page][data-lang] .home-select:focus-within,
body[data-design="agy"][data-page][data-lang] .search-field:focus-within,
body[data-design="agy"][data-page][data-lang] .select-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

body[data-design="agy"][data-page][data-lang] .home-search input,
body[data-design="agy"][data-page][data-lang] .home-select select,
body[data-design="agy"][data-page][data-lang] .search-field input,
body[data-design="agy"][data-page][data-lang] .select-field select {
  color: var(--ink);
  font-size: 15px;
}

body[data-design="agy"][data-page][data-lang] .home-search input::placeholder,
body[data-design="agy"][data-page][data-lang] .search-field input::placeholder {
  color: var(--subtle);
}

body[data-design="agy"][data-page][data-lang] .search-shortcut {
  color: var(--subtle);
  border: 1px solid var(--line);
  background: transparent;
}

body[data-design="agy"][data-page][data-lang] .home-reset,
body[data-design="agy"][data-page][data-lang] .reset-link {
  color: var(--muted);
  font-size: 14px;
}

body[data-design="agy"][data-page][data-lang] .feed-toolbar {
  border-bottom: 1px solid var(--line);
}

body[data-design="agy"][data-page][data-lang] .feed-topics button {
  color: var(--muted);
  font-size: 15px;
}

body[data-design="agy"][data-page][data-lang] .feed-topics button:hover {
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .feed-topics button.selected {
  color: #ffffff;
}

body[data-design="agy"][data-page][data-lang] .feed-topics button.selected::after {
  background: #ffffff;
}

body[data-design="agy"][data-page][data-lang] .feed-stats select,
body[data-design="agy"][data-page][data-lang] .feed-count {
  color: var(--muted);
  font-size: 14px;
}

body[data-design="agy"][data-page][data-lang] .feed-sort { position: relative; display: flex; align-items: center; }
body[data-design="agy"][data-page][data-lang] .feed-sort-icon { display: none; }

/* 5. Homepage Discovery Cards & Tactile Apply Action */
body[data-design="agy"][data-page][data-lang] .discovery-card {
  background: var(--paper);
  border: 1px solid #293341;
  border-radius: 12px;
  box-shadow: none;
  transform: none;
  transition: border-color 0.15s ease;
}

body[data-design="agy"][data-page][data-lang] .discovery-card:hover {
  border-color: var(--surface-border-hover);
  box-shadow: none;
  transform: none;
}

/* Card Artwork: proportions preserved, hover transform removed */
body[data-design="agy"][data-page][data-lang] a.card-art-link,
body[data-design="agy"][data-page][data-lang] a.card-art-link:hover {
  transform: none;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-brand-title {
  color: var(--ink);
  font-size: 21px;
  font-weight: 600;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-variant-name {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-meta-line {
  color: var(--subtle);
  font-size: 14px;
}

/* The primary benefit is the first reading anchor. */
body[data-design="agy"][data-page][data-lang] .card-feature-lead {
  border-bottom: 1px solid var(--line);
}

body[data-design="agy"][data-page][data-lang] .card-feature-lead .feature-val {
  color: var(--ink);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"][data-page][data-lang] .card-feature-lead .feature-note {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Secondary Feature Rows: 16px value, minimum 14px notes */
body[data-design="agy"][data-page][data-lang] .card-feature-row .feature-label {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}

body[data-design="agy"][data-page][data-lang] .card-feature-row .feature-val {
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

body[data-design="agy"][data-page][data-lang] .card-feature-row .feature-note {
  color: var(--subtle);
  font-size: 15px;
  line-height: 1.6;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-eligibility {
  color: var(--subtle);
  font-size: 15px;
}

body[data-design="agy"][data-page][data-lang] .card-eligibility-val {
  color: var(--ink-secondary);
  font-size: 15px;
  font-weight: 500;
}

body[data-design="agy"][data-page][data-lang] .card-eligibility-note {
  color: var(--subtle);
  font-size: 15px;
}

/* Apply button: Text-width neutral thin border button (44px min-height) */
body[data-design="agy"][data-page][data-lang] .discovery-card .card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link {
  flex: 0 1 auto;
  width: auto;
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #222f44;
  color: var(--accent);
  font-size: 14.5px;
  font-weight: 550;
  border-radius: 6px;
  border: 1px solid #3b4d69;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link:hover {
  background: var(--canvas-elevated);
  border-color: var(--accent);
  color: #ffffff;
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link svg {
  display: inline-block;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

body[data-design="agy"][data-page][data-lang] .discovery-card .card-partner-note {
  color: var(--subtle);
  font-size: 12.5px;
  margin: 8px 0 0;
  text-align: left;
}

/* 6. Country Directory: Compact Row-style Layout */
body[data-design="agy"][data-page][data-lang] .countries-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 20px;
  margin-bottom: 48px;
}

body[data-design="agy"][data-page][data-lang] .country-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  height: auto;
  padding: 12px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: background-color 0.1s ease, color 0.1s ease;
}

body[data-design="agy"][data-page][data-lang] .country-tile:hover {
  background: var(--paper);
  transform: none;
}

body[data-design="agy"][data-page][data-lang] .country-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

body[data-design="agy"][data-page][data-lang] .country-tile .country-flag {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

body[data-design="agy"][data-page][data-lang] .country-tile .country-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

body[data-design="agy"][data-page][data-lang] .country-tile .country-info h3 {
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 0;
}

body[data-design="agy"][data-page][data-lang] .country-tile:hover .country-info h3 {
  color: #ffffff;
}

/* The page introduction explains eligibility; individual links only need the country name. */
body[data-design="agy"][data-page][data-lang] .country-tile .country-info span,
body[data-design="agy"][data-page][data-lang] .country-tile .chevron {
  display: none;
}

@media (max-width: 1100px) {
  body[data-design="agy"][data-page][data-lang] .countries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  body[data-design="agy"][data-page][data-lang] .countries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body[data-design="agy"][data-page][data-lang] .countries-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 7. Guides (Collections) Page: Flat Clean Entries without decorative pedestal */
body[data-design="agy"][data-page][data-lang] .collections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

body[data-design="agy"][data-page][data-lang] .guide-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: auto;
  box-shadow: none;
  transform: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body[data-design="agy"][data-page][data-lang] .guide-card:hover {
  box-shadow: none;
  transform: none;
}

body[data-design="agy"][data-page][data-lang] .guide-icon {
  display: none;
}

body[data-design="agy"][data-page][data-lang] .guide-info h3 {
  font-size: 17.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 0;
}

body[data-design="agy"][data-page][data-lang] .guide-info p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

body[data-design="agy"][data-page][data-lang] .guide-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
  min-height: 32px;
}

@media (max-width: 900px) {
  body[data-design="agy"][data-page][data-lang] .collections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body[data-design="agy"][data-page][data-lang] .collections-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 8. Comparison Table: Neutral Matrix with Intuitive Status Signals */
body[data-design="agy"][data-page][data-lang] .comparison-table td,
body[data-design="agy"][data-page][data-lang] .quick-table td {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .comparison-table thead th,
body[data-design="agy"][data-page][data-lang] .quick-table thead th {
  background: var(--canvas-elevated);
  border-bottom: 2px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .comparison-table tbody th,
body[data-design="agy"][data-page][data-lang] .quick-table tbody th {
  background: var(--canvas);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 1px 0 0 var(--line);
}

body[data-design="agy"][data-page][data-lang] .comparison-table .col-card,
body[data-design="agy"][data-page][data-lang] .quick-table thead th:first-child {
  background: var(--canvas-elevated);
}

/* Quiet emphasis for the decision columns. */
body[data-design="agy"][data-page][data-lang] .comparison-table td.is-emphasis,
body[data-design="agy"][data-page][data-lang] .quick-table td.is-emphasis {
  background: #19222d;
}

body[data-design="agy"][data-page][data-lang] .comparison-table tbody tr:hover td,
body[data-design="agy"][data-page][data-lang] .quick-table tbody tr:hover td {
  background: var(--canvas-elevated);
}

body[data-design="agy"][data-page][data-lang] .dense-val {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

body[data-design="agy"][data-page][data-lang] td.is-emphasis .dense-val {
  color: var(--ink);
  font-weight: 650;
}

body[data-design="agy"][data-page][data-lang] .dense-note {
  color: var(--subtle);
  font-size: 12.5px;
}

/* Green Checkmark for Support: Intuitive & accessible, no neon ring */
body[data-design="agy"][data-page][data-lang] [data-support="yes"] {
  --support-bg: #15803d;
  --support-ink: #ffffff;
  --support-ring: transparent;
}

body[data-design="agy"][data-page][data-lang] [data-support="no"] {
  --support-bg: #3c2328;
  --support-ink: #e89ea8;
  --support-ring: transparent;
}

body[data-design="agy"][data-page][data-lang] :is([data-support="conditional"], [data-support="paused"]) {
  --support-bg: #3d311f;
  --support-ink: #eec170;
  --support-ring: transparent;
}

body[data-design="agy"][data-page][data-lang] .support-caption {
  color: var(--muted);
  font-size: 12.5px;
}

/* Popover Terms Dialog */
body[data-design="agy"][data-page][data-lang] .compare-terms:popover-open {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8);
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .compare-terms::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: none;
}

body[data-design="agy"][data-page][data-lang] .compare-terms-card {
  color: var(--muted);
  font-size: 13.5px;
}

body[data-design="agy"][data-page][data-lang] .compare-terms h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}

body[data-design="agy"][data-page][data-lang] .dense-full-val {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 600;
}

body[data-design="agy"][data-page][data-lang] .dense-full-note {
  color: var(--ink-secondary);
  font-size: 14.5px;
  line-height: 1.6;
}

body[data-design="agy"][data-page][data-lang] .compare-terms-close {
  width: 44px;
  height: 44px;
  color: var(--muted);
  font-size: 24px;
  border-radius: 6px;
}

body[data-design="agy"][data-page][data-lang] .compare-terms-close:hover {
  background: var(--canvas-elevated);
  color: var(--ink);
}

/* 9. Detail Page Fact Rows */
body[data-design="agy"][data-page][data-lang] .detail-tags .category,
body[data-design="agy"][data-page][data-lang] .detail-tags .network-badge,
body[data-design="agy"][data-page][data-lang] .variant-badge {
  background: var(--canvas-elevated);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 13.5px;
  font-weight: 500;
  padding: 3px 9px;
}

body[data-design="agy"][data-page][data-lang] .variant-heading {
  border-bottom: 1px solid var(--line);
}

body[data-design="agy"][data-page][data-lang] .variant-jumps a {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  font-size: 14.5px;
  border-radius: 6px;
}

body[data-design="agy"][data-page][data-lang] .variant-jumps a:hover {
  background: var(--canvas-elevated);
  border-color: var(--surface-border-hover);
  color: var(--ink);
}

body[data-design="agy"][data-page][data-lang] .variant-jumps a[aria-selected="true"] {
  background: var(--canvas-elevated);
  border-color: var(--surface-border-hover);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}

/* Hash destinations can receive browser focus. Do not frame the whole article;
   keyboard focus remains visible on the edition tabs and section links. */
body[data-design="agy"][data-page][data-lang] .variant-panel:focus {
  outline: none;
}
body[data-design="agy"][data-page][data-lang] :is(.variant-jumps a, .detail-section-nav a):focus-visible {
  outline: 2px solid var(--ink-secondary);
  outline-offset: 3px;
}

body[data-design="agy"][data-page][data-lang] .variant-header {
  border-bottom: 1px solid var(--line);
}

body[data-design="agy"][data-page][data-lang] .variant-fact-section h4 {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  padding: 18px 0 14px;
  margin-bottom: 4px;
}

body[data-design="agy"][data-page][data-lang] .variant-fact {
  border-bottom: 1px solid var(--line);
  padding-inline: 0;
}

body[data-design="agy"][data-page][data-lang] .variant-fact .fact-lbl {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}

body[data-design="agy"][data-page][data-lang] .variant-fact dd strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

body[data-design="agy"][data-page][data-lang] .variant-fact .fact-cond {
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.65;
}

/* 10. Notices, Buttons & Editorial Prose */
body[data-design="agy"][data-page][data-lang] .notice {
  background: var(--canvas-elevated);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--ink-secondary);
  font-size: 14.5px;
}

body[data-design="agy"][data-page][data-lang] .button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 6px;
}

body[data-design="agy"][data-page][data-lang] .button.secondary {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px;
  border-radius: 6px;
}

body[data-design="agy"][data-page][data-lang] .button.secondary:hover {
  background: var(--canvas-elevated);
  border-color: var(--surface-border-hover);
  color: #ffffff;
}

body[data-design="agy"][data-page][data-lang] .prose {
  max-width: 740px;
}

body[data-design="agy"][data-page][data-lang] .prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-secondary);
}

/* Keep small screens legible without triggering input zoom on mobile Safari. */
@media (max-width: 799px) {
  body[data-design="agy"][data-page][data-lang] .card-feature-lead .feature-val { font-size: 22px; }
  body[data-design="agy"][data-page][data-lang] :is(.home-search input, .home-select select, .search-field input, .select-field select) { font-size: 16px; }
}
body[data-design="agy"][data-page][data-lang] :is(.home-select select, .select-field select) { background: transparent; border: 0; }
body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link { transform: none; }
body[data-design="agy"][data-page][data-lang] :is(.guide-info p, .card-eligibility) { font-size: 15px; }
body[data-design="agy"][data-page][data-lang] .country-tile .country-info h3 { font-size: 16px; }
body[data-design="agy"][data-page][data-lang] .guide-info p { margin-top: 8px; }
body[data-design="agy"][data-page][data-lang] .guide-card { padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
body[data-design="agy"][data-page][data-lang] .guide-card:hover { background: transparent; border-color: var(--accent); }
body[data-design="agy"][data-page][data-lang] .variant-fact-section > h4 { background: transparent; }
body[data-design="agy"][data-page][data-lang] .footer { background: var(--canvas); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) {
  body[data-design="agy"][data-page][data-lang] :is(.discovery-card, .card-apply-link, .country-tile, .guide-card) { transition: none; }
}

/* Shared reading rhythm: brand artwork carries the color, controls stay quiet. */
body[data-design="agy"][data-page][data-lang] .desktop-nav a.active::after,
body[data-design="agy"][data-page][data-lang] .feed-topics button.selected::after {
  background: var(--accent);
}
body[data-design="agy"][data-page][data-lang] .desktop-nav a { padding-inline: 4px; }
body[data-design="agy"][data-page][data-lang] .language {
  border: 1px solid var(--line);
  border-radius: 7px;
  min-height: 36px;
  padding: 0 10px;
}
body[data-design="agy"][data-page][data-lang] .offer-title { letter-spacing: -.035em; }
body[data-design="agy"][data-page][data-lang] .offer-dot[aria-current="true"] span {
  width: 22px;
  border-radius: 4px;
  background: var(--ink);
}
body[data-design="agy"][data-page][data-lang] .feed-toolbar { margin-bottom: 18px; }
body[data-design="agy"][data-page][data-lang] .card-feature-row { column-gap: 14px; }
body[data-design="agy"][data-page][data-lang] .card-eligibility { line-height: 1.65; }
body[data-design="agy"][data-page][data-lang] :is(.home-search, .home-select, .search-field, .select-field) { border-radius: 8px; }
body[data-design="agy"][data-page][data-lang] :is(.country-picker-btn, .country-picker-search-input) { border-radius: 8px; }
body[data-design="agy"][data-page][data-lang] .country-picker-popover { border-color: var(--surface-border-hover); }
body[data-design="agy"][data-page][data-lang] .country-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 4px; }
body[data-design="agy"][data-page][data-lang] .country-picker-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
body[data-design="agy"][data-page][data-lang] .country-picker-close { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 25px; cursor: pointer; }
body[data-design="agy"][data-page][data-lang] .country-picker-close:hover { background: var(--canvas-elevated); color: var(--ink); }

/* Continuous detail reading; section hierarchy comes from type and rules. */
body[data-design="agy"][data-page][data-lang] .detail-hero h1 { letter-spacing: -.035em; }
body[data-design="agy"][data-page][data-lang] .detail-section-nav { padding-inline: 0; gap: 20px; }
/* Root scroll padding already reserves 100px; avoid doubling the anchor offset. */
body[data-design="agy"][data-page][data-lang] [data-variant-reader] [id^="variant-"],
body[data-design="agy"][data-page][data-lang] #card-comparison { scroll-margin-top: 28px; }
body[data-design="agy"][data-page][data-lang] .detail-section-nav { flex-wrap: nowrap; }
body[data-design="agy"][data-page][data-lang] .variant-fact-section { margin-top: 24px; }
body[data-design="agy"][data-page][data-lang] .variant-fact dd { gap: 24px; }
body[data-design="agy"][data-page][data-lang] .variant-fact .fact-cond { max-width: 74ch; }
body[data-design="agy"][data-page][data-lang] .application-checklist { border-bottom: 1px solid var(--line); }
body[data-design="agy"][data-page][data-lang] .application-checklist h5 { font-size: 15px; color: var(--accent); padding-top: 14px; }
body[data-design="agy"][data-page][data-lang] .application-checklist dl > div + div { border-top: 1px solid var(--line); }
body[data-design="agy"][data-page][data-lang] .application-checklist p { font-size: 14px; line-height: 1.75; }
body[data-design="agy"][data-page][data-lang] .checklist-sources summary { font-size: 13px; min-height: 32px; padding-block: 5px; }

/* Dense comparisons share the same surface and clear, quiet row tracking. */
body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table) td { border-right-color: #26313e; }
body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table) tbody tr:hover th { background: var(--canvas-elevated); }
body[data-design="agy"][data-page="compare"][data-lang] .compare-heading h1 { font-size: 24px; }
body[data-design="agy"][data-page][data-lang] .fee-table tbody th a span { color: var(--muted); }
body[data-design="agy"][data-page][data-lang] .fee-table tbody tr:hover > * { background: var(--canvas-elevated); }
body[data-design="agy"][data-page][data-lang] .fee-table thead th { background: var(--paper); }
body[data-design="agy"][data-page][data-lang] .fee-table .fee-total { background: #19222d; }
body[data-design="agy"][data-page][data-lang] .fee-table .fee-total strong { color: var(--ink); }
body[data-design="agy"][data-page][data-lang] .footer-links a:hover { color: var(--accent); }

@media (min-width: 800px) {
  body[data-design="agy"][data-page][data-lang] .offer-slide { padding: 30px 40px 48px; gap: 40px; }
  body[data-design="agy"][data-page][data-lang] .offer-art { width: min(100%, 316px); }
  body[data-design="agy"][data-page][data-lang] .variant-fact, body[data-design="agy"][data-page][data-lang] .application-checklist dl > div { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (min-width: 861px) {
  body[data-design="agy"][data-page][data-lang] .home-cockpit { position: sticky; top: 64px; z-index: 20; background: var(--canvas); padding-block: 12px; margin-top: -12px; }
  body[data-design="agy"][data-page][data-lang] .home-cockpit .home-filters { margin-bottom: 0; }
}
@media (max-width: 799px) {
  body[data-design="agy"][data-page][data-lang] .feed-toolbar { margin-bottom: 14px; }
  body[data-design="agy"][data-page][data-lang] .offer-slide::before { width: 38%; opacity: .65; }
  body[data-design="agy"][data-page][data-lang] .offer-art .designed-card { transform: rotate(-6deg); }
  body[data-design="agy"][data-page][data-lang] .detail-section-nav { column-gap: 18px; row-gap: 0; }
  body[data-design="agy"][data-page][data-lang] .variant-fact-section h4 { font-size: 18px; padding-top: 14px; }
  body[data-design="agy"][data-page][data-lang] .application-checklist dl > div { grid-template-columns: 1fr; gap: 5px; }
  body[data-design="agy"][data-page][data-lang] .application-checklist dt { font-size: 14px; }
  body[data-design="agy"][data-page][data-lang] .language { border-color: transparent; padding-inline: 4px; }
  body[data-design="agy"][data-page][data-lang] .checklist-sources summary { min-height: 44px; padding-block: 10px; }
  body[data-design="agy"][data-page][data-lang] .mobile-nav-fallback { position: static; border-top: 1px solid var(--line); border-bottom: 0; }
  body[data-design="agy"][data-page="compare"][data-lang] .comparison-table { --col-card-w: 152px; }
  body[data-design="agy"][data-page="compare"][data-lang] .compare-product-name :is(strong, span) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    max-height: 36px;
  }
}
@media (max-width: 480px) {
  body[data-design="agy"][data-page][data-lang] .home-filters { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-design="agy"][data-page][data-lang] .home-search-wrap { grid-column: 1 / -1; margin-right: 76px; }
  body[data-design="agy"][data-page][data-lang] .home-reset { position: absolute; top: 0; right: 0; padding-inline: 2px; }
  body[data-design="agy"][data-page][data-lang] .offer-slide { padding: 16px 16px 42px; gap: 8px 14px; }
  body[data-design="agy"][data-page][data-lang] .offer-title-mobile { font-size: 25px; }
  body[data-design="agy"][data-page][data-lang] .offer-terms { font-size: 14px; line-height: 1.55; }
  body[data-design="agy"][data-page][data-lang] .offer-controls { bottom: 2px; }
  body[data-design="agy"][data-page][data-lang] .feed-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-block: 0 4px; }
  body[data-design="agy"][data-page][data-lang] .feed-topics { min-width: 0; gap: 12px; padding-bottom: 0; scrollbar-width: none; }
  body[data-design="agy"][data-page][data-lang] .feed-topics button { font-size: 14px; }
  body[data-design="agy"][data-page][data-lang] .feed-stats { width: auto; gap: 4px; }
  body[data-design="agy"][data-page][data-lang] .feed-count { font-size: 13px; }
  body[data-design="agy"][data-page][data-lang] .feed-count-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-design="agy"][data-page][data-lang] .feed-sort { width: 44px; height: 44px; justify-content: center; border-radius: 6px; color: var(--muted); }
  body[data-design="agy"][data-page][data-lang] .feed-sort:is(.is-selected, :hover) { color: var(--accent); }
  body[data-design="agy"][data-page][data-lang] .feed-sort:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  body[data-design="agy"][data-page][data-lang] .feed-sort-icon { display: block; width: 20px; height: 20px; }
  body[data-design="agy"][data-page][data-lang] .feed-sort select { display: block; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px; opacity: 0; padding: 0; }
}

/* polish.css */
/* Shared layout polish for footer, guide index, listing intros and empty states.
   Colors come from theme variables so light and dark themes both apply. */

.card-questions, .search-guides { padding-block: 24px; }
.card-questions h2, .search-guides h2 { margin: 0 0 16px; font-size: 22px; }
.card-question { border-bottom: 1px solid var(--line); }
.card-question summary { padding: 18px 0; font-weight: 600; font-size: 17px; cursor: pointer; }
.card-question summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.card-question-answer { max-width: 80ch; padding: 0 0 20px; overflow-wrap: anywhere; }
.card-question-answer h3 { font-size: 16px; margin: 8px 0 12px; }
.card-question-answer p { font-size: 16px; line-height: 1.7; margin: 8px 0; }
.question-sources { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 10px 16px; font-size: 14px; color: var(--muted); }
.question-sources a, .search-guides a { text-decoration: underline; text-underline-offset: 3px; }
.search-guides ul { list-style: none; padding: 0; margin: 0; }
.search-guides li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 10px 0; font-size: 16px; }
.search-guides li span { color: var(--muted); font-size: 14px; }

/* Listing and editorial intros sit on a quiet full-bleed band. The outset
   border-image paints outside the shell without adding scrollable overflow. */
body[data-design="agy"][data-page][data-lang] {
  --intro-band: #ffffff08;
  --card-shadow: #00000040;
}
body[data-design="agy"][data-page][data-lang] :is(.page-intro, .detail-top, .guide-header) {
  border-image: linear-gradient(180deg, var(--intro-band), transparent) fill 0 / / 0 100vmax;
}
body[data-design="agy"][data-page][data-lang] .page-intro {
  padding-block: 36px 30px;
  margin-bottom: 8px;
}
body[data-design="agy"][data-page][data-lang] .page-intro .page-title {
  letter-spacing: -0.015em;
}
body[data-design="agy"][data-page][data-lang] .page-intro .page-subtitle {
  margin-top: 12px;
  max-width: 64ch;
}

/* Breadcrumbs keep long article titles on one line. */
body[data-design="agy"][data-page][data-lang] .breadcrumb-current {
  min-width: 0;
  max-width: min(48ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Guide index: a featured first guide, then a two-column grid. */
body[data-design="agy"][data-page][data-lang] .guide-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item:first-child {
  grid-column: 1 / -1;
  padding: 30px 32px 26px;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item:hover {
  border-color: var(--surface-border-hover);
  box-shadow: 0 6px 20px var(--card-shadow, transparent);
}
body[data-design="agy"][data-page][data-lang] .guide-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body[data-design="agy"][data-page][data-lang] .guide-list-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--canvas-elevated);
  color: var(--ink-secondary);
  font-weight: 600;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item h2 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item:first-child h2 {
  font-size: clamp(22px, 2.2vw, 27px);
}
body[data-design="agy"][data-page][data-lang] .guide-list-body > p:last-child {
  font-size: 15px;
  line-height: 1.75;
  max-width: 62em;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item > .guide-list-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-weight: 600;
}
body[data-design="agy"][data-page][data-lang] .guide-list-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}
body[data-design="agy"][data-page][data-lang] .guide-list-item:hover .guide-list-cta svg {
  transform: translateX(3px);
}
body[data-design="agy"][data-page][data-lang] .guide-browse-heading {
  margin: 8px 0 16px;
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-card:hover {
  border-color: var(--surface-border-hover);
  background: var(--paper);
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--canvas-elevated);
  color: var(--accent);
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-icon svg {
  width: 20px;
  height: 20px;
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-info {
  flex: 1;
  min-width: 0;
}
body[data-design="agy"][data-page][data-lang] .collections-grid .guide-read {
  align-self: center;
  margin-top: 0;
  white-space: nowrap;
}

/* Guide byline: editorial owner and review date on one quiet line. */
body[data-design="agy"][data-page][data-lang] .guide-reviewed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-variant-numeric: tabular-nums;
}
body[data-design="agy"][data-page][data-lang] .guide-byline {
  color: var(--ink-secondary);
  font-weight: 600;
}
body[data-design="agy"][data-page][data-lang] .guide-byline:hover {
  color: var(--accent);
}

/* Country directory: counts carry their unit. */
body[data-design="agy"][data-page][data-lang] .country-tile .country-count {
  white-space: nowrap;
}
body[data-design="agy"][data-page][data-lang] .country-tile .country-count > span {
  font-size: 12px;
  color: var(--subtle);
}

/* 404: one primary exit plus the main sections. */
body[data-design="agy"][data-page][data-lang] .empty-page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
body[data-design="agy"][data-page][data-lang] .empty-page-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-secondary);
  font-size: 15px;
}
body[data-design="agy"][data-page][data-lang] .empty-page-links a:hover {
  border-color: var(--surface-border-hover);
  color: var(--accent);
}
body[data-design="agy"][data-page][data-lang] .empty-page-links svg {
  width: 18px;
  height: 18px;
}

/* Footer: brand column plus grouped navigation. */
body[data-design="agy"][data-page][data-lang] .footer {
  padding-block: 48px 28px;
}
body[data-design="agy"][data-page][data-lang] .footer-top {
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) minmax(0, 2.6fr);
  gap: 48px;
  align-items: start;
}
body[data-design="agy"][data-page][data-lang] .footer-brand-col p {
  max-width: 26ch;
  line-height: 1.6;
}
body[data-design="agy"][data-page][data-lang] .footer-nav {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr) minmax(0, 0.8fr);
  gap: 32px;
  font-size: 14px;
}
body[data-design="agy"][data-page][data-lang] .footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
body[data-design="agy"][data-page][data-lang] .footer-col h2 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--ink);
}
body[data-design="agy"][data-page][data-lang] .footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-block: 6px;
  color: var(--muted);
  line-height: 1.45;
}
body[data-design="agy"][data-page][data-lang] .footer-col a:hover {
  color: var(--accent);
}
body[data-design="agy"][data-page][data-lang] .footer-col .footer-more {
  color: var(--accent);
  font-weight: 600;
}
body[data-design="agy"][data-page][data-lang] .footer-more svg {
  width: 14px;
  height: 14px;
}
body[data-design="agy"][data-page][data-lang] .footer-bottom {
  align-items: flex-end;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}
body[data-design="agy"][data-page][data-lang] .footer-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
body[data-design="agy"][data-page][data-lang] .footer-language {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
}
body[data-design="agy"][data-page][data-lang] .footer-language:hover {
  color: var(--accent);
}
body[data-design="agy"][data-page][data-lang] .footer-language svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-design="agy"][data-page][data-lang] :is(.guide-list-item, .guide-list-cta svg) {
    transition: none;
  }
}
@media (max-width: 999px) {
  body[data-design="agy"][data-page][data-lang] .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 799px) {
  body[data-design="agy"][data-page][data-lang] .guide-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body[data-design="agy"][data-page][data-lang] :is(.guide-list-item, .guide-list-item:first-child) {
    padding: 20px;
  }
  body[data-design="agy"][data-page][data-lang] .guide-list-item h2 {
    font-size: 19px;
  }
  body[data-design="agy"][data-page][data-lang] .page-intro {
    padding-block: 24px 22px;
  }
  body[data-design="agy"][data-page][data-lang] .footer {
    padding-block: 36px 24px;
  }
  body[data-design="agy"][data-page][data-lang] .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
  }
  body[data-design="agy"][data-page][data-lang] .footer-col-guides {
    grid-column: 1 / -1;
    order: 3;
  }
  body[data-design="agy"][data-page][data-lang] .footer-col a {
    min-height: 44px;
  }
  body[data-design="agy"][data-page][data-lang] .footer-bottom {
    align-items: flex-start;
    margin-top: 24px;
  }
  body[data-design="agy"][data-page][data-lang] .breadcrumb-current {
    max-width: 100%;
  }
}
/* The article title follows immediately as the H1. */
@media (max-width: 640px) {
  body[data-design="agy"][data-page][data-lang] .breadcrumb :is(.sep:has(+ .breadcrumb-current), .breadcrumb-current) {
    display: none;
  }
}

/* theme.css */
/* Shared controls and matching wordmarks; no layout transition on theme change. */
html[data-theme="light"] { color-scheme: light; background: #f5f7fa; }
html[data-theme="dark"] { color-scheme: dark; background: #10151b; }
.brand-logo-dark, .theme-icon-light { display: none; }
html[data-theme="dark"] :is(.brand-logo-light, .theme-icon-dark) { display: none; }
html[data-theme="dark"] :is(.brand-logo-dark, .theme-icon-light) { display: block; }
html:not(.theme-ready) .menu-toggle { display: none !important; }
body[data-page][data-lang] .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
body[data-page][data-lang] .theme-toggle:hover { color: var(--ink); background: var(--paper); }
body[data-page][data-lang] .theme-toggle svg { width: 19px; height: 19px; }
@media (max-width: 799px) {
  body[data-page][data-lang] .header-compare { width: 44px; min-width: 44px; padding: 0; }
  body[data-page][data-lang] .header-compare > svg { display: block; width: 20px; }
  body[data-page][data-lang] .header-compare > span { display: none; }
  body[data-page][data-lang] .theme-toggle { border-color: transparent; }
}
@media (max-width: 359px) {
  body[data-page][data-lang] .header-inner { gap: 4px; }
  body[data-page][data-lang] .header-actions { gap: 0; }
  body[data-page][data-lang] .language { min-width: 32px; padding-inline: 0; }
}

/* A fifth navigation item needs the compact menu before the tablet breakpoint. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .header--with-esim .desktop-nav { display: none; }
  .header--with-esim .header-actions { margin-left: auto; }
  .header--with-esim .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: var(--muted); }
  .header--with-esim .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 20px 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .header--with-esim .mobile-nav a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .header--with-esim .mobile-nav-fallback { position: static; border-top: 1px solid var(--line); border-bottom: 0; }
}

/* light.css */
/* Light reading surfaces for the existing AGY layout. Brand card art is unchanged.
   Loaded after refinement.css; one theme attribute outranks the legacy color layer.
   No typography, geometry, visibility, or interaction rules belong in this file. */

html[data-theme="light"] body[data-design="agy"][data-page][data-lang] {
  color-scheme: light;
  --canvas: #f5f7fa;
  --paper: #ffffff;
  --canvas-elevated: #edf2f7;
  --raised: #edf2f7;
  --paper-hover: #e6edf5;
  --line: #d9e2ec;
  --line-soft: #d9e2ec;
  --surface-border: #d9e2ec;
  --surface-border-hover: #a5b7ce;
  --paper-emphasis: #eff4fd;
  --ink: #172637;
  --ink-secondary: #384c62;
  --muted: #536377;
  --subtle: #5d6a7b;
  --accent: #315fc7;
  --accent-hover: #264da5;
  --accent-ink: #ffffff;
  --green: #157347;
  --amber: #895900;
  --ux-bg: var(--canvas);
  --ux-surface: var(--paper);
  --ux-line: var(--line);
  --ux-accent: var(--accent);
  --ux-ink: var(--ink);
  --ux-muted: var(--muted);
  --ux-subtle: var(--subtle);
  --banner-bg: #fff0e4;
  --banner-border: #d9e2ec;
  --banner-accent: #9d4b17;
  --banner-accent-hover: #803b10;
  --intro-band: #e9eff9;
  --card-shadow: #17263712;
  background: var(--canvas);
  color: var(--ink);
}

html[data-theme="light"] body[data-design="agy"][data-page][data-lang] ::selection {
  background: #cfe0fb;
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :focus-visible {
  outline-color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(input, textarea)::placeholder {
  color: var(--subtle);
  opacity: 1;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] option {
  background: var(--paper);
  color: var(--ink);
}

/* Navigation and footer remain quiet; active links carry the same blue as actions. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.header, .mobile-nav) {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.desktop-nav a, .language, .header-compare, .menu-toggle) {
  color: var(--muted);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.desktop-nav a.active, .desktop-nav a:hover, .language:hover, .header-compare:hover, .menu-toggle:hover) {
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.desktop-nav a.active, .feed-topics button.selected)::after {
  background: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .mobile-nav a:hover {
  background: var(--canvas-elevated);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .mobile-nav a.active {
  background: #e5edfc;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .footer {
  background: var(--canvas-elevated);
  border-color: var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.footer-links a:hover, .breadcrumb a:hover) {
  color: var(--accent);
}

/* Each offer uses a light brand surface, with a dark brand-colored action. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offers {
  background: var(--banner-bg);
  border-color: var(--banner-border);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-slide {
  --offer-surface: #fff0e4;
  --banner-accent: #9d4b17;
  --banner-accent-hover: #803b10;
  --offer-stage: #fff0e4;
  background: var(--paper);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-mint {
  --offer-surface: #e3f4f3;
  --offer-stage: #dcefee;
  --banner-accent: #116c71;
  --banner-accent-hover: #0d565b;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] #offer-etherfi {
  --offer-surface: #f1eafb;
  --offer-stage: #ece4f7;
  --banner-accent: #65449b;
  --banner-accent-hover: #523680;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.offer-brand-name, .offer-title, .offer-title-mobile) {
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-description {
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.offer-brand, .offer-tag, .offer-terms) {
  color: var(--muted);
  border-color: var(--surface-border-hover);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-cta {
  background: var(--banner-accent);
  color: #ffffff;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-cta:hover {
  background: var(--banner-accent-hover);
  color: #ffffff;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-source {
  color: var(--banner-accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-dot span {
  background: var(--subtle);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-dot:is(:hover, [aria-current="true"]) span {
  background: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .offer-dot:focus-visible {
  outline-color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.offer-art, .detail-card-art, .discovery-card) .designed-card {
  box-shadow: inset 0 0 0 1px #ffffff24, 0 8px 24px #1726371a;
}

/* Catalog surfaces and controls. Selected filters stay flat, without dark fills. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.home-search, .home-select, .search-field, .select-field, .sort-wrap select, .country-picker-btn, .country-picker-search-input) {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.home-select select, .select-field select, .home-search input, .search-field input) {
  background: transparent;
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.home-search, .home-select, .search-field, .select-field):focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .search-shortcut {
  background: var(--canvas);
  border-color: var(--line);
  color: var(--subtle);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .feed-topics button.selected {
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .filter-tag {
  background: #e5edfc;
  border-color: #c2d2ee;
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .discovery-card {
  background: var(--paper);
  border-color: var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .discovery-card:hover {
  border-color: var(--surface-border-hover);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link {
  background: #edf3ff;
  border-color: #c2d2ee;
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .discovery-card .card-apply-link:hover {
  background: #e5edfc;
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .country-tile:hover .country-info h3 {
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .guide-card {
  border-color: var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .guide-card:hover {
  border-color: var(--accent);
}

/* Native country picker, including the body-level top-layer panel. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .country-picker-popover {
  background: var(--paper);
  border-color: var(--surface-border-hover);
  color: var(--ink);
  box-shadow: 0 14px 40px #17263726;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.country-picker-popover, .compare-terms)::backdrop {
  background: #17263726;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.country-picker-option:hover, .country-picker-option.is-active, .country-picker-option.is-selected, .country-picker-option[aria-selected="true"]) {
  background: #e5edfc;
  color: var(--accent);
}

/* Dense comparison: white rows, light headers, a quiet blue estimate emphasis. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-scroll, .quick-scroll, .fee-table-scroll, .guide-table-scroll) {
  background: var(--paper);
  border-color: var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table, .fee-table, .guide-table) :is(th, td) {
  border-color: var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table, .fee-table, .guide-table) thead th {
  background: var(--canvas-elevated);
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table, .fee-table, .guide-table) tbody :is(th, td) {
  background: var(--paper);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table) tbody th {
  box-shadow: 1px 0 0 var(--line);
}
/* Existing AGY corner backgrounds are !important; override only that corner. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .comparison-table .col-card {
  background: var(--canvas-elevated) !important;
  box-shadow: 1px 0 0 var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table td.is-emphasis, .quick-table td.is-emphasis, .fee-table .fee-total) {
  background: var(--paper-emphasis);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .quick-table .quick-current > :is(th, td) {
  background: var(--paper-emphasis);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .quick-table .quick-current > th {
  box-shadow: inset 3px 0 var(--accent), 1px 0 0 var(--line);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-table, .quick-table, .fee-table, .guide-table) tbody tr:hover > :is(th, td) {
  background: var(--canvas-elevated);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.dense-val, .dense-full-val, .fee-total strong) {
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(td.is-emphasis .dense-val, .quick-comparison td.is-emphasis .dense-val) {
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.dense-note, .support-caption, .quick-comparison .dense-note, .quick-comparison .support-caption) {
  color: var(--muted);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.dense-full-note, .quick-comparison .dense-full-note) {
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.compare-toolbar-field select, .compare-card-controls select[data-compare-card], .compare-card-header select[data-compare-card], .compare-actions .button.secondary, .compare-scroll-buttons button, .cb-custom) {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .checkbox-label input:checked + .cb-custom {
  background: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .compare-scroll-buttons button:hover:not(:disabled) {
  background: var(--canvas-elevated);
  color: var(--accent);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .compare-remove:hover {
  background: #fbecef;
  border-color: #e7b9c4;
  color: #a12c42;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .fee-error {
  color: #a12c42;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .fee-controls input[aria-invalid="true"] {
  border-color: #a12c42;
}

/* Status keeps color, shape, and captions; unknown never looks like a green yes. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] [data-support] {
  --support-bg: #e6ecf3;
  --support-ink: #536377;
  --support-ring: transparent;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] [data-support="yes"] {
  --support-bg: #157347;
  --support-ink: #ffffff;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] [data-support="no"] {
  --support-bg: #f8e7eb;
  --support-ink: #a12c42;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is([data-support="conditional"], [data-support="paused"]) {
  --support-bg: #fff0d8;
  --support-ink: #895900;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .detail-support .support-mark {
  background: var(--support-bg);
  color: var(--support-ink);
}

/* Detail sections are continuous text, with light edition pills and source dialogs. */
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .detail-section-nav {
  background: var(--canvas);
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .variant-jumps a {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .variant-jumps a:hover {
  background: var(--canvas-elevated);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .variant-jumps a[aria-selected="true"] {
  background: var(--canvas-elevated);
  border-color: #b8c3d0;
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.variant-jumps a, .detail-section-nav a):focus-visible {
  outline-color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .detail-section-nav a[data-detail-section]:is(.is-active, [aria-current="location"]) {
  background: transparent;
  border-color: var(--ink-secondary);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .variant-availability strong {
  color: #895900;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .variant-availability[data-residence-status="eligible"] strong {
  color: #157347;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.variant-notice, .discontinued-notice) {
  background: #fff6e9;
  border-color: #e5cda5;
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.variant-notice .notice-head strong, .discontinued-notice .notice-icon) {
  color: #895900;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .compare-terms:popover-open {
  background: var(--paper);
  border-color: var(--surface-border-hover);
  color: var(--ink);
  box-shadow: 0 16px 48px #17263726;
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.compare-terms-close:hover, .quick-comparison .compare-terms-close:hover) {
  background: var(--canvas-elevated);
  color: var(--ink);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .button.secondary {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-secondary);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] .button.secondary:hover {
  background: var(--canvas-elevated);
  border-color: var(--surface-border-hover);
  color: var(--accent);
}

html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-scroll, .quick-scroll, .fee-table-scroll, .guide-table-scroll, .country-picker-listbox) {
  scrollbar-color: #8da0b8 var(--canvas-elevated);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-scroll, .quick-scroll, .fee-table-scroll, .guide-table-scroll, .country-picker-listbox)::-webkit-scrollbar-track {
  background: var(--canvas-elevated);
}
html[data-theme="light"] body[data-design="agy"][data-page][data-lang] :is(.comparison-scroll, .quick-scroll, .fee-table-scroll, .guide-table-scroll, .country-picker-listbox)::-webkit-scrollbar-thumb {
  background: #8da0b8;
}