/* Generated by scripts/build_public_css.py from: css/orbs.css, css/seo-pages.css. Do not edit; edit the sources and rebuild. */
/* ---- css/orbs.css ---- */
/* The app's glowing orbs (signed-out redesign: calmer, no purple, no dot grid; DESIGN.md 3) behind the signed-out marketing pages (Home/_orbs.html in block page_backdrop:
 * the layer is fixed and pointer-events: none). Theme-aware; the slow drift stops with reduced motion. */
.hm-orbs { position: absolute; inset: 0; overflow: hidden; }
.hm-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.hm-orb--a { width: 46vmax; height: 46vmax; top: -18vmax; inset-inline-end: -12vmax; background: radial-gradient(circle, rgba(0, 217, 255, .55), rgba(0, 217, 255, 0) 68%); animation: hm-drift-a 28s ease-in-out infinite alternate; }
.hm-orb--b { width: 38vmax; height: 38vmax; top: 30vh; inset-inline-start: -16vmax; background: radial-gradient(circle, rgba(33, 230, 193, .42), rgba(33, 230, 193, 0) 68%); animation: hm-drift-b 34s ease-in-out infinite alternate; }
.hm-orb--c { width: 30vmax; height: 30vmax; bottom: -12vmax; inset-inline-end: 8vw; background: radial-gradient(circle, rgba(0, 150, 220, .32), rgba(0, 150, 220, 0) 68%); animation: hm-drift-c 40s ease-in-out infinite alternate; }
.hm-orb--d { width: 22vmax; height: 22vmax; top: 8vh; inset-inline-start: 34vw; background: radial-gradient(circle, rgba(0, 140, 255, .3), rgba(0, 140, 255, 0) 70%); animation: hm-drift-b 46s ease-in-out infinite alternate-reverse; }
.hm-orbs__grid { display: none; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(160, 214, 255, .16) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 85%); }
:root[data-theme="light"] .hm-orb { opacity: .35; filter: blur(90px); }
:root[data-theme="light"] .hm-orb--a { background: radial-gradient(circle, rgba(0, 190, 240, .45), rgba(0, 190, 240, 0) 68%); }
:root[data-theme="light"] .hm-orb--b { background: radial-gradient(circle, rgba(20, 200, 170, .32), rgba(20, 200, 170, 0) 68%); }
:root[data-theme="light"] .hm-orb--c { background: radial-gradient(circle, rgba(0, 150, 220, .22), rgba(0, 150, 220, 0) 68%); }
:root[data-theme="light"] .hm-orbs__grid { background-image: radial-gradient(rgba(24, 60, 92, .14) 1px, transparent 1.4px); }
@keyframes hm-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 8vh, 0) scale(1.12); } }
@keyframes hm-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, -6vh, 0) scale(.9); } }
@keyframes hm-drift-c { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(-5vw, -9vh, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .hm-orb { animation: none; } }
/* ---- css/seo-pages.css ---- */
/* Public reference pages: drugs, interactions, diseases (detail pages) and their A–Z hubs and letter pages.
   Loaded for every visitor (signed out and signed in) through dist/public-seo.css, on top of pro.css (pr-* tokens).
   Owner 2026-10-24: MediHelp-like cards, grouped lists, severity chips and key-fact tiles; lists and data only
   (no search UI). Theme tokens only (dark default, light under [data-theme="light"]); RTL through logical
   properties; no inline styles (strict CSP). Signed-out pages show a teaser + a locked-section card (.seo-locked). */

/* ================================================================ page and column */
.seo-page {
  --mh-text: var(--pr-ink);
  --mh-muted: var(--pr-ink-3);
  --mh-muted-strong: var(--pr-ink-2);
  --mh-accent: var(--pr-accent);
  --mh-accent-ink: var(--pr-link);
  --mh-card-border: var(--pr-line);
  --seo-col: 60rem;
  --seo-gap: 16px;
  --seo-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--pr-raised) 94%, transparent), color-mix(in srgb, var(--pr-raised) 80%, transparent));
  --seo-tile-bg: color-mix(in srgb, var(--pr-ink) 4%, transparent);
  position: relative; z-index: 1;
  padding-block: 24px var(--pr-section);
}
@media (min-width: 768px) { .seo-page { --seo-gap: 20px; padding-block-start: 32px; } }
.seo-page, .seo-page * { min-width: 0; }
.seo-page :where(h1, h2, h3, p, li, dd, dt, a, span) { overflow-wrap: anywhere; }
@media (max-width: 40rem) { .seo-page.mh-container { padding-inline: 16px; } }

