@layer components {
  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: 0.7rem 1.25rem; border-radius: var(--r-pill); border: 1px solid transparent;
    font-weight: 600; font-size: 0.95rem; text-decoration: none; cursor: pointer; line-height: 1.2;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
  .btn-lg { padding: 0.9rem 1.6rem; font-size: 1.0625rem; }
  .site-header .btn-primary { background: var(--accent-bright); color: var(--navy-900); }
  .hero .btn-ghost, .cta-band .btn-ghost { color: #fff; border-color: rgb(255 255 255 / 0.3); }
  .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
  .hero .btn-primary, .cta-band .btn-primary { background: var(--accent-bright); color: var(--navy-900); }

  /* Cards */
  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5);
    box-shadow: var(--shadow-sm); display: block; color: inherit; text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .card h2, .card h3 { margin-block-end: var(--s-2); }
  .card p { color: var(--text-2); }
  .card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow-md); }
  a.card:hover { transform: translateY(-2px); }
  .card-top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-4); }
  .card-icon { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
  .card-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
  .card h3 a { color: var(--text); text-decoration: none; }
  .card h3 a:hover { color: var(--accent); }
  .glass { background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--line); }
  .empty-state { text-align: center; padding: var(--s-7); }
  .empty-state .btn { margin-block-start: var(--s-4); }

  /* Tags */
  .tag { display: inline-flex; align-items: center; padding: 0.15rem 0.65rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
  .tag-live { background: var(--good-bg); color: var(--good); }
  .tag-soon { background: var(--soon-bg); color: var(--soon); }
  .tag-progress { background: var(--progress-bg); color: var(--progress); }

  /* Lists */
  .ticks { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
  .ticks li { display: flex; gap: var(--s-2); align-items: flex-start; }
  .ticks .icon { color: var(--good); margin-block-start: 0.2em; }
  .link-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }

  /* Tabs */
  .tablist { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); margin-block-end: var(--s-5); flex-wrap: wrap; }
  .tab { background: transparent; border: 0; padding: 0.55rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; color: var(--text-2); font-weight: 600; }
  .tab[aria-selected="true"] { background: var(--accent); color: var(--on-accent); }
  .tabpanel { display: grid; gap: var(--s-6); align-items: center; }
  @media (min-width: 52rem) { .tabpanel { grid-template-columns: 1fr 1.4fr; } }
  .explorer-copy p { color: var(--text-2); margin-block-start: var(--s-2); }

  /* FAQ accordion */
  .faq { display: grid; gap: var(--s-3); }
  .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--s-5); }
  .faq-item summary { cursor: pointer; padding-block: var(--s-4); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.4em; line-height: 1; }
  .faq-item[open] summary::after { content: "\2212"; }
  .faq-item p { color: var(--text-2); padding-block-end: var(--s-4); }

  /* Tables */
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  table { border-collapse: collapse; inline-size: 100%; min-inline-size: 36rem; }
  th, td { padding: var(--s-3) var(--s-4); text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
  thead th { background: var(--surface-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
  tbody tr:last-child > * { border-block-end: 0; }
  tbody th { font-weight: 600; }
  .compare td, .compare thead th:not(:first-child) { text-align: center; }
  .mark { display: inline-flex; align-items: center; justify-content: center; }
  .mark-yes { color: var(--good); }
  .mark-part { color: var(--soon); font-size: var(--fs-sm); font-weight: 600; }
  .mark-no { color: var(--text-2); }

  /* Callouts */
  .callout { background: var(--accent-soft); border-inline-start: 4px solid var(--accent); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); margin-block: var(--s-5); }
  .callout-warn { background: var(--soon-bg); border-color: var(--soon); color: var(--text); }

  /* CTA band */
  .cta-band { background: var(--navy-900); color: var(--on-navy); padding-block: var(--s-8); background-image: radial-gradient(60rem 24rem at 80% 0%, rgb(122 167 255 / 0.2), transparent 60%); }
  .cta-band h2 { color: #fff; }
  .cta-band p { color: var(--on-navy-2); }
  .cta-inner { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  /* Cookie consent */
  .consent {
    position: fixed; inset-inline: var(--s-4); inset-block-end: var(--s-4); z-index: 80; max-inline-size: 34rem;
    background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: var(--s-5); display: grid; gap: var(--s-3);
  }
  @media (min-width: 40rem) { .consent { inset-inline-start: auto; } }
  .consent h2 { font-size: var(--fs-lg); }
  .consent p { color: var(--text-2); font-size: var(--fs-sm); }
  .consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .consent-more { font-size: var(--fs-sm); }
  .consent-more summary { cursor: pointer; font-weight: 600; }
  .check { display: flex; gap: var(--s-2); align-items: center; padding-block: var(--s-1); }
}