/* ==========================================================================
   Components: shared patterns reused on every page
   ========================================================================== */

/* ---------- Icons ---------- */
.icon { width: 20px; height: 20px; flex: none; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--btn-height);
  padding: 0 var(--space-20);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--text-body-sm);
  line-height: 1;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out),
              border-color var(--duration-hover) var(--ease-out),
              transform var(--duration-hover) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 16px; height: 16px; }
.btn--sm { --btn-height: 36px; padding: 0 var(--space-16); font-size: 13px; }
.btn--lg { --btn-height: 50px; padding: 0 var(--space-24); font-size: 15px; }
.btn--block { width: 100%; }
.btn--split { justify-content: space-between; }

/* Conversion: provider visits, offers */
.btn--conversion {
  background: var(--gradient-yellow-action);
  color: var(--color-btn-conversion-text);
  box-shadow: var(--shadow-button-conversion);
}
.btn--conversion:hover { background: var(--gradient-yellow-action-hover); }

/* Primary: exploration */
.btn--primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  box-shadow: var(--shadow-button-primary);
}
.btn--primary:hover { background: var(--color-btn-primary-bg-hover); }

/* Secondary: outline */
.btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-btn-secondary-text);
}
.btn--secondary:hover { border-color: var(--color-border-focused); background: var(--color-surface-interactive); }

/* Ghost / icon */
.btn--ghost { background: transparent; color: var(--color-text-primary); }
.btn--ghost:hover { background: var(--color-surface-interactive); }
.btn--icon { --btn-height: 44px; width: 44px; padding: 0; }
.btn--icon .icon { width: 20px; height: 20px; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--primary[disabled], .btn--secondary[disabled] { background: var(--color-surface-subtle); border-color: var(--color-border-default); color: var(--color-text-muted); }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--color-btn-conversion-text); border-right-color: transparent;
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-4);
  color: var(--color-text-link);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--duration-hover) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(2px); }

/* ---------- Badges, chips, ribbons ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  min-height: 24px;
  padding: 2px var(--space-8);
  border-radius: var(--radius-badge);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; flex: none; }
.chip--success { white-space: normal; max-width: 100%; }
.chip--success { background: var(--color-chip-success-bg); color: var(--color-chip-success-text); }
.chip--success .icon { color: var(--color-icon-success); }
.chip--neutral { background: var(--color-chip-neutral-bg); color: var(--color-chip-neutral-text); }
.chip--neutral .icon { color: var(--color-icon-muted); }
.chip--info { background: var(--color-surface-interactive); color: var(--color-text-link); }
.chip--offer { background: var(--color-ribbon-bg); color: var(--color-ribbon-text); font-weight: var(--weight-semibold); }

.ribbon {
  position: absolute;
  top: -13px;
  left: var(--space-20);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 var(--space-12) 0 var(--space-8);
  border-radius: var(--radius-badge);
  background: var(--color-ribbon-bg);
  color: var(--color-ribbon-text);
  font-size: var(--text-caption);
  line-height: 1;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-ribbon);
}
.ribbon .icon { width: 15px; height: 15px; color: var(--color-ribbon-icon); }
.ribbon--center { left: 50%; transform: translateX(-50%); }

.rank {
  position: absolute;
  top: -1px;
  left: var(--space-16);
  display: grid; place-items: start center;
  width: 30px; height: 38px;
  padding-top: 7px;
  background: var(--color-rank-bg);
  color: var(--color-rank-text);
  font-size: var(--text-body-sm);
  line-height: 1;
  font-weight: var(--weight-bold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.updated {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-medium);
}
.updated .icon { width: 14px; height: 14px; color: var(--color-icon-success); }
.updated strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }

/* ---------- Rating: stars + score ---------- */
.stars {
  position: relative;
  display: inline-flex;
  color: var(--color-rating-star-empty);
  line-height: 0;
}
.stars__row { display: inline-flex; gap: 2px; }
.stars__row { width: max-content; }
.stars__row svg { width: var(--star-size, 16px); height: var(--star-size, 16px); max-width: none; flex: none; }
.stars__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--fill);
  overflow: hidden;
  color: var(--color-rating-star);
}
.stars--lg { --star-size: 20px; }
.stars--sm { --star-size: 14px; }