.seo-article, .seo-page > .seo-hero, .seo-page > .seo-crumbs, .seo-page > .seo-letters, .seo-page > .seo-index,
.seo-page > .seo-pager, .seo-page > .seo-cta, .seo-page > .seo-card {
  width: min(100%, var(--seo-col)); margin-inline: auto;
}
.seo-page:has(> .seo-index) { --seo-col: 72rem; }
.seo-article { display: grid; gap: var(--seo-gap); margin-block-start: 16px; }
.seo-page > .seo-hero { margin-block-start: 16px; }
.seo-page > .seo-cta, .seo-page > .seo-card { margin-block-start: 28px; }

/* Short Latin labels get dir="auto" from the page script; on RTL pages they keep the page's alignment. */
:root[dir="rtl"] .seo-page [dir="auto"] { text-align: right; }

/* Breadcrumbs */
.seo-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--pr-ink-3); font-size: var(--pr-t-caption); }
.seo-crumbs a { color: var(--pr-ink-2); text-decoration: none; }
.seo-crumbs a:hover { color: var(--pr-link); }
.seo-crumbs [aria-current="page"] { color: var(--pr-ink); font-weight: 600; }

/* ================================================================ surfaces */
.seo-page :is(.seo-hero, .seo-card, .seo-cta, .seo-paywall) {
  position: relative; border: 1px solid var(--pr-line); border-radius: var(--pr-r-lg);
  background: var(--seo-card-bg); box-shadow: var(--pr-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.seo-page .seo-card { padding: 20px 18px; }
@media (min-width: 768px) { .seo-page .seo-card { padding: 26px 28px; } }

/* Card headings: a short colour bar names the kind of section (cyan reference, mint "from the source",
   amber caution, red stop); colour only for meaning (DESIGN.md 2.3). */
.seo-page :is(.seo-card, .seo-cta, .seo-paywall) h2 {
  margin: 0 0 14px; color: var(--pr-ink);
  font-size: clamp(1.125rem, 1.06rem + .3vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
}
.seo-page .seo-card > h2 { display: flex; align-items: center; gap: 10px; }
.seo-page .seo-card > h2::before {
  content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 4px; background: var(--seo-bar, var(--pr-accent));
}
:root[dir="rtl"] .seo-page :is(.seo-card, .seo-cta, .seo-paywall) h2 { letter-spacing: 0; }
.seo-page .seo-card h3 { margin: 18px 0 8px; font-size: var(--pr-t-small); font-weight: 600; color: var(--pr-ink-2); }
.seo-page .seo-card h3:first-of-type { margin-block-start: 4px; }
.seo-page .seo-card:is([aria-labelledby="seo-used"], [aria-labelledby="seo-moa"], [aria-labelledby="seo-sources"], [aria-labelledby="seo-refs"], [aria-labelledby="seo-tx"]) { --seo-bar: var(--pr-mint); }
.seo-page .seo-card:is([aria-labelledby="seo-careful"], [aria-labelledby="seo-preg"], [aria-labelledby="seo-ask"], [aria-labelledby="seo-when"], [aria-labelledby="seo-pre"]) { --seo-bar: var(--pr-warn); }
.seo-page .seo-card:is([aria-labelledby="seo-ci"]) { --seo-bar: var(--pr-danger); }
.seo-page .seo-card--warn {
  --seo-bar: var(--pr-warn);
  border-color: color-mix(in srgb, var(--pr-warn) 45%, var(--pr-line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pr-warn) 9%, transparent), transparent 70%), var(--seo-card-bg);
}
.seo-page .seo-card:is([aria-labelledby="seo-ci"]) {
  border-color: color-mix(in srgb, var(--pr-danger) 30%, var(--pr-line));
}
@media (hover: hover) {
  .seo-page :is(.seo-card, .seo-paywall) { transition: border-color .3s var(--pr-ease); }
  .seo-page .seo-card:hover { border-color: var(--pr-line-2); }
}

/* ================================================================ hero */
.seo-page .seo-hero {
  display: grid; gap: 16px; padding: 24px 18px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--pr-accent) 16%, transparent), transparent 62%),
    radial-gradient(60% 90% at 0% 100%, color-mix(in srgb, var(--pr-mint) 9%, transparent), transparent 65%),
    var(--seo-card-bg);
}
:root[dir="rtl"] .seo-page .seo-hero {
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--pr-accent) 16%, transparent), transparent 62%),
    radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--pr-mint) 9%, transparent), transparent 65%),
    var(--seo-card-bg);
}
@media (min-width: 768px) { .seo-page .seo-hero { padding: 36px 40px; gap: 20px; } }
.seo-page .seo-hero > *, .seo-hero__main > * { margin: 0; }
.seo-hero__main { display: grid; gap: 14px; align-content: start; }
.seo-page .seo-hero .mh-eyebrow { font-size: var(--pr-t-small); color: var(--pr-link); }
.seo-page .seo-hero h1 {
  color: var(--pr-ink); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.08;
}
:root[dir="rtl"] .seo-page .seo-hero h1, :root:lang(ja) .seo-page .seo-hero h1, :root:lang(ko) .seo-page .seo-hero h1,
:root:lang(zh-hant) .seo-page .seo-hero h1 { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
[dir="rtl"] .seo-hero h1[dir="ltr"] { text-align: right; }
.seo-lead { font-size: var(--pr-t-lead); line-height: 1.6; color: var(--pr-ink-2); max-width: 44rem; }
.seo-lede { font-size: var(--pr-t-body); color: var(--pr-ink-2); line-height: 1.65; max-width: 44rem; }
.seo-hero__tool .mh-btn-primary { width: fit-content; }
.seo-hero__badge .seo-sev { font-size: .875rem; padding: 6px 12px; }
.seo-page .seo-disclaimer {
  padding: 12px 14px; border-radius: 12px; font-size: var(--pr-t-caption); line-height: 1.55; color: var(--pr-ink-2);
  background: var(--pr-accent-soft); border: 1px solid color-mix(in srgb, var(--pr-accent) 16%, transparent);
}
.seo-notice { color: var(--pr-ink-3); font-size: var(--pr-t-caption); }
.seo-trust { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--pr-t-caption); color: var(--pr-ink-3); }
.seo-trust a { color: var(--pr-link); }

