@layer components {
  /* ---------- Site chrome ---------- */
  .sample-banner {
    margin: 0;
    padding: var(--space-2) var(--gutter);
    background: var(--accent-soft);
    color: var(--text);
    font-size: var(--text-xs);
    text-align: center;
  }

  .site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 3.75rem;
  }
  .logo-link { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; color: var(--text); }
  .logo { display: inline-flex; align-items: center; gap: var(--space-2); }
  .logo__mark { width: 2rem; height: 2rem; flex: none; }
  .logo__word {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
  }

  .site-nav { display: flex; align-items: center; gap: var(--space-1); }
  .site-nav__link, .menu summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap);
    padding-inline: var(--space-3);
    color: var(--text);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-s);
  }
  .site-nav__link:hover, .menu summary:hover { background: var(--surface-2); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu { position: relative; }
  .menu[open] summary .icon { transform: rotate(180deg); }
  .menu__list {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 15rem;
    margin: var(--space-1) 0 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
  }
  .menu__list a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: var(--space-3);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-s);
  }
  .menu__list a:hover { background: var(--surface-2); }

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--text);
    cursor: pointer;
  }
  .icon-btn:hover { background: var(--surface-2); }
  .icon-btn .icon { width: 1.25rem; height: 1.25rem; }
  .icon--sun { display: none; }
  :root[data-theme="dark"] .icon--sun { display: block; }
  :root[data-theme="dark"] .icon--moon { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon--sun { display: block; }
    :root:not([data-theme="light"]) .icon--moon { display: none; }
  }

  .site-footer { margin-top: var(--space-8); padding-block: var(--space-6); border-top: 1px solid var(--border); background: var(--surface-2); }
  .site-footer__inner { display: grid; gap: var(--space-5); }
  .footer__tag { margin: var(--space-2) 0 0; font-size: var(--text-s); }
  .footer__heading { font-size: var(--text-m); margin-bottom: var(--space-2); }

  @media (max-width: 39.99rem) {
    .site-nav__link { display: none; }
  }
  @media (min-width: 48rem) {
    .site-footer__inner { grid-template-columns: 1fr 2fr; gap: var(--space-7); }
  }

  /* ---------- Page ---------- */
  .page { padding-block: var(--space-4) 0; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-2); }
  .crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--text-2); }
  .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); }
  .crumbs li { display: flex; align-items: center; min-height: var(--tap); }
  @media (max-width: 39.99rem) {
    /* One line on a phone: the parent category is the useful way back. */
    .crumbs li:first-child { display: none; }
    .crumbs li:nth-child(2)::before { content: none; }
  }
  .page-head { margin: var(--space-3) 0 var(--space-5); }
  .lede { margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--text-2); font-size: var(--text-m); }
  .section { margin-top: var(--space-7); }
  .section > h2 + p { margin-top: var(--space-2); max-width: var(--measure); }
  .card-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
  /* Three across on desktop: the top 3 are comparable at a glance. */
  @media (min-width: 64rem) {
    .card-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .card-list .proscons { grid-template-columns: 1fr; }
  }

  /* ---------- Buttons and CTA ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding: var(--space-2) var(--space-5);
    background: var(--accent);
    color: var(--accent-ink);
    border: 2px solid var(--accent);
    border-radius: var(--radius-m);
    font: inherit;
    font-size: var(--text-m);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s;
  }
  .btn:hover, .btn.is-hover {
    background: color-mix(in srgb, var(--accent) 86%, black);
    border-color: color-mix(in srgb, var(--accent) 86%, black);
    text-decoration: none;
  }
  .btn--secondary { background: transparent; color: var(--accent); }
  .btn--secondary:hover, .btn--secondary.is-hover { background: var(--accent-soft); border-color: var(--accent); }
  .btn--block { width: 100%; }
  .btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
  .btn[aria-disabled="true"] { background: var(--surface-2); border-color: var(--border); color: var(--text-2); cursor: not-allowed; pointer-events: none; }

  /* ---------- Tags (never colour alone: always a word and an icon) ---------- */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
  }
  .tag .icon { width: 0.875rem; height: 0.875rem; }
  .tag--best { background: var(--better-soft); color: var(--better); }
  .tag--worst { background: var(--worse-soft); color: var(--worse); }
  .tag--neutral { background: var(--surface-2); color: var(--text-2); }

  /* ---------- Stats: the numbers are the hero ---------- */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-4) var(--space-3); margin: var(--space-4) 0; }
  .stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .stat__label { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }
  .stat__value { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); font-size: var(--text-l); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
  .stat__missing { font-size: var(--text-s); font-weight: 500; color: var(--text-2); }
  .stat__note { font-size: var(--text-xs); font-weight: 500; color: var(--text-2); }

  /* ---------- Verdict card ---------- */
  .verdict {
    position: relative;
    margin-top: var(--space-2);
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  /* The one place the woven-cloth reference appears: a thin band, pure CSS. */
  .verdict::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--accent) 0 14px, var(--ochre) 14px 20px, var(--accent) 20px 34px, var(--surface-2) 34px 40px);
  }
  .verdict__title { font-size: var(--text-hero); }
  .verdict__name { color: var(--accent); overflow-wrap: anywhere; }
  .verdict__sentence { margin: var(--space-3) 0 0; max-width: var(--measure); }
  .verdict .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .verdict .stat:first-child { grid-column: 1 / -1; }
  .verdict .stat:first-child .stat__value { font-size: var(--text-2xl); }
  .verdict__also { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-4); font-size: var(--text-s); }
  .verdict__also .icon { margin-top: 0.2em; color: var(--better); }
  .verdict__actions { display: grid; gap: var(--space-2); }
  .verdict__notable { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); list-style: none; font-size: var(--text-s); display: grid; gap: var(--space-1); }

  @media (min-width: 40rem) {
    .verdict { padding: var(--space-6) var(--space-6) var(--space-5); }
    .verdict .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .verdict .stat:first-child { grid-column: auto; }
    .verdict .stat:first-child .stat__value { font-size: var(--text-xl); }
    .verdict__actions { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-4); }
  }

  /* ---------- Verified badge ---------- */
  .verified { font-size: var(--text-xs); color: var(--text-2); }
  .verified summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap);
    padding-inline: var(--space-1);
    cursor: pointer;
    list-style: none;
  }
  .verified summary::-webkit-details-marker { display: none; }
  .verified summary:hover { color: var(--text); }
  .verified .icon { color: var(--better); }
  .verified[open] .verified__chevron { transform: rotate(180deg); }
  .verified__chevron { color: var(--text-2) !important; }
  .verified__list { margin: 0 0 var(--space-2); padding: var(--space-3) var(--space-3) var(--space-3) 1.5rem; background: var(--surface-2); border-radius: var(--radius-s); display: grid; gap: var(--space-1); }

  /* ---------- Disclosure + licence ---------- */
  .disclosure { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-s); font-size: var(--text-s); color: var(--text-2); max-width: var(--measure); }
  .disclosure .icon { margin-top: 0.2em; }
  .site-footer .disclosure { margin-top: 0; background: transparent; padding: 0; }
  .licence { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--text-xs); }
  .licence .icon { margin-top: 0.1em; }
  .licence--ok .icon { color: var(--better); }

  /* ---------- Provider card ---------- */
  .card { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow); }
  .provider-card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .provider-card__head { display: flex; gap: var(--space-3); align-items: center; }
  .provider-card__title { min-width: 0; }
  .provider-card__title h3 { overflow-wrap: anywhere; }
  .provider-card__rank { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
  .provider-card__why { margin: var(--space-2) 0 0; font-size: var(--text-s); color: var(--text-2); }
  .provider-card__why strong { color: var(--better); }
  .provider-card__foot { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
  .monogram { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: var(--text-s); letter-spacing: 0.02em; }

  .proscons { display: grid; gap: var(--space-3); padding: var(--space-3) 0; border-block: 1px solid var(--border); font-size: var(--text-s); }
  .proscons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
  .proscons__title { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1); font-family: var(--font-sans); font-size: var(--text-s); }
  .proscons__col:first-child .proscons__title { color: var(--better); }
  .proscons__col:last-child .proscons__title { color: var(--worse); }
  @media (min-width: 30rem) {
    .proscons { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  }

  /* Native <details>: no JS, works for agents, large tap target. */
  .disclose summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap); cursor: pointer; font-size: var(--text-s); font-weight: 600; color: var(--accent); list-style: none; }
  .disclose summary::-webkit-details-marker { display: none; }
  .disclose[open] summary .icon { transform: rotate(180deg); }

  .breakdown { display: grid; gap: 0; margin: 0 0 var(--space-2); font-size: var(--text-s); }
  .breakdown__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
  .breakdown__row--cost dd { color: var(--worse); }
  .breakdown__row--total { border-bottom: 0; font-weight: 700; font-size: var(--text-m); }
  .breakdown__note { font-size: var(--text-xs); }

  /* ---------- Comparison table ---------- */
  .table-scroll { margin-top: var(--space-4); overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); overscroll-behavior-x: contain; }
  .compare { width: 100%; min-width: 56rem; border-collapse: separate; border-spacing: 0; font-size: var(--text-s); }
  .compare th, .compare td { padding: var(--space-3) var(--space-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
  .compare th:first-child, .compare td:last-child { padding-inline: var(--space-3); }
  .compare thead th { background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; vertical-align: bottom; }
  .compare tbody tr:last-child > * { border-bottom: 0; }
  .compare tbody th { font-weight: 700; font-size: var(--text-xs); }
  @media (min-width: 40rem) { .compare tbody th { font-size: var(--text-s); } }
  .compare .num { font-weight: 700; }
  .compare .tag { margin-top: var(--space-1); }
  .compare__hint { display: block; font-weight: 500; color: var(--text-2); }
  .compare__name { display: block; overflow-wrap: break-word; hyphens: auto; }
  .compare th .tag { border-radius: var(--radius-s); }
  /* Provider names stay in view while the numbers scroll. */
  .compare th:first-child { position: sticky; left: 0; z-index: 1; width: 7.25rem; min-width: 7.25rem; max-width: 7.25rem; background: var(--surface); border-right: 1px solid var(--border); }
  @media (min-width: 40rem) {
    .compare th:first-child { width: 9.5rem; min-width: 9.5rem; max-width: 9.5rem; }
  }
  .compare thead th:first-child { background: var(--surface-2); }
  .compare .is-reference > * { background: var(--accent-soft); }
  .compare .is-reference th:first-child { background: var(--accent-soft); }
  .compare td a { display: inline-flex; align-items: center; min-height: var(--tap); white-space: nowrap; }
  [data-controller="expand"] > .btn { margin-top: var(--space-3); }

  /* ---------- Chips ---------- */
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding: var(--space-2) var(--space-4); line-height: 1.3; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); font-size: var(--text-s); font-weight: 600; text-decoration: none; }
  .chip:hover, .chip.is-hover { border-color: var(--accent); }
  .chip.is-selected { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

  /* ---------- Empty and loading ---------- */
  .empty { margin: 0; padding: var(--space-4); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-s); font-size: var(--text-s); color: var(--text-2); }
  .skeleton { display: block; height: 1rem; background: var(--surface-2); border-radius: var(--radius-s); }
  .skeleton--title { height: 1.5rem; width: 60%; }
  .skeleton--block { height: 3rem; }
  .skeleton-stack { display: grid; gap: var(--space-3); }

  /* ---------- Sources and FAQ ---------- */
  .source-list { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--text-s); }
  .source-list ul { margin: var(--space-1) 0 0; }
  .source-list strong { overflow-wrap: anywhere; }
  .faq__q { margin-top: var(--space-5); font-size: var(--text-l); }
  .faq__a { margin: var(--space-2) 0 0; max-width: var(--measure); }

  /* ---------- Provider profile (low fidelity) ---------- */
  .profile-head { display: flex; gap: var(--space-3); align-items: flex-start; }
  .profile-head .monogram { margin-top: 0.25rem; }
  .profile-head h1 { overflow-wrap: anywhere; }
  .profile-facts { margin-top: 0; }
  .profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .figure__source { display: block; margin-top: 0.125rem; font-size: var(--text-xs); color: var(--text-2); }
  .compare--profile { min-width: 46rem; }
  .draft-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 4px solid var(--ochre); border-radius: var(--radius-s); font-size: var(--text-s); max-width: var(--measure); }
  .draft-note p:last-child { margin-bottom: 0; }
  .internal { padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-m); }
  .internal .facts dd { overflow-wrap: anywhere; }
  .facts { display: grid; gap: 0; margin-top: var(--space-4); font-size: var(--text-s); }
  .facts__row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
  .facts dt { font-weight: 700; }
  @media (min-width: 40rem) {
    .facts__row { grid-template-columns: 12rem 1fr; gap: var(--space-4); }
  }

  /* ---------- Search ---------- */
  .search { display: flex; gap: var(--space-2); max-width: 40rem; margin-top: var(--space-5); }
  .search__input {
    flex: 1;
    min-width: 0;
    min-height: 3rem;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    font: inherit;
    font-size: var(--text-m); /* 16px or more, so iOS does not zoom in */
  }
  .search__input::placeholder { color: var(--text-2); opacity: 1; }
  .search__input:hover { border-color: var(--text-2); }
  .search__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding-inline: var(--space-4);
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-m);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .search__btn:hover { border-color: var(--accent); color: var(--accent); }
  @media (max-width: 29.99rem) {
    .search__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  ul.chips { margin: 0; padding: 0; list-style: none; }
  .empty + .chips { margin-top: var(--space-4); }

  /* ---------- Home ---------- */
  .hero { padding-block: var(--space-7) var(--space-4); }
  .hero h1 { max-width: 20ch; font-size: clamp(2.125rem, 1.5rem + 3vw, 3.5rem); letter-spacing: -0.02em; }
  .hero .lede { font-size: var(--text-l); }
  .hero__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
  .hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-2); }
  .hero__facts li + li::before { content: "·"; margin-right: var(--space-3); }
  @media (min-width: 30rem) {
    .hero__actions { display: flex; flex-wrap: wrap; }
  }

  .doors { display: grid; gap: var(--space-4); }
  .door { display: flex; flex-direction: column; padding: var(--space-5) var(--space-4); scroll-margin-top: var(--space-4); }
  .door h2 { margin-bottom: var(--space-3); }
  .door p { max-width: var(--measure); }
  .door__label { margin: var(--space-2) 0 var(--space-2); font-family: var(--font-sans); font-size: var(--text-s); color: var(--text-2); }
  .door__actions { display: grid; gap: var(--space-3); justify-items: start; margin-top: auto; padding-top: var(--space-5); }
  .door__more { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-size: var(--text-s); font-weight: 600; }
  .door__more .icon { flex: none; }
  .checklist { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-s); }
  .checklist li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .checklist .icon { margin-top: 0.15em; color: var(--accent); }
  @media (min-width: 30rem) {
    .checklist { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
  }
  @media (min-width: 56rem) {
    .doors { grid-template-columns: 1fr 1fr; }
    .door { padding: var(--space-6); }
  }

  .trust { display: grid; gap: var(--space-4); }
  .panel { padding: var(--space-5) var(--space-4); background: var(--surface-2); border-radius: var(--radius-m); scroll-margin-top: var(--space-4); }
  .panel .eyebrow { display: flex; align-items: center; gap: var(--space-2); }
  .panel .eyebrow .icon { color: var(--accent); }
  .panel h2 { margin-bottom: var(--space-3); }
  .panel p { max-width: var(--measure); }
  .panel__foot { margin: 0; }
  .panel__foot a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); font-size: var(--text-s); font-weight: 600; }
  @media (min-width: 56rem) {
    .trust { grid-template-columns: 3fr 2fr; }
    .panel { padding: var(--space-6); }
  }

  .next { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-m); }
  .next h2 { margin-bottom: var(--space-2); }
  .next p { margin: 0; max-width: var(--measure); color: var(--text-2); }
  .next .btn { justify-self: start; }
  @media (min-width: 48rem) {
    .next { grid-template-columns: 1fr auto; padding: var(--space-5) var(--space-6); }
  }

  @media (min-width: 48rem) {
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
  }

  .footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-s); }
  .footer__links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); }
  .steps { display: grid; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
  .steps li { counter-increment: step; padding-left: 3rem; position: relative; }
  .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
  .steps strong { display: block; }
  .link-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
  .link-list a { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding-inline: var(--space-1); border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
  .link-list a:hover { color: var(--accent); }
  @media (min-width: 48rem) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
    .link-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-6); }
  }

  /* ---------- Styleguide ---------- */
  .sg-section { margin-top: var(--space-7); }
  .sg-section > h2 { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
  .sg-sub { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-m); font-family: var(--font-sans); color: var(--text-2); }
  .sg-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items: start; }
  .sg-swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .sg-swatch { font-size: var(--text-xs); }
  .sg-swatch__chip { display: block; height: 3.5rem; border: 1px solid var(--border); border-radius: var(--radius-s); margin-bottom: var(--space-1); }
  .sg-swatch code { display: block; color: var(--text-2); }
  .sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .sg-type > * { margin: 0 0 var(--space-3); }
  .sw-bg { background: var(--bg); } .sw-surface { background: var(--surface); } .sw-surface-2 { background: var(--surface-2); }
  .sw-border { background: var(--border); } .sw-text { background: var(--text); } .sw-text-2 { background: var(--text-2); }
  .sw-accent { background: var(--accent); } .sw-accent-soft { background: var(--accent-soft); } .sw-ochre { background: var(--ochre); }
  .sw-better { background: var(--better); } .sw-better-soft { background: var(--better-soft); }
  .sw-worse { background: var(--worse); } .sw-worse-soft { background: var(--worse-soft); }
  .sg-logo-lg { margin-bottom: var(--space-3); }
  .sg-logo-lg .logo__mark { width: 4rem; height: 4rem; }
  .sg-logo-lg .logo__word { font-size: 3rem; }
  .sg-favicon .logo__mark { width: 1rem; height: 1rem; }
  .sg-favicon--lg .logo__mark { width: 3rem; height: 3rem; }
}