.score { display: inline-flex; align-items: baseline; gap: 2px; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.score__value { font-size: 28px; line-height: 1; font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.score__max { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }
.score--lg .score__value { font-size: 36px; }
.score--xl .score__value { font-size: 48px; }
.score--xl .score__max { font-size: var(--text-body); }
.score__label {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.score-chip {
  display: inline-grid; place-items: center;
  min-width: 52px; height: 40px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-score-chip-bg);
  color: var(--color-text-primary);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.rating { display: flex; align-items: center; gap: var(--space-12); }
.rating__meta { display: grid; gap: 4px; }
.rating__basis { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }
.score-na { color: var(--color-text-muted); font-size: var(--text-body-sm); font-weight: var(--weight-medium); }

.trophy { width: 34px; height: 40px; flex: none; }

/* ---------- Price ---------- */
.price { display: grid; gap: 2px; }
.price__line { color: var(--color-text-highlight); font-size: var(--text-body); line-height: 24px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.price__amount { font-size: var(--text-h3); font-weight: var(--weight-bold); }
.price__note { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }
.price--na .price__line { color: var(--color-text-secondary); font-size: var(--text-body-sm); }

/* ---------- Feature list ---------- */
.features { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.features li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--space-8);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: 20px;
}
.features .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--color-icon-success); }
.features--compact { gap: 6px; }
.features--compact li { font-size: 13px; line-height: 19px; }
.features--cons .icon { color: var(--color-icon-muted); }

/* ---------- Provider logo (wordmark until licensed artwork is supplied) ---------- */
.provider-logo {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: 44px;
  color: var(--color-text-primary);
  text-decoration: none;
}
.provider-logo__img { height: 30px; width: auto; max-width: 160px; object-fit: contain; }
.provider-logo--lg .provider-logo__img { height: 38px; max-width: 180px; }
.provider-logo--sm .provider-logo__img { height: 24px; max-width: 120px; }
.provider-logo__plate { display: inline-flex; align-items: center; padding: var(--logo-plate-pad); border-radius: var(--radius-sm); background: var(--color-logo-plate); }
.provider-logo__img--dark { display: none; }
:root[data-theme-resolved="dark"] .provider-logo__img--light { display: none; }
:root[data-theme-resolved="dark"] .provider-logo__img--dark { display: block; }
.provider-logo__name {
  font-size: 22px;
  line-height: 1.1;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.provider-logo__sub { display: block; color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); letter-spacing: 0; }
.provider-logo--lg .provider-logo__name { font-size: 28px; }
.provider-logo--sm .provider-logo__name { font-size: 18px; }

/* ---------- Disclosure ---------- */
.disclosure {
  display: flex; align-items: flex-start; gap: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}
.disclosure .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--color-icon-muted); }
.disclosure a { color: var(--color-text-link); }
.disclosure--box {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.source-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); white-space: nowrap; }
.link-note { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); text-align: center; }

/* ---------- Section heading ---------- */
.section-head { display: grid; gap: var(--space-12); justify-items: center; max-width: 760px; margin: 0 auto var(--space-32); text-align: center; }
.section-head__text { color: var(--color-text-secondary); }
.section-head__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-16); }
.section-head__meta a { font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.section-head--left { justify-items: start; text-align: left; margin-inline: 0; }
.section-head--left .section-head__meta { justify-content: flex-start; }
.section-foot { display: flex; justify-content: center; margin-top: var(--space-24); }

/* ---------- Provider row card (horizontal ranking) ---------- */
.ranking-list { display: grid; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }

.provider-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
  padding: var(--space-32) var(--space-20) var(--space-20);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out),
              transform var(--duration-hover) var(--ease-out);
}
.provider-row:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.provider-row:focus-within { border-color: var(--color-border-focused); }
.provider-row.is-featured { border: 2px solid var(--color-border-featured); box-shadow: var(--shadow-featured); }
.provider-row.is-featured:hover { border-color: var(--color-border-featured); box-shadow: var(--shadow-raised); }
.provider-row.is-selected { background: var(--color-surface-selected); }
.provider-row .ribbon { left: 56px; }

.provider-row__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.provider-row__brand-text { display: grid; gap: 2px; min-width: 0; }
.provider-row__bestfor { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); }
.provider-row__rating { display: flex; align-items: center; gap: var(--space-8); }
.provider-row__rating-text { display: grid; gap: 4px; justify-items: start; }
.provider-row__actions { display: grid; gap: var(--space-12); }
.provider-row__links { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.provider-row__price-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-8) var(--space-12); }

.compare-toggle {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: 44px;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.compare-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue-600); }

.provider-row__usage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.usage__included { color: var(--color-text-primary); font-size: var(--text-body-sm); line-height: 20px; font-weight: var(--weight-semibold); }

/* Mobile: stacked, rating beside the brand */
.provider-row__mobile-rating { display: flex; }
.provider-row__desktop-rating { display: none; }