/* Interaction pages: the hero edge carries the severity colour. */
.seo-page .seo-hero--interaction:has(.seo-sev--contraindicated, .seo-sev--major) { border-color: color-mix(in srgb, var(--pr-danger) 40%, var(--pr-line)); }
.seo-page .seo-hero--interaction:has(.seo-sev--moderate) { border-color: color-mix(in srgb, var(--pr-warn) 40%, var(--pr-line)); }
.seo-page .seo-hero--interaction:has(.seo-sev--minor) { border-color: color-mix(in srgb, var(--pr-mint) 40%, var(--pr-line)); }

/* The page card (1200x630, seo_pages/share_cards.py): beside the title from 960 px, under it on phones. */
.seo-card-img {
  display: block; width: min(100%, 420px); height: auto; aspect-ratio: 1200 / 630; margin-inline: auto;
  border-radius: 14px; border: 1px solid var(--pr-line); background: var(--pr-bg-2); box-shadow: var(--pr-shadow);
}
@media (min-width: 960px) {
  .seo-page .seo-hero--card { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 36px; align-items: center; }
  .seo-page .seo-hero--card > :not(.seo-hero__main, .seo-card-img) { grid-column: 1 / -1; }
  .seo-page .seo-hero--card .seo-card-img { width: 100%; }
}

/* Chips (drug class, used for, linked drugs) */
.seo-inline { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.seo-inline a { color: var(--pr-link); }
.seo-inline--chips { margin-block-start: 4px; }
.seo-page :is(.seo-inline--chips > li > a, .seo-inline--chips > li > span, .seo-chip-more, .seo-card .seo-inline:not(.seo-inline--chips, .seo-links) > li > a) {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  font-size: var(--pr-t-small); line-height: 1.3; text-decoration: none;
  border: 1px solid var(--pr-line); background: var(--seo-tile-bg); color: var(--pr-ink);
}
.seo-page :is(.seo-inline--chips > li > a, .seo-card .seo-inline:not(.seo-inline--chips, .seo-links) > li > a) {
  border-color: color-mix(in srgb, var(--pr-accent) 32%, var(--pr-line)); color: var(--pr-link);
}
.seo-page :is(.seo-inline--chips > li > a, .seo-card .seo-inline:not(.seo-links) > li > a):hover { background: var(--pr-accent-soft); border-color: var(--pr-accent); }
.seo-chip-more { color: var(--pr-ink-2); border-style: dashed; }
.seo-count { display: inline-block; margin-inline-end: 8px; font-size: 1.35rem; font-weight: 700; color: var(--pr-link); vertical-align: middle; }

/* ================================================================ key facts: tiles */
.seo-facts { display: grid; gap: 12px; margin: 0; }
.seo-facts dt { font-size: var(--pr-t-caption); font-weight: 500; color: var(--pr-ink-3); line-height: 1.4; }
.seo-facts dd { margin: 0; line-height: 1.6; color: var(--pr-ink); }
/* Label / value rows (pregnancy, at a glance) */
.seo-facts > div { display: grid; gap: 4px; padding-block-end: 12px; border-block-end: 1px solid var(--pr-line); }
.seo-facts > div:last-child { border-block-end: 0; padding-block-end: 0; }
@media (min-width: 40rem) { .seo-facts > div { grid-template-columns: minmax(9rem, 12rem) 1fr; gap: 16px; align-items: baseline; } }
.seo-facts dd strong {
  display: inline-flex; align-items: center; margin-inline-end: 6px; padding: 1px 9px; border-radius: 6px;
  font-size: var(--pr-t-caption); font-weight: 600; color: var(--pr-ink); background: var(--seo-tile-bg); border: 1px solid var(--pr-line-2);
}
/* Tiles: the Key facts cards */
.seo-page :is(.seo-glance, [aria-labelledby="seo-keyfacts"]) .seo-facts {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 10px;
}
.seo-page :is(.seo-glance, [aria-labelledby="seo-keyfacts"]) .seo-facts > div {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--pr-line); border-radius: 14px;
  background: var(--seo-tile-bg);
}
.seo-page :is(.seo-glance, [aria-labelledby="seo-keyfacts"]) .seo-facts > div:last-child { padding-block-end: 14px; border-block-end: 1px solid var(--pr-line); }
.seo-page :is(.seo-glance, [aria-labelledby="seo-keyfacts"]) .seo-facts dd {
  font-size: 1rem; font-weight: 600; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.seo-page :is(.seo-glance, [aria-labelledby="seo-keyfacts"]) .seo-facts dd .seo-inline { gap: 4px 10px; }
.seo-glance .seo-body p { margin: 0; font-size: var(--pr-t-lead); line-height: 1.65; }
.seo-glance .seo-inline--chips { margin-block-start: 14px; }

/* ================================================================ body text and lists */
.seo-body p { line-height: 1.75; margin: 0 0 10px; color: var(--pr-ink); }
.seo-body p:last-child { margin-block-end: 0; }
.seo-page .seo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; line-height: 1.6; }
.seo-page .seo-list > li { position: relative; padding-inline-start: 22px; }
.seo-page .seo-list > li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seo-bar, var(--pr-accent));
}
/* Short-item lists (side effects, symptoms, diagnosis) read as two columns from 640 px. */
@media (min-width: 640px) {
  .seo-page .seo-card:is([aria-labelledby="seo-se"], [aria-labelledby="seo-sym"], [aria-labelledby="seo-dx"]) .seo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px;
  }
}
.seo-page .seo-list + :is(p, .seo-body) { margin-block-start: 14px; }
.seo-meta { margin: 12px 0 0; color: var(--pr-ink-2); font-size: var(--pr-t-small); line-height: 1.55; }
.seo-meta a { color: var(--pr-link); }