@media (min-width: 768px) {
  .provider-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-24); }
  .provider-row__brand { grid-column: 1 / -1; }
  .provider-row__features { grid-column: 1; }
  .provider-row__actions { grid-column: 2; align-self: end; }
  .provider-row__usage { grid-column: 1; }
}

@media (min-width: 1024px) {
  .provider-row {
    grid-template-columns: 22% 34% 18% 1fr;
    align-items: center;
    gap: 0;
    padding: var(--space-24) var(--space-24) var(--space-24) var(--space-24);
    min-height: 148px;
  }
  .provider-row > * { padding-inline: var(--space-20); }
  .provider-row > * + * { border-left: 1px solid var(--color-border-subtle); }
  .provider-row__brand { grid-column: auto; display: grid; justify-items: start; padding-left: var(--space-12); }
  .provider-row__features { grid-column: auto; }
  .provider-row__actions { grid-column: auto; align-self: center; padding-right: 0; }
  .provider-row__mobile-rating { display: none; }
  .provider-row__desktop-rating { display: flex; align-self: stretch; align-items: center; justify-content: center; }
  .provider-row__usage { grid-column: auto; flex-direction: column; align-items: center; align-self: stretch; justify-content: center; text-align: center; }
}

/* ---------- Provider card (vertical recommendation) ---------- */
.card-grid { display: grid; gap: var(--space-24); }
@media (min-width: 768px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }

.provider-card {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40) var(--space-24) var(--space-24);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: border-color var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out), transform var(--duration-hover) var(--ease-out);
}
.provider-card:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.provider-card.is-featured { border: 2px solid var(--color-border-featured); box-shadow: var(--shadow-featured); }
.provider-card.is-featured:hover { border-color: var(--color-border-featured); }
.provider-card__logo { display: flex; justify-content: center; }
.provider-card__trophy { position: absolute; top: var(--space-16); right: var(--space-16); }
.provider-card__rating { display: flex; align-items: center; justify-content: center; gap: var(--space-12); }
.provider-card__rating-text { display: grid; gap: 4px; justify-items: start; }
.provider-card__bestfor { color: var(--color-text-primary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); }
.provider-card .features { text-align: left; }
.provider-card__bottom { display: grid; gap: var(--space-12); margin-top: auto; padding-top: var(--space-8); }
.provider-card__price { justify-items: center; }
.provider-card__offer { display: flex; justify-content: center; }

.mini-bars { display: grid; gap: 8px; margin: 0; padding: var(--space-16); border-radius: var(--radius-card); background: var(--color-surface-subtle); text-align: left; }
.mini-bars__row { display: grid; grid-template-columns: 84px 1fr; gap: var(--space-12); align-items: center; }
.mini-bars dt { color: var(--color-text-secondary); font-size: var(--text-caption); line-height: 16px; font-weight: var(--weight-medium); }
.mini-bars dd { display: grid; grid-template-columns: 1fr 28px; gap: var(--space-8); align-items: center; margin: 0; color: var(--color-text-primary); font-size: var(--text-caption); font-weight: var(--weight-semibold); text-align: right; }
.mini-bars__track { height: 6px; overflow: hidden; border-radius: var(--radius-badge); background: var(--color-surface-interactive); }
.mini-bars__track span { display: block; height: 100%; width: var(--value); border-radius: inherit; background: var(--gradient-blue-action); }

/* ---------- Header + navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-header);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border-subtle); box-shadow: var(--shadow-card); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); height: var(--header-height); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-8); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-primary); text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__word { font-size: 21px; line-height: 1; font-weight: var(--weight-bold); letter-spacing: -0.03em; }
.brand__word span { color: var(--color-text-highlight); }
.brand__word em { font-style: normal; font-weight: var(--weight-medium); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-12);
  border: 0; border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.nav__trigger:hover, .nav__trigger[aria-expanded="true"] { background: var(--color-surface-interactive); }
a.nav__trigger { text-decoration: none; }
a.drawer__trigger { text-decoration: none; }
.nav__trigger.is-current { color: var(--color-text-link); }
.nav__trigger .icon { width: 16px; height: 16px; transition: transform var(--duration-hover) var(--ease-out); }
.nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  width: 340px;
  padding: var(--space-8);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  transform: translateX(-50%);
}
.nav__panel[hidden] { display: none; }
.nav__panel-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: grid; grid-template-columns: 36px 1fr; gap: var(--space-12); align-items: center;
  padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8);
  border-radius: var(--radius-button);
  color: var(--color-text-primary);
  text-decoration: none;
}
.nav__link:hover, .nav__link:focus-visible { background: var(--color-surface-interactive); }
.nav__link[aria-current="page"] { background: var(--color-surface-interactive); }
.nav__link-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-button); background: var(--color-surface-interactive); color: var(--color-icon-default); }
.nav__link-title { display: block; font-size: var(--text-body-sm); line-height: 20px; font-weight: var(--weight-semibold); }
.nav__link-desc { display: block; color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }

.header-cta { display: none; }
.menu-button { display: inline-flex; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-button { display: none; }
}
/* Narrow desktop: tighter menu, icon-only compare button */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__trigger { padding: 0 var(--space-8); }
  .header-cta { width: 40px; padding: 0; }
  .header-cta__label { display: none; }
}