/* Link lists (used for, interactions, related drugs and conditions): tappable rows, two to three per line. */
.seo-page .seo-links { display: grid; grid-template-columns: 1fr; gap: 8px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .seo-page .seo-links { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }
.seo-page .seo-links > li {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap;
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--pr-line); border-radius: 12px; background: var(--seo-tile-bg);
  line-height: 1.35;
}
.seo-page .seo-links > li > a { color: var(--pr-link); font-weight: 500; text-decoration: none; }
.seo-page .seo-links > li > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.seo-page .seo-links > li > span:not(.seo-sev) { color: var(--pr-ink); }
.seo-page .seo-links > li .seo-sev { position: relative; }
@media (hover: hover) {
  .seo-page .seo-links > li { transition: border-color .2s var(--pr-ease), background-color .2s var(--pr-ease); }
  .seo-page .seo-links > li:has(> a):hover { border-color: color-mix(in srgb, var(--pr-accent) 45%, var(--pr-line)); background: var(--pr-accent-soft); }
}
.seo-page .seo-links > li:focus-within { box-shadow: var(--pr-focus); }
.seo-page .seo-links > li > a:focus-visible { outline: none; }

/* ================================================================ severity chips */
.seo-sev {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; white-space: nowrap;
  font-size: .75rem; font-weight: 600; line-height: 1.3; border: 1px solid currentColor;
}
.seo-sev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.seo-sev--contraindicated, .seo-sev--major { color: #ff7b83; background: rgba(229, 72, 77, .12); }
.seo-sev--contraindicated { border-width: 2px; }
.seo-sev--moderate { color: #f6b23b; background: rgba(245, 165, 36, .12); }
.seo-sev--minor { color: #45d49a; background: rgba(60, 207, 145, .12); }
[data-theme="light"] .seo-sev--contraindicated, [data-theme="light"] .seo-sev--major { color: #b91c1c; background: rgba(185, 28, 28, .07); }
[data-theme="light"] .seo-sev--moderate { color: #a14c00; background: rgba(180, 83, 9, .08); }
[data-theme="light"] .seo-sev--minor { color: #15803d; background: rgba(21, 128, 61, .08); }

/* ================================================================ locked part (signed out / no web access) */
.seo-locked { display: grid; gap: var(--seo-gap); }
.seo-page .seo-paywall {
  display: grid; gap: 16px; padding: 22px 18px; overflow: hidden; border-color: var(--pr-line-2); border-radius: 24px;
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--pr-accent) 14%, transparent), transparent 65%), var(--pr-bg-2);
}
@media (min-width: 768px) { .seo-page .seo-paywall { padding: 30px 32px; } }
.seo-paywall__head { display: flex; align-items: center; gap: 14px; }
.seo-page .seo-paywall__head h2 { margin: 0; }
.seo-paywall__icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--pr-accent); color: var(--pr-on-accent);
}
.seo-paywall__badge { margin: 0 0 2px; font-size: var(--pr-t-caption); font-weight: 600; color: var(--pr-link); }
.seo-paywall__lead { margin: 0; line-height: 1.65; color: var(--pr-ink-2); }
.seo-locked-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 40rem) { .seo-locked-list { grid-template-columns: 1fr 1fr; gap: 10px; } }
.seo-locked-list li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--pr-line); background: var(--pr-glass);
}
.seo-locked-list__title { font-weight: 600; font-size: var(--pr-t-small); line-height: 1.35; color: var(--pr-ink); }
.seo-locked-list__lock { color: var(--pr-link); display: inline-flex; }
.seo-locked-list__ghost { grid-column: 1 / -1; display: grid; gap: 5px; }
.seo-locked-list__ghost i { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--pr-ink) 14%, transparent), color-mix(in srgb, var(--pr-ink) 5%, transparent)); }
.seo-locked-list__ghost i:last-child { width: 62%; }
@media (max-width: 39.99rem) { .seo-locked-list__ghost { display: none; } }
.seo-paywall__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.seo-paywall__actions > a { flex: 1 1 12rem; justify-content: center; text-align: center; }
.seo-paywall__note { margin: 0; font-size: var(--pr-t-caption); color: var(--pr-ink-3); }
.seo-page .seo-paywall__stores { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--pr-line); }
.seo-page .seo-paywall__stores p { margin: 0; font-size: var(--pr-t-small); color: var(--pr-ink-2); }