/* Theme toggle */
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
:root[data-theme-resolved="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme-resolved="dark"] .theme-toggle .icon-sun { display: block; }
:root:not([data-theme-resolved]) .theme-toggle .icon-moon { display: block; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 150; overflow: hidden; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: var(--color-overlay); opacity: 0; transition: opacity var(--duration-expand) var(--ease-out); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  display: flex; flex-direction: column;
  width: min(100%, 420px);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  transform: translateX(100%);
  transition: transform var(--duration-expand) var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 var(--gutter); border-bottom: 1px solid var(--color-border-subtle); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-8) var(--gutter) var(--space-24); }
.drawer__foot { display: grid; gap: var(--space-16); padding: var(--space-16) var(--gutter) var(--space-24); border-top: 1px solid var(--color-border-subtle); }
.drawer__group { border-bottom: 1px solid var(--color-border-subtle); }
.drawer__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 56px; padding: 0;
  border: 0; background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  text-align: left;
}
.drawer__trigger .icon { transition: transform var(--duration-hover) var(--ease-out); }
.drawer__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.drawer__list { display: grid; gap: 2px; margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.drawer__list[hidden] { display: none; }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: var(--radius-button); background: var(--color-surface-subtle); border: 1px solid var(--color-border-default); }
.segmented button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-secondary);
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
}
.segmented button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-card); }
.segmented .icon { width: 16px; height: 16px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text-link); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--color-border-strong); }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); }

/* ---------- Cards (generic surface) ---------- */
.surface {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.surface--pad { padding: var(--space-20); }
@media (min-width: 768px) { .surface--pad { padding: var(--space-32); } }

/* ---------- Illustrated icon tile ---------- */
.illo { width: 48px; height: 48px; flex: none; }
.illo--lg { width: 56px; height: 56px; }

/* ---------- Editorial card ---------- */
.editorial-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.editorial-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--gradient-panel); }
.editorial-card__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial-card__body { display: flex; flex-direction: column; gap: var(--space-12); flex: 1; padding: var(--space-24); }
.editorial-card__cat { color: var(--color-text-highlight); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; }
.editorial-card__body .btn, .editorial-card__body .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Contact card ---------- */
.contact-card { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-16); align-items: start; padding: var(--space-20); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.contact-card h3 { font-size: var(--text-body); line-height: 24px; font-weight: var(--weight-semibold); }
.contact-card p { margin-top: 2px; color: var(--color-text-muted); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.contact-card__value { display: inline-flex; margin-top: var(--space-8); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }
.contact-card__value--pending { color: var(--color-text-muted); font-weight: var(--weight-medium); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field__label { color: var(--color-text-primary); font-size: var(--text-body-sm); line-height: 20px; font-weight: var(--weight-semibold); }
.field__hint { color: var(--color-text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }
.input, .select {
  width: 100%; min-height: 46px;
  padding: 0 var(--space-12);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-input);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body-sm);
  transition: border-color var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out);
}
.input::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus { outline: none; border-color: var(--color-border-focused); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.field__error { display: flex; gap: 6px; align-items: center; color: var(--color-error); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.select { appearance: none; padding-right: var(--space-40); background-image: linear-gradient(45deg, transparent 50%, var(--color-icon-muted) 50%), linear-gradient(135deg, var(--color-icon-muted) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------- Filters ---------- */
.filters { display: grid; gap: var(--space-16); padding: var(--space-16); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.filters__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-text-primary); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); }
.filters__body { display: grid; gap: var(--space-16); }
.filters__body[hidden] { display: none; }
.filters__group { display: grid; gap: var(--space-8); border: 0; margin: 0; padding: 0; min-width: 0; }
.filters__group legend { padding: 0; margin-bottom: var(--space-8); color: var(--color-text-primary); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.filters__pills { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.filter-pill { position: relative; }
.filter-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.filter-pill span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-12);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-badge);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: 13px; font-weight: var(--weight-medium);
  transition: background var(--duration-hover) var(--ease-out), border-color var(--duration-hover) var(--ease-out);
}
.filter-pill input:hover + span { border-color: var(--color-border-strong); }
.filter-pill input:checked + span { border-color: var(--color-border-focused); background: var(--color-surface-selected); color: var(--color-text-primary); }
.filter-pill input:checked + span::before { content: ""; width: 6px; height: 10px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.filter-pill input:focus-visible + span { outline: 2px solid var(--color-border-focused); outline-offset: 2px; }
.filters__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.filters__count { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.filters__count strong { color: var(--color-text-primary); }

@media (min-width: 1024px) {
  .filters { grid-template-columns: 1fr; padding: var(--space-20) var(--space-24); }
  .filters__toggle { display: none; }
  .filters__body[hidden] { display: grid; }
  .filters__body { grid-template-columns: auto auto 1fr; gap: var(--space-32); align-items: start; }
  .filters__foot { grid-column: 1 / -1; padding-top: var(--space-12); border-top: 1px solid var(--color-border-subtle); }
}

/* ---------- Empty / unavailable states ---------- */
.empty-state { display: grid; gap: var(--space-12); justify-items: center; padding: var(--space-40) var(--space-24); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-surface); text-align: center; }
.empty-state[hidden] { display: none; }
.empty-state .illo { opacity: 0.9; }
.na { color: var(--color-text-muted); font-style: normal; font-size: var(--text-body-sm); }

/* ---------- Compare tray ---------- */
.compare-tray {
  position: fixed; left: 50%; bottom: var(--space-16); z-index: 90;
  display: flex; align-items: center; gap: var(--space-16);
  width: min(calc(100% - var(--gutter) * 2), 640px);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-20);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  transform: translate(-50%, 0);
  transition: transform var(--duration-expand) var(--ease-out), opacity var(--duration-expand) var(--ease-out);
}
.compare-tray[hidden] { display: flex; opacity: 0; pointer-events: none; transform: translate(-50%, 140%); }
.compare-tray__text { flex: 1; min-width: 0; color: var(--color-text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.compare-tray__text strong { color: var(--color-text-primary); }

/* ---------- Tables ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface); -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 560px; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.table th, .table td { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border-subtle); text-align: left; vertical-align: top; }
.table thead th { position: sticky; top: 0; background: var(--color-surface-subtle); color: var(--color-text-primary); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
.table td { color: var(--color-text-secondary); }
.table .is-best { background: var(--color-surface-selected); }
.table--wide { min-width: 1120px; }
.table--sticky-first th:first-child, .table--sticky-first td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); box-shadow: 1px 0 0 var(--color-border-subtle); }
.table--sticky-first thead th:first-child { background: var(--color-surface-subtle); z-index: 2; }
.scroll-hint { display: flex; align-items: center; gap: 6px; margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-caption); }
@media (min-width: 900px) { .scroll-hint { display: none; } }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: var(--space-12); }
.faq details { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface); }
.faq details[open] { border-color: var(--color-border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 56px; padding: var(--space-12) var(--space-20); color: var(--color-text-primary); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-icon-default); transition: transform var(--duration-hover) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 0 var(--space-20) var(--space-20); color: var(--color-text-secondary); }
.faq__answer p + p { margin-top: var(--space-12); }

/* ---------- Skeleton ---------- */
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface-interactive) 70%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-block: var(--space-48) var(--space-32); }
.site-footer .brand { color: var(--color-footer-heading); }
.site-footer .brand__word span { color: var(--color-footer-link-hover); }
.footer-grid { display: grid; gap: var(--space-32); }
.footer-brand p { max-width: 340px; margin-top: var(--space-16); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.footer-col h2 { margin-bottom: var(--space-12); color: var(--color-footer-heading); font-size: var(--text-body-sm); line-height: 20px; font-weight: var(--weight-semibold); }
.footer-col ul { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.footer-col a { color: var(--color-footer-text); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); text-decoration: none; }
.footer-col a:hover { color: var(--color-footer-link-hover); text-decoration: underline; }
.footer-bottom { display: grid; gap: var(--space-16); margin-top: var(--space-40); padding-top: var(--space-24); border-top: 1px solid var(--color-footer-border); font-size: var(--text-caption); line-height: var(--leading-caption); }
.footer-bottom p { max-width: 880px; }
.footer-bottom a { color: var(--color-footer-heading); }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .site-footer { padding-block: var(--space-64) var(--space-40); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-40); }
}