/* ================================================================ FAQ, checks, CTA, back link */
.seo-faq-item { border-block-end: 1px solid var(--pr-line); }
.seo-faq-item:last-child { border-block-end: 0; }
.seo-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 10px;
  cursor: pointer; font-weight: 600; color: var(--pr-ink); list-style: none;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--pr-line-2); color: var(--pr-link); font-weight: 500; transition: transform .2s var(--pr-ease);
}
.seo-faq-item[open] summary::after { transform: rotate(45deg); }
.seo-faq-item p { margin: 0 0 14px; color: var(--pr-ink-2); line-height: 1.7; }
.seo-checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.seo-checks li { position: relative; padding-inline-start: 24px; line-height: 1.5; }
.seo-checks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .4em; width: 11px; height: 11px; border-radius: 3px; border: 2px solid var(--pr-accent); }
.seo-page .seo-cta {
  padding: 28px 20px; border-radius: 28px; text-align: center;
  background: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--pr-accent) 18%, transparent), transparent 70%), radial-gradient(50% 80% at 0% 100%, color-mix(in srgb, var(--pr-mint) 12%, transparent), transparent 70%), var(--pr-raised);
}
@media (min-width: 768px) { .seo-page .seo-cta { padding: 40px; } }
.seo-page .seo-cta h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.seo-cta p { margin: 0 auto; max-width: 40rem; color: var(--pr-ink-2); line-height: 1.6; }
.seo-page .seo-cta .hm-stores { margin-top: 20px; justify-content: center; }
.seo-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.seo-cta__actions > a { flex: 1 1 10rem; justify-content: center; }
@media (min-width: 40rem) { .seo-cta__actions > a { flex: 0 0 auto; } }
.seo-back { margin: 4px 0 0; font-size: var(--pr-t-small); }
.seo-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pr-ink-2); }
.seo-back a:hover { color: var(--pr-link); }

/* ================================================================ A–Z hubs and letter pages */
.seo-page .seo-hero--index { align-items: end; }
@media (min-width: 768px) {
  .seo-page .seo-hero--index { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .seo-page .seo-hero--index > :not(.seo-hero__main, .seo-stats) { grid-column: 1 / -1; }
}
.seo-stats { display: flex; gap: 10px; margin: 0; }
.seo-stat {
  display: flex; flex-direction: column-reverse; gap: 2px; min-width: 9rem; padding: 14px 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--pr-accent) 30%, var(--pr-line)); background: var(--pr-accent-soft);
}
.seo-stat dt { font-size: var(--pr-t-caption); color: var(--pr-ink-2); }
.seo-stat dd { margin: 0; font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--pr-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Letters: one swipe row on phones, wrapped tiles from 768 px; each tile carries its entry count. */
.seo-page .seo-letters {
  display: flex; gap: 6px; margin-block: 20px; padding-block-end: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.seo-page .seo-letters::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .seo-page .seo-letters { flex-wrap: wrap; overflow: visible; gap: 8px; } }
.seo-page .seo-letters a {
  flex: none; scroll-snap-align: start; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 48px; min-height: 52px; padding: 6px 8px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--pr-line); background: var(--seo-card-bg); color: var(--pr-ink);
}
.seo-letters__ch { font-weight: 600; font-size: 1rem; line-height: 1.2; }
.seo-letters__n { font-size: .6875rem; line-height: 1.2; color: var(--pr-ink-3); font-variant-numeric: tabular-nums; }
.seo-page .seo-letters a.seo-letters__all { padding-inline: 14px; font-weight: 600; }
.seo-page .seo-letters a:hover { border-color: var(--pr-accent); color: var(--pr-link); }
.seo-page .seo-letters a[aria-current="page"] { background: var(--pr-accent); border-color: var(--pr-accent); color: var(--pr-on-accent); }
.seo-page .seo-letters a[aria-current="page"] .seo-letters__n { color: color-mix(in srgb, var(--pr-on-accent) 70%, transparent); }

.seo-page .seo-index { display: grid; gap: var(--seo-gap); padding: 0; border: 0; background: none; box-shadow: none; }
.seo-group {
  display: grid; gap: 14px; padding: 18px; border: 1px solid var(--pr-line); border-radius: var(--pr-r-lg);
  background: var(--seo-card-bg); box-shadow: var(--pr-shadow);
}
@media (min-width: 768px) { .seo-group { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 24px; } }
.seo-page .seo-group__letter {
  margin: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--pr-on-accent);
  background: linear-gradient(135deg, var(--pr-accent), var(--pr-mint));
}
@media (min-width: 768px) { .seo-page .seo-group__letter { width: 64px; height: 64px; font-size: 1.75rem; position: sticky; top: 88px; } }
.seo-entries { display: grid; grid-template-columns: 1fr; gap: 8px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 560px) { .seo-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .seo-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seo-index--interactions .seo-entries { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.seo-entries > li {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap;
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--pr-line); border-radius: 12px; background: var(--seo-tile-bg);
}
.seo-entry { color: var(--pr-ink); font-weight: 500; line-height: 1.35; text-decoration: none; }
.seo-entry::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.seo-entries .seo-sev { position: relative; }
.seo-entries > li:focus-within { box-shadow: var(--pr-focus); }
.seo-entry:focus-visible { outline: none; }
@media (hover: hover) {
  .seo-entries > li { transition: border-color .2s var(--pr-ease), background-color .2s var(--pr-ease), transform .2s var(--pr-ease); }
  .seo-entries > li:hover { border-color: color-mix(in srgb, var(--pr-accent) 45%, var(--pr-line)); background: var(--pr-accent-soft); }
  .seo-entries > li:hover .seo-entry { color: var(--pr-link); }
}
@media (prefers-reduced-motion: reduce) { .seo-entries > li, .seo-page .seo-links > li, .seo-faq-item summary::after { transition: none; } }

.seo-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-block: 24px; color: var(--pr-ink-2); font-size: var(--pr-t-small); }
.seo-pager a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: var(--pr-r-sm);
  border: 1px solid var(--pr-line-2); color: var(--pr-ink); font-weight: 600; text-decoration: none;
}
.seo-pager a:hover { border-color: var(--pr-accent); color: var(--pr-link